diff --git a/packages/react/.storybook/globalTypes/index.js b/packages/react/.storybook/globalTypes/index.js
index 1b75ee150f..f5bf5e31d0 100644
--- a/packages/react/.storybook/globalTypes/index.js
+++ b/packages/react/.storybook/globalTypes/index.js
@@ -12,6 +12,7 @@ export const globalTypes = {
         { value: 'theBodyShop', title: 'The Body Shop' },
         { value: 'consultoriaDeBeleza', title: 'Consultoria de Beleza' },
         { value: 'natura_v2', title: 'Natura V2' },
+        { value: 'natura_v3', title: 'Natura V3' },
         { value: 'casaEestilo', title: 'Casa & Estilo' },
         { value: 'avon_v2', title: 'Avon V2' },
       ],
diff --git a/packages/react/package.json b/packages/react/package.json
index 1c43e565fe..c7a5c728d4 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -2,7 +2,7 @@
   "name": "@naturacosmeticos/natds-react",
   "displayName": "NatDS-React",
   "description": "A collection of components from Natura Design System for React",
-  "version": "2.58.0",
+  "version": "2.58.1-alpha.DSY-4340.1.0",
   "private": false,
   "keywords": [
     "design-system",
@@ -58,7 +58,7 @@
   },
   "dependencies": {
     "@naturacosmeticos/natds-icons": "1.20.1",
-    "@naturacosmeticos/natds-themes": "0.68.8",
+    "@naturacosmeticos/natds-themes": "0.71.0",
     "react-jss": "10.9.0"
   },
   "devDependencies": {
diff --git a/packages/react/src/Templates/ColorView/ColorView.stories.tsx b/packages/react/src/Templates/ColorView/ColorView.stories.tsx
index be8708ac53..b93a8bab4c 100644
--- a/packages/react/src/Templates/ColorView/ColorView.stories.tsx
+++ b/packages/react/src/Templates/ColorView/ColorView.stories.tsx
@@ -20,12 +20,7 @@ export default {
   title: 'Templates/ColorView'
 }
 
-const keysToRemove = ['neutral50',
-  'neutral100', 'neutral200',
-  'neutral300', 'neutral400',
-  'neutral500', 'neutral600',
-  'neutral700', 'neutral800',
-  'neutral900'
+const keysToRemove = [
 ]
 function removeKeys(obj: Color) {
   for (const key of keysToRemove) {
diff --git a/packages/react/src/ThemeProvider/__snapshots__/buildTheme.test.ts.snap b/packages/react/src/ThemeProvider/__snapshots__/buildTheme.test.ts.snap
index c74c5130c6..e8dd4b43df 100644
--- a/packages/react/src/ThemeProvider/__snapshots__/buildTheme.test.ts.snap
+++ b/packages/react/src/ThemeProvider/__snapshots__/buildTheme.test.ts.snap
@@ -132,7 +132,7 @@ Object {
     "color": Object {
       "alert": Object {
         "background": "#e74627",
-        "label": "#ffffff",
+        "label": "#111111",
       },
       "primary": Object {
         "background": "#f4ab34",
@@ -144,7 +144,7 @@ Object {
       },
       "success": Object {
         "background": "#569a32",
-        "label": "#ffffff",
+        "label": "#111111",
       },
     },
     "dot": Object {
@@ -182,6 +182,7 @@ Object {
     "lineHeight": 1.5,
   },
   "borderRadius": Object {
+    "circle": 999,
     "large": 8,
     "medium": 4,
     "none": 0,
@@ -192,9 +193,9 @@ Object {
     "contained": Object {
       "color": Object {
         "disable": Object {
-          "background": "#bbbbbb",
+          "background": "#8c8c8c",
           "border": "#FFFFFF00",
-          "label": "#333333",
+          "label": "#363636",
         },
         "enable": Object {
           "background": "#f4ab34",
@@ -230,23 +231,23 @@ Object {
       "color": Object {
         "disable": Object {
           "background": "#FFFFFF00",
-          "border": "#bbbbbb",
-          "label": "#777777",
+          "border": "#8c8c8c",
+          "label": "#737373",
         },
         "enable": Object {
           "background": "#FFFFFF00",
           "border": "#f4ab34",
-          "label": "#333333",
+          "label": "#363636",
         },
         "focus": Object {
-          "background": "#e9ecef",
+          "background": "#c9c9c9",
           "border": "#f4ab34",
-          "label": "#333333",
+          "label": "#363636",
         },
         "hover": Object {
-          "background": "#f1f3f5",
+          "background": "#e1e1e1",
           "border": "#f4ab34",
-          "label": "#333333",
+          "label": "#363636",
         },
       },
     },
@@ -255,22 +256,22 @@ Object {
         "disable": Object {
           "background": "#FFFFFF00",
           "border": "#FFFFFF00",
-          "label": "#777777",
+          "label": "#737373",
         },
         "enable": Object {
           "background": "#FFFFFF00",
           "border": "#FFFFFF00",
-          "label": "#333333",
+          "label": "#363636",
         },
         "focus": Object {
-          "background": "#e9ecef",
+          "background": "#c9c9c9",
           "border": "#FFFFFF00",
-          "label": "#333333",
+          "label": "#363636",
         },
         "hover": Object {
-          "background": "#f1f3f5",
+          "background": "#e1e1e1",
           "border": "#FFFFFF00",
-          "label": "#333333",
+          "label": "#363636",
         },
       },
     },
@@ -313,42 +314,62 @@ Object {
     "alertLight": "#ff826a",
     "alertLightest": "#ffd0c7",
     "background": "#fafafa",
-    "highEmphasis": "#333333",
-    "highlight": "#000000",
+    "contentDisabled": "#a4a4a4",
+    "contentHighEmphasis": "#363636",
+    "contentHighEmphasisFixedLight": "#e1e1e1",
+    "contentHighlight": "#111111",
+    "contentHighlightFixedLight": "#ffffff",
+    "contentLowEmphasis": "#8c8c8c",
+    "contentLowEmphasisFixedLight": "#a4a4a4",
+    "contentMediumEmphasis": "#737373",
+    "contentMediumEmphasisFixedLight": "#bdbdbd",
+    "highEmphasis": "#363636",
+    "highlight": "#111111",
+    "info": "#227bbd",
+    "infoDark": "#1a588a",
+    "infoDarkest": "#194b73",
+    "infoLight": "#54a6dc",
+    "infoLightest": "#c4dff3",
     "link": "#227bbd",
     "linkDark": "#1a588a",
     "linkDarkest": "#194b73",
     "linkLight": "#54a6dc",
     "linkLightest": "#c4dff3",
-    "lowEmphasis": "#bbbbbb",
+    "lowEmphasis": "#8c8c8c",
     "lowLight": "#ffffff",
-    "mediumEmphasis": "#777777",
-    "neutral100": "#f1f3f5",
-    "neutral200": "#e9ecef",
-    "neutral300": "#dee2e6",
-    "neutral400": "#ced4da",
-    "neutral50": "#f8f9fa",
-    "neutral500": "#adb5bd",
-    "neutral600": "#868e96",
-    "neutral700": "#495057",
-    "neutral800": "#343a40",
-    "neutral900": "#212529",
+    "mediumEmphasis": "#737373",
+    "neutral0": "#ffffff",
+    "neutral100": "#e1e1e1",
+    "neutral200": "#c9c9c9",
+    "neutral300": "#bdbdbd",
+    "neutral400": "#a4a4a4",
+    "neutral50": "#fafafa",
+    "neutral500": "#8c8c8c",
+    "neutral600": "#737373",
+    "neutral700": "#4e4e4e",
+    "neutral800": "#363636",
+    "neutral900": "#111111",
     "neutralDark": "#777777",
     "neutralDarkest": "#333333",
     "neutralLight": "#fafafa",
     "neutralLightest": "#ffffff",
     "neutralMedium": "#bbbbbb",
-    "onAlert": "#ffffff",
+    "onAlert": "#111111",
     "onAlertDark": "#ffffff",
     "onAlertDarkest": "#ffffff",
-    "onAlertLight": "#333333",
-    "onAlertLightest": "#333333",
-    "onBackground": "#333333",
+    "onAlertLight": "#111111",
+    "onAlertLightest": "#111111",
+    "onBackground": "#111111",
+    "onInfo": "#ffffff",
+    "onInfoDark": "#ffffff",
+    "onInfoDarkest": "#ffffff",
+    "onInfoLight": "#111111",
+    "onInfoLightest": "#111111",
     "onLink": "#ffffff",
     "onLinkDark": "#ffffff",
     "onLinkDarkest": "#ffffff",
-    "onLinkLight": "#ffffff",
-    "onLinkLightest": "#333333",
+    "onLinkLight": "#111111",
+    "onLinkLightest": "#111111",
     "onPrimary": "#333333",
     "onPrimaryDark": "#ffffff",
     "onPrimaryDarkest": "#ffffff",
@@ -359,23 +380,49 @@ Object {
     "onSecondaryDarkest": "#ffffff",
     "onSecondaryLight": "#000000",
     "onSecondaryLightest": "#000000",
-    "onSuccess": "#ffffff",
+    "onSuccess": "#111111",
     "onSuccessDark": "#ffffff",
     "onSuccessDarkest": "#ffffff",
-    "onSuccessLight": "#333333",
-    "onSuccessLightest": "#333333",
-    "onSurface": "#333333",
+    "onSuccessLight": "#111111",
+    "onSuccessLightest": "#111111",
+    "onSurface": "#363636",
+    "onSurfaceDark": "#ffffff",
+    "onSurfaceDisabled": "#363636",
+    "onSurfaceFixedDark": "#ffffff",
+    "onSurfaceFixedLight": "#363636",
     "onSurfaceInverse": "#ffffff",
-    "onWarning": "#333333",
-    "onWarningDark": "#333333",
+    "onWarning": "#111111",
+    "onWarningDark": "#111111",
     "onWarningDarkest": "#ffffff",
-    "onWarningLight": "#333333",
-    "onWarningLightest": "#333333",
+    "onWarningLight": "#111111",
+    "onWarningLightest": "#111111",
     "primary": "#f4ab34",
     "primaryDark": "#cd902c",
     "primaryDarkest": "#A67423",
     "primaryLight": "#f6b854",
     "primaryLightest": "#F8C675",
+    "primitiveBlack": "#000000",
+    "primitiveDarkGray100": "#7f7f7f",
+    "primitiveDarkGray200": "#737373",
+    "primitiveDarkGray300": "#676767",
+    "primitiveDarkGray400": "#4e4e4e",
+    "primitiveDarkGray50": "#8c8c8c",
+    "primitiveDarkGray500": "#424242",
+    "primitiveDarkGray600": "#363636",
+    "primitiveDarkGray700": "#2a2a2a",
+    "primitiveDarkGray800": "#1d1d1d",
+    "primitiveDarkGray900": "#111111",
+    "primitiveLightGray100": "#eeeeee",
+    "primitiveLightGray200": "#e1e1e1",
+    "primitiveLightGray300": "#d5d5d5",
+    "primitiveLightGray400": "#c9c9c9",
+    "primitiveLightGray50": "#fafafa",
+    "primitiveLightGray500": "#c3c3c3",
+    "primitiveLightGray600": "#bdbdbd",
+    "primitiveLightGray700": "#b0b0b0",
+    "primitiveLightGray800": "#a4a4a4",
+    "primitiveLightGray900": "#989898",
+    "primitiveWhite": "#ffffff",
     "secondary": "#ff6b0b",
     "secondaryDark": "#d65a09",
     "secondaryDarkest": "#ad4907",
@@ -387,12 +434,16 @@ Object {
     "successLight": "#a0d87e",
     "successLightest": "#e1f3d4",
     "surface": "#ffffff",
-    "surfaceInverse": "#333333",
+    "surfaceDark": "#4e4e4e",
+    "surfaceDisabled": "#a4a4a4",
+    "surfaceFixedDark": "#4e4e4e",
+    "surfaceFixedLight": "#ffffff",
+    "surfaceInverse": "#4e4e4e",
     "warning": "#fcc433",
-    "warningDark": "#f69e0a",
-    "warningDarkest": "#da7705",
-    "warningLight": "#fde68a",
-    "warningLightest": "#fef3c7",
+    "warningDark": "#dea003",
+    "warningDarkest": "#946b02",
+    "warningLight": "#fdd265",
+    "warningLightest": "#fde198",
   },
   "counter": Object {
     "borderRadius": 4,
@@ -440,7 +491,7 @@ Object {
     "borderRadius": 4,
     "color": Object {
       "background": "#ffffff",
-      "title": "#000000",
+      "title": "#111111",
     },
     "title": Object {
       "fallback": Object {
@@ -458,7 +509,7 @@ Object {
   },
   "divider": Object {
     "color": Object {
-      "background": "#bbbbbb",
+      "background": "#8c8c8c",
     },
   },
   "elevation": Object {
@@ -530,16 +581,16 @@ Object {
     "float": Object {
       "color": Object {
         "disable": Object {
-          "background": "#bbbbbb",
+          "background": "#8c8c8c",
         },
         "enable": Object {
           "background": "#ffffff",
         },
         "focus": Object {
-          "background": "#e9ecef",
+          "background": "#c9c9c9",
         },
         "hover": Object {
-          "background": "#f1f3f5",
+          "background": "#e1e1e1",
         },
       },
     },
@@ -549,16 +600,16 @@ Object {
     "overlay": Object {
       "color": Object {
         "disable": Object {
-          "background": "#000000",
+          "background": "#111111",
         },
         "enable": Object {
-          "background": "#000000",
+          "background": "#111111",
         },
         "focus": Object {
-          "background": "#000000",
+          "background": "#111111",
         },
         "hover": Object {
-          "background": "#000000",
+          "background": "#111111",
         },
       },
     },
@@ -577,10 +628,10 @@ Object {
           "background": "#FFFFFF00",
         },
         "focus": Object {
-          "background": "#e9ecef",
+          "background": "#c9c9c9",
         },
         "hover": Object {
-          "background": "#f1f3f5",
+          "background": "#e1e1e1",
         },
       },
     },
@@ -596,7 +647,7 @@ Object {
       "label": Object {
         "enable": Object {
           "default": "#227bbd",
-          "light": "#bbbbbb",
+          "light": "#8c8c8c",
         },
       },
     },
@@ -714,16 +765,16 @@ Object {
     "borderRadius": 12,
     "color": Object {
       "disable": Object {
-        "border": "#bbbbbb",
-        "content": "#bbbbbb",
+        "border": "#8c8c8c",
+        "content": "#8c8c8c",
       },
       "select": Object {
         "border": "#f4ab34",
         "content": "#f4ab34",
       },
       "unselect": Object {
-        "border": "#000000",
-        "content": "#000000",
+        "border": "#111111",
+        "content": "#111111",
       },
     },
     "label": Object {
@@ -778,50 +829,50 @@ Object {
       "color": Object {
         "disable": Object {
           "neutral": Object {
-            "background": "#bbbbbb",
+            "background": "#8c8c8c",
             "border": "#FFFFFF00",
-            "label": "#777777",
+            "label": "#737373",
           },
           "primary": Object {
-            "background": "#bbbbbb",
+            "background": "#8c8c8c",
             "border": "#FFFFFF00",
-            "label": "#777777",
+            "label": "#737373",
           },
         },
         "enable": Object {
           "neutral": Object {
             "background": "#ffffff",
             "border": "#FFFFFF00",
-            "label": "#333333",
+            "label": "#363636",
           },
           "primary": Object {
             "background": "#f4ab34",
             "border": "#FFFFFF00",
-            "label": "#333333",
+            "label": "#363636",
           },
         },
         "focus": Object {
           "neutral": Object {
-            "background": "#e9ecef",
+            "background": "#c9c9c9",
             "border": "#FFFFFF00",
-            "label": "#333333",
+            "label": "#363636",
           },
           "primary": Object {
             "background": "#A67423",
             "border": "#FFFFFF00",
-            "label": "#333333",
+            "label": "#363636",
           },
         },
         "hover": Object {
           "neutral": Object {
-            "background": "#f1f3f5",
+            "background": "#e1e1e1",
             "border": "#FFFFFF00",
-            "label": "#333333",
+            "label": "#363636",
           },
           "primary": Object {
             "background": "#cd902c",
             "border": "#FFFFFF00",
-            "label": "#333333",
+            "label": "#363636",
           },
         },
       },
@@ -844,49 +895,49 @@ Object {
         "disable": Object {
           "neutral": Object {
             "background": "#ffffff",
-            "border": "#bbbbbb",
-            "label": "#bbbbbb",
+            "border": "#8c8c8c",
+            "label": "#8c8c8c",
           },
           "primary": Object {
             "background": "#ffffff",
-            "border": "#bbbbbb",
-            "label": "#bbbbbb",
+            "border": "#8c8c8c",
+            "label": "#8c8c8c",
           },
         },
         "enable": Object {
           "neutral": Object {
             "background": "#FFFFFF00",
-            "border": "#bbbbbb",
-            "label": "#333333",
+            "border": "#8c8c8c",
+            "label": "#363636",
           },
           "primary": Object {
             "background": "#FFFFFF00",
             "border": "#f4ab34",
-            "label": "#333333",
+            "label": "#363636",
           },
         },
         "focus": Object {
           "neutral": Object {
-            "background": "#e9ecef",
-            "border": "#777777",
-            "label": "#333333",
+            "background": "#c9c9c9",
+            "border": "#737373",
+            "label": "#363636",
           },
           "primary": Object {
-            "background": "#e9ecef",
+            "background": "#c9c9c9",
             "border": "#cd902c",
-            "label": "#333333",
+            "label": "#363636",
           },
         },
         "hover": Object {
           "neutral": Object {
-            "background": "#f1f3f5",
-            "border": "#777777",
-            "label": "#333333",
+            "background": "#e1e1e1",
+            "border": "#737373",
+            "label": "#363636",
           },
           "primary": Object {
-            "background": "#f1f3f5",
+            "background": "#e1e1e1",
             "border": "#cd902c",
-            "label": "#333333",
+            "label": "#363636",
           },
         },
       },
@@ -976,12 +1027,12 @@ Object {
         "warning": "#fcc433",
       },
       "label": Object {
-        "alert": "#ffffff",
+        "alert": "#111111",
         "link": "#ffffff",
         "primary": "#333333",
         "secondary": "#000000",
-        "success": "#ffffff",
-        "warning": "#333333",
+        "success": "#111111",
+        "warning": "#111111",
       },
     },
     "label": Object {
diff --git a/packages/react/src/ThemeProvider/mock-theme.json b/packages/react/src/ThemeProvider/mock-theme.json
index b3dbd9c9d2..0a0cdbad93 100644
--- a/packages/react/src/ThemeProvider/mock-theme.json
+++ b/packages/react/src/ThemeProvider/mock-theme.json
@@ -3,7 +3,8 @@
       "none": 0,
       "small": 2,
       "medium": 4,
-      "large": 8
+      "large": 8,
+      "circle": 999
   },
   "alert": {
       "title": {
diff --git a/packages/react/src/brandTypes/brandTypes.ts b/packages/react/src/brandTypes/brandTypes.ts
index ba59df74a9..0d9e8da9ca 100644
--- a/packages/react/src/brandTypes/brandTypes.ts
+++ b/packages/react/src/brandTypes/brandTypes.ts
@@ -5,4 +5,5 @@ export type BrandTypes = 'aesop'
 | 'theBodyShop'
 | 'consultoriaDeBeleza'
 | 'natura_v2'
+| 'natura_v3'
 | 'casaEestilo'
diff --git a/packages/react/src/components/AccordionItem/__snapshots__/AccordionItem.test.tsx.snap b/packages/react/src/components/AccordionItem/__snapshots__/AccordionItem.test.tsx.snap
index 5839844a8e..b042224c16 100644
--- a/packages/react/src/components/AccordionItem/__snapshots__/AccordionItem.test.tsx.snap
+++ b/packages/react/src/components/AccordionItem/__snapshots__/AccordionItem.test.tsx.snap
@@ -17,12 +17,12 @@ Array [
   font-weight: 400;
 }
 .wrapper-d0-0-2-5 {
-  color: #333333;
+  color: #363636;
   pointer-events: auto;
 }
 .header-d1-0-2-6 {
   flex: 1;
-  color: #777777;
+  color: #737373;
   display: flex;
   padding: 16px 24px;
   position: relative;
@@ -48,7 +48,7 @@ Array [
   content: \\" \\";
   opacity: 0.08;
   position: absolute;
-  background-color: #000000;
+  background-color: #111111;
 }
 .header-d1-0-2-6:hover {
   cursor: pointer;
@@ -61,10 +61,10 @@ Array [
   content: \\" \\";
   opacity: 0.04;
   position: absolute;
-  background-color: #000000;
+  background-color: #111111;
 }
 .legend-d2-0-2-7 {
-  color: #777777;
+  color: #737373;
 }
 .icon-0-2-8 {
   font-family: natds-icons;
diff --git a/packages/react/src/components/Alert/__snapshots__/Alert.test.tsx.snap b/packages/react/src/components/Alert/__snapshots__/Alert.test.tsx.snap
index 56c75ff033..5e9b790493 100644
--- a/packages/react/src/components/Alert/__snapshots__/Alert.test.tsx.snap
+++ b/packages/react/src/components/Alert/__snapshots__/Alert.test.tsx.snap
@@ -8,7 +8,7 @@ Array [
   pointer-events: none;
 }
 .icon-d0-0-2-6 {
-  color: #333333;
+  color: #363636;
   font-size: 24px;
 }
 .wrapper-0-2-1 {}
@@ -27,7 +27,7 @@ Array [
   border-radius: 4px;
 }
 .content-d1-0-2-4 {
-  color: #333333;
+  color: #363636;
 }",
   <div>
     <div
diff --git a/packages/react/src/components/AppBarTop/__snapshots__/AppBarTop.spec.tsx.snap b/packages/react/src/components/AppBarTop/__snapshots__/AppBarTop.spec.tsx.snap
index f11c97025e..a99cbcae12 100644
--- a/packages/react/src/components/AppBarTop/__snapshots__/AppBarTop.spec.tsx.snap
+++ b/packages/react/src/components/AppBarTop/__snapshots__/AppBarTop.spec.tsx.snap
@@ -29,7 +29,7 @@ Array [
 .appBar-d1-0-2-4 {
   background-color: #ffffff;
   box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14);
-  color: #333333;
+  color: #363636;
 }",
   <div>
     <header
@@ -72,7 +72,7 @@ Array [
   position: fixed;
 }
 .appBar-d1-0-2-4 {
-  background-color: #333333;
+  background-color: #363636;
   box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14);
   color: #ffffff;
 }",
@@ -119,7 +119,7 @@ Array [
 .appBar-d1-0-2-4 {
   background-color: transparent;
   box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14);
-  color: #000000;
+  color: #111111;
 }",
   <div>
     <header
@@ -209,7 +209,7 @@ Array [
 .appBar-d1-0-2-4 {
   background-color: #ffffff;
   box-shadow: none;
-  color: #333333;
+  color: #363636;
 }",
   <div>
     <header
diff --git a/packages/react/src/components/Autocomplete/__snapshots__/Autocomplete.test.tsx.snap b/packages/react/src/components/Autocomplete/__snapshots__/Autocomplete.test.tsx.snap
index 8519efedba..7dfca815d0 100644
--- a/packages/react/src/components/Autocomplete/__snapshots__/Autocomplete.test.tsx.snap
+++ b/packages/react/src/components/Autocomplete/__snapshots__/Autocomplete.test.tsx.snap
@@ -38,11 +38,11 @@ Array [
 }
 .input-0-2-4::placeholder {}
 .input-0-2-4:focus:enabled {
-  color: #777777;
+  color: #737373;
 }
 .input-0-2-4:hover:enabled {
-  color: #333333;
-  border-color: #333333;
+  color: #363636;
+  border-color: #363636;
 }
 .icon-0-2-5 {
   top: 0;
@@ -85,31 +85,31 @@ Array [
   padding-right: 16px;
 }
 .optionsItem-0-2-8:hover {
-  background-color: #e9ecef;
+  background-color: #c9c9c9;
 }
 .labelText-d0-0-2-9 {
-  color: #bbbbbb;
+  color: #8c8c8c;
 }
 .input-d1-0-2-10 {
   height: 56px;
   background-color: #ffffff;
-  border-color: #bbbbbb;
-  color: #bbbbbb;
+  border-color: #8c8c8c;
+  color: #8c8c8c;
 }
 .input-d1-0-2-10::placeholder {
-  color: #bbbbbb;
+  color: #8c8c8c;
 }
 .input-d1-0-2-10:focus:enabled {
   border-color: #f4ab34;
 }
 .icon-d2-0-2-11 {
-  color: #bbbbbb;
+  color: #8c8c8c;
 }
 .surfaceWrapper-d3-0-2-12 {
   bottom: initial;
 }
 .optionsItem-d4-0-2-13 {
-  color: #bbbbbb;
+  color: #8c8c8c;
 }
 .icon-0-2-14 {
   font-family: natds-icons;
@@ -117,7 +117,7 @@ Array [
   pointer-events: none;
 }
 .icon-d0-0-2-15 {
-  color: #000000;
+  color: #111111;
   font-size: 32px;
 }",
   <div>
@@ -188,11 +188,11 @@ Array [
 }
 .input-0-2-4::placeholder {}
 .input-0-2-4:focus:enabled {
-  color: #777777;
+  color: #737373;
 }
 .input-0-2-4:hover:enabled {
-  color: #333333;
-  border-color: #333333;
+  color: #363636;
+  border-color: #363636;
 }
 .icon-0-2-5 {
   top: 0;
@@ -235,7 +235,7 @@ Array [
   padding-right: 16px;
 }
 .optionsItem-0-2-8:hover {
-  background-color: #e9ecef;
+  background-color: #c9c9c9;
 }
 .labelText-d0-0-2-9 {
   color: #e74627;
@@ -244,10 +244,10 @@ Array [
   height: 56px;
   background-color: #ffffff;
   border-color: #e74627;
-  color: #333333;
+  color: #363636;
 }
 .input-d1-0-2-10::placeholder {
-  color: #333333;
+  color: #363636;
 }
 .input-d1-0-2-10:focus:enabled {
   border-color: #f4ab34;
@@ -259,7 +259,7 @@ Array [
   bottom: initial;
 }
 .optionsItem-d4-0-2-13 {
-  color: #777777;
+  color: #737373;
 }
 .icon-0-2-14 {
   font-family: natds-icons;
@@ -267,7 +267,7 @@ Array [
   pointer-events: none;
 }
 .icon-d0-0-2-15 {
-  color: #000000;
+  color: #111111;
   font-size: 32px;
 }",
   <div>
@@ -337,11 +337,11 @@ Array [
 }
 .input-0-2-4::placeholder {}
 .input-0-2-4:focus:enabled {
-  color: #777777;
+  color: #737373;
 }
 .input-0-2-4:hover:enabled {
-  color: #333333;
-  border-color: #333333;
+  color: #363636;
+  border-color: #363636;
 }
 .icon-0-2-5 {
   top: 0;
@@ -384,7 +384,7 @@ Array [
   padding-right: 16px;
 }
 .optionsItem-0-2-8:hover {
-  background-color: #e9ecef;
+  background-color: #c9c9c9;
 }
 .labelText-d0-0-2-9 {
   color: #569a32;
@@ -393,10 +393,10 @@ Array [
   height: 56px;
   background-color: #ffffff;
   border-color: #569a32;
-  color: #333333;
+  color: #363636;
 }
 .input-d1-0-2-10::placeholder {
-  color: #333333;
+  color: #363636;
 }
 .input-d1-0-2-10:focus:enabled {
   border-color: #f4ab34;
@@ -408,7 +408,7 @@ Array [
   bottom: initial;
 }
 .optionsItem-d4-0-2-13 {
-  color: #777777;
+  color: #737373;
 }
 .icon-0-2-14 {
   font-family: natds-icons;
@@ -416,7 +416,7 @@ Array [
   pointer-events: none;
 }
 .icon-d0-0-2-15 {
-  color: #000000;
+  color: #111111;
   font-size: 32px;
 }",
   <div>
@@ -486,11 +486,11 @@ Array [
 }
 .input-0-2-4::placeholder {}
 .input-0-2-4:focus:enabled {
-  color: #777777;
+  color: #737373;
 }
 .input-0-2-4:hover:enabled {
-  color: #333333;
-  border-color: #333333;
+  color: #363636;
+  border-color: #363636;
 }
 .icon-0-2-5 {
   top: 0;
@@ -533,19 +533,19 @@ Array [
   padding-right: 16px;
 }
 .optionsItem-0-2-8:hover {
-  background-color: #e9ecef;
+  background-color: #c9c9c9;
 }
 .labelText-d0-0-2-9 {
-  color: #333333;
+  color: #363636;
 }
 .input-d1-0-2-10 {
   height: 56px;
   background-color: #ffffff;
-  border-color: #333333;
-  color: #333333;
+  border-color: #363636;
+  color: #363636;
 }
 .input-d1-0-2-10::placeholder {
-  color: #333333;
+  color: #363636;
 }
 .input-d1-0-2-10:focus:enabled {
   border-color: #f4ab34;
@@ -557,7 +557,7 @@ Array [
   bottom: initial;
 }
 .optionsItem-d4-0-2-13 {
-  color: #777777;
+  color: #737373;
 }
 .icon-0-2-14 {
   font-family: natds-icons;
@@ -565,7 +565,7 @@ Array [
   pointer-events: none;
 }
 .icon-d0-0-2-15 {
-  color: #000000;
+  color: #111111;
   font-size: 32px;
 }",
   <div>
diff --git a/packages/react/src/components/Badge/__snapshots__/Badge.test.tsx.snap b/packages/react/src/components/Badge/__snapshots__/Badge.test.tsx.snap
index 10cc3bc546..5ef509ee6d 100644
--- a/packages/react/src/components/Badge/__snapshots__/Badge.test.tsx.snap
+++ b/packages/react/src/components/Badge/__snapshots__/Badge.test.tsx.snap
@@ -41,7 +41,7 @@ Array [
     border-radius: 4px;
   }
   .label-d1-0-2-5 {
-    color: #ffffff;
+    color: #111111;
   }",
   <div>
     <div
@@ -93,7 +93,7 @@ Array [
     content: \\"\\";
   }
   .label-d1-0-2-5 {
-    color: #ffffff;
+    color: #111111;
   }",
   <div>
     <div
@@ -145,7 +145,7 @@ Array [
     border-radius: 8px;
   }
   .label-d1-0-2-5 {
-    color: #ffffff;
+    color: #111111;
   }",
   <div>
     <div
@@ -206,7 +206,7 @@ Array [
     border-radius: 8px;
   }
   .label-d1-0-2-5 {
-    color: #ffffff;
+    color: #111111;
   }",
   <div>
     <div
diff --git a/packages/react/src/components/Button/Button.stories.tsx b/packages/react/src/components/Button/Button.stories.tsx
index b3ce9d7f12..7c6f1282b9 100644
--- a/packages/react/src/components/Button/Button.stories.tsx
+++ b/packages/react/src/components/Button/Button.stories.tsx
@@ -73,6 +73,11 @@ export const Brands: Story<ButtonProps> = (args) => (
       <Button key={11} brand="natura_v2" {...args} variant="outlined" />
       <Button key={12} brand="natura_v2" {...args} variant="text" />
     </StoryContainer>
+    <StoryContainer>
+      <Button key={20} brand="natura_v3" {...args} variant="contained" />
+      <Button key={30} brand="natura_v3" {...args} variant="outlined" />
+      <Button key={40} brand="natura_v3" {...args} variant="text" />
+    </StoryContainer>
     <StoryContainer>
       <Button key={13} brand="casaEestilo" {...args} variant="contained" />
       <Button key={14} brand="casaEestilo" {...args} variant="outlined" />
diff --git a/packages/react/src/components/Button/Button.styles.ts b/packages/react/src/components/Button/Button.styles.ts
index b7fc37d942..ec6ca66a9e 100644
--- a/packages/react/src/components/Button/Button.styles.ts
+++ b/packages/react/src/components/Button/Button.styles.ts
@@ -348,6 +348,18 @@ const getletterSpacing = (theme: Theme) => ({ textTransform }: ButtonStyleProps)
   }
   return theme.button.label.letterSpacing
 }
+
+const getPropsThemeButton = (theme: Theme) => ({ brand }: Pick<ButtonStyleProps, 'brand' >) => {
+  if (brand) {
+    const themeSelectdRipple = buildTheme(brand, 'light')
+    return {
+      buttonborderRadius: themeSelectdRipple.button.borderRadius
+    }
+  }
+  return {
+    buttonborderRadius: theme.button.borderRadius
+  }
+}
 const styles = createUseStyles((theme: Theme) => ({
   button: {
     backgroundColor: ({
@@ -356,7 +368,7 @@ const styles = createUseStyles((theme: Theme) => ({
     border: ({
       variant, brand, color, mode
     }: ButtonStyleProps) => variant && `1px solid ${(brand ? getColorBrand(theme)(brand, { variant, color, mode })?.border : getColorVariant(theme, { variant, color }).border)}`,
-    borderRadius: theme.button.borderRadius,
+    borderRadius: ({ brand }: ButtonStyleProps) => getPropsThemeButton(theme)({ brand }).buttonborderRadius,
     boxShadow: ({ variant }: ButtonStyleProps) => variant && (variant === 'contained' ? theme.elevation.tiny : 'none'),
     color: ({
       variant, brand, color, mode
diff --git a/packages/react/src/components/Button/Button.tsx b/packages/react/src/components/Button/Button.tsx
index 9218e6a88b..9c0e57f354 100644
--- a/packages/react/src/components/Button/Button.tsx
+++ b/packages/react/src/components/Button/Button.tsx
@@ -41,7 +41,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(({
   const iconColor = theme.button[variant].color.enable.label as IconColor
 
   return (
-    <Ripple disabled={disabled} fullWidth={fullWidth}>
+    <Ripple brand={brand} disabled={disabled} fullWidth={fullWidth}>
       <button
         className={`${button} ${className} Button-gaya`}
         data-testid={testID}
diff --git a/packages/react/src/components/Button/__snapshots__/Button.test.tsx.snap b/packages/react/src/components/Button/__snapshots__/Button.test.tsx.snap
index 151e397a56..a28f9edf38 100644
--- a/packages/react/src/components/Button/__snapshots__/Button.test.tsx.snap
+++ b/packages/react/src/components/Button/__snapshots__/Button.test.tsx.snap
@@ -7,7 +7,6 @@ Array [
   outline: 0;
   overflow: hidden;
   position: relative;
-  border-radius: 4px;
 }
 .button-0-2-1:disabled {
   cursor: default;
@@ -33,6 +32,7 @@ Array [
 .button-d0-0-2-4 {
   background-color: #f4ab34;
   border: 1px solid #FFFFFF00;
+  border-radius: 4px;
   box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14);
   color: #333333;
   height: 40px;
@@ -41,9 +41,9 @@ Array [
   width: 100%;
 }
 .button-d0-0-2-4:disabled {
-  background-color: #bbbbbb;
+  background-color: #8c8c8c;
   border: 1px solid #FFFFFF00;
-  color: #333333;
+  color: #363636;
 }
 .button-d0-0-2-4:hover:not([disabled]) {
   background-color: #f4ab34;
@@ -99,7 +99,6 @@ Array [
   outline: 0;
   overflow: hidden;
   position: relative;
-  border-radius: 4px;
 }
 .button-0-2-1:disabled {
   cursor: default;
@@ -125,6 +124,7 @@ Array [
 .button-d0-0-2-4 {
   background-color: #f4ab34;
   border: 1px solid #FFFFFF00;
+  border-radius: 4px;
   box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14);
   color: #333333;
   height: 48px;
@@ -133,9 +133,9 @@ Array [
   width: auto;
 }
 .button-d0-0-2-4:disabled {
-  background-color: #bbbbbb;
+  background-color: #8c8c8c;
   border: 1px solid #FFFFFF00;
-  color: #333333;
+  color: #363636;
 }
 .button-d0-0-2-4:hover:not([disabled]) {
   background-color: #f4ab34;
@@ -191,7 +191,6 @@ Array [
   outline: 0;
   overflow: hidden;
   position: relative;
-  border-radius: 4px;
 }
 .button-0-2-1:disabled {
   cursor: default;
@@ -217,6 +216,7 @@ Array [
 .button-d0-0-2-4 {
   background-color: #f4ab34;
   border: 1px solid #FFFFFF00;
+  border-radius: 4px;
   box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14);
   color: #333333;
   height: 32px;
@@ -225,9 +225,9 @@ Array [
   width: auto;
 }
 .button-d0-0-2-4:disabled {
-  background-color: #bbbbbb;
+  background-color: #8c8c8c;
   border: 1px solid #FFFFFF00;
-  color: #333333;
+  color: #363636;
 }
 .button-d0-0-2-4:hover:not([disabled]) {
   background-color: #f4ab34;
@@ -283,7 +283,6 @@ Array [
   outline: 0;
   overflow: hidden;
   position: relative;
-  border-radius: 4px;
 }
 .button-0-2-1:disabled {
   cursor: default;
@@ -309,6 +308,7 @@ Array [
 .button-d0-0-2-4 {
   background-color: #f4ab34;
   border: 1px solid #FFFFFF00;
+  border-radius: 4px;
   box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14);
   color: #333333;
   height: 40px;
@@ -317,9 +317,9 @@ Array [
   width: auto;
 }
 .button-d0-0-2-4:disabled {
-  background-color: #bbbbbb;
+  background-color: #8c8c8c;
   border: 1px solid #FFFFFF00;
-  color: #333333;
+  color: #363636;
 }
 .button-d0-0-2-4:hover:not([disabled]) {
   background-color: #f4ab34;
@@ -377,7 +377,6 @@ Array [
   outline: 0;
   overflow: hidden;
   position: relative;
-  border-radius: 4px;
 }
 .button-0-2-1:disabled {
   cursor: default;
@@ -403,8 +402,9 @@ Array [
 .button-d0-0-2-4 {
   background-color: #FFFFFF00;
   border: 1px solid #f4ab34;
+  border-radius: 4px;
   box-shadow: none;
-  color: #000000;
+  color: #111111;
   height: 40px;
   padding-left: 8px;
   padding-right: 8px;
@@ -412,13 +412,13 @@ Array [
 }
 .button-d0-0-2-4:disabled {
   background-color: #FFFFFF00;
-  border: 1px solid #bbbbbb;
-  color: #777777;
+  border: 1px solid #8c8c8c;
+  color: #737373;
 }
 .button-d0-0-2-4:hover:not([disabled]) {
   background-color: #bbbbbb;
   border: 1px solid #f4ab34;
-  color: #333333;
+  color: #363636;
   opacity: unset;
 }
 .button-d0-0-2-4:focus-visible:not([disabled]) {
@@ -468,7 +468,6 @@ Array [
   outline: 0;
   overflow: hidden;
   position: relative;
-  border-radius: 4px;
 }
 .button-0-2-1:disabled {
   cursor: default;
@@ -494,8 +493,9 @@ Array [
 .button-d0-0-2-4 {
   background-color: #FFFFFF00;
   border: 1px solid #f4ab34;
+  border-radius: 4px;
   box-shadow: none;
-  color: #000000;
+  color: #111111;
   height: 40px;
   padding-left: 8px;
   padding-right: 8px;
@@ -503,13 +503,13 @@ Array [
 }
 .button-d0-0-2-4:disabled {
   background-color: #FFFFFF00;
-  border: 1px solid #bbbbbb;
-  color: #777777;
+  border: 1px solid #8c8c8c;
+  color: #737373;
 }
 .button-d0-0-2-4:hover:not([disabled]) {
   background-color: #bbbbbb;
   border: 1px solid #f4ab34;
-  color: #333333;
+  color: #363636;
   opacity: unset;
 }
 .button-d0-0-2-4:focus-visible:not([disabled]) {
@@ -560,7 +560,6 @@ Array [
   outline: 0;
   overflow: hidden;
   position: relative;
-  border-radius: 4px;
 }
 .button-0-2-1:disabled {
   cursor: default;
@@ -586,8 +585,9 @@ Array [
 .button-d0-0-2-4 {
   background-color: #FFFFFF00;
   border: 1px solid #FFFFFF00;
+  border-radius: 4px;
   box-shadow: none;
-  color: #333333;
+  color: #363636;
   height: 40px;
   padding-left: 8px;
   padding-right: 8px;
@@ -596,12 +596,12 @@ Array [
 .button-d0-0-2-4:disabled {
   background-color: #FFFFFF00;
   border: 1px solid #FFFFFF00;
-  color: #777777;
+  color: #737373;
 }
 .button-d0-0-2-4:hover:not([disabled]) {
   background-color: #bbbbbb;
   border: 1px solid #FFFFFF00;
-  color: #333333;
+  color: #363636;
   opacity: unset;
 }
 .button-d0-0-2-4:focus-visible:not([disabled]) {
@@ -651,7 +651,6 @@ Array [
   outline: 0;
   overflow: hidden;
   position: relative;
-  border-radius: 4px;
 }
 .button-0-2-1:disabled {
   cursor: default;
@@ -677,8 +676,9 @@ Array [
 .button-d0-0-2-4 {
   background-color: #FFFFFF00;
   border: 1px solid #FFFFFF00;
+  border-radius: 4px;
   box-shadow: none;
-  color: #333333;
+  color: #363636;
   height: 40px;
   padding-left: 8px;
   padding-right: 8px;
@@ -687,12 +687,12 @@ Array [
 .button-d0-0-2-4:disabled {
   background-color: #FFFFFF00;
   border: 1px solid #FFFFFF00;
-  color: #777777;
+  color: #737373;
 }
 .button-d0-0-2-4:hover:not([disabled]) {
   background-color: #bbbbbb;
   border: 1px solid #FFFFFF00;
-  color: #333333;
+  color: #363636;
   opacity: unset;
 }
 .button-d0-0-2-4:focus-visible:not([disabled]) {
@@ -743,7 +743,6 @@ Array [
   outline: 0;
   overflow: hidden;
   position: relative;
-  border-radius: 4px;
 }
 .button-0-2-1:disabled {
   cursor: default;
@@ -769,6 +768,7 @@ Array [
 .button-d0-0-2-4 {
   background-color: #f4ab34;
   border: 1px solid #FFFFFF00;
+  border-radius: 4px;
   box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14);
   color: #333333;
   height: 40px;
@@ -777,9 +777,9 @@ Array [
   width: auto;
 }
 .button-d0-0-2-4:disabled {
-  background-color: #bbbbbb;
+  background-color: #8c8c8c;
   border: 1px solid #FFFFFF00;
-  color: #333333;
+  color: #363636;
 }
 .button-d0-0-2-4:hover:not([disabled]) {
   background-color: #f4ab34;
@@ -843,7 +843,6 @@ Array [
   outline: 0;
   overflow: hidden;
   position: relative;
-  border-radius: 4px;
 }
 .button-0-2-1:disabled {
   cursor: default;
@@ -869,6 +868,7 @@ Array [
 .button-d0-0-2-4 {
   background-color: #f4ab34;
   border: 1px solid #FFFFFF00;
+  border-radius: 4px;
   box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14);
   color: #333333;
   height: 40px;
@@ -877,9 +877,9 @@ Array [
   width: auto;
 }
 .button-d0-0-2-4:disabled {
-  background-color: #bbbbbb;
+  background-color: #8c8c8c;
   border: 1px solid #FFFFFF00;
-  color: #333333;
+  color: #363636;
 }
 .button-d0-0-2-4:hover:not([disabled]) {
   background-color: #f4ab34;
@@ -950,7 +950,6 @@ Array [
   outline: 0;
   overflow: hidden;
   position: relative;
-  border-radius: 4px;
 }
 .button-0-2-1:disabled {
   cursor: default;
@@ -976,6 +975,7 @@ Array [
 .button-d0-0-2-4 {
   background-color: #f4ab34;
   border: 1px solid #FFFFFF00;
+  border-radius: 4px;
   box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14);
   color: #333333;
   height: 40px;
@@ -984,9 +984,9 @@ Array [
   width: auto;
 }
 .button-d0-0-2-4:disabled {
-  background-color: #bbbbbb;
+  background-color: #8c8c8c;
   border: 1px solid #FFFFFF00;
-  color: #333333;
+  color: #363636;
 }
 .button-d0-0-2-4:hover:not([disabled]) {
   background-color: #f4ab34;
@@ -1057,7 +1057,6 @@ Array [
   outline: 0;
   overflow: hidden;
   position: relative;
-  border-radius: 4px;
 }
 .button-0-2-1:disabled {
   cursor: default;
@@ -1083,6 +1082,7 @@ Array [
 .button-d0-0-2-4 {
   background-color: #f4ab34;
   border: 1px solid #FFFFFF00;
+  border-radius: 4px;
   box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14);
   color: #333333;
   height: 40px;
@@ -1091,9 +1091,9 @@ Array [
   width: auto;
 }
 .button-d0-0-2-4:disabled {
-  background-color: #bbbbbb;
+  background-color: #8c8c8c;
   border: 1px solid #FFFFFF00;
-  color: #333333;
+  color: #363636;
 }
 .button-d0-0-2-4:hover:not([disabled]) {
   background-color: #f4ab34;
diff --git a/packages/react/src/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap b/packages/react/src/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap
index dd75c5045a..ec1bbcab91 100644
--- a/packages/react/src/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap
+++ b/packages/react/src/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap
@@ -81,7 +81,9 @@ Array [
     transition: scale opacity 500ms;
     width: 0;
   }
-  .rippleContainer-d2-0-2-15 {  }
+  .rippleContainer-d2-0-2-15 {
+    border-radius: 4px;
+  }
   .rippleActive-d3-0-2-16 {
     animation: keyframes-ripple-0-2-12 500ms;
   }
@@ -98,7 +100,7 @@ Array [
   }
   .checkbox-0-2-3 {
     width: 18px;
-    border: 2px solid #777777;
+    border: 2px solid #737373;
     cursor: pointer;
     height: 18px;
     margin: 0;
@@ -111,7 +113,7 @@ Array [
     outline: none;
   }
   .checkbox-0-2-3:disabled {
-    border: 2px solid #bbbbbb;
+    border: 2px solid #8c8c8c;
     cursor: default;
   }
   .checkbox-0-2-3:checked {
@@ -128,8 +130,8 @@ Array [
     font-family: natds-icons;
   }
   .checkbox-0-2-3:checked:disabled {
-    border: 2px solid #bbbbbb;
-    background-color: #bbbbbb;
+    border: 2px solid #8c8c8c;
+    background-color: #8c8c8c;
   }
   .labelText-0-2-4 {
     font-size: 14px;
@@ -147,7 +149,7 @@ Array [
     content: \\"\\";
   }
   .labelText-d1-0-2-6 {
-    color: #333333;
+    color: #363636;
   }",
   <div>
     <div
@@ -252,18 +254,20 @@ Array [
   }
   .wrapper-d0-0-2-13:focus:after {  }
   .wrapper-d0-0-2-13:hover:after {
-    background-color: #000000;
+    background-color: #111111;
     opacity: 0;
   }
   .ripple-d1-0-2-14 {
-    background-color: #000000;
+    background-color: #111111;
     height: 0;
     left: 50%;
     top: 50%;
     transition: scale opacity 500ms;
     width: 0;
   }
-  .rippleContainer-d2-0-2-15 {  }
+  .rippleContainer-d2-0-2-15 {
+    border-radius: 4px;
+  }
   .rippleActive-d3-0-2-16 {
     animation: keyframes-ripple-0-2-12 500ms;
   }
@@ -280,7 +284,7 @@ Array [
   }
   .checkbox-0-2-3 {
     width: 18px;
-    border: 2px solid #777777;
+    border: 2px solid #737373;
     cursor: pointer;
     height: 18px;
     margin: 0;
@@ -293,7 +297,7 @@ Array [
     outline: none;
   }
   .checkbox-0-2-3:disabled {
-    border: 2px solid #bbbbbb;
+    border: 2px solid #8c8c8c;
     cursor: default;
   }
   .checkbox-0-2-3:checked {
@@ -310,8 +314,8 @@ Array [
     font-family: natds-icons;
   }
   .checkbox-0-2-3:checked:disabled {
-    border: 2px solid #bbbbbb;
-    background-color: #bbbbbb;
+    border: 2px solid #8c8c8c;
+    background-color: #8c8c8c;
   }
   .labelText-0-2-4 {
     font-size: 14px;
@@ -329,7 +333,7 @@ Array [
     content: \\"\\";
   }
   .labelText-d1-0-2-6 {
-    color: #bbbbbb;
+    color: #8c8c8c;
   }",
   <div>
     <div
@@ -433,21 +437,23 @@ Array [
     align-self: start;
   }
   .wrapper-d0-0-2-13:focus:after {
-    background-color: #000000;
+    background-color: #111111;
   }
   .wrapper-d0-0-2-13:hover:after {
-    background-color: #000000;
+    background-color: #111111;
     opacity: 0.16;
   }
   .ripple-d1-0-2-14 {
-    background-color: #000000;
+    background-color: #111111;
     height: 0;
     left: 50%;
     top: 50%;
     transition: scale opacity 500ms;
     width: 0;
   }
-  .rippleContainer-d2-0-2-15 {  }
+  .rippleContainer-d2-0-2-15 {
+    border-radius: 4px;
+  }
   .rippleActive-d3-0-2-16 {
     animation: keyframes-ripple-0-2-12 500ms;
   }
@@ -464,7 +470,7 @@ Array [
   }
   .checkbox-0-2-3 {
     width: 18px;
-    border: 2px solid #777777;
+    border: 2px solid #737373;
     cursor: pointer;
     height: 18px;
     margin: 0;
@@ -477,7 +483,7 @@ Array [
     outline: none;
   }
   .checkbox-0-2-3:disabled {
-    border: 2px solid #bbbbbb;
+    border: 2px solid #8c8c8c;
     cursor: default;
   }
   .checkbox-0-2-3:checked {
@@ -494,8 +500,8 @@ Array [
     font-family: natds-icons;
   }
   .checkbox-0-2-3:checked:disabled {
-    border: 2px solid #bbbbbb;
-    background-color: #bbbbbb;
+    border: 2px solid #8c8c8c;
+    background-color: #8c8c8c;
   }
   .labelText-0-2-4 {
     font-size: 14px;
@@ -513,7 +519,7 @@ Array [
     content: \\"\\";
   }
   .labelText-d1-0-2-6 {
-    color: #333333;
+    color: #363636;
   }",
   <div>
     <div
@@ -616,21 +622,23 @@ Array [
     align-self: start;
   }
   .wrapper-d0-0-2-13:focus:after {
-    background-color: #000000;
+    background-color: #111111;
   }
   .wrapper-d0-0-2-13:hover:after {
-    background-color: #000000;
+    background-color: #111111;
     opacity: 0.16;
   }
   .ripple-d1-0-2-14 {
-    background-color: #000000;
+    background-color: #111111;
     height: 0;
     left: 50%;
     top: 50%;
     transition: scale opacity 500ms;
     width: 0;
   }
-  .rippleContainer-d2-0-2-15 {  }
+  .rippleContainer-d2-0-2-15 {
+    border-radius: 4px;
+  }
   .rippleActive-d3-0-2-16 {
     animation: keyframes-ripple-0-2-12 500ms;
   }
@@ -647,7 +655,7 @@ Array [
   }
   .checkbox-0-2-3 {
     width: 18px;
-    border: 2px solid #777777;
+    border: 2px solid #737373;
     cursor: pointer;
     height: 18px;
     margin: 0;
@@ -660,7 +668,7 @@ Array [
     outline: none;
   }
   .checkbox-0-2-3:disabled {
-    border: 2px solid #bbbbbb;
+    border: 2px solid #8c8c8c;
     cursor: default;
   }
   .checkbox-0-2-3:checked {
@@ -677,8 +685,8 @@ Array [
     font-family: natds-icons;
   }
   .checkbox-0-2-3:checked:disabled {
-    border: 2px solid #bbbbbb;
-    background-color: #bbbbbb;
+    border: 2px solid #8c8c8c;
+    background-color: #8c8c8c;
   }
   .labelText-0-2-4 {
     font-size: 14px;
@@ -696,7 +704,7 @@ Array [
     content: \\"\\";
   }
   .labelText-d1-0-2-6 {
-    color: #333333;
+    color: #363636;
   }",
   <div>
     <div
@@ -799,26 +807,28 @@ Array [
     align-self: start;
   }
   .wrapper-d0-0-2-13:focus:after {
-    background-color: #000000;
+    background-color: #111111;
   }
   .wrapper-d0-0-2-13:hover:after {
-    background-color: #000000;
+    background-color: #111111;
     opacity: 0.16;
   }
   .ripple-d1-0-2-14 {
-    background-color: #000000;
+    background-color: #111111;
     height: 0;
     left: 50%;
     top: 50%;
     transition: scale opacity 500ms;
     width: 0;
   }
-  .rippleContainer-d2-0-2-15 {  }
+  .rippleContainer-d2-0-2-15 {
+    border-radius: 4px;
+  }
   .rippleActive-d3-0-2-16 {
     animation: keyframes-ripple-0-2-12 500ms;
   }
   .labelContainer-0-2-17 {
-    color: #000000;
+    color: #111111;
     font-family: \\"Roboto\\", Arial;
   }
   .container-0-2-1 {
@@ -834,7 +844,7 @@ Array [
   }
   .checkbox-0-2-3 {
     width: 18px;
-    border: 2px solid #777777;
+    border: 2px solid #737373;
     cursor: pointer;
     height: 18px;
     margin: 0;
@@ -847,7 +857,7 @@ Array [
     outline: none;
   }
   .checkbox-0-2-3:disabled {
-    border: 2px solid #bbbbbb;
+    border: 2px solid #8c8c8c;
     cursor: default;
   }
   .checkbox-0-2-3:checked {
@@ -864,8 +874,8 @@ Array [
     font-family: natds-icons;
   }
   .checkbox-0-2-3:checked:disabled {
-    border: 2px solid #bbbbbb;
-    background-color: #bbbbbb;
+    border: 2px solid #8c8c8c;
+    background-color: #8c8c8c;
   }
   .labelText-0-2-4 {
     font-size: 14px;
@@ -883,7 +893,7 @@ Array [
     content: \\"\\";
   }
   .labelText-d1-0-2-6 {
-    color: #333333;
+    color: #363636;
   }",
   <div>
     <div
diff --git a/packages/react/src/components/Chip/Chip.test.tsx b/packages/react/src/components/Chip/Chip.test.tsx
index 199060eaa8..0867d07f48 100644
--- a/packages/react/src/components/Chip/Chip.test.tsx
+++ b/packages/react/src/components/Chip/Chip.test.tsx
@@ -8,7 +8,7 @@ describe('Chip component', () => {
   it('should render with neutral border as default', () => {
     const { styles } = renderWithTheme(<Chip labelText="Chip label" />)
 
-    expect(styles.toString()).toContain('border-color: #bbbbbb')
+    expect(styles.toString()).toContain('border-color: #8c8c8c')
   })
 
   it('should render with primary border when color is primary', () => {
diff --git a/packages/react/src/components/Counter/__snapshots__/Counter.test.tsx.snap b/packages/react/src/components/Counter/__snapshots__/Counter.test.tsx.snap
index 5e38fb1073..c55f0b0822 100644
--- a/packages/react/src/components/Counter/__snapshots__/Counter.test.tsx.snap
+++ b/packages/react/src/components/Counter/__snapshots__/Counter.test.tsx.snap
@@ -68,11 +68,11 @@ Array [
   }
   .wrapper-d0-0-2-19:focus:after {  }
   .wrapper-d0-0-2-19:hover:after {
-    background-color: #000000;
+    background-color: #111111;
     opacity: 0;
   }
   .ripple-d1-0-2-20 {
-    background-color: #000000;
+    background-color: #111111;
     height: 0;
     left: 0;
     top: 0;
@@ -81,6 +81,7 @@ Array [
   }
   .rippleContainer-d2-0-2-21 {
     overflow: hidden;
+    border-radius: 4px;
   }
   .rippleActive-d3-0-2-22 {
     animation: keyframes-ripple-0-2-18 300ms;
@@ -92,11 +93,11 @@ Array [
   }
   .wrapper-d4-0-2-26:focus:after {  }
   .wrapper-d4-0-2-26:hover:after {
-    background-color: #000000;
+    background-color: #111111;
     opacity: 0;
   }
   .ripple-d5-0-2-27 {
-    background-color: #000000;
+    background-color: #111111;
     height: 0;
     left: 0;
     top: 0;
@@ -105,6 +106,7 @@ Array [
   }
   .rippleContainer-d6-0-2-28 {
     overflow: hidden;
+    border-radius: 4px;
   }
   .rippleActive-d7-0-2-29 {
     animation: keyframes-ripple-0-2-18 300ms;
@@ -114,7 +116,6 @@ Array [
     outline: 0;
     overflow: hidden;
     position: relative;
-    border-radius: 4px;
   }
   .button-0-2-7:disabled {
     cursor: default;
@@ -140,8 +141,9 @@ Array [
   .button-d0-0-2-10 {
     background-color: #FFFFFF00;
     border: 1px solid #FFFFFF00;
+    border-radius: 4px;
     box-shadow: none;
-    color: #333333;
+    color: #363636;
     height: 40px;
     padding-left: 8px;
     padding-right: 8px;
@@ -150,12 +152,12 @@ Array [
   .button-d0-0-2-10:disabled {
     background-color: #FFFFFF00;
     border: 1px solid #FFFFFF00;
-    color: #777777;
+    color: #737373;
   }
   .button-d0-0-2-10:hover:not([disabled]) {
     background-color: #bbbbbb;
     border: 1px solid #FFFFFF00;
-    color: #333333;
+    color: #363636;
     opacity: unset;
   }
   .button-d0-0-2-10:focus-visible:not([disabled]) {
@@ -178,8 +180,9 @@ Array [
   .button-d3-0-2-23 {
     background-color: #FFFFFF00;
     border: 1px solid #FFFFFF00;
+    border-radius: 4px;
     box-shadow: none;
-    color: #333333;
+    color: #363636;
     height: 40px;
     padding-left: 8px;
     padding-right: 8px;
@@ -188,12 +191,12 @@ Array [
   .button-d3-0-2-23:disabled {
     background-color: #FFFFFF00;
     border: 1px solid #FFFFFF00;
-    color: #777777;
+    color: #737373;
   }
   .button-d3-0-2-23:hover:not([disabled]) {
     background-color: #bbbbbb;
     border: 1px solid #FFFFFF00;
-    color: #333333;
+    color: #363636;
     opacity: unset;
   }
   .button-d3-0-2-23:focus-visible:not([disabled]) {
@@ -215,7 +218,7 @@ Array [
   }
   .buttonGroup-0-2-1 {
     width: fit-content;
-    border: 1px solid #bbbbbb;
+    border: 1px solid #8c8c8c;
     display: flex;
     overflow: hidden;
     margin-top: 4px;
@@ -235,7 +238,7 @@ Array [
     border-bottom-right-radius: 0;
   }
   .inputBase-0-2-4 {
-    color: #000000;
+    color: #111111;
     width: 40px;
     cursor: default;
     height: 100%;
@@ -243,13 +246,13 @@ Array [
     padding: 0;
     border-top: none;
     text-align: center;
-    border-left: 1px solid #bbbbbb;
-    border-right: 1px solid #bbbbbb;
+    border-left: 1px solid #8c8c8c;
+    border-right: 1px solid #8c8c8c;
     border-bottom: none;
     background-color: transparent;
   }
   .labelText-0-2-5 {
-    color: #777777;
+    color: #737373;
     font-size: 14px;
     font-family: Roboto, Arial;
     font-weight: 500;
@@ -409,11 +412,11 @@ Array [
   }
   .wrapper-d0-0-2-19:focus:after {  }
   .wrapper-d0-0-2-19:hover:after {
-    background-color: #000000;
+    background-color: #111111;
     opacity: 0;
   }
   .ripple-d1-0-2-20 {
-    background-color: #000000;
+    background-color: #111111;
     height: 0;
     left: 0;
     top: 0;
@@ -422,6 +425,7 @@ Array [
   }
   .rippleContainer-d2-0-2-21 {
     overflow: hidden;
+    border-radius: 4px;
   }
   .rippleActive-d3-0-2-22 {
     animation: keyframes-ripple-0-2-18 300ms;
@@ -432,14 +436,14 @@ Array [
     align-self: start;
   }
   .wrapper-d4-0-2-26:focus:after {
-    background-color: #000000;
+    background-color: #111111;
   }
   .wrapper-d4-0-2-26:hover:after {
-    background-color: #000000;
+    background-color: #111111;
     opacity: 0;
   }
   .ripple-d5-0-2-27 {
-    background-color: #000000;
+    background-color: #111111;
     height: 0;
     left: 0;
     top: 0;
@@ -448,6 +452,7 @@ Array [
   }
   .rippleContainer-d6-0-2-28 {
     overflow: hidden;
+    border-radius: 4px;
   }
   .rippleActive-d7-0-2-29 {
     animation: keyframes-ripple-0-2-18 300ms;
@@ -457,7 +462,6 @@ Array [
     outline: 0;
     overflow: hidden;
     position: relative;
-    border-radius: 4px;
   }
   .button-0-2-7:disabled {
     cursor: default;
@@ -483,8 +487,9 @@ Array [
   .button-d0-0-2-10 {
     background-color: #FFFFFF00;
     border: 1px solid #FFFFFF00;
+    border-radius: 4px;
     box-shadow: none;
-    color: #333333;
+    color: #363636;
     height: 40px;
     padding-left: 8px;
     padding-right: 8px;
@@ -493,12 +498,12 @@ Array [
   .button-d0-0-2-10:disabled {
     background-color: #FFFFFF00;
     border: 1px solid #FFFFFF00;
-    color: #777777;
+    color: #737373;
   }
   .button-d0-0-2-10:hover:not([disabled]) {
     background-color: #bbbbbb;
     border: 1px solid #FFFFFF00;
-    color: #333333;
+    color: #363636;
     opacity: unset;
   }
   .button-d0-0-2-10:focus-visible:not([disabled]) {
@@ -521,8 +526,9 @@ Array [
   .button-d3-0-2-23 {
     background-color: #FFFFFF00;
     border: 1px solid #FFFFFF00;
+    border-radius: 4px;
     box-shadow: none;
-    color: #333333;
+    color: #363636;
     height: 40px;
     padding-left: 8px;
     padding-right: 8px;
@@ -531,12 +537,12 @@ Array [
   .button-d3-0-2-23:disabled {
     background-color: #FFFFFF00;
     border: 1px solid #FFFFFF00;
-    color: #777777;
+    color: #737373;
   }
   .button-d3-0-2-23:hover:not([disabled]) {
     background-color: #bbbbbb;
     border: 1px solid #FFFFFF00;
-    color: #333333;
+    color: #363636;
     opacity: unset;
   }
   .button-d3-0-2-23:focus-visible:not([disabled]) {
@@ -558,7 +564,7 @@ Array [
   }
   .buttonGroup-0-2-1 {
     width: fit-content;
-    border: 1px solid #bbbbbb;
+    border: 1px solid #8c8c8c;
     display: flex;
     overflow: hidden;
     margin-top: 4px;
@@ -578,7 +584,7 @@ Array [
     border-bottom-right-radius: 0;
   }
   .inputBase-0-2-4 {
-    color: #000000;
+    color: #111111;
     width: 40px;
     cursor: default;
     height: 100%;
@@ -586,13 +592,13 @@ Array [
     padding: 0;
     border-top: none;
     text-align: center;
-    border-left: 1px solid #bbbbbb;
-    border-right: 1px solid #bbbbbb;
+    border-left: 1px solid #8c8c8c;
+    border-right: 1px solid #8c8c8c;
     border-bottom: none;
     background-color: transparent;
   }
   .labelText-0-2-5 {
-    color: #777777;
+    color: #737373;
     font-size: 14px;
     font-family: Roboto, Arial;
     font-weight: 500;
@@ -686,7 +692,7 @@ Array [
 exports[`Counter should render correctly with label 1`] = `
 Array [
   ".labelContainer-0-2-7 {
-  color: #000000;
+  color: #111111;
   font-family: \\"Roboto\\", Arial;
 }
 .sharedRippleEffect-0-2-14 {
@@ -755,11 +761,11 @@ Array [
   }
   .wrapper-d0-0-2-20:focus:after {  }
   .wrapper-d0-0-2-20:hover:after {
-    background-color: #000000;
+    background-color: #111111;
     opacity: 0;
   }
   .ripple-d1-0-2-21 {
-    background-color: #000000;
+    background-color: #111111;
     height: 0;
     left: 0;
     top: 0;
@@ -768,6 +774,7 @@ Array [
   }
   .rippleContainer-d2-0-2-22 {
     overflow: hidden;
+    border-radius: 4px;
   }
   .rippleActive-d3-0-2-23 {
     animation: keyframes-ripple-0-2-19 300ms;
@@ -778,14 +785,14 @@ Array [
     align-self: start;
   }
   .wrapper-d4-0-2-27:focus:after {
-    background-color: #000000;
+    background-color: #111111;
   }
   .wrapper-d4-0-2-27:hover:after {
-    background-color: #000000;
+    background-color: #111111;
     opacity: 0;
   }
   .ripple-d5-0-2-28 {
-    background-color: #000000;
+    background-color: #111111;
     height: 0;
     left: 0;
     top: 0;
@@ -794,6 +801,7 @@ Array [
   }
   .rippleContainer-d6-0-2-29 {
     overflow: hidden;
+    border-radius: 4px;
   }
   .rippleActive-d7-0-2-30 {
     animation: keyframes-ripple-0-2-19 300ms;
@@ -803,7 +811,6 @@ Array [
     outline: 0;
     overflow: hidden;
     position: relative;
-    border-radius: 4px;
   }
   .button-0-2-8:disabled {
     cursor: default;
@@ -829,8 +836,9 @@ Array [
   .button-d0-0-2-11 {
     background-color: #FFFFFF00;
     border: 1px solid #FFFFFF00;
+    border-radius: 4px;
     box-shadow: none;
-    color: #333333;
+    color: #363636;
     height: 40px;
     padding-left: 8px;
     padding-right: 8px;
@@ -839,12 +847,12 @@ Array [
   .button-d0-0-2-11:disabled {
     background-color: #FFFFFF00;
     border: 1px solid #FFFFFF00;
-    color: #777777;
+    color: #737373;
   }
   .button-d0-0-2-11:hover:not([disabled]) {
     background-color: #bbbbbb;
     border: 1px solid #FFFFFF00;
-    color: #333333;
+    color: #363636;
     opacity: unset;
   }
   .button-d0-0-2-11:focus-visible:not([disabled]) {
@@ -867,8 +875,9 @@ Array [
   .button-d3-0-2-24 {
     background-color: #FFFFFF00;
     border: 1px solid #FFFFFF00;
+    border-radius: 4px;
     box-shadow: none;
-    color: #333333;
+    color: #363636;
     height: 40px;
     padding-left: 8px;
     padding-right: 8px;
@@ -877,12 +886,12 @@ Array [
   .button-d3-0-2-24:disabled {
     background-color: #FFFFFF00;
     border: 1px solid #FFFFFF00;
-    color: #777777;
+    color: #737373;
   }
   .button-d3-0-2-24:hover:not([disabled]) {
     background-color: #bbbbbb;
     border: 1px solid #FFFFFF00;
-    color: #333333;
+    color: #363636;
     opacity: unset;
   }
   .button-d3-0-2-24:focus-visible:not([disabled]) {
@@ -904,7 +913,7 @@ Array [
   }
   .buttonGroup-0-2-1 {
     width: fit-content;
-    border: 1px solid #bbbbbb;
+    border: 1px solid #8c8c8c;
     display: flex;
     overflow: hidden;
     margin-top: 4px;
@@ -924,7 +933,7 @@ Array [
     border-bottom-right-radius: 0;
   }
   .inputBase-0-2-4 {
-    color: #000000;
+    color: #111111;
     width: 40px;
     cursor: default;
     height: 100%;
@@ -932,13 +941,13 @@ Array [
     padding: 0;
     border-top: none;
     text-align: center;
-    border-left: 1px solid #bbbbbb;
-    border-right: 1px solid #bbbbbb;
+    border-left: 1px solid #8c8c8c;
+    border-right: 1px solid #8c8c8c;
     border-bottom: none;
     background-color: transparent;
   }
   .labelText-0-2-5 {
-    color: #777777;
+    color: #737373;
     font-size: 14px;
     font-family: Roboto, Arial;
     font-weight: 500;
diff --git a/packages/react/src/components/Dialog/__snapshots__/Dialog.test.tsx.snap b/packages/react/src/components/Dialog/__snapshots__/Dialog.test.tsx.snap
index eb03a2a765..533b5521cf 100644
--- a/packages/react/src/components/Dialog/__snapshots__/Dialog.test.tsx.snap
+++ b/packages/react/src/components/Dialog/__snapshots__/Dialog.test.tsx.snap
@@ -23,7 +23,7 @@ Array [
   opacity: 0.56;
   z-index: 1299;
   position: fixed;
-  background: #000000;
+  background: #111111;
 }
 .dialog-d0-0-2-3 {
   display: none;
@@ -103,14 +103,14 @@ Array [
     align-self: start;
   }
   .wrapper-d0-0-2-24:focus:after {
-    background-color: #000000;
+    background-color: #111111;
   }
   .wrapper-d0-0-2-24:hover:after {
-    background-color: #000000;
+    background-color: #111111;
     opacity: 0;
   }
   .ripple-d1-0-2-25 {
-    background-color: #000000;
+    background-color: #111111;
     height: 0;
     left: 0;
     top: 0;
@@ -119,6 +119,7 @@ Array [
   }
   .rippleContainer-d2-0-2-26 {
     overflow: hidden;
+    border-radius: 4px;
   }
   .rippleActive-d3-0-2-27 {
     animation: keyframes-ripple-0-2-23 300ms;
@@ -128,7 +129,6 @@ Array [
     outline: 0;
     overflow: hidden;
     position: relative;
-    border-radius: 4px;
   }
   .button-0-2-12:disabled {
     cursor: default;
@@ -154,6 +154,7 @@ Array [
   .button-d0-0-2-15 {
     background-color: #f4ab34;
     border: 1px solid #FFFFFF00;
+    border-radius: 4px;
     box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14);
     color: #333333;
     height: 40px;
@@ -162,9 +163,9 @@ Array [
     width: auto;
   }
   .button-d0-0-2-15:disabled {
-    background-color: #bbbbbb;
+    background-color: #8c8c8c;
     border: 1px solid #FFFFFF00;
-    color: #333333;
+    color: #363636;
   }
   .button-d0-0-2-15:hover:not([disabled]) {
     background-color: #f4ab34;
@@ -211,7 +212,7 @@ Array [
     opacity: 0.56;
     z-index: 1299;
     position: fixed;
-    background: #000000;
+    background: #111111;
   }
   .dialog-d0-0-2-3 {
     display: flex;
@@ -223,7 +224,7 @@ Array [
     height: 1px;
     margin-top: 0;
     margin-bottom: 0;
-    background-color: #bbbbbb;
+    background-color: #8c8c8c;
   }
   .divider-d0-0-2-9 {
     margin-right: 0;
@@ -235,7 +236,7 @@ Array [
   }
   .content-0-2-7 {
     flex: 1 1 auto;
-    color: #333333;
+    color: #363636;
     padding: 16px;
     position: relative;
     font-size: 16px;
@@ -252,7 +253,7 @@ Array [
     justify-content: space-between;
   }
   .title-0-2-6 {
-    color: #333333;
+    color: #363636;
     margin: 0;
     font-size: 20px;
     font-family: Roboto, Arial;
@@ -413,14 +414,14 @@ Array [
     align-self: start;
   }
   .wrapper-d0-0-2-24:focus:after {
-    background-color: #000000;
+    background-color: #111111;
   }
   .wrapper-d0-0-2-24:hover:after {
-    background-color: #000000;
+    background-color: #111111;
     opacity: 0;
   }
   .ripple-d1-0-2-25 {
-    background-color: #000000;
+    background-color: #111111;
     height: 0;
     left: 0;
     top: 0;
@@ -429,6 +430,7 @@ Array [
   }
   .rippleContainer-d2-0-2-26 {
     overflow: hidden;
+    border-radius: 4px;
   }
   .rippleActive-d3-0-2-27 {
     animation: keyframes-ripple-0-2-23 300ms;
@@ -438,7 +440,6 @@ Array [
     outline: 0;
     overflow: hidden;
     position: relative;
-    border-radius: 4px;
   }
   .button-0-2-12:disabled {
     cursor: default;
@@ -464,6 +465,7 @@ Array [
   .button-d0-0-2-15 {
     background-color: #f4ab34;
     border: 1px solid #FFFFFF00;
+    border-radius: 4px;
     box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14);
     color: #333333;
     height: 40px;
@@ -472,9 +474,9 @@ Array [
     width: auto;
   }
   .button-d0-0-2-15:disabled {
-    background-color: #bbbbbb;
+    background-color: #8c8c8c;
     border: 1px solid #FFFFFF00;
-    color: #333333;
+    color: #363636;
   }
   .button-d0-0-2-15:hover:not([disabled]) {
     background-color: #f4ab34;
@@ -521,7 +523,7 @@ Array [
     opacity: 0.56;
     z-index: 1299;
     position: fixed;
-    background: #000000;
+    background: #111111;
   }
   .dialog-d0-0-2-3 {
     display: flex;
@@ -533,7 +535,7 @@ Array [
     height: 1px;
     margin-top: 0;
     margin-bottom: 0;
-    background-color: #bbbbbb;
+    background-color: #8c8c8c;
   }
   .divider-d0-0-2-9 {
     margin-right: 0;
@@ -545,7 +547,7 @@ Array [
   }
   .content-0-2-7 {
     flex: 1 1 auto;
-    color: #333333;
+    color: #363636;
     padding: 16px;
     position: relative;
     font-size: 16px;
@@ -562,7 +564,7 @@ Array [
     justify-content: space-between;
   }
   .title-0-2-6 {
-    color: #333333;
+    color: #363636;
     margin: 0;
     font-size: 20px;
     font-family: Roboto, Arial;
@@ -723,14 +725,14 @@ Array [
     align-self: start;
   }
   .wrapper-d0-0-2-19:focus:after {
-    background-color: #000000;
+    background-color: #111111;
   }
   .wrapper-d0-0-2-19:hover:after {
-    background-color: #000000;
+    background-color: #111111;
     opacity: 0;
   }
   .ripple-d1-0-2-20 {
-    background-color: #000000;
+    background-color: #111111;
     height: 0;
     left: 0;
     top: 0;
@@ -739,6 +741,7 @@ Array [
   }
   .rippleContainer-d2-0-2-21 {
     overflow: hidden;
+    border-radius: 4px;
   }
   .rippleActive-d3-0-2-22 {
     animation: keyframes-ripple-0-2-18 300ms;
@@ -748,7 +751,6 @@ Array [
     outline: 0;
     overflow: hidden;
     position: relative;
-    border-radius: 4px;
   }
   .button-0-2-7:disabled {
     cursor: default;
@@ -774,6 +776,7 @@ Array [
   .button-d0-0-2-10 {
     background-color: #f4ab34;
     border: 1px solid #FFFFFF00;
+    border-radius: 4px;
     box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14);
     color: #333333;
     height: 40px;
@@ -782,9 +785,9 @@ Array [
     width: auto;
   }
   .button-d0-0-2-10:disabled {
-    background-color: #bbbbbb;
+    background-color: #8c8c8c;
     border: 1px solid #FFFFFF00;
-    color: #333333;
+    color: #363636;
   }
   .button-d0-0-2-10:hover:not([disabled]) {
     background-color: #f4ab34;
@@ -831,7 +834,7 @@ Array [
     opacity: 0.56;
     z-index: 1299;
     position: fixed;
-    background: #000000;
+    background: #111111;
   }
   .dialog-d0-0-2-3 {
     display: flex;
@@ -840,7 +843,7 @@ Array [
   .overlay-d1-0-2-4 {  }
   .content-0-2-5 {
     flex: 1 1 auto;
-    color: #333333;
+    color: #363636;
     padding: 16px;
     position: relative;
     font-size: 16px;
@@ -985,14 +988,14 @@ Array [
     align-self: start;
   }
   .wrapper-d0-0-2-21:focus:after {
-    background-color: #000000;
+    background-color: #111111;
   }
   .wrapper-d0-0-2-21:hover:after {
-    background-color: #000000;
+    background-color: #111111;
     opacity: 0;
   }
   .ripple-d1-0-2-22 {
-    background-color: #000000;
+    background-color: #111111;
     height: 0;
     left: 0;
     top: 0;
@@ -1001,6 +1004,7 @@ Array [
   }
   .rippleContainer-d2-0-2-23 {
     overflow: hidden;
+    border-radius: 4px;
   }
   .rippleActive-d3-0-2-24 {
     animation: keyframes-ripple-0-2-20 300ms;
@@ -1010,7 +1014,6 @@ Array [
     outline: 0;
     overflow: hidden;
     position: relative;
-    border-radius: 4px;
   }
   .button-0-2-9:disabled {
     cursor: default;
@@ -1036,6 +1039,7 @@ Array [
   .button-d0-0-2-12 {
     background-color: #f4ab34;
     border: 1px solid #FFFFFF00;
+    border-radius: 4px;
     box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14);
     color: #333333;
     height: 40px;
@@ -1044,9 +1048,9 @@ Array [
     width: auto;
   }
   .button-d0-0-2-12:disabled {
-    background-color: #bbbbbb;
+    background-color: #8c8c8c;
     border: 1px solid #FFFFFF00;
-    color: #333333;
+    color: #363636;
   }
   .button-d0-0-2-12:hover:not([disabled]) {
     background-color: #f4ab34;
@@ -1093,7 +1097,7 @@ Array [
     opacity: 0.56;
     z-index: 1299;
     position: fixed;
-    background: #000000;
+    background: #111111;
   }
   .dialog-d0-0-2-3 {
     display: flex;
@@ -1102,7 +1106,7 @@ Array [
   .overlay-d1-0-2-4 {  }
   .content-0-2-7 {
     flex: 1 1 auto;
-    color: #333333;
+    color: #363636;
     padding: 16px;
     position: relative;
     font-size: 16px;
@@ -1119,7 +1123,7 @@ Array [
     justify-content: space-between;
   }
   .title-0-2-6 {
-    color: #333333;
+    color: #363636;
     margin: 0;
     font-size: 20px;
     font-family: Roboto, Arial;
@@ -1274,14 +1278,14 @@ Array [
     align-self: start;
   }
   .wrapper-d0-0-2-24:focus:after {
-    background-color: #000000;
+    background-color: #111111;
   }
   .wrapper-d0-0-2-24:hover:after {
-    background-color: #000000;
+    background-color: #111111;
     opacity: 0;
   }
   .ripple-d1-0-2-25 {
-    background-color: #000000;
+    background-color: #111111;
     height: 0;
     left: 0;
     top: 0;
@@ -1290,6 +1294,7 @@ Array [
   }
   .rippleContainer-d2-0-2-26 {
     overflow: hidden;
+    border-radius: 4px;
   }
   .rippleActive-d3-0-2-27 {
     animation: keyframes-ripple-0-2-23 300ms;
@@ -1299,7 +1304,6 @@ Array [
     outline: 0;
     overflow: hidden;
     position: relative;
-    border-radius: 4px;
   }
   .button-0-2-12:disabled {
     cursor: default;
@@ -1325,6 +1329,7 @@ Array [
   .button-d0-0-2-15 {
     background-color: #f4ab34;
     border: 1px solid #FFFFFF00;
+    border-radius: 4px;
     box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14);
     color: #333333;
     height: 40px;
@@ -1333,9 +1338,9 @@ Array [
     width: auto;
   }
   .button-d0-0-2-15:disabled {
-    background-color: #bbbbbb;
+    background-color: #8c8c8c;
     border: 1px solid #FFFFFF00;
-    color: #333333;
+    color: #363636;
   }
   .button-d0-0-2-15:hover:not([disabled]) {
     background-color: #f4ab34;
@@ -1382,7 +1387,7 @@ Array [
     opacity: 0.56;
     z-index: 1299;
     position: fixed;
-    background: #000000;
+    background: #111111;
   }
   .dialog-d0-0-2-3 {
     display: flex;
@@ -1394,7 +1399,7 @@ Array [
     height: 1px;
     margin-top: 0;
     margin-bottom: 0;
-    background-color: #bbbbbb;
+    background-color: #8c8c8c;
   }
   .divider-d0-0-2-9 {
     margin-right: 0;
@@ -1406,7 +1411,7 @@ Array [
   }
   .content-0-2-7 {
     flex: 1 1 auto;
-    color: #333333;
+    color: #363636;
     padding: 16px;
     position: relative;
     font-size: 16px;
@@ -1423,7 +1428,7 @@ Array [
     justify-content: space-between;
   }
   .title-0-2-6 {
-    color: #333333;
+    color: #363636;
     margin: 0;
     font-size: 20px;
     font-family: Roboto, Arial;
diff --git a/packages/react/src/components/Divider/__snapshots__/Divider.test.tsx.snap b/packages/react/src/components/Divider/__snapshots__/Divider.test.tsx.snap
index 7adb446db1..2a22aeec3a 100644
--- a/packages/react/src/components/Divider/__snapshots__/Divider.test.tsx.snap
+++ b/packages/react/src/components/Divider/__snapshots__/Divider.test.tsx.snap
@@ -7,7 +7,7 @@ Array [
   height: 1px;
   margin-top: 0;
   margin-bottom: 0;
-  background-color: #bbbbbb;
+  background-color: #8c8c8c;
 }
 .divider-d0-0-2-2 {
   margin-right: 0;
@@ -28,7 +28,7 @@ Array [
   height: 1px;
   margin-top: 0;
   margin-bottom: 0;
-  background-color: #bbbbbb;
+  background-color: #8c8c8c;
 }
 .divider-d0-0-2-2 {
   margin-right: 24px;
@@ -49,7 +49,7 @@ Array [
   height: 1px;
   margin-top: 0;
   margin-bottom: 0;
-  background-color: #bbbbbb;
+  background-color: #8c8c8c;
 }
 .divider-d0-0-2-2 {
   margin-right: 0;
diff --git a/packages/react/src/components/Drawer/__snapshots__/Drawer.test.tsx.snap b/packages/react/src/components/Drawer/__snapshots__/Drawer.test.tsx.snap
index 5de8188d11..8b4227e569 100644
--- a/packages/react/src/components/Drawer/__snapshots__/Drawer.test.tsx.snap
+++ b/packages/react/src/components/Drawer/__snapshots__/Drawer.test.tsx.snap
@@ -13,12 +13,12 @@ Array [
   z-index: 1199;
   overflow: hidden;
   position: fixed;
-  background-color: #000000;
+  background-color: #111111;
 }
 .drawer-d1-0-2-4 {
   top: 0;
   left: -256px;
-  color: #333333;
+  color: #363636;
   width: 256px;
   height: 100%;
   display: flex;
@@ -59,12 +59,12 @@ Array [
   z-index: 1199;
   overflow: hidden;
   position: fixed;
-  background-color: #000000;
+  background-color: #111111;
 }
 .drawer-d1-0-2-4 {
   top: 0;
   left: -600px;
-  color: #333333;
+  color: #363636;
   width: 600px;
   height: 100%;
   display: flex;
@@ -105,12 +105,12 @@ Array [
   z-index: 1199;
   overflow: hidden;
   position: fixed;
-  background-color: #000000;
+  background-color: #111111;
 }
 .drawer-d1-0-2-4 {
   top: 0;
   left: -375px;
-  color: #333333;
+  color: #363636;
   width: 375px;
   height: 100%;
   display: flex;
diff --git a/packages/react/src/components/Icon/Icon.test.tsx b/packages/react/src/components/Icon/Icon.test.tsx
index dbc141d8e8..4fd291f1b9 100644
--- a/packages/react/src/components/Icon/Icon.test.tsx
+++ b/packages/react/src/components/Icon/Icon.test.tsx
@@ -8,7 +8,7 @@ describe('Icon component', () => {
     const { styles, component: { getByTestId } } = renderWithTheme(<Icon name="outlined-default-mockup" />)
     const component = getByTestId(/mockup/)
 
-    expect(component).toHaveStyle({ fontSize: 24, color: '#000000' })
+    expect(component).toHaveStyle({ fontSize: 24, color: '#111111' })
     expect([styles.toString(), component]).toMatchSnapshot()
   })
   it('should render correctly with `medium` size', () => {
diff --git a/packages/react/src/components/Icon/__snapshots__/Icon.test.tsx.snap b/packages/react/src/components/Icon/__snapshots__/Icon.test.tsx.snap
index 5f01a14b5f..5c7a2c827e 100644
--- a/packages/react/src/components/Icon/__snapshots__/Icon.test.tsx.snap
+++ b/packages/react/src/components/Icon/__snapshots__/Icon.test.tsx.snap
@@ -8,7 +8,7 @@ Array [
   pointer-events: none;
 }
 .icon-d0-0-2-2 {
-  color: #000000;
+  color: #111111;
   font-size: 48px;
 }",
   <i
@@ -48,7 +48,7 @@ Array [
   pointer-events: none;
 }
 .icon-d0-0-2-2 {
-  color: #000000;
+  color: #111111;
   font-size: 24px;
 }",
   <i
diff --git a/packages/react/src/components/IconButton/__snapshots__/IconButton.test.tsx.snap b/packages/react/src/components/IconButton/__snapshots__/IconButton.test.tsx.snap
index 8847b925e7..ac05d49cbb 100644
--- a/packages/react/src/components/IconButton/__snapshots__/IconButton.test.tsx.snap
+++ b/packages/react/src/components/IconButton/__snapshots__/IconButton.test.tsx.snap
@@ -68,11 +68,11 @@ Array [
   }
   .wrapper-d0-0-2-11:focus:after {  }
   .wrapper-d0-0-2-11:hover:after {
-    background-color: #000000;
+    background-color: #111111;
     opacity: 0;
   }
   .ripple-d1-0-2-12 {
-    background-color: #000000;
+    background-color: #111111;
     height: 0;
     left: 50%;
     top: 50%;
@@ -81,6 +81,7 @@ Array [
   }
   .rippleContainer-d2-0-2-13 {
     overflow: hidden;
+    border-radius: 4px;
   }
   .rippleActive-d3-0-2-14 {
     animation: keyframes-ripple-0-2-10 300ms;
@@ -112,7 +113,7 @@ Array [
     content: \\" \\";
     opacity: 0;
     position: absolute;
-    background-color: #000000;
+    background-color: #111111;
   }
   .iconButtonContainer-0-2-1:hover:not([disabled]):after {
     opacity: 0.04;
@@ -134,7 +135,7 @@ Array [
     pointer-events: none;
   }
   .icon-d0-0-2-16 {
-    color: #777777;
+    color: #737373;
     font-size: 24px;
   }",
   <div>
@@ -236,14 +237,14 @@ Array [
     align-self: start;
   }
   .wrapper-d0-0-2-11:focus:after {
-    background-color: #000000;
+    background-color: #111111;
   }
   .wrapper-d0-0-2-11:hover:after {
-    background-color: #000000;
+    background-color: #111111;
     opacity: 0;
   }
   .ripple-d1-0-2-12 {
-    background-color: #000000;
+    background-color: #111111;
     height: 0;
     left: 50%;
     top: 50%;
@@ -252,6 +253,7 @@ Array [
   }
   .rippleContainer-d2-0-2-13 {
     overflow: hidden;
+    border-radius: 4px;
   }
   .rippleActive-d3-0-2-14 {
     animation: keyframes-ripple-0-2-10 300ms;
@@ -283,7 +285,7 @@ Array [
     content: \\" \\";
     opacity: 0;
     position: absolute;
-    background-color: #000000;
+    background-color: #111111;
   }
   .iconButtonContainer-0-2-1:hover:not([disabled]):after {
     opacity: 0.04;
@@ -306,7 +308,7 @@ Array [
     pointer-events: none;
   }
   .icon-d0-0-2-16 {
-    color: #333333;
+    color: #363636;
     font-size: 24px;
   }",
   <div>
@@ -408,11 +410,11 @@ Array [
   }
   .wrapper-d0-0-2-11:focus:after {  }
   .wrapper-d0-0-2-11:hover:after {
-    background-color: #000000;
+    background-color: #111111;
     opacity: 0;
   }
   .ripple-d1-0-2-12 {
-    background-color: #000000;
+    background-color: #111111;
     height: 0;
     left: 50%;
     top: 50%;
@@ -421,6 +423,7 @@ Array [
   }
   .rippleContainer-d2-0-2-13 {
     overflow: hidden;
+    border-radius: 4px;
   }
   .rippleActive-d3-0-2-14 {
     animation: keyframes-ripple-0-2-10 300ms;
@@ -452,7 +455,7 @@ Array [
     content: \\" \\";
     opacity: 0;
     position: absolute;
-    background-color: #000000;
+    background-color: #111111;
   }
   .iconButtonContainer-0-2-1:hover:not([disabled]):after {
     opacity: 0.04;
@@ -464,7 +467,7 @@ Array [
     cursor: default;
   }
   .iconButtonContainer-d0-0-2-2 {
-    background-color: #bbbbbb;
+    background-color: #8c8c8c;
     border-radius: 16px;
     width: 32px;
   }
@@ -474,7 +477,7 @@ Array [
     pointer-events: none;
   }
   .icon-d0-0-2-16 {
-    color: #777777;
+    color: #737373;
     font-size: 24px;
   }",
   <div>
@@ -576,14 +579,14 @@ Array [
     align-self: start;
   }
   .wrapper-d0-0-2-11:focus:after {
-    background-color: #000000;
+    background-color: #111111;
   }
   .wrapper-d0-0-2-11:hover:after {
-    background-color: #000000;
+    background-color: #111111;
     opacity: 0;
   }
   .ripple-d1-0-2-12 {
-    background-color: #000000;
+    background-color: #111111;
     height: 0;
     left: 50%;
     top: 50%;
@@ -592,6 +595,7 @@ Array [
   }
   .rippleContainer-d2-0-2-13 {
     overflow: hidden;
+    border-radius: 4px;
   }
   .rippleActive-d3-0-2-14 {
     animation: keyframes-ripple-0-2-10 300ms;
@@ -623,7 +627,7 @@ Array [
     content: \\" \\";
     opacity: 0;
     position: absolute;
-    background-color: #000000;
+    background-color: #111111;
   }
   .iconButtonContainer-0-2-1:hover:not([disabled]):after {
     opacity: 0.04;
@@ -635,7 +639,7 @@ Array [
     cursor: default;
   }
   .iconButtonContainer-d0-0-2-2 {
-    background-color: #000000;
+    background-color: #111111;
     border-radius: 16px;
     opacity: 0.56;
     width: 32px;
@@ -646,7 +650,7 @@ Array [
     pointer-events: none;
   }
   .icon-d0-0-2-16 {
-    color: #333333;
+    color: #363636;
     font-size: 24px;
   }",
   <div>
@@ -748,11 +752,11 @@ Array [
   }
   .wrapper-d0-0-2-11:focus:after {  }
   .wrapper-d0-0-2-11:hover:after {
-    background-color: #000000;
+    background-color: #111111;
     opacity: 0;
   }
   .ripple-d1-0-2-12 {
-    background-color: #000000;
+    background-color: #111111;
     height: 0;
     left: 50%;
     top: 50%;
@@ -761,6 +765,7 @@ Array [
   }
   .rippleContainer-d2-0-2-13 {
     overflow: hidden;
+    border-radius: 4px;
   }
   .rippleActive-d3-0-2-14 {
     animation: keyframes-ripple-0-2-10 300ms;
@@ -792,7 +797,7 @@ Array [
     content: \\" \\";
     opacity: 0;
     position: absolute;
-    background-color: #000000;
+    background-color: #111111;
   }
   .iconButtonContainer-0-2-1:hover:not([disabled]):after {
     opacity: 0.04;
@@ -804,7 +809,7 @@ Array [
     cursor: default;
   }
   .iconButtonContainer-d0-0-2-2 {
-    background-color: #000000;
+    background-color: #111111;
     border-radius: 16px;
     opacity: 0.56;
     width: 32px;
@@ -815,7 +820,7 @@ Array [
     pointer-events: none;
   }
   .icon-d0-0-2-16 {
-    color: #bbbbbb;
+    color: #8c8c8c;
     font-size: 24px;
   }",
   <div>
@@ -917,14 +922,14 @@ Array [
     align-self: start;
   }
   .wrapper-d0-0-2-11:focus:after {
-    background-color: #000000;
+    background-color: #111111;
   }
   .wrapper-d0-0-2-11:hover:after {
-    background-color: #000000;
+    background-color: #111111;
     opacity: 0;
   }
   .ripple-d1-0-2-12 {
-    background-color: #000000;
+    background-color: #111111;
     height: 0;
     left: 50%;
     top: 50%;
@@ -933,6 +938,7 @@ Array [
   }
   .rippleContainer-d2-0-2-13 {
     overflow: hidden;
+    border-radius: 4px;
   }
   .rippleActive-d3-0-2-14 {
     animation: keyframes-ripple-0-2-10 300ms;
@@ -964,7 +970,7 @@ Array [
     content: \\" \\";
     opacity: 0;
     position: absolute;
-    background-color: #000000;
+    background-color: #111111;
   }
   .iconButtonContainer-0-2-1:hover:not([disabled]):after {
     opacity: 0.04;
@@ -1087,14 +1093,14 @@ Array [
     align-self: start;
   }
   .wrapper-d0-0-2-11:focus:after {
-    background-color: #000000;
+    background-color: #111111;
   }
   .wrapper-d0-0-2-11:hover:after {
-    background-color: #000000;
+    background-color: #111111;
     opacity: 0;
   }
   .ripple-d1-0-2-12 {
-    background-color: #000000;
+    background-color: #111111;
     height: 0;
     left: 50%;
     top: 50%;
@@ -1103,6 +1109,7 @@ Array [
   }
   .rippleContainer-d2-0-2-13 {
     overflow: hidden;
+    border-radius: 4px;
   }
   .rippleActive-d3-0-2-14 {
     animation: keyframes-ripple-0-2-10 300ms;
@@ -1134,7 +1141,7 @@ Array [
     content: \\" \\";
     opacity: 0;
     position: absolute;
-    background-color: #000000;
+    background-color: #111111;
   }
   .iconButtonContainer-0-2-1:hover:not([disabled]):after {
     opacity: 0.04;
@@ -1257,14 +1264,14 @@ Array [
     align-self: start;
   }
   .wrapper-d0-0-2-11:focus:after {
-    background-color: #000000;
+    background-color: #111111;
   }
   .wrapper-d0-0-2-11:hover:after {
-    background-color: #000000;
+    background-color: #111111;
     opacity: 0;
   }
   .ripple-d1-0-2-12 {
-    background-color: #000000;
+    background-color: #111111;
     height: 0;
     left: 50%;
     top: 50%;
@@ -1273,6 +1280,7 @@ Array [
   }
   .rippleContainer-d2-0-2-13 {
     overflow: hidden;
+    border-radius: 4px;
   }
   .rippleActive-d3-0-2-14 {
     animation: keyframes-ripple-0-2-10 300ms;
@@ -1304,7 +1312,7 @@ Array [
     content: \\" \\";
     opacity: 0;
     position: absolute;
-    background-color: #000000;
+    background-color: #111111;
   }
   .iconButtonContainer-0-2-1:hover:not([disabled]):after {
     opacity: 0.04;
@@ -1326,7 +1334,7 @@ Array [
     pointer-events: none;
   }
   .icon-d0-0-2-16 {
-    color: #333333;
+    color: #363636;
     font-size: 40px;
   }",
   <div>
@@ -1427,14 +1435,14 @@ Array [
     align-self: start;
   }
   .wrapper-d0-0-2-11:focus:after {
-    background-color: #000000;
+    background-color: #111111;
   }
   .wrapper-d0-0-2-11:hover:after {
-    background-color: #000000;
+    background-color: #111111;
     opacity: 0;
   }
   .ripple-d1-0-2-12 {
-    background-color: #000000;
+    background-color: #111111;
     height: 0;
     left: 50%;
     top: 50%;
@@ -1443,6 +1451,7 @@ Array [
   }
   .rippleContainer-d2-0-2-13 {
     overflow: hidden;
+    border-radius: 4px;
   }
   .rippleActive-d3-0-2-14 {
     animation: keyframes-ripple-0-2-10 300ms;
@@ -1474,7 +1483,7 @@ Array [
     content: \\" \\";
     opacity: 0;
     position: absolute;
-    background-color: #000000;
+    background-color: #111111;
   }
   .iconButtonContainer-0-2-1:hover:not([disabled]):after {
     opacity: 0.04;
@@ -1496,7 +1505,7 @@ Array [
     pointer-events: none;
   }
   .icon-d0-0-2-16 {
-    color: #333333;
+    color: #363636;
     font-size: 32px;
   }",
   <div>
@@ -1597,14 +1606,14 @@ Array [
     align-self: start;
   }
   .wrapper-d0-0-2-11:focus:after {
-    background-color: #000000;
+    background-color: #111111;
   }
   .wrapper-d0-0-2-11:hover:after {
-    background-color: #000000;
+    background-color: #111111;
     opacity: 0;
   }
   .ripple-d1-0-2-12 {
-    background-color: #000000;
+    background-color: #111111;
     height: 0;
     left: 50%;
     top: 50%;
@@ -1613,6 +1622,7 @@ Array [
   }
   .rippleContainer-d2-0-2-13 {
     overflow: hidden;
+    border-radius: 4px;
   }
   .rippleActive-d3-0-2-14 {
     animation: keyframes-ripple-0-2-10 300ms;
@@ -1644,7 +1654,7 @@ Array [
     content: \\" \\";
     opacity: 0;
     position: absolute;
-    background-color: #000000;
+    background-color: #111111;
   }
   .iconButtonContainer-0-2-1:hover:not([disabled]):after {
     opacity: 0.04;
@@ -1666,7 +1676,7 @@ Array [
     pointer-events: none;
   }
   .icon-d0-0-2-16 {
-    color: #333333;
+    color: #363636;
     font-size: 24px;
   }",
   <div>
diff --git a/packages/react/src/components/Input/InputAction/__snapshots__/InputAction.test.tsx.snap b/packages/react/src/components/Input/InputAction/__snapshots__/InputAction.test.tsx.snap
index 0f4f648451..cfe9268fba 100644
--- a/packages/react/src/components/Input/InputAction/__snapshots__/InputAction.test.tsx.snap
+++ b/packages/react/src/components/Input/InputAction/__snapshots__/InputAction.test.tsx.snap
@@ -67,14 +67,14 @@ Array [
     align-self: start;
   }
   .wrapper-d0-0-2-16:focus:after {
-    background-color: #000000;
+    background-color: #111111;
   }
   .wrapper-d0-0-2-16:hover:after {
-    background-color: #000000;
+    background-color: #111111;
     opacity: 0;
   }
   .ripple-d1-0-2-17 {
-    background-color: #000000;
+    background-color: #111111;
     height: 0;
     left: 50%;
     top: 50%;
@@ -83,6 +83,7 @@ Array [
   }
   .rippleContainer-d2-0-2-18 {
     overflow: hidden;
+    border-radius: 4px;
   }
   .rippleActive-d3-0-2-19 {
     animation: keyframes-ripple-0-2-15 300ms;
@@ -114,7 +115,7 @@ Array [
     content: \\" \\";
     opacity: 0;
     position: absolute;
-    background-color: #000000;
+    background-color: #111111;
   }
   .iconButtonContainer-0-2-6:hover:not([disabled]):after {
     opacity: 0.04;
@@ -152,7 +153,7 @@ Array [
     pointer-events: none;
   }
   .icon-d0-0-2-21 {
-    color: #333333;
+    color: #363636;
     font-size: 24px;
   }",
   <div>
diff --git a/packages/react/src/components/Input/InputHelperText/__snapshots__/InputHelperText.test.tsx.snap b/packages/react/src/components/Input/InputHelperText/__snapshots__/InputHelperText.test.tsx.snap
index 4cb123c953..35d46d1d92 100644
--- a/packages/react/src/components/Input/InputHelperText/__snapshots__/InputHelperText.test.tsx.snap
+++ b/packages/react/src/components/Input/InputHelperText/__snapshots__/InputHelperText.test.tsx.snap
@@ -15,7 +15,7 @@ Array [
 }
 .helperText-0-2-1 > i {}
 .helperText-d0-0-2-2 {
-  color: #777777;
+  color: #737373;
 }
 .helperText-d0-0-2-2 > i {}",
   <div>
diff --git a/packages/react/src/components/Input/__snapshots__/Input.test.tsx.snap b/packages/react/src/components/Input/__snapshots__/Input.test.tsx.snap
index c94b219a12..48eb0e2b6b 100644
--- a/packages/react/src/components/Input/__snapshots__/Input.test.tsx.snap
+++ b/packages/react/src/components/Input/__snapshots__/Input.test.tsx.snap
@@ -23,7 +23,7 @@ Array [
   content: \\"\\";
   position: absolute;
   pointer-events: none;
-  background-color: #bbbbbb;
+  background-color: #8c8c8c;
 }
 .leadinContainer-0-2-2 {
   display: flex;
@@ -33,7 +33,7 @@ Array [
   justify-content: center;
 }
 .base-0-2-3 {
-  color: #333333;
+  color: #363636;
   width: 100%;
   border: none;
   outline: none;
@@ -49,11 +49,11 @@ Array [
   pointer-events: none;
 }
 .base-0-2-3:disabled {
-  color: #bbbbbb;
+  color: #8c8c8c;
   cursor: default;
 }
 .input-0-2-4 {
-  color: #333333;
+  color: #363636;
   width: 100%;
   border: none;
   outline: none;
@@ -70,12 +70,12 @@ Array [
   pointer-events: none;
 }
 .input-0-2-4:disabled {
-  color: #bbbbbb;
+  color: #8c8c8c;
   cursor: default;
 }
 .input-0-2-4::placeholder {}
 .textArea-0-2-5 {
-  color: #333333;
+  color: #363636;
   width: 100%;
   border: none;
   outline: none;
@@ -91,16 +91,16 @@ Array [
   pointer-events: none;
 }
 .textArea-0-2-5:disabled {
-  color: #bbbbbb;
+  color: #8c8c8c;
   cursor: default;
 }
 .textArea-0-2-5::placeholder {}
 .wrapper-d0-0-2-6 {
-  border-color: #bbbbbb;
+  border-color: #8c8c8c;
   cursor: text;
 }
 .wrapper-d0-0-2-6:hover {
-  border-color: #777777;
+  border-color: #737373;
 }
 .wrapper-d0-0-2-6:focus-within {
   border-color: #f4ab34;
@@ -112,13 +112,13 @@ Array [
   height: 56px;
 }
 .input-d1-0-2-7::placeholder {
-  color: #777777;
+  color: #737373;
 }
 .textArea-d2-0-2-8 {
   resize: none;
 }
 .textArea-d2-0-2-8::placeholder {
-  color: #777777;
+  color: #737373;
 }",
   <div>
     <div
@@ -158,7 +158,7 @@ Array [
   content: \\"\\";
   position: absolute;
   pointer-events: none;
-  background-color: #bbbbbb;
+  background-color: #8c8c8c;
 }
 .leadinContainer-0-2-2 {
   display: flex;
@@ -168,7 +168,7 @@ Array [
   justify-content: center;
 }
 .base-0-2-3 {
-  color: #333333;
+  color: #363636;
   width: 100%;
   border: none;
   outline: none;
@@ -184,11 +184,11 @@ Array [
   pointer-events: none;
 }
 .base-0-2-3:disabled {
-  color: #bbbbbb;
+  color: #8c8c8c;
   cursor: default;
 }
 .input-0-2-4 {
-  color: #333333;
+  color: #363636;
   width: 100%;
   border: none;
   outline: none;
@@ -205,12 +205,12 @@ Array [
   pointer-events: none;
 }
 .input-0-2-4:disabled {
-  color: #bbbbbb;
+  color: #8c8c8c;
   cursor: default;
 }
 .input-0-2-4::placeholder {}
 .textArea-0-2-5 {
-  color: #333333;
+  color: #363636;
   width: 100%;
   border: none;
   outline: none;
@@ -226,16 +226,16 @@ Array [
   pointer-events: none;
 }
 .textArea-0-2-5:disabled {
-  color: #bbbbbb;
+  color: #8c8c8c;
   cursor: default;
 }
 .textArea-0-2-5::placeholder {}
 .wrapper-d0-0-2-6 {
-  border-color: #bbbbbb;
+  border-color: #8c8c8c;
   cursor: text;
 }
 .wrapper-d0-0-2-6:hover {
-  border-color: #777777;
+  border-color: #737373;
 }
 .wrapper-d0-0-2-6:focus-within {
   border-color: #f4ab34;
@@ -247,13 +247,13 @@ Array [
   height: 56px;
 }
 .input-d1-0-2-7::placeholder {
-  color: #777777;
+  color: #737373;
 }
 .textArea-d2-0-2-8 {
   resize: none;
 }
 .textArea-d2-0-2-8::placeholder {
-  color: #777777;
+  color: #737373;
 }",
   <div>
     <div
diff --git a/packages/react/src/components/Link/__snapshots__/Link.test.tsx.snap b/packages/react/src/components/Link/__snapshots__/Link.test.tsx.snap
index 8851f14bbd..965335b0a6 100644
--- a/packages/react/src/components/Link/__snapshots__/Link.test.tsx.snap
+++ b/packages/react/src/components/Link/__snapshots__/Link.test.tsx.snap
@@ -20,7 +20,7 @@ Array [
   flex-direction: row;
 }
 .link-d1-0-2-4 {
-  color: #bbbbbb;
+  color: #8c8c8c;
   text-decoration: underline;
   margin-right: 8px;
 }
@@ -117,7 +117,7 @@ Array [
   pointer-events: none;
 }
 .icon-d0-0-2-6 {
-  color: #000000;
+  color: #111111;
   font-size: 24px;
 }",
   <div>
@@ -174,7 +174,7 @@ Array [
   pointer-events: none;
 }
 .icon-d0-0-2-6 {
-  color: #000000;
+  color: #111111;
   font-size: 24px;
 }",
   <div>
diff --git a/packages/react/src/components/ListItem/__snapshots__/ListItem.test.tsx.snap b/packages/react/src/components/ListItem/__snapshots__/ListItem.test.tsx.snap
index a1b73e20a8..cee75f1a7c 100644
--- a/packages/react/src/components/ListItem/__snapshots__/ListItem.test.tsx.snap
+++ b/packages/react/src/components/ListItem/__snapshots__/ListItem.test.tsx.snap
@@ -69,11 +69,11 @@ Array [
   }
   .wrapper-d0-0-2-9:focus:after {  }
   .wrapper-d0-0-2-9:hover:after {
-    background-color: #000000;
+    background-color: #111111;
     opacity: 0;
   }
   .ripple-d1-0-2-10 {
-    background-color: #000000;
+    background-color: #111111;
     height: 0;
     left: 0;
     top: 0;
@@ -82,6 +82,7 @@ Array [
   }
   .rippleContainer-d2-0-2-11 {
     overflow: hidden;
+    border-radius: 4px;
   }
   .rippleActive-d3-0-2-12 {
     animation: keyframes-ripple-0-2-8 300ms;
@@ -112,14 +113,14 @@ Array [
   .listItem-0-2-1:focus:after {  }
   .listItem-d0-0-2-2 {  }
   .listItem-d0-0-2-2:after {
-    background-color: #000000;
+    background-color: #111111;
     opacity: 0;
   }
   .listItem-d0-0-2-2:hover:after {
     background-color: transparent;
   }
   .listItem-d0-0-2-2:focus:after {
-    background-color: #000000;
+    background-color: #111111;
     opacity: 0;
   }",
   <div>
@@ -216,11 +217,11 @@ Array [
   }
   .wrapper-d0-0-2-9:focus:after {  }
   .wrapper-d0-0-2-9:hover:after {
-    background-color: #000000;
+    background-color: #111111;
     opacity: 0;
   }
   .ripple-d1-0-2-10 {
-    background-color: #000000;
+    background-color: #111111;
     height: 0;
     left: 0;
     top: 0;
@@ -229,6 +230,7 @@ Array [
   }
   .rippleContainer-d2-0-2-11 {
     overflow: hidden;
+    border-radius: 4px;
   }
   .rippleActive-d3-0-2-12 {
     animation: keyframes-ripple-0-2-8 300ms;
@@ -265,7 +267,7 @@ Array [
     opacity: 0.16;
   }
   .listItem-d0-0-2-2:hover:after {
-    background-color: #000000;
+    background-color: #111111;
   }
   .listItem-d0-0-2-2:focus:after {
     background-color: #f4ab34;
@@ -365,11 +367,11 @@ Array [
   }
   .wrapper-d0-0-2-9:focus:after {  }
   .wrapper-d0-0-2-9:hover:after {
-    background-color: #000000;
+    background-color: #111111;
     opacity: 0;
   }
   .ripple-d1-0-2-10 {
-    background-color: #000000;
+    background-color: #111111;
     height: 0;
     left: 0;
     top: 0;
@@ -378,6 +380,7 @@ Array [
   }
   .rippleContainer-d2-0-2-11 {
     overflow: hidden;
+    border-radius: 4px;
   }
   .rippleActive-d3-0-2-12 {
     animation: keyframes-ripple-0-2-8 300ms;
@@ -408,14 +411,14 @@ Array [
   .listItem-0-2-1:focus:after {  }
   .listItem-d0-0-2-2 {  }
   .listItem-d0-0-2-2:after {
-    background-color: #000000;
+    background-color: #111111;
     opacity: 0;
   }
   .listItem-d0-0-2-2:hover:after {
     background-color: transparent;
   }
   .listItem-d0-0-2-2:focus:after {
-    background-color: #000000;
+    background-color: #111111;
     opacity: 0;
   }
   .divider-0-2-13 {
@@ -423,7 +426,7 @@ Array [
     height: 1px;
     margin-top: 0;
     margin-bottom: 0;
-    background-color: #bbbbbb;
+    background-color: #8c8c8c;
   }
   .divider-d0-0-2-14 {
     margin-right: 0;
diff --git a/packages/react/src/components/MenuItem/__snapshots__/MenuItem.test.tsx.snap b/packages/react/src/components/MenuItem/__snapshots__/MenuItem.test.tsx.snap
index 4fbd14056e..c7155c733c 100644
--- a/packages/react/src/components/MenuItem/__snapshots__/MenuItem.test.tsx.snap
+++ b/packages/react/src/components/MenuItem/__snapshots__/MenuItem.test.tsx.snap
@@ -18,17 +18,17 @@ Array [
 .menuItem-0-2-2:focus {}
 .menuItem-d0-0-2-3 {
   border-left: none;
-  background-color: #00000009;
+  background-color: #11111109;
   font-size: 16px;
   font-weight: 400;
   letter-spacing: 0.51px;
   line-height: 1.5;
 }
 .menuItem-d0-0-2-3:hover {
-  background-color: #00000009;
+  background-color: #11111109;
 }
 .menuItem-d0-0-2-3:focus {
-  background-color: #00000029;
+  background-color: #11111129;
 }
 .sharedRippleEffect-0-2-4 {
   top: 0;
@@ -96,14 +96,14 @@ Array [
     align-self: stretch;
   }
   .wrapper-d0-0-2-10:focus:after {
-    background-color: #000000;
+    background-color: #111111;
   }
   .wrapper-d0-0-2-10:hover:after {
-    background-color: #000000;
+    background-color: #111111;
     opacity: 0;
   }
   .ripple-d1-0-2-11 {
-    background-color: #000000;
+    background-color: #111111;
     height: 0;
     left: 0;
     top: 0;
@@ -112,6 +112,7 @@ Array [
   }
   .rippleContainer-d2-0-2-12 {
     overflow: hidden;
+    border-radius: 4px;
   }
   .rippleActive-d3-0-2-13 {
     animation: keyframes-ripple-0-2-9 300ms;
@@ -171,10 +172,10 @@ Array [
   line-height: 1.5;
 }
 .menuItem-d0-0-2-3:hover {
-  background-color: #00000009;
+  background-color: #11111109;
 }
 .menuItem-d0-0-2-3:focus {
-  background-color: #00000029;
+  background-color: #11111129;
 }
 .sharedRippleEffect-0-2-4 {
   top: 0;
@@ -242,14 +243,14 @@ Array [
     align-self: stretch;
   }
   .wrapper-d0-0-2-10:focus:after {
-    background-color: #000000;
+    background-color: #111111;
   }
   .wrapper-d0-0-2-10:hover:after {
-    background-color: #000000;
+    background-color: #111111;
     opacity: 0;
   }
   .ripple-d1-0-2-11 {
-    background-color: #000000;
+    background-color: #111111;
     height: 0;
     left: 0;
     top: 0;
@@ -258,6 +259,7 @@ Array [
   }
   .rippleContainer-d2-0-2-12 {
     overflow: hidden;
+    border-radius: 4px;
   }
   .rippleActive-d3-0-2-13 {
     animation: keyframes-ripple-0-2-9 300ms;
@@ -311,7 +313,7 @@ Array [
 .menuItem-d0-0-2-3 {
   border-left: none;
   background-color: transparent;
-  color: #bbbbbb;
+  color: #8c8c8c;
   cursor: default;
   font-size: 16px;
   font-weight: 400;
@@ -391,11 +393,11 @@ Array [
   }
   .wrapper-d0-0-2-10:focus:after {  }
   .wrapper-d0-0-2-10:hover:after {
-    background-color: #000000;
+    background-color: #111111;
     opacity: 0;
   }
   .ripple-d1-0-2-11 {
-    background-color: #000000;
+    background-color: #111111;
     height: 0;
     left: 0;
     top: 0;
@@ -404,6 +406,7 @@ Array [
   }
   .rippleContainer-d2-0-2-12 {
     overflow: hidden;
+    border-radius: 4px;
   }
   .rippleActive-d3-0-2-13 {
     animation: keyframes-ripple-0-2-9 300ms;
@@ -463,10 +466,10 @@ Array [
   line-height: 1.5;
 }
 .menuItem-d0-0-2-3:hover {
-  background-color: #00000009;
+  background-color: #11111109;
 }
 .menuItem-d0-0-2-3:focus {
-  background-color: #00000029;
+  background-color: #11111129;
 }
 .sharedRippleEffect-0-2-4 {
   top: 0;
@@ -534,14 +537,14 @@ Array [
     align-self: stretch;
   }
   .wrapper-d0-0-2-10:focus:after {
-    background-color: #000000;
+    background-color: #111111;
   }
   .wrapper-d0-0-2-10:hover:after {
-    background-color: #000000;
+    background-color: #111111;
     opacity: 0;
   }
   .ripple-d1-0-2-11 {
-    background-color: #000000;
+    background-color: #111111;
     height: 0;
     left: 0;
     top: 0;
@@ -550,6 +553,7 @@ Array [
   }
   .rippleContainer-d2-0-2-12 {
     overflow: hidden;
+    border-radius: 4px;
   }
   .rippleActive-d3-0-2-13 {
     animation: keyframes-ripple-0-2-9 300ms;
@@ -601,7 +605,7 @@ Array [
 .menuItem-0-2-2:hover {}
 .menuItem-0-2-2:focus {}
 .menuItem-d0-0-2-3 {
-  border-left: 1px solid #bbbbbb;
+  border-left: 1px solid #8c8c8c;
   background-color: transparent;
   font-size: 16px;
   font-weight: 400;
@@ -609,10 +613,10 @@ Array [
   line-height: 1.5;
 }
 .menuItem-d0-0-2-3:hover {
-  background-color: #00000009;
+  background-color: #11111109;
 }
 .menuItem-d0-0-2-3:focus {
-  background-color: #00000029;
+  background-color: #11111129;
 }
 .sharedRippleEffect-0-2-4 {
   top: 0;
@@ -680,14 +684,14 @@ Array [
     align-self: stretch;
   }
   .wrapper-d0-0-2-10:focus:after {
-    background-color: #000000;
+    background-color: #111111;
   }
   .wrapper-d0-0-2-10:hover:after {
-    background-color: #000000;
+    background-color: #111111;
     opacity: 0;
   }
   .ripple-d1-0-2-11 {
-    background-color: #000000;
+    background-color: #111111;
     height: 0;
     left: 0;
     top: 0;
@@ -696,6 +700,7 @@ Array [
   }
   .rippleContainer-d2-0-2-12 {
     overflow: hidden;
+    border-radius: 4px;
   }
   .rippleActive-d3-0-2-13 {
     animation: keyframes-ripple-0-2-9 300ms;
@@ -755,10 +760,10 @@ Array [
   line-height: 1.5;
 }
 .menuItem-d0-0-2-3:hover {
-  background-color: #00000009;
+  background-color: #11111109;
 }
 .menuItem-d0-0-2-3:focus {
-  background-color: #00000029;
+  background-color: #11111129;
 }
 .sharedRippleEffect-0-2-4 {
   top: 0;
@@ -826,14 +831,14 @@ Array [
     align-self: stretch;
   }
   .wrapper-d0-0-2-10:focus:after {
-    background-color: #000000;
+    background-color: #111111;
   }
   .wrapper-d0-0-2-10:hover:after {
-    background-color: #000000;
+    background-color: #111111;
     opacity: 0;
   }
   .ripple-d1-0-2-11 {
-    background-color: #000000;
+    background-color: #111111;
     height: 0;
     left: 0;
     top: 0;
@@ -842,6 +847,7 @@ Array [
   }
   .rippleContainer-d2-0-2-12 {
     overflow: hidden;
+    border-radius: 4px;
   }
   .rippleActive-d3-0-2-13 {
     animation: keyframes-ripple-0-2-9 300ms;
diff --git a/packages/react/src/components/RadioButton/__snapshots__/RadioButton.test.tsx.snap b/packages/react/src/components/RadioButton/__snapshots__/RadioButton.test.tsx.snap
index 41ca9d20b5..f52bacdc22 100644
--- a/packages/react/src/components/RadioButton/__snapshots__/RadioButton.test.tsx.snap
+++ b/packages/react/src/components/RadioButton/__snapshots__/RadioButton.test.tsx.snap
@@ -81,7 +81,9 @@ Array [
     transition: scale opacity 500ms;
     width: 0;
   }
-  .rippleContainer-d2-0-2-15 {  }
+  .rippleContainer-d2-0-2-15 {
+    border-radius: 4px;
+  }
   .rippleActive-d3-0-2-16 {
     animation: keyframes-ripple-0-2-12 500ms;
   }
@@ -94,7 +96,7 @@ Array [
   }
   .radioButton-0-2-2 {
     width: 18px;
-    border: 2px solid #777777;
+    border: 2px solid #737373;
     cursor: pointer;
     height: 18px;
     margin: 0;
@@ -107,7 +109,7 @@ Array [
     outline: none;
   }
   .radioButton-0-2-2:disabled {
-    border: 2px solid #bbbbbb;
+    border: 2px solid #8c8c8c;
     cursor: default;
   }
   .radioButton-0-2-2:checked {
@@ -127,7 +129,7 @@ Array [
     border-radius: 50%;
   }
   .radioButton-0-2-2:checked:disabled {
-    border: 2px solid #bbbbbb;
+    border: 2px solid #8c8c8c;
   }
   .container-0-2-3 {
     display: flex;
@@ -148,7 +150,7 @@ Array [
     background-color: #f4ab34;
   }
   .labelText-d1-0-2-6 {
-    color: #333333;
+    color: #363636;
   }",
   Object {
     "asFragment": [Function],
@@ -341,18 +343,20 @@ Array [
   }
   .wrapper-d0-0-2-13:focus:after {  }
   .wrapper-d0-0-2-13:hover:after {
-    background-color: #000000;
+    background-color: #111111;
     opacity: 0;
   }
   .ripple-d1-0-2-14 {
-    background-color: #000000;
+    background-color: #111111;
     height: 0;
     left: 50%;
     top: 50%;
     transition: scale opacity 500ms;
     width: 0;
   }
-  .rippleContainer-d2-0-2-15 {  }
+  .rippleContainer-d2-0-2-15 {
+    border-radius: 4px;
+  }
   .rippleActive-d3-0-2-16 {
     animation: keyframes-ripple-0-2-12 500ms;
   }
@@ -365,7 +369,7 @@ Array [
   }
   .radioButton-0-2-2 {
     width: 18px;
-    border: 2px solid #777777;
+    border: 2px solid #737373;
     cursor: pointer;
     height: 18px;
     margin: 0;
@@ -378,7 +382,7 @@ Array [
     outline: none;
   }
   .radioButton-0-2-2:disabled {
-    border: 2px solid #bbbbbb;
+    border: 2px solid #8c8c8c;
     cursor: default;
   }
   .radioButton-0-2-2:checked {
@@ -398,7 +402,7 @@ Array [
     border-radius: 50%;
   }
   .radioButton-0-2-2:checked:disabled {
-    border: 2px solid #bbbbbb;
+    border: 2px solid #8c8c8c;
   }
   .container-0-2-3 {
     display: flex;
@@ -416,10 +420,10 @@ Array [
     border: 2px solid #f4ab34;
   }
   .radioButton-d0-0-2-5:checked:after {
-    background-color: #bbbbbb;
+    background-color: #8c8c8c;
   }
   .labelText-d1-0-2-6 {
-    color: #bbbbbb;
+    color: #8c8c8c;
   }",
   <div>
     <div
@@ -523,21 +527,23 @@ Array [
     align-self: start;
   }
   .wrapper-d0-0-2-13:focus:after {
-    background-color: #000000;
+    background-color: #111111;
   }
   .wrapper-d0-0-2-13:hover:after {
-    background-color: #000000;
+    background-color: #111111;
     opacity: 0.16;
   }
   .ripple-d1-0-2-14 {
-    background-color: #000000;
+    background-color: #111111;
     height: 0;
     left: 50%;
     top: 50%;
     transition: scale opacity 500ms;
     width: 0;
   }
-  .rippleContainer-d2-0-2-15 {  }
+  .rippleContainer-d2-0-2-15 {
+    border-radius: 4px;
+  }
   .rippleActive-d3-0-2-16 {
     animation: keyframes-ripple-0-2-12 500ms;
   }
@@ -550,7 +556,7 @@ Array [
   }
   .radioButton-0-2-2 {
     width: 18px;
-    border: 2px solid #777777;
+    border: 2px solid #737373;
     cursor: pointer;
     height: 18px;
     margin: 0;
@@ -563,7 +569,7 @@ Array [
     outline: none;
   }
   .radioButton-0-2-2:disabled {
-    border: 2px solid #bbbbbb;
+    border: 2px solid #8c8c8c;
     cursor: default;
   }
   .radioButton-0-2-2:checked {
@@ -583,7 +589,7 @@ Array [
     border-radius: 50%;
   }
   .radioButton-0-2-2:checked:disabled {
-    border: 2px solid #bbbbbb;
+    border: 2px solid #8c8c8c;
   }
   .container-0-2-3 {
     display: flex;
@@ -604,7 +610,7 @@ Array [
     background-color: #f4ab34;
   }
   .labelText-d1-0-2-6 {
-    color: #333333;
+    color: #363636;
   }",
   <div>
     <div
@@ -707,26 +713,28 @@ Array [
     align-self: start;
   }
   .wrapper-d0-0-2-13:focus:after {
-    background-color: #000000;
+    background-color: #111111;
   }
   .wrapper-d0-0-2-13:hover:after {
-    background-color: #000000;
+    background-color: #111111;
     opacity: 0.16;
   }
   .ripple-d1-0-2-14 {
-    background-color: #000000;
+    background-color: #111111;
     height: 0;
     left: 50%;
     top: 50%;
     transition: scale opacity 500ms;
     width: 0;
   }
-  .rippleContainer-d2-0-2-15 {  }
+  .rippleContainer-d2-0-2-15 {
+    border-radius: 4px;
+  }
   .rippleActive-d3-0-2-16 {
     animation: keyframes-ripple-0-2-12 500ms;
   }
   .labelContainer-0-2-17 {
-    color: #000000;
+    color: #111111;
     font-family: \\"Roboto\\", Arial;
   }
   .wrapper-0-2-1 {
@@ -738,7 +746,7 @@ Array [
   }
   .radioButton-0-2-2 {
     width: 18px;
-    border: 2px solid #777777;
+    border: 2px solid #737373;
     cursor: pointer;
     height: 18px;
     margin: 0;
@@ -751,7 +759,7 @@ Array [
     outline: none;
   }
   .radioButton-0-2-2:disabled {
-    border: 2px solid #bbbbbb;
+    border: 2px solid #8c8c8c;
     cursor: default;
   }
   .radioButton-0-2-2:checked {
@@ -771,7 +779,7 @@ Array [
     border-radius: 50%;
   }
   .radioButton-0-2-2:checked:disabled {
-    border: 2px solid #bbbbbb;
+    border: 2px solid #8c8c8c;
   }
   .container-0-2-3 {
     display: flex;
@@ -792,7 +800,7 @@ Array [
     background-color: #f4ab34;
   }
   .labelText-d1-0-2-6 {
-    color: #333333;
+    color: #363636;
   }",
   <div>
     <div
diff --git a/packages/react/src/components/Rating/Rating.test.tsx b/packages/react/src/components/Rating/Rating.test.tsx
index bfe52cbf21..a0e5bec50a 100644
--- a/packages/react/src/components/Rating/Rating.test.tsx
+++ b/packages/react/src/components/Rating/Rating.test.tsx
@@ -1,10 +1,11 @@
 /* eslint-disable @typescript-eslint/ban-ts-comment */
 /* eslint-disable max-lines-per-function */
 import React from 'react'
+import { natura } from '@naturacosmeticos/natds-themes'
 import { fireEvent, waitFor } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import RatingBase from './RatingBase'
-import mockTheme from '../../ThemeProvider/mock-theme.json'
+// import mockTheme from '../../ThemeProvider/mock-theme.json'
 import renderWithTheme from '../../helpers/renderWithTheme'
 import {
   BaseComponentProps,
@@ -253,7 +254,7 @@ describe('RatingBase', () => {
   })
   describe('getRatingColor', () => {
     it('should return to hex color when icon is activated, filled and not disabled', () => {
-      const result = getRatingColor(mockTheme)({
+      const result = getRatingColor(natura.light)({
         iconFilled: true,
         iconActive: true,
         disabled: false,
@@ -267,7 +268,7 @@ describe('RatingBase', () => {
     })
 
     it('should return to mediumEmphasis color when icon is disabled', () => {
-      const result = getRatingColor(mockTheme)({
+      const result = getRatingColor(natura.light)({
         iconFilled: true,
         iconActive: true,
         disabled: true,
@@ -277,7 +278,7 @@ describe('RatingBase', () => {
         size: 'semi'
       })
 
-      expect(result).toBe('#777777')
+      expect(result).toBe('#737373')
     })
   })
 })
diff --git a/packages/react/src/components/Rating/__snapshots__/Rating.test.tsx.snap b/packages/react/src/components/Rating/__snapshots__/Rating.test.tsx.snap
index 57cbe5dea8..38f795fc50 100644
--- a/packages/react/src/components/Rating/__snapshots__/Rating.test.tsx.snap
+++ b/packages/react/src/components/Rating/__snapshots__/Rating.test.tsx.snap
@@ -8,7 +8,7 @@ Array [
   pointer-events: none;
 }
 .icon-d0-0-2-23 {
-  color: #000000;
+  color: #111111;
   font-size: 32px;
 }
 .sharedRippleEffect-0-2-12 {
@@ -77,11 +77,11 @@ Array [
   }
   .wrapper-d0-0-2-18:focus:after {  }
   .wrapper-d0-0-2-18:hover:after {
-    background-color: #000000;
+    background-color: #111111;
     opacity: 0;
   }
   .ripple-d1-0-2-19 {
-    background-color: #000000;
+    background-color: #111111;
     height: 0;
     left: 50%;
     top: 50%;
@@ -90,6 +90,7 @@ Array [
   }
   .rippleContainer-d2-0-2-20 {
     overflow: hidden;
+    border-radius: 4px;
   }
   .rippleActive-d3-0-2-21 {
     animation: keyframes-ripple-0-2-17 300ms;
@@ -125,7 +126,7 @@ Array [
     opacity: 0;
     position: absolute;
     border-radius: 50%;
-    background-color: #000000;
+    background-color: #111111;
   }
   .ratingIcon-0-2-8:hover:not([disabled]):after {
     opacity: 0.04;
@@ -150,7 +151,7 @@ Array [
     order: 1;
   }
   .labelText-0-2-3 {
-    color: #777777;
+    color: #737373;
   }
   .labelText-d0-0-2-4 {
     font-family: Roboto, Arial;
@@ -166,7 +167,7 @@ Array [
     order: 2;
   }
   .labelContainer-0-2-24 {
-    color: #000000;
+    color: #111111;
     font-family: \\"Roboto\\", Arial;
   }",
   <div>
@@ -229,7 +230,7 @@ Array [
   pointer-events: none;
 }
 .icon-d0-0-2-23 {
-  color: #000000;
+  color: #111111;
   font-size: 32px;
 }
 .sharedRippleEffect-0-2-12 {
@@ -298,11 +299,11 @@ Array [
   }
   .wrapper-d0-0-2-18:focus:after {  }
   .wrapper-d0-0-2-18:hover:after {
-    background-color: #000000;
+    background-color: #111111;
     opacity: 0;
   }
   .ripple-d1-0-2-19 {
-    background-color: #000000;
+    background-color: #111111;
     height: 0;
     left: 50%;
     top: 50%;
@@ -311,6 +312,7 @@ Array [
   }
   .rippleContainer-d2-0-2-20 {
     overflow: hidden;
+    border-radius: 4px;
   }
   .rippleActive-d3-0-2-21 {
     animation: keyframes-ripple-0-2-17 300ms;
@@ -346,7 +348,7 @@ Array [
     opacity: 0;
     position: absolute;
     border-radius: 50%;
-    background-color: #000000;
+    background-color: #111111;
   }
   .ratingIcon-0-2-8:hover:not([disabled]):after {
     opacity: 0.04;
@@ -371,7 +373,7 @@ Array [
     order: 2;
   }
   .labelText-0-2-3 {
-    color: #777777;
+    color: #737373;
   }
   .labelText-d0-0-2-4 {
     font-family: Roboto, Arial;
@@ -387,7 +389,7 @@ Array [
     order: 2;
   }
   .labelContainer-0-2-24 {
-    color: #000000;
+    color: #111111;
     font-family: \\"Roboto\\", Arial;
   }",
   <div>
@@ -450,23 +452,23 @@ Array [
   pointer-events: none;
 }
 .icon-d0-0-2-23 {
-  color: #000000;
+  color: #111111;
   font-size: 32px;
 }
 .icon-d1-0-2-30 {
-  color: #000000;
+  color: #111111;
   font-size: 32px;
 }
 .icon-d2-0-2-37 {
-  color: #000000;
+  color: #111111;
   font-size: 32px;
 }
 .icon-d3-0-2-44 {
-  color: #000000;
+  color: #111111;
   font-size: 32px;
 }
 .icon-d4-0-2-51 {
-  color: #000000;
+  color: #111111;
   font-size: 32px;
 }
 .sharedRippleEffect-0-2-12 {
@@ -534,14 +536,14 @@ Array [
     align-self: start;
   }
   .wrapper-d0-0-2-18:focus:after {
-    background-color: #000000;
+    background-color: #111111;
   }
   .wrapper-d0-0-2-18:hover:after {
-    background-color: #000000;
+    background-color: #111111;
     opacity: 0;
   }
   .ripple-d1-0-2-19 {
-    background-color: #000000;
+    background-color: #111111;
     height: 0;
     left: 50%;
     top: 50%;
@@ -550,6 +552,7 @@ Array [
   }
   .rippleContainer-d2-0-2-20 {
     overflow: hidden;
+    border-radius: 4px;
   }
   .rippleActive-d3-0-2-21 {
     animation: keyframes-ripple-0-2-17 300ms;
@@ -560,14 +563,14 @@ Array [
     align-self: start;
   }
   .wrapper-d4-0-2-26:focus:after {
-    background-color: #000000;
+    background-color: #111111;
   }
   .wrapper-d4-0-2-26:hover:after {
-    background-color: #000000;
+    background-color: #111111;
     opacity: 0;
   }
   .ripple-d5-0-2-27 {
-    background-color: #000000;
+    background-color: #111111;
     height: 0;
     left: 50%;
     top: 50%;
@@ -576,6 +579,7 @@ Array [
   }
   .rippleContainer-d6-0-2-28 {
     overflow: hidden;
+    border-radius: 4px;
   }
   .rippleActive-d7-0-2-29 {
     animation: keyframes-ripple-0-2-17 300ms;
@@ -586,14 +590,14 @@ Array [
     align-self: start;
   }
   .wrapper-d8-0-2-33:focus:after {
-    background-color: #000000;
+    background-color: #111111;
   }
   .wrapper-d8-0-2-33:hover:after {
-    background-color: #000000;
+    background-color: #111111;
     opacity: 0;
   }
   .ripple-d9-0-2-34 {
-    background-color: #000000;
+    background-color: #111111;
     height: 0;
     left: 50%;
     top: 50%;
@@ -602,6 +606,7 @@ Array [
   }
   .rippleContainer-d10-0-2-35 {
     overflow: hidden;
+    border-radius: 4px;
   }
   .rippleActive-d11-0-2-36 {
     animation: keyframes-ripple-0-2-17 300ms;
@@ -612,14 +617,14 @@ Array [
     align-self: start;
   }
   .wrapper-d12-0-2-40:focus:after {
-    background-color: #000000;
+    background-color: #111111;
   }
   .wrapper-d12-0-2-40:hover:after {
-    background-color: #000000;
+    background-color: #111111;
     opacity: 0;
   }
   .ripple-d13-0-2-41 {
-    background-color: #000000;
+    background-color: #111111;
     height: 0;
     left: 50%;
     top: 50%;
@@ -628,6 +633,7 @@ Array [
   }
   .rippleContainer-d14-0-2-42 {
     overflow: hidden;
+    border-radius: 4px;
   }
   .rippleActive-d15-0-2-43 {
     animation: keyframes-ripple-0-2-17 300ms;
@@ -638,14 +644,14 @@ Array [
     align-self: start;
   }
   .wrapper-d16-0-2-47:focus:after {
-    background-color: #000000;
+    background-color: #111111;
   }
   .wrapper-d16-0-2-47:hover:after {
-    background-color: #000000;
+    background-color: #111111;
     opacity: 0;
   }
   .ripple-d17-0-2-48 {
-    background-color: #000000;
+    background-color: #111111;
     height: 0;
     left: 50%;
     top: 50%;
@@ -654,6 +660,7 @@ Array [
   }
   .rippleContainer-d18-0-2-49 {
     overflow: hidden;
+    border-radius: 4px;
   }
   .rippleActive-d19-0-2-50 {
     animation: keyframes-ripple-0-2-17 300ms;
@@ -705,7 +712,7 @@ Array [
     opacity: 0;
     position: absolute;
     border-radius: 50%;
-    background-color: #000000;
+    background-color: #111111;
   }
   .ratingIcon-0-2-8:hover:not([disabled]):after {
     opacity: 0.04;
@@ -717,27 +724,27 @@ Array [
   .ratingIcon-d0-0-2-9 {  }
   .ratingIcon-d0-0-2-9 > i {
     cursor: pointer;
-    color: #777777;
+    color: #737373;
   }
   .ratingIcon-d1-0-2-24 {  }
   .ratingIcon-d1-0-2-24 > i {
     cursor: pointer;
-    color: #777777;
+    color: #737373;
   }
   .ratingIcon-d2-0-2-31 {  }
   .ratingIcon-d2-0-2-31 > i {
     cursor: pointer;
-    color: #777777;
+    color: #737373;
   }
   .ratingIcon-d3-0-2-38 {  }
   .ratingIcon-d3-0-2-38 > i {
     cursor: pointer;
-    color: #777777;
+    color: #737373;
   }
   .ratingIcon-d4-0-2-45 {  }
   .ratingIcon-d4-0-2-45 > i {
     cursor: pointer;
-    color: #777777;
+    color: #737373;
   }
   .container-0-2-1 {
     display: flex;
@@ -751,7 +758,7 @@ Array [
     order: 1;
   }
   .labelText-0-2-3 {
-    color: #777777;
+    color: #737373;
   }
   .labelText-d0-0-2-4 {
     font-family: Roboto, Arial;
@@ -765,7 +772,7 @@ Array [
   }
   .rating-d0-0-2-6 {  }
   .labelContainer-0-2-52 {
-    color: #000000;
+    color: #111111;
     font-family: \\"Roboto\\", Arial;
   }",
   <div>
@@ -959,23 +966,23 @@ Array [
   pointer-events: none;
 }
 .icon-d0-0-2-23 {
-  color: #000000;
+  color: #111111;
   font-size: 32px;
 }
 .icon-d1-0-2-30 {
-  color: #000000;
+  color: #111111;
   font-size: 32px;
 }
 .icon-d2-0-2-37 {
-  color: #000000;
+  color: #111111;
   font-size: 32px;
 }
 .icon-d3-0-2-44 {
-  color: #000000;
+  color: #111111;
   font-size: 32px;
 }
 .icon-d4-0-2-51 {
-  color: #000000;
+  color: #111111;
   font-size: 32px;
 }
 .sharedRippleEffect-0-2-12 {
@@ -1044,11 +1051,11 @@ Array [
   }
   .wrapper-d0-0-2-18:focus:after {  }
   .wrapper-d0-0-2-18:hover:after {
-    background-color: #000000;
+    background-color: #111111;
     opacity: 0;
   }
   .ripple-d1-0-2-19 {
-    background-color: #000000;
+    background-color: #111111;
     height: 0;
     left: 50%;
     top: 50%;
@@ -1057,6 +1064,7 @@ Array [
   }
   .rippleContainer-d2-0-2-20 {
     overflow: hidden;
+    border-radius: 4px;
   }
   .rippleActive-d3-0-2-21 {
     animation: keyframes-ripple-0-2-17 300ms;
@@ -1068,11 +1076,11 @@ Array [
   }
   .wrapper-d4-0-2-26:focus:after {  }
   .wrapper-d4-0-2-26:hover:after {
-    background-color: #000000;
+    background-color: #111111;
     opacity: 0;
   }
   .ripple-d5-0-2-27 {
-    background-color: #000000;
+    background-color: #111111;
     height: 0;
     left: 50%;
     top: 50%;
@@ -1081,6 +1089,7 @@ Array [
   }
   .rippleContainer-d6-0-2-28 {
     overflow: hidden;
+    border-radius: 4px;
   }
   .rippleActive-d7-0-2-29 {
     animation: keyframes-ripple-0-2-17 300ms;
@@ -1092,11 +1101,11 @@ Array [
   }
   .wrapper-d8-0-2-33:focus:after {  }
   .wrapper-d8-0-2-33:hover:after {
-    background-color: #000000;
+    background-color: #111111;
     opacity: 0;
   }
   .ripple-d9-0-2-34 {
-    background-color: #000000;
+    background-color: #111111;
     height: 0;
     left: 50%;
     top: 50%;
@@ -1105,6 +1114,7 @@ Array [
   }
   .rippleContainer-d10-0-2-35 {
     overflow: hidden;
+    border-radius: 4px;
   }
   .rippleActive-d11-0-2-36 {
     animation: keyframes-ripple-0-2-17 300ms;
@@ -1116,11 +1126,11 @@ Array [
   }
   .wrapper-d12-0-2-40:focus:after {  }
   .wrapper-d12-0-2-40:hover:after {
-    background-color: #000000;
+    background-color: #111111;
     opacity: 0;
   }
   .ripple-d13-0-2-41 {
-    background-color: #000000;
+    background-color: #111111;
     height: 0;
     left: 50%;
     top: 50%;
@@ -1129,6 +1139,7 @@ Array [
   }
   .rippleContainer-d14-0-2-42 {
     overflow: hidden;
+    border-radius: 4px;
   }
   .rippleActive-d15-0-2-43 {
     animation: keyframes-ripple-0-2-17 300ms;
@@ -1140,11 +1151,11 @@ Array [
   }
   .wrapper-d16-0-2-47:focus:after {  }
   .wrapper-d16-0-2-47:hover:after {
-    background-color: #000000;
+    background-color: #111111;
     opacity: 0;
   }
   .ripple-d17-0-2-48 {
-    background-color: #000000;
+    background-color: #111111;
     height: 0;
     left: 50%;
     top: 50%;
@@ -1153,6 +1164,7 @@ Array [
   }
   .rippleContainer-d18-0-2-49 {
     overflow: hidden;
+    border-radius: 4px;
   }
   .rippleActive-d19-0-2-50 {
     animation: keyframes-ripple-0-2-17 300ms;
@@ -1204,7 +1216,7 @@ Array [
     opacity: 0;
     position: absolute;
     border-radius: 50%;
-    background-color: #000000;
+    background-color: #111111;
   }
   .ratingIcon-0-2-8:hover:not([disabled]):after {
     opacity: 0.04;
@@ -1215,23 +1227,23 @@ Array [
   .ratingIcon-0-2-8 > i {  }
   .ratingIcon-d0-0-2-9 {  }
   .ratingIcon-d0-0-2-9 > i {
-    color: #777777;
+    color: #737373;
   }
   .ratingIcon-d1-0-2-24 {  }
   .ratingIcon-d1-0-2-24 > i {
-    color: #777777;
+    color: #737373;
   }
   .ratingIcon-d2-0-2-31 {  }
   .ratingIcon-d2-0-2-31 > i {
-    color: #777777;
+    color: #737373;
   }
   .ratingIcon-d3-0-2-38 {  }
   .ratingIcon-d3-0-2-38 > i {
-    color: #777777;
+    color: #737373;
   }
   .ratingIcon-d4-0-2-45 {  }
   .ratingIcon-d4-0-2-45 > i {
-    color: #777777;
+    color: #737373;
   }
   .container-0-2-1 {
     display: flex;
@@ -1245,7 +1257,7 @@ Array [
     order: 1;
   }
   .labelText-0-2-3 {
-    color: #777777;
+    color: #737373;
   }
   .labelText-d0-0-2-4 {
     font-family: Roboto, Arial;
@@ -1259,7 +1271,7 @@ Array [
   }
   .rating-d0-0-2-6 {  }
   .labelContainer-0-2-52 {
-    color: #000000;
+    color: #111111;
     font-family: \\"Roboto\\", Arial;
   }",
   <div>
@@ -1458,23 +1470,23 @@ Array [
   pointer-events: none;
 }
 .icon-d0-0-2-23 {
-  color: #000000;
+  color: #111111;
   font-size: 32px;
 }
 .icon-d1-0-2-30 {
-  color: #000000;
+  color: #111111;
   font-size: 32px;
 }
 .icon-d2-0-2-37 {
-  color: #000000;
+  color: #111111;
   font-size: 32px;
 }
 .icon-d3-0-2-44 {
-  color: #000000;
+  color: #111111;
   font-size: 32px;
 }
 .icon-d4-0-2-51 {
-  color: #000000;
+  color: #111111;
   font-size: 32px;
 }
 .sharedRippleEffect-0-2-12 {
@@ -1542,14 +1554,14 @@ Array [
     align-self: start;
   }
   .wrapper-d0-0-2-18:focus:after {
-    background-color: #000000;
+    background-color: #111111;
   }
   .wrapper-d0-0-2-18:hover:after {
-    background-color: #000000;
+    background-color: #111111;
     opacity: 0;
   }
   .ripple-d1-0-2-19 {
-    background-color: #000000;
+    background-color: #111111;
     height: 0;
     left: 50%;
     top: 50%;
@@ -1558,6 +1570,7 @@ Array [
   }
   .rippleContainer-d2-0-2-20 {
     overflow: hidden;
+    border-radius: 4px;
   }
   .rippleActive-d3-0-2-21 {
     animation: keyframes-ripple-0-2-17 300ms;
@@ -1568,14 +1581,14 @@ Array [
     align-self: start;
   }
   .wrapper-d4-0-2-26:focus:after {
-    background-color: #000000;
+    background-color: #111111;
   }
   .wrapper-d4-0-2-26:hover:after {
-    background-color: #000000;
+    background-color: #111111;
     opacity: 0;
   }
   .ripple-d5-0-2-27 {
-    background-color: #000000;
+    background-color: #111111;
     height: 0;
     left: 50%;
     top: 50%;
@@ -1584,6 +1597,7 @@ Array [
   }
   .rippleContainer-d6-0-2-28 {
     overflow: hidden;
+    border-radius: 4px;
   }
   .rippleActive-d7-0-2-29 {
     animation: keyframes-ripple-0-2-17 300ms;
@@ -1594,14 +1608,14 @@ Array [
     align-self: start;
   }
   .wrapper-d8-0-2-33:focus:after {
-    background-color: #000000;
+    background-color: #111111;
   }
   .wrapper-d8-0-2-33:hover:after {
-    background-color: #000000;
+    background-color: #111111;
     opacity: 0;
   }
   .ripple-d9-0-2-34 {
-    background-color: #000000;
+    background-color: #111111;
     height: 0;
     left: 50%;
     top: 50%;
@@ -1610,6 +1624,7 @@ Array [
   }
   .rippleContainer-d10-0-2-35 {
     overflow: hidden;
+    border-radius: 4px;
   }
   .rippleActive-d11-0-2-36 {
     animation: keyframes-ripple-0-2-17 300ms;
@@ -1620,14 +1635,14 @@ Array [
     align-self: start;
   }
   .wrapper-d12-0-2-40:focus:after {
-    background-color: #000000;
+    background-color: #111111;
   }
   .wrapper-d12-0-2-40:hover:after {
-    background-color: #000000;
+    background-color: #111111;
     opacity: 0;
   }
   .ripple-d13-0-2-41 {
-    background-color: #000000;
+    background-color: #111111;
     height: 0;
     left: 50%;
     top: 50%;
@@ -1636,6 +1651,7 @@ Array [
   }
   .rippleContainer-d14-0-2-42 {
     overflow: hidden;
+    border-radius: 4px;
   }
   .rippleActive-d15-0-2-43 {
     animation: keyframes-ripple-0-2-17 300ms;
@@ -1646,14 +1662,14 @@ Array [
     align-self: start;
   }
   .wrapper-d16-0-2-47:focus:after {
-    background-color: #000000;
+    background-color: #111111;
   }
   .wrapper-d16-0-2-47:hover:after {
-    background-color: #000000;
+    background-color: #111111;
     opacity: 0;
   }
   .ripple-d17-0-2-48 {
-    background-color: #000000;
+    background-color: #111111;
     height: 0;
     left: 50%;
     top: 50%;
@@ -1662,6 +1678,7 @@ Array [
   }
   .rippleContainer-d18-0-2-49 {
     overflow: hidden;
+    border-radius: 4px;
   }
   .rippleActive-d19-0-2-50 {
     animation: keyframes-ripple-0-2-17 300ms;
@@ -1713,7 +1730,7 @@ Array [
     opacity: 0;
     position: absolute;
     border-radius: 50%;
-    background-color: #000000;
+    background-color: #111111;
   }
   .ratingIcon-0-2-8:hover:not([disabled]):after {
     opacity: 0.04;
@@ -1725,27 +1742,27 @@ Array [
   .ratingIcon-d0-0-2-9 {  }
   .ratingIcon-d0-0-2-9 > i {
     cursor: pointer;
-    color: #777777;
+    color: #737373;
   }
   .ratingIcon-d1-0-2-24 {  }
   .ratingIcon-d1-0-2-24 > i {
     cursor: pointer;
-    color: #777777;
+    color: #737373;
   }
   .ratingIcon-d2-0-2-31 {  }
   .ratingIcon-d2-0-2-31 > i {
     cursor: pointer;
-    color: #777777;
+    color: #737373;
   }
   .ratingIcon-d3-0-2-38 {  }
   .ratingIcon-d3-0-2-38 > i {
     cursor: pointer;
-    color: #777777;
+    color: #737373;
   }
   .ratingIcon-d4-0-2-45 {  }
   .ratingIcon-d4-0-2-45 > i {
     cursor: pointer;
-    color: #777777;
+    color: #737373;
   }
   .container-0-2-1 {
     display: flex;
@@ -1759,7 +1776,7 @@ Array [
     order: 1;
   }
   .labelText-0-2-3 {
-    color: #777777;
+    color: #737373;
   }
   .labelText-d0-0-2-4 {
     font-family: Roboto, Arial;
@@ -1773,7 +1790,7 @@ Array [
   }
   .rating-d0-0-2-6 {  }
   .labelContainer-0-2-52 {
-    color: #000000;
+    color: #111111;
     font-family: \\"Roboto\\", Arial;
   }",
   <div>
@@ -1967,23 +1984,23 @@ Array [
   pointer-events: none;
 }
 .icon-d0-0-2-23 {
-  color: #000000;
+  color: #111111;
   font-size: 32px;
 }
 .icon-d1-0-2-30 {
-  color: #000000;
+  color: #111111;
   font-size: 32px;
 }
 .icon-d2-0-2-37 {
-  color: #000000;
+  color: #111111;
   font-size: 32px;
 }
 .icon-d3-0-2-44 {
-  color: #000000;
+  color: #111111;
   font-size: 32px;
 }
 .icon-d4-0-2-51 {
-  color: #000000;
+  color: #111111;
   font-size: 32px;
 }
 .sharedRippleEffect-0-2-12 {
@@ -2051,14 +2068,14 @@ Array [
     align-self: start;
   }
   .wrapper-d0-0-2-18:focus:after {
-    background-color: #000000;
+    background-color: #111111;
   }
   .wrapper-d0-0-2-18:hover:after {
-    background-color: #000000;
+    background-color: #111111;
     opacity: 0;
   }
   .ripple-d1-0-2-19 {
-    background-color: #000000;
+    background-color: #111111;
     height: 0;
     left: 50%;
     top: 50%;
@@ -2067,6 +2084,7 @@ Array [
   }
   .rippleContainer-d2-0-2-20 {
     overflow: hidden;
+    border-radius: 4px;
   }
   .rippleActive-d3-0-2-21 {
     animation: keyframes-ripple-0-2-17 300ms;
@@ -2077,14 +2095,14 @@ Array [
     align-self: start;
   }
   .wrapper-d4-0-2-26:focus:after {
-    background-color: #000000;
+    background-color: #111111;
   }
   .wrapper-d4-0-2-26:hover:after {
-    background-color: #000000;
+    background-color: #111111;
     opacity: 0;
   }
   .ripple-d5-0-2-27 {
-    background-color: #000000;
+    background-color: #111111;
     height: 0;
     left: 50%;
     top: 50%;
@@ -2093,6 +2111,7 @@ Array [
   }
   .rippleContainer-d6-0-2-28 {
     overflow: hidden;
+    border-radius: 4px;
   }
   .rippleActive-d7-0-2-29 {
     animation: keyframes-ripple-0-2-17 300ms;
@@ -2103,14 +2122,14 @@ Array [
     align-self: start;
   }
   .wrapper-d8-0-2-33:focus:after {
-    background-color: #000000;
+    background-color: #111111;
   }
   .wrapper-d8-0-2-33:hover:after {
-    background-color: #000000;
+    background-color: #111111;
     opacity: 0;
   }
   .ripple-d9-0-2-34 {
-    background-color: #000000;
+    background-color: #111111;
     height: 0;
     left: 50%;
     top: 50%;
@@ -2119,6 +2138,7 @@ Array [
   }
   .rippleContainer-d10-0-2-35 {
     overflow: hidden;
+    border-radius: 4px;
   }
   .rippleActive-d11-0-2-36 {
     animation: keyframes-ripple-0-2-17 300ms;
@@ -2129,14 +2149,14 @@ Array [
     align-self: start;
   }
   .wrapper-d12-0-2-40:focus:after {
-    background-color: #000000;
+    background-color: #111111;
   }
   .wrapper-d12-0-2-40:hover:after {
-    background-color: #000000;
+    background-color: #111111;
     opacity: 0;
   }
   .ripple-d13-0-2-41 {
-    background-color: #000000;
+    background-color: #111111;
     height: 0;
     left: 50%;
     top: 50%;
@@ -2145,6 +2165,7 @@ Array [
   }
   .rippleContainer-d14-0-2-42 {
     overflow: hidden;
+    border-radius: 4px;
   }
   .rippleActive-d15-0-2-43 {
     animation: keyframes-ripple-0-2-17 300ms;
@@ -2155,14 +2176,14 @@ Array [
     align-self: start;
   }
   .wrapper-d16-0-2-47:focus:after {
-    background-color: #000000;
+    background-color: #111111;
   }
   .wrapper-d16-0-2-47:hover:after {
-    background-color: #000000;
+    background-color: #111111;
     opacity: 0;
   }
   .ripple-d17-0-2-48 {
-    background-color: #000000;
+    background-color: #111111;
     height: 0;
     left: 50%;
     top: 50%;
@@ -2171,6 +2192,7 @@ Array [
   }
   .rippleContainer-d18-0-2-49 {
     overflow: hidden;
+    border-radius: 4px;
   }
   .rippleActive-d19-0-2-50 {
     animation: keyframes-ripple-0-2-17 300ms;
@@ -2222,7 +2244,7 @@ Array [
     opacity: 0;
     position: absolute;
     border-radius: 50%;
-    background-color: #000000;
+    background-color: #111111;
   }
   .ratingIcon-0-2-8:hover:not([disabled]):after {
     opacity: 0.04;
@@ -2234,27 +2256,27 @@ Array [
   .ratingIcon-d0-0-2-9 {  }
   .ratingIcon-d0-0-2-9 > i {
     cursor: pointer;
-    color: #777777;
+    color: #737373;
   }
   .ratingIcon-d1-0-2-24 {  }
   .ratingIcon-d1-0-2-24 > i {
     cursor: pointer;
-    color: #777777;
+    color: #737373;
   }
   .ratingIcon-d2-0-2-31 {  }
   .ratingIcon-d2-0-2-31 > i {
     cursor: pointer;
-    color: #777777;
+    color: #737373;
   }
   .ratingIcon-d3-0-2-38 {  }
   .ratingIcon-d3-0-2-38 > i {
     cursor: pointer;
-    color: #777777;
+    color: #737373;
   }
   .ratingIcon-d4-0-2-45 {  }
   .ratingIcon-d4-0-2-45 > i {
     cursor: pointer;
-    color: #777777;
+    color: #737373;
   }
   .container-0-2-1 {
     display: flex;
@@ -2268,7 +2290,7 @@ Array [
     order: 1;
   }
   .labelText-0-2-3 {
-    color: #777777;
+    color: #737373;
   }
   .labelText-d0-0-2-4 {
     font-family: Roboto, Arial;
@@ -2282,7 +2304,7 @@ Array [
   }
   .rating-d0-0-2-6 {  }
   .labelContainer-0-2-52 {
-    color: #000000;
+    color: #111111;
     font-family: \\"Roboto\\", Arial;
   }",
   <div>
@@ -2476,23 +2498,23 @@ Array [
   pointer-events: none;
 }
 .icon-d0-0-2-21 {
-  color: #000000;
+  color: #111111;
   font-size: 32px;
 }
 .icon-d1-0-2-28 {
-  color: #000000;
+  color: #111111;
   font-size: 32px;
 }
 .icon-d2-0-2-35 {
-  color: #000000;
+  color: #111111;
   font-size: 32px;
 }
 .icon-d3-0-2-42 {
-  color: #000000;
+  color: #111111;
   font-size: 32px;
 }
 .icon-d4-0-2-49 {
-  color: #000000;
+  color: #111111;
   font-size: 32px;
 }
 .sharedRippleEffect-0-2-10 {
@@ -2561,11 +2583,11 @@ Array [
   }
   .wrapper-d0-0-2-16:focus:after {  }
   .wrapper-d0-0-2-16:hover:after {
-    background-color: #000000;
+    background-color: #111111;
     opacity: 0;
   }
   .ripple-d1-0-2-17 {
-    background-color: #000000;
+    background-color: #111111;
     height: 0;
     left: 50%;
     top: 50%;
@@ -2574,6 +2596,7 @@ Array [
   }
   .rippleContainer-d2-0-2-18 {
     overflow: hidden;
+    border-radius: 4px;
   }
   .rippleActive-d3-0-2-19 {
     animation: keyframes-ripple-0-2-15 300ms;
@@ -2585,11 +2608,11 @@ Array [
   }
   .wrapper-d4-0-2-24:focus:after {  }
   .wrapper-d4-0-2-24:hover:after {
-    background-color: #000000;
+    background-color: #111111;
     opacity: 0;
   }
   .ripple-d5-0-2-25 {
-    background-color: #000000;
+    background-color: #111111;
     height: 0;
     left: 50%;
     top: 50%;
@@ -2598,6 +2621,7 @@ Array [
   }
   .rippleContainer-d6-0-2-26 {
     overflow: hidden;
+    border-radius: 4px;
   }
   .rippleActive-d7-0-2-27 {
     animation: keyframes-ripple-0-2-15 300ms;
@@ -2609,11 +2633,11 @@ Array [
   }
   .wrapper-d8-0-2-31:focus:after {  }
   .wrapper-d8-0-2-31:hover:after {
-    background-color: #000000;
+    background-color: #111111;
     opacity: 0;
   }
   .ripple-d9-0-2-32 {
-    background-color: #000000;
+    background-color: #111111;
     height: 0;
     left: 50%;
     top: 50%;
@@ -2622,6 +2646,7 @@ Array [
   }
   .rippleContainer-d10-0-2-33 {
     overflow: hidden;
+    border-radius: 4px;
   }
   .rippleActive-d11-0-2-34 {
     animation: keyframes-ripple-0-2-15 300ms;
@@ -2633,11 +2658,11 @@ Array [
   }
   .wrapper-d12-0-2-38:focus:after {  }
   .wrapper-d12-0-2-38:hover:after {
-    background-color: #000000;
+    background-color: #111111;
     opacity: 0;
   }
   .ripple-d13-0-2-39 {
-    background-color: #000000;
+    background-color: #111111;
     height: 0;
     left: 50%;
     top: 50%;
@@ -2646,6 +2671,7 @@ Array [
   }
   .rippleContainer-d14-0-2-40 {
     overflow: hidden;
+    border-radius: 4px;
   }
   .rippleActive-d15-0-2-41 {
     animation: keyframes-ripple-0-2-15 300ms;
@@ -2657,11 +2683,11 @@ Array [
   }
   .wrapper-d16-0-2-45:focus:after {  }
   .wrapper-d16-0-2-45:hover:after {
-    background-color: #000000;
+    background-color: #111111;
     opacity: 0;
   }
   .ripple-d17-0-2-46 {
-    background-color: #000000;
+    background-color: #111111;
     height: 0;
     left: 50%;
     top: 50%;
@@ -2670,6 +2696,7 @@ Array [
   }
   .rippleContainer-d18-0-2-47 {
     overflow: hidden;
+    border-radius: 4px;
   }
   .rippleActive-d19-0-2-48 {
     animation: keyframes-ripple-0-2-15 300ms;
@@ -2721,7 +2748,7 @@ Array [
     opacity: 0;
     position: absolute;
     border-radius: 50%;
-    background-color: #000000;
+    background-color: #111111;
   }
   .ratingIcon-0-2-6:hover:not([disabled]):after {
     opacity: 0.04;
@@ -2732,23 +2759,23 @@ Array [
   .ratingIcon-0-2-6 > i {  }
   .ratingIcon-d0-0-2-7 {  }
   .ratingIcon-d0-0-2-7 > i {
-    color: #777777;
+    color: #737373;
   }
   .ratingIcon-d1-0-2-22 {  }
   .ratingIcon-d1-0-2-22 > i {
-    color: #777777;
+    color: #737373;
   }
   .ratingIcon-d2-0-2-29 {  }
   .ratingIcon-d2-0-2-29 > i {
-    color: #777777;
+    color: #737373;
   }
   .ratingIcon-d3-0-2-36 {  }
   .ratingIcon-d3-0-2-36 > i {
-    color: #777777;
+    color: #737373;
   }
   .ratingIcon-d4-0-2-43 {  }
   .ratingIcon-d4-0-2-43 > i {
-    color: #777777;
+    color: #737373;
   }
   .container-0-2-1 {
     display: flex;
@@ -2957,23 +2984,23 @@ Array [
   pointer-events: none;
 }
 .icon-d0-0-2-21 {
-  color: #000000;
+  color: #111111;
   font-size: 32px;
 }
 .icon-d1-0-2-28 {
-  color: #000000;
+  color: #111111;
   font-size: 32px;
 }
 .icon-d2-0-2-35 {
-  color: #000000;
+  color: #111111;
   font-size: 32px;
 }
 .icon-d3-0-2-42 {
-  color: #000000;
+  color: #111111;
   font-size: 32px;
 }
 .icon-d4-0-2-49 {
-  color: #000000;
+  color: #111111;
   font-size: 32px;
 }
 .sharedRippleEffect-0-2-10 {
@@ -3042,11 +3069,11 @@ Array [
   }
   .wrapper-d0-0-2-16:focus:after {  }
   .wrapper-d0-0-2-16:hover:after {
-    background-color: #000000;
+    background-color: #111111;
     opacity: 0;
   }
   .ripple-d1-0-2-17 {
-    background-color: #000000;
+    background-color: #111111;
     height: 0;
     left: 50%;
     top: 50%;
@@ -3055,6 +3082,7 @@ Array [
   }
   .rippleContainer-d2-0-2-18 {
     overflow: hidden;
+    border-radius: 4px;
   }
   .rippleActive-d3-0-2-19 {
     animation: keyframes-ripple-0-2-15 300ms;
@@ -3066,11 +3094,11 @@ Array [
   }
   .wrapper-d4-0-2-24:focus:after {  }
   .wrapper-d4-0-2-24:hover:after {
-    background-color: #000000;
+    background-color: #111111;
     opacity: 0;
   }
   .ripple-d5-0-2-25 {
-    background-color: #000000;
+    background-color: #111111;
     height: 0;
     left: 50%;
     top: 50%;
@@ -3079,6 +3107,7 @@ Array [
   }
   .rippleContainer-d6-0-2-26 {
     overflow: hidden;
+    border-radius: 4px;
   }
   .rippleActive-d7-0-2-27 {
     animation: keyframes-ripple-0-2-15 300ms;
@@ -3090,11 +3119,11 @@ Array [
   }
   .wrapper-d8-0-2-31:focus:after {  }
   .wrapper-d8-0-2-31:hover:after {
-    background-color: #000000;
+    background-color: #111111;
     opacity: 0;
   }
   .ripple-d9-0-2-32 {
-    background-color: #000000;
+    background-color: #111111;
     height: 0;
     left: 50%;
     top: 50%;
@@ -3103,6 +3132,7 @@ Array [
   }
   .rippleContainer-d10-0-2-33 {
     overflow: hidden;
+    border-radius: 4px;
   }
   .rippleActive-d11-0-2-34 {
     animation: keyframes-ripple-0-2-15 300ms;
@@ -3114,11 +3144,11 @@ Array [
   }
   .wrapper-d12-0-2-38:focus:after {  }
   .wrapper-d12-0-2-38:hover:after {
-    background-color: #000000;
+    background-color: #111111;
     opacity: 0;
   }
   .ripple-d13-0-2-39 {
-    background-color: #000000;
+    background-color: #111111;
     height: 0;
     left: 50%;
     top: 50%;
@@ -3127,6 +3157,7 @@ Array [
   }
   .rippleContainer-d14-0-2-40 {
     overflow: hidden;
+    border-radius: 4px;
   }
   .rippleActive-d15-0-2-41 {
     animation: keyframes-ripple-0-2-15 300ms;
@@ -3138,11 +3169,11 @@ Array [
   }
   .wrapper-d16-0-2-45:focus:after {  }
   .wrapper-d16-0-2-45:hover:after {
-    background-color: #000000;
+    background-color: #111111;
     opacity: 0;
   }
   .ripple-d17-0-2-46 {
-    background-color: #000000;
+    background-color: #111111;
     height: 0;
     left: 50%;
     top: 50%;
@@ -3151,6 +3182,7 @@ Array [
   }
   .rippleContainer-d18-0-2-47 {
     overflow: hidden;
+    border-radius: 4px;
   }
   .rippleActive-d19-0-2-48 {
     animation: keyframes-ripple-0-2-15 300ms;
@@ -3202,7 +3234,7 @@ Array [
     opacity: 0;
     position: absolute;
     border-radius: 50%;
-    background-color: #000000;
+    background-color: #111111;
   }
   .ratingIcon-0-2-6:hover:not([disabled]):after {
     opacity: 0.04;
@@ -3225,11 +3257,11 @@ Array [
   }
   .ratingIcon-d3-0-2-36 {  }
   .ratingIcon-d3-0-2-36 > i {
-    color: #777777;
+    color: #737373;
   }
   .ratingIcon-d4-0-2-43 {  }
   .ratingIcon-d4-0-2-43 > i {
-    color: #777777;
+    color: #737373;
   }
   .container-0-2-1 {
     display: flex;
@@ -3438,7 +3470,7 @@ Array [
   pointer-events: none;
 }
 .icon-d0-0-2-17 {
-  color: #000000;
+  color: #111111;
   font-size: 32px;
 }
 .sharedRippleEffect-0-2-6 {
@@ -3507,11 +3539,11 @@ Array [
   }
   .wrapper-d0-0-2-12:focus:after {  }
   .wrapper-d0-0-2-12:hover:after {
-    background-color: #000000;
+    background-color: #111111;
     opacity: 0;
   }
   .ripple-d1-0-2-13 {
-    background-color: #000000;
+    background-color: #111111;
     height: 0;
     left: 50%;
     top: 50%;
@@ -3520,6 +3552,7 @@ Array [
   }
   .rippleContainer-d2-0-2-14 {
     overflow: hidden;
+    border-radius: 4px;
   }
   .rippleActive-d3-0-2-15 {
     animation: keyframes-ripple-0-2-11 300ms;
@@ -3555,7 +3588,7 @@ Array [
     opacity: 0;
     position: absolute;
     border-radius: 50%;
-    background-color: #000000;
+    background-color: #111111;
   }
   .ratingIcon-0-2-2:hover:not([disabled]):after {
     opacity: 0.04;
@@ -3566,7 +3599,7 @@ Array [
   .ratingIcon-0-2-2 > i {  }
   .ratingIcon-d0-0-2-3 {  }
   .ratingIcon-d0-0-2-3 > i {
-    color: #777777;
+    color: #737373;
   }",
   <div>
     <div
@@ -3613,7 +3646,7 @@ Array [
   pointer-events: none;
 }
 .icon-d0-0-2-17 {
-  color: #000000;
+  color: #111111;
   font-size: 32px;
 }
 .sharedRippleEffect-0-2-6 {
@@ -3682,11 +3715,11 @@ Array [
   }
   .wrapper-d0-0-2-12:focus:after {  }
   .wrapper-d0-0-2-12:hover:after {
-    background-color: #000000;
+    background-color: #111111;
     opacity: 0;
   }
   .ripple-d1-0-2-13 {
-    background-color: #000000;
+    background-color: #111111;
     height: 0;
     left: 50%;
     top: 50%;
@@ -3695,6 +3728,7 @@ Array [
   }
   .rippleContainer-d2-0-2-14 {
     overflow: hidden;
+    border-radius: 4px;
   }
   .rippleActive-d3-0-2-15 {
     animation: keyframes-ripple-0-2-11 300ms;
@@ -3730,7 +3764,7 @@ Array [
     opacity: 0;
     position: absolute;
     border-radius: 50%;
-    background-color: #000000;
+    background-color: #111111;
   }
   .ratingIcon-0-2-2:hover:not([disabled]):after {
     opacity: 0.04;
@@ -3741,7 +3775,7 @@ Array [
   .ratingIcon-0-2-2 > i {  }
   .ratingIcon-d0-0-2-3 {  }
   .ratingIcon-d0-0-2-3 > i {
-    color: #777777;
+    color: #737373;
   }",
   <div>
     <div
@@ -3788,7 +3822,7 @@ Array [
   pointer-events: none;
 }
 .icon-d0-0-2-17 {
-  color: #000000;
+  color: #111111;
   font-size: 32px;
 }
 .sharedRippleEffect-0-2-6 {
@@ -3857,11 +3891,11 @@ Array [
   }
   .wrapper-d0-0-2-12:focus:after {  }
   .wrapper-d0-0-2-12:hover:after {
-    background-color: #000000;
+    background-color: #111111;
     opacity: 0;
   }
   .ripple-d1-0-2-13 {
-    background-color: #000000;
+    background-color: #111111;
     height: 0;
     left: 50%;
     top: 50%;
@@ -3870,6 +3904,7 @@ Array [
   }
   .rippleContainer-d2-0-2-14 {
     overflow: hidden;
+    border-radius: 4px;
   }
   .rippleActive-d3-0-2-15 {
     animation: keyframes-ripple-0-2-11 300ms;
@@ -3905,7 +3940,7 @@ Array [
     opacity: 0;
     position: absolute;
     border-radius: 50%;
-    background-color: #000000;
+    background-color: #111111;
   }
   .ratingIcon-0-2-2:hover:not([disabled]):after {
     opacity: 0.04;
diff --git a/packages/react/src/components/Ripple/Ripple.styles.ts b/packages/react/src/components/Ripple/Ripple.styles.ts
index 249c71509c..160a25d6ad 100644
--- a/packages/react/src/components/Ripple/Ripple.styles.ts
+++ b/packages/react/src/components/Ripple/Ripple.styles.ts
@@ -15,6 +15,17 @@ const getColorThemeRipple = (theme: Theme) => ({ brand, color }: Pick<RippleStyl
   }
   return color && theme.color[color]
 }
+const getPropsThemeRipple = (theme: Theme) => ({ brand }: Pick<RippleStyleProps, 'brand' >) => {
+  if (brand) {
+    const themeSelectdRipple = buildTheme(brand, 'light')
+    return {
+      buttonborderRadius: themeSelectdRipple.button.borderRadius
+    }
+  }
+  return {
+    buttonborderRadius: theme.button.borderRadius
+  }
+}
 
 const styles = createUseStyles((theme: Theme) => ({
   sharedRippleEffect: {
@@ -60,7 +71,8 @@ const styles = createUseStyles((theme: Theme) => ({
   rippleContainer: {
     inset: 0,
     overflow: ({ hideOverflow }: RippleStyleProps) => (hideOverflow && 'hidden'),
-    position: 'absolute'
+    position: 'absolute',
+    borderRadius: ({ brand }: RippleStyleProps) => getPropsThemeRipple(theme)({ brand }).buttonborderRadius
   },
   rippleActive: {
     animation: ({ animationDuration }) => `$ripple ${animationDuration}ms`,
diff --git a/packages/react/src/components/Ripple/__snapshots__/Ripple.test.tsx.snap b/packages/react/src/components/Ripple/__snapshots__/Ripple.test.tsx.snap
index 01c9df10e0..b874a7ecd7 100644
--- a/packages/react/src/components/Ripple/__snapshots__/Ripple.test.tsx.snap
+++ b/packages/react/src/components/Ripple/__snapshots__/Ripple.test.tsx.snap
@@ -67,14 +67,14 @@ Array [
     align-self: start;
   }
   .wrapper-d0-0-2-7:focus:after {
-    background-color: #000000;
+    background-color: #111111;
   }
   .wrapper-d0-0-2-7:hover:after {
-    background-color: #000000;
+    background-color: #111111;
     opacity: 0;
   }
   .ripple-d1-0-2-8 {
-    background-color: #000000;
+    background-color: #111111;
     height: 0;
     left: 0;
     top: 0;
@@ -83,6 +83,7 @@ Array [
   }
   .rippleContainer-d2-0-2-9 {
     overflow: hidden;
+    border-radius: 4px;
   }
   .rippleActive-d3-0-2-10 {
     animation: keyframes-ripple-0-2-6 300ms;
diff --git a/packages/react/src/components/Shortcut/__snapshots__/Shortcut.test.tsx.snap b/packages/react/src/components/Shortcut/__snapshots__/Shortcut.test.tsx.snap
index 0eae1ee07b..b8482325aa 100644
--- a/packages/react/src/components/Shortcut/__snapshots__/Shortcut.test.tsx.snap
+++ b/packages/react/src/components/Shortcut/__snapshots__/Shortcut.test.tsx.snap
@@ -22,7 +22,7 @@ Array [
   content: \\" \\";
   opacity: 0;
   position: absolute;
-  background-color: #000000;
+  background-color: #111111;
 }
 .content-0-2-3:disabled {
   cursor: default;
@@ -52,7 +52,7 @@ Array [
   border: 1px solid #FFFFFF00;
 }
 .content-d0-0-2-6:disabled {
-  background-color: #bbbbbb;
+  background-color: #8c8c8c;
   border: 1px solid #FFFFFF00;
 }
 .content-d0-0-2-6:hover:not([disabled]) {
@@ -65,7 +65,7 @@ Array [
 }
 .labelText-d1-0-2-7 {
   white-space: normal;
-  color: #777777;
+  color: #737373;
 }
 .labelText-d1-0-2-7:hover {}
 .sharedRippleEffect-0-2-10 {
@@ -134,11 +134,11 @@ Array [
   }
   .wrapper-d0-0-2-16:focus:after {  }
   .wrapper-d0-0-2-16:hover:after {
-    background-color: #000000;
+    background-color: #111111;
     opacity: 0;
   }
   .ripple-d1-0-2-17 {
-    background-color: #000000;
+    background-color: #111111;
     height: 0;
     left: 50%;
     top: 50%;
@@ -147,6 +147,7 @@ Array [
   }
   .rippleContainer-d2-0-2-18 {
     overflow: hidden;
+    border-radius: 4px;
   }
   .rippleActive-d3-0-2-19 {
     animation: keyframes-ripple-0-2-15 300ms;
@@ -223,7 +224,7 @@ Array [
   content: \\" \\";
   opacity: 0;
   position: absolute;
-  background-color: #000000;
+  background-color: #111111;
 }
 .content-0-2-3:disabled {
   cursor: default;
@@ -254,7 +255,7 @@ Array [
   box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14);
 }
 .content-d0-0-2-6:disabled {
-  background-color: #bbbbbb;
+  background-color: #8c8c8c;
   border: 1px solid #FFFFFF00;
 }
 .content-d0-0-2-6:hover:not([disabled]) {
@@ -267,10 +268,10 @@ Array [
 }
 .labelText-d1-0-2-7 {
   white-space: normal;
-  color: #333333;
+  color: #363636;
 }
 .labelText-d1-0-2-7:hover {
-  color: #333333;
+  color: #363636;
 }
 .sharedRippleEffect-0-2-10 {
   top: 0;
@@ -337,14 +338,14 @@ Array [
     align-self: start;
   }
   .wrapper-d0-0-2-16:focus:after {
-    background-color: #000000;
+    background-color: #111111;
   }
   .wrapper-d0-0-2-16:hover:after {
-    background-color: #000000;
+    background-color: #111111;
     opacity: 0;
   }
   .ripple-d1-0-2-17 {
-    background-color: #000000;
+    background-color: #111111;
     height: 0;
     left: 50%;
     top: 50%;
@@ -353,6 +354,7 @@ Array [
   }
   .rippleContainer-d2-0-2-18 {
     overflow: hidden;
+    border-radius: 4px;
   }
   .rippleActive-d3-0-2-19 {
     animation: keyframes-ripple-0-2-15 300ms;
@@ -373,7 +375,7 @@ Array [
     width: 56px;
   }
   .labelContainer-0-2-25 {
-    color: #000000;
+    color: #111111;
     font-family: \\"Roboto\\", Arial;
   }
   .badge-0-2-20 {
@@ -416,7 +418,7 @@ Array [
     border-radius: 8px;
   }
   .label-d1-0-2-24 {
-    color: #ffffff;
+    color: #111111;
   }",
   <div>
     <div
@@ -495,7 +497,7 @@ Array [
   content: \\" \\";
   opacity: 0;
   position: absolute;
-  background-color: #000000;
+  background-color: #111111;
 }
 .content-0-2-3:disabled {
   cursor: default;
@@ -526,7 +528,7 @@ Array [
   box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14);
 }
 .content-d0-0-2-6:disabled {
-  background-color: #bbbbbb;
+  background-color: #8c8c8c;
   border: 1px solid #FFFFFF00;
 }
 .content-d0-0-2-6:hover:not([disabled]) {
@@ -539,10 +541,10 @@ Array [
 }
 .labelText-d1-0-2-7 {
   white-space: normal;
-  color: #333333;
+  color: #363636;
 }
 .labelText-d1-0-2-7:hover {
-  color: #333333;
+  color: #363636;
 }
 .sharedRippleEffect-0-2-10 {
   top: 0;
@@ -609,14 +611,14 @@ Array [
     align-self: start;
   }
   .wrapper-d0-0-2-16:focus:after {
-    background-color: #000000;
+    background-color: #111111;
   }
   .wrapper-d0-0-2-16:hover:after {
-    background-color: #000000;
+    background-color: #111111;
     opacity: 0;
   }
   .ripple-d1-0-2-17 {
-    background-color: #000000;
+    background-color: #111111;
     height: 0;
     left: 50%;
     top: 50%;
@@ -625,6 +627,7 @@ Array [
   }
   .rippleContainer-d2-0-2-18 {
     overflow: hidden;
+    border-radius: 4px;
   }
   .rippleActive-d3-0-2-19 {
     animation: keyframes-ripple-0-2-15 300ms;
@@ -700,7 +703,7 @@ Array [
   content: \\" \\";
   opacity: 0;
   position: absolute;
-  background-color: #000000;
+  background-color: #111111;
 }
 .content-0-2-3:disabled {
   cursor: default;
@@ -731,7 +734,7 @@ Array [
   box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14);
 }
 .content-d0-0-2-6:disabled {
-  background-color: #bbbbbb;
+  background-color: #8c8c8c;
   border: 1px solid #FFFFFF00;
 }
 .content-d0-0-2-6:hover:not([disabled]) {
@@ -744,10 +747,10 @@ Array [
 }
 .labelText-d1-0-2-7 {
   white-space: normal;
-  color: #333333;
+  color: #363636;
 }
 .labelText-d1-0-2-7:hover {
-  color: #333333;
+  color: #363636;
 }
 .sharedRippleEffect-0-2-10 {
   top: 0;
@@ -814,14 +817,14 @@ Array [
     align-self: start;
   }
   .wrapper-d0-0-2-16:focus:after {
-    background-color: #000000;
+    background-color: #111111;
   }
   .wrapper-d0-0-2-16:hover:after {
-    background-color: #000000;
+    background-color: #111111;
     opacity: 0;
   }
   .ripple-d1-0-2-17 {
-    background-color: #000000;
+    background-color: #111111;
     height: 0;
     left: 50%;
     top: 50%;
@@ -830,6 +833,7 @@ Array [
   }
   .rippleContainer-d2-0-2-18 {
     overflow: hidden;
+    border-radius: 4px;
   }
   .rippleActive-d3-0-2-19 {
     animation: keyframes-ripple-0-2-15 300ms;
@@ -850,7 +854,7 @@ Array [
     width: 56px;
   }
   .labelContainer-0-2-20 {
-    color: #000000;
+    color: #111111;
     font-family: \\"Roboto\\", Arial;
   }",
   <div>
diff --git a/packages/react/src/components/Snackbar/__snapshots__/Snackbar.test.tsx.snap b/packages/react/src/components/Snackbar/__snapshots__/Snackbar.test.tsx.snap
index 41c6053481..b75786f207 100644
--- a/packages/react/src/components/Snackbar/__snapshots__/Snackbar.test.tsx.snap
+++ b/packages/react/src/components/Snackbar/__snapshots__/Snackbar.test.tsx.snap
@@ -129,7 +129,7 @@ Array [
   }
 }
   .snackbarContainer-d0-0-2-18 {
-    background-color: #333333;
+    background-color: #363636;
     right: 8px ;
     top: 8px;
     bottom: unset;
@@ -312,7 +312,7 @@ Array [
   }
 }
   .snackbarContainer-d0-0-2-18 {
-    background-color: #333333;
+    background-color: #363636;
     right: 8px ;
     top: 8px;
     bottom: unset;
@@ -431,14 +431,14 @@ Array [
     align-self: start;
   }
   .wrapper-d0-0-2-35:focus:after {
-    background-color: #000000;
+    background-color: #111111;
   }
   .wrapper-d0-0-2-35:hover:after {
-    background-color: #000000;
+    background-color: #111111;
     opacity: 0;
   }
   .ripple-d1-0-2-36 {
-    background-color: #000000;
+    background-color: #111111;
     height: 0;
     left: 0;
     top: 0;
@@ -447,6 +447,7 @@ Array [
   }
   .rippleContainer-d2-0-2-37 {
     overflow: hidden;
+    border-radius: 4px;
   }
   .rippleActive-d3-0-2-38 {
     animation: keyframes-ripple-0-2-34 300ms;
@@ -456,7 +457,6 @@ Array [
     outline: 0;
     overflow: hidden;
     position: relative;
-    border-radius: 4px;
   }
   .button-0-2-23:disabled {
     cursor: default;
@@ -482,6 +482,7 @@ Array [
   .button-d0-0-2-26 {
     background-color: #f4ab34;
     border: 1px solid #FFFFFF00;
+    border-radius: 4px;
     box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14);
     color: #333333;
     height: 40px;
@@ -490,9 +491,9 @@ Array [
     width: auto;
   }
   .button-d0-0-2-26:disabled {
-    background-color: #bbbbbb;
+    background-color: #8c8c8c;
     border: 1px solid #FFFFFF00;
-    color: #333333;
+    color: #363636;
   }
   .button-d0-0-2-26:hover:not([disabled]) {
     background-color: #f4ab34;
@@ -645,7 +646,7 @@ Array [
   }
 }
   .snackbarContainer-d0-0-2-18 {
-    background-color: #333333;
+    background-color: #363636;
     right: 8px ;
     top: 8px;
     bottom: unset;
@@ -859,7 +860,7 @@ Array [
   }
 }
   .snackbarContainer-d0-0-2-18 {
-    background-color: #333333;
+    background-color: #363636;
     right: 8px ;
     top: 8px;
     bottom: unset;
@@ -1040,7 +1041,7 @@ Array [
   }
 }
   .snackbarContainer-d0-0-2-18 {
-    background-color: #333333;
+    background-color: #363636;
     right: 8px ;
     top: 8px;
     bottom: unset;
@@ -1778,7 +1779,7 @@ Array [
     width: auto;
   }
   .bodyText-d3-0-2-21 {
-    color: #333333;
+    color: #363636;
   }
   .show-d4-0-2-22 {
     animation: ;
@@ -1946,7 +1947,7 @@ Array [
   }
 }
   .snackbarContainer-d0-0-2-18 {
-    background-color: #333333;
+    background-color: #363636;
     right: unset;
     top: unset;
     bottom: 8px;
@@ -2128,7 +2129,7 @@ Array [
   }
 }
   .snackbarContainer-d0-0-2-18 {
-    background-color: #333333;
+    background-color: #363636;
     right: unset;
     top: unset;
     bottom: 8px;
@@ -2310,7 +2311,7 @@ Array [
   }
 }
   .snackbarContainer-d0-0-2-18 {
-    background-color: #333333;
+    background-color: #363636;
     right: 8px;
     top: unset;
     bottom: 8px;
@@ -2492,7 +2493,7 @@ Array [
   }
 }
   .snackbarContainer-d0-0-2-18 {
-    background-color: #333333;
+    background-color: #363636;
     right: 8px ;
     top: 8px;
     bottom: unset;
@@ -2673,7 +2674,7 @@ Array [
   }
 }
   .snackbarContainer-d0-0-2-18 {
-    background-color: #333333;
+    background-color: #363636;
     right: unset;
     top: 8px;
     bottom: unset;
@@ -2854,7 +2855,7 @@ Array [
   }
 }
   .snackbarContainer-d0-0-2-18 {
-    background-color: #333333;
+    background-color: #363636;
     right: 8px ;
     top: 8px;
     bottom: unset;
@@ -3035,7 +3036,7 @@ Array [
   }
 }
   .snackbarContainer-d0-0-2-18 {
-    background-color: #333333;
+    background-color: #363636;
     right: 8px ;
     top: 8px;
     bottom: unset;
@@ -3216,7 +3217,7 @@ Array [
   }
 }
   .snackbarContainer-d0-0-2-18 {
-    background-color: #333333;
+    background-color: #363636;
     right: 8px ;
     top: 8px;
     bottom: unset;
@@ -3403,7 +3404,7 @@ Array [
   }
 }
   .snackbarContainer-d0-0-2-18 {
-    background-color: #333333;
+    background-color: #363636;
     right: 8px ;
     top: 8px;
     bottom: unset;
diff --git a/packages/react/src/components/Switch/__snapshots__/Switch.test.tsx.snap b/packages/react/src/components/Switch/__snapshots__/Switch.test.tsx.snap
index 48ab6d9c26..59d3ce88a9 100644
--- a/packages/react/src/components/Switch/__snapshots__/Switch.test.tsx.snap
+++ b/packages/react/src/components/Switch/__snapshots__/Switch.test.tsx.snap
@@ -52,14 +52,14 @@ Array [
   pointer-events: unset;
 }
 .switchBase-d0-0-2-7:hover .switchOverlay-0-2-5 {
-  background-color: #000000;
+  background-color: #111111;
 }
 .switchInput-d1-0-2-8 {}
 .switchInput-d1-0-2-8:focus + .switchBase-0-2-2 .switchOverlay-0-2-5 {
-  background-color: #000000;
+  background-color: #111111;
 }
 .switchTrack-d2-0-2-9 {
-  background-color: #777777;
+  background-color: #737373;
   opacity: 1;
 }
 .switchOverlay-d3-0-2-10 {
@@ -249,14 +249,14 @@ Array [
   pointer-events: none;
 }
 .switchBase-d0-0-2-7:hover .switchOverlay-0-2-5 {
-  background-color: #000000;
+  background-color: #111111;
 }
 .switchInput-d1-0-2-8 {}
 .switchInput-d1-0-2-8:focus + .switchBase-0-2-2 .switchOverlay-0-2-5 {
-  background-color: #000000;
+  background-color: #111111;
 }
 .switchTrack-d2-0-2-9 {
-  background-color: #bbbbbb;
+  background-color: #8c8c8c;
   opacity: 1;
 }
 .switchOverlay-d3-0-2-10 {
@@ -355,7 +355,7 @@ Array [
   background-color: #f4ab34;
 }
 .switchTrack-d2-0-2-9 {
-  background-color: #bbbbbb;
+  background-color: #8c8c8c;
   opacity: 1;
 }
 .switchOverlay-d3-0-2-10 {
diff --git a/packages/react/src/components/Tab/__snapshots__/Tab.test.tsx.snap b/packages/react/src/components/Tab/__snapshots__/Tab.test.tsx.snap
index c58d7b21fc..38772b6634 100644
--- a/packages/react/src/components/Tab/__snapshots__/Tab.test.tsx.snap
+++ b/packages/react/src/components/Tab/__snapshots__/Tab.test.tsx.snap
@@ -68,14 +68,14 @@ Array [
     align-self: stretch;
   }
   .wrapper-d0-0-2-17:focus:after {
-    background-color: #000000;
+    background-color: #111111;
   }
   .wrapper-d0-0-2-17:hover:after {
-    background-color: #000000;
+    background-color: #111111;
     opacity: 0;
   }
   .ripple-d1-0-2-18 {
-    background-color: #000000;
+    background-color: #111111;
     height: 0;
     left: 50%;
     top: 50%;
@@ -84,6 +84,7 @@ Array [
   }
   .rippleContainer-d2-0-2-19 {
     overflow: hidden;
+    border-radius: 4px;
   }
   .rippleActive-d3-0-2-20 {
     animation: keyframes-ripple-0-2-16 300ms;
@@ -95,14 +96,14 @@ Array [
     align-self: stretch;
   }
   .wrapper-d4-0-2-23:focus:after {
-    background-color: #000000;
+    background-color: #111111;
   }
   .wrapper-d4-0-2-23:hover:after {
-    background-color: #000000;
+    background-color: #111111;
     opacity: 0;
   }
   .ripple-d5-0-2-24 {
-    background-color: #000000;
+    background-color: #111111;
     height: 0;
     left: 50%;
     top: 50%;
@@ -111,6 +112,7 @@ Array [
   }
   .rippleContainer-d6-0-2-25 {
     overflow: hidden;
+    border-radius: 4px;
   }
   .rippleActive-d7-0-2-26 {
     animation: keyframes-ripple-0-2-16 300ms;
@@ -122,14 +124,14 @@ Array [
     align-self: stretch;
   }
   .wrapper-d8-0-2-29:focus:after {
-    background-color: #000000;
+    background-color: #111111;
   }
   .wrapper-d8-0-2-29:hover:after {
-    background-color: #000000;
+    background-color: #111111;
     opacity: 0;
   }
   .ripple-d9-0-2-30 {
-    background-color: #000000;
+    background-color: #111111;
     height: 0;
     left: 50%;
     top: 50%;
@@ -138,6 +140,7 @@ Array [
   }
   .rippleContainer-d10-0-2-31 {
     overflow: hidden;
+    border-radius: 4px;
   }
   .rippleActive-d11-0-2-32 {
     animation: keyframes-ripple-0-2-16 300ms;
@@ -152,7 +155,7 @@ Array [
     height: 100%;
   }
   .wrapper-0-2-7:hover {
-    background: #00000029;
+    background: #11111129;
   }
   .tabButton-0-2-8 {
     gap: 8px;
@@ -170,28 +173,28 @@ Array [
   .tabButton-d1-0-2-10 {
     cursor: pointer;
     pointer-events: auto;
-    color: #777777;
+    color: #737373;
   }
   .tabButton-d1-0-2-10 i {
-    color: #777777;
+    color: #737373;
   }
   .wrapper-d2-0-2-21 {  }
   .tabButton-d3-0-2-22 {
     cursor: pointer;
     pointer-events: auto;
-    color: #777777;
+    color: #737373;
   }
   .tabButton-d3-0-2-22 i {
-    color: #777777;
+    color: #737373;
   }
   .wrapper-d4-0-2-27 {  }
   .tabButton-d5-0-2-28 {
     cursor: pointer;
     pointer-events: auto;
-    color: #777777;
+    color: #737373;
   }
   .tabButton-d5-0-2-28 i {
-    color: #777777;
+    color: #737373;
   }
   .wrapper-0-2-1 {
     position: relative;
@@ -216,7 +219,7 @@ Array [
     position: absolute;
   }
   .navigation-0-2-3 > i {
-    color: #777777;
+    color: #737373;
   }
   .navigationPrev-0-2-4 {
     left: 0;
@@ -388,14 +391,14 @@ Array [
     align-self: stretch;
   }
   .wrapper-d0-0-2-17:focus:after {
-    background-color: #000000;
+    background-color: #111111;
   }
   .wrapper-d0-0-2-17:hover:after {
-    background-color: #000000;
+    background-color: #111111;
     opacity: 0;
   }
   .ripple-d1-0-2-18 {
-    background-color: #000000;
+    background-color: #111111;
     height: 0;
     left: 50%;
     top: 50%;
@@ -404,6 +407,7 @@ Array [
   }
   .rippleContainer-d2-0-2-19 {
     overflow: hidden;
+    border-radius: 4px;
   }
   .rippleActive-d3-0-2-20 {
     animation: keyframes-ripple-0-2-16 300ms;
@@ -415,14 +419,14 @@ Array [
     align-self: stretch;
   }
   .wrapper-d4-0-2-23:focus:after {
-    background-color: #000000;
+    background-color: #111111;
   }
   .wrapper-d4-0-2-23:hover:after {
-    background-color: #000000;
+    background-color: #111111;
     opacity: 0;
   }
   .ripple-d5-0-2-24 {
-    background-color: #000000;
+    background-color: #111111;
     height: 0;
     left: 50%;
     top: 50%;
@@ -431,6 +435,7 @@ Array [
   }
   .rippleContainer-d6-0-2-25 {
     overflow: hidden;
+    border-radius: 4px;
   }
   .rippleActive-d7-0-2-26 {
     animation: keyframes-ripple-0-2-16 300ms;
@@ -442,14 +447,14 @@ Array [
     align-self: stretch;
   }
   .wrapper-d8-0-2-29:focus:after {
-    background-color: #000000;
+    background-color: #111111;
   }
   .wrapper-d8-0-2-29:hover:after {
-    background-color: #000000;
+    background-color: #111111;
     opacity: 0;
   }
   .ripple-d9-0-2-30 {
-    background-color: #000000;
+    background-color: #111111;
     height: 0;
     left: 50%;
     top: 50%;
@@ -458,6 +463,7 @@ Array [
   }
   .rippleContainer-d10-0-2-31 {
     overflow: hidden;
+    border-radius: 4px;
   }
   .rippleActive-d11-0-2-32 {
     animation: keyframes-ripple-0-2-16 300ms;
@@ -472,7 +478,7 @@ Array [
     height: 100%;
   }
   .wrapper-0-2-7:hover {
-    background: #00000029;
+    background: #11111129;
   }
   .tabButton-0-2-8 {
     gap: 8px;
@@ -490,28 +496,28 @@ Array [
   .tabButton-d1-0-2-10 {
     cursor: pointer;
     pointer-events: auto;
-    color: #777777;
+    color: #737373;
   }
   .tabButton-d1-0-2-10 i {
-    color: #777777;
+    color: #737373;
   }
   .wrapper-d2-0-2-21 {  }
   .tabButton-d3-0-2-22 {
     cursor: pointer;
     pointer-events: auto;
-    color: #777777;
+    color: #737373;
   }
   .tabButton-d3-0-2-22 i {
-    color: #777777;
+    color: #737373;
   }
   .wrapper-d4-0-2-27 {  }
   .tabButton-d5-0-2-28 {
     cursor: pointer;
     pointer-events: auto;
-    color: #777777;
+    color: #737373;
   }
   .tabButton-d5-0-2-28 i {
-    color: #777777;
+    color: #737373;
   }
   .wrapper-0-2-1 {
     position: relative;
@@ -536,7 +542,7 @@ Array [
     position: absolute;
   }
   .navigation-0-2-3 > i {
-    color: #777777;
+    color: #737373;
   }
   .navigationPrev-0-2-4 {
     left: 0;
@@ -708,14 +714,14 @@ Array [
     align-self: stretch;
   }
   .wrapper-d0-0-2-17:focus:after {
-    background-color: #000000;
+    background-color: #111111;
   }
   .wrapper-d0-0-2-17:hover:after {
-    background-color: #000000;
+    background-color: #111111;
     opacity: 0;
   }
   .ripple-d1-0-2-18 {
-    background-color: #000000;
+    background-color: #111111;
     height: 0;
     left: 50%;
     top: 50%;
@@ -724,6 +730,7 @@ Array [
   }
   .rippleContainer-d2-0-2-19 {
     overflow: hidden;
+    border-radius: 4px;
   }
   .rippleActive-d3-0-2-20 {
     animation: keyframes-ripple-0-2-16 300ms;
@@ -735,14 +742,14 @@ Array [
     align-self: stretch;
   }
   .wrapper-d4-0-2-23:focus:after {
-    background-color: #000000;
+    background-color: #111111;
   }
   .wrapper-d4-0-2-23:hover:after {
-    background-color: #000000;
+    background-color: #111111;
     opacity: 0;
   }
   .ripple-d5-0-2-24 {
-    background-color: #000000;
+    background-color: #111111;
     height: 0;
     left: 50%;
     top: 50%;
@@ -751,6 +758,7 @@ Array [
   }
   .rippleContainer-d6-0-2-25 {
     overflow: hidden;
+    border-radius: 4px;
   }
   .rippleActive-d7-0-2-26 {
     animation: keyframes-ripple-0-2-16 300ms;
@@ -762,14 +770,14 @@ Array [
     align-self: stretch;
   }
   .wrapper-d8-0-2-29:focus:after {
-    background-color: #000000;
+    background-color: #111111;
   }
   .wrapper-d8-0-2-29:hover:after {
-    background-color: #000000;
+    background-color: #111111;
     opacity: 0;
   }
   .ripple-d9-0-2-30 {
-    background-color: #000000;
+    background-color: #111111;
     height: 0;
     left: 50%;
     top: 50%;
@@ -778,6 +786,7 @@ Array [
   }
   .rippleContainer-d10-0-2-31 {
     overflow: hidden;
+    border-radius: 4px;
   }
   .rippleActive-d11-0-2-32 {
     animation: keyframes-ripple-0-2-16 300ms;
@@ -792,7 +801,7 @@ Array [
     height: 100%;
   }
   .wrapper-0-2-7:hover {
-    background: #00000029;
+    background: #11111129;
   }
   .tabButton-0-2-8 {
     gap: 8px;
@@ -810,28 +819,28 @@ Array [
   .tabButton-d1-0-2-10 {
     cursor: pointer;
     pointer-events: auto;
-    color: #777777;
+    color: #737373;
   }
   .tabButton-d1-0-2-10 i {
-    color: #777777;
+    color: #737373;
   }
   .wrapper-d2-0-2-21 {  }
   .tabButton-d3-0-2-22 {
     cursor: pointer;
     pointer-events: auto;
-    color: #777777;
+    color: #737373;
   }
   .tabButton-d3-0-2-22 i {
-    color: #777777;
+    color: #737373;
   }
   .wrapper-d4-0-2-27 {  }
   .tabButton-d5-0-2-28 {
     cursor: pointer;
     pointer-events: auto;
-    color: #777777;
+    color: #737373;
   }
   .tabButton-d5-0-2-28 i {
-    color: #777777;
+    color: #737373;
   }
   .wrapper-0-2-1 {
     position: relative;
@@ -856,7 +865,7 @@ Array [
     position: absolute;
   }
   .navigation-0-2-3 > i {
-    color: #777777;
+    color: #737373;
   }
   .navigationPrev-0-2-4 {
     left: 0;
@@ -1028,14 +1037,14 @@ Array [
     align-self: stretch;
   }
   .wrapper-d0-0-2-17:focus:after {
-    background-color: #000000;
+    background-color: #111111;
   }
   .wrapper-d0-0-2-17:hover:after {
-    background-color: #000000;
+    background-color: #111111;
     opacity: 0;
   }
   .ripple-d1-0-2-18 {
-    background-color: #000000;
+    background-color: #111111;
     height: 0;
     left: 50%;
     top: 50%;
@@ -1044,6 +1053,7 @@ Array [
   }
   .rippleContainer-d2-0-2-19 {
     overflow: hidden;
+    border-radius: 4px;
   }
   .rippleActive-d3-0-2-20 {
     animation: keyframes-ripple-0-2-16 300ms;
@@ -1055,14 +1065,14 @@ Array [
     align-self: stretch;
   }
   .wrapper-d4-0-2-23:focus:after {
-    background-color: #000000;
+    background-color: #111111;
   }
   .wrapper-d4-0-2-23:hover:after {
-    background-color: #000000;
+    background-color: #111111;
     opacity: 0;
   }
   .ripple-d5-0-2-24 {
-    background-color: #000000;
+    background-color: #111111;
     height: 0;
     left: 50%;
     top: 50%;
@@ -1071,6 +1081,7 @@ Array [
   }
   .rippleContainer-d6-0-2-25 {
     overflow: hidden;
+    border-radius: 4px;
   }
   .rippleActive-d7-0-2-26 {
     animation: keyframes-ripple-0-2-16 300ms;
@@ -1082,14 +1093,14 @@ Array [
     align-self: stretch;
   }
   .wrapper-d8-0-2-29:focus:after {
-    background-color: #000000;
+    background-color: #111111;
   }
   .wrapper-d8-0-2-29:hover:after {
-    background-color: #000000;
+    background-color: #111111;
     opacity: 0;
   }
   .ripple-d9-0-2-30 {
-    background-color: #000000;
+    background-color: #111111;
     height: 0;
     left: 50%;
     top: 50%;
@@ -1098,6 +1109,7 @@ Array [
   }
   .rippleContainer-d10-0-2-31 {
     overflow: hidden;
+    border-radius: 4px;
   }
   .rippleActive-d11-0-2-32 {
     animation: keyframes-ripple-0-2-16 300ms;
@@ -1112,7 +1124,7 @@ Array [
     height: 100%;
   }
   .wrapper-0-2-7:hover {
-    background: #00000029;
+    background: #11111129;
   }
   .tabButton-0-2-8 {
     gap: 8px;
@@ -1130,28 +1142,28 @@ Array [
   .tabButton-d1-0-2-10 {
     cursor: pointer;
     pointer-events: auto;
-    color: #777777;
+    color: #737373;
   }
   .tabButton-d1-0-2-10 i {
-    color: #777777;
+    color: #737373;
   }
   .wrapper-d2-0-2-21 {  }
   .tabButton-d3-0-2-22 {
     cursor: pointer;
     pointer-events: auto;
-    color: #777777;
+    color: #737373;
   }
   .tabButton-d3-0-2-22 i {
-    color: #777777;
+    color: #737373;
   }
   .wrapper-d4-0-2-27 {  }
   .tabButton-d5-0-2-28 {
     cursor: pointer;
     pointer-events: auto;
-    color: #777777;
+    color: #737373;
   }
   .tabButton-d5-0-2-28 i {
-    color: #777777;
+    color: #737373;
   }
   .wrapper-0-2-1 {
     position: relative;
@@ -1176,7 +1188,7 @@ Array [
     position: absolute;
   }
   .navigation-0-2-3 > i {
-    color: #777777;
+    color: #737373;
   }
   .navigationPrev-0-2-4 {
     left: 0;
@@ -1348,14 +1360,14 @@ Array [
     align-self: stretch;
   }
   .wrapper-d0-0-2-17:focus:after {
-    background-color: #000000;
+    background-color: #111111;
   }
   .wrapper-d0-0-2-17:hover:after {
-    background-color: #000000;
+    background-color: #111111;
     opacity: 0;
   }
   .ripple-d1-0-2-18 {
-    background-color: #000000;
+    background-color: #111111;
     height: 0;
     left: 50%;
     top: 50%;
@@ -1364,6 +1376,7 @@ Array [
   }
   .rippleContainer-d2-0-2-19 {
     overflow: hidden;
+    border-radius: 4px;
   }
   .rippleActive-d3-0-2-20 {
     animation: keyframes-ripple-0-2-16 300ms;
@@ -1375,14 +1388,14 @@ Array [
     align-self: stretch;
   }
   .wrapper-d4-0-2-23:focus:after {
-    background-color: #000000;
+    background-color: #111111;
   }
   .wrapper-d4-0-2-23:hover:after {
-    background-color: #000000;
+    background-color: #111111;
     opacity: 0;
   }
   .ripple-d5-0-2-24 {
-    background-color: #000000;
+    background-color: #111111;
     height: 0;
     left: 50%;
     top: 50%;
@@ -1391,6 +1404,7 @@ Array [
   }
   .rippleContainer-d6-0-2-25 {
     overflow: hidden;
+    border-radius: 4px;
   }
   .rippleActive-d7-0-2-26 {
     animation: keyframes-ripple-0-2-16 300ms;
@@ -1402,14 +1416,14 @@ Array [
     align-self: stretch;
   }
   .wrapper-d8-0-2-29:focus:after {
-    background-color: #000000;
+    background-color: #111111;
   }
   .wrapper-d8-0-2-29:hover:after {
-    background-color: #000000;
+    background-color: #111111;
     opacity: 0;
   }
   .ripple-d9-0-2-30 {
-    background-color: #000000;
+    background-color: #111111;
     height: 0;
     left: 50%;
     top: 50%;
@@ -1418,6 +1432,7 @@ Array [
   }
   .rippleContainer-d10-0-2-31 {
     overflow: hidden;
+    border-radius: 4px;
   }
   .rippleActive-d11-0-2-32 {
     animation: keyframes-ripple-0-2-16 300ms;
@@ -1432,7 +1447,7 @@ Array [
     height: 100%;
   }
   .wrapper-0-2-7:hover {
-    background: #00000029;
+    background: #11111129;
   }
   .tabButton-0-2-8 {
     gap: 8px;
@@ -1450,28 +1465,28 @@ Array [
   .tabButton-d1-0-2-10 {
     cursor: pointer;
     pointer-events: auto;
-    color: #777777;
+    color: #737373;
   }
   .tabButton-d1-0-2-10 i {
-    color: #777777;
+    color: #737373;
   }
   .wrapper-d2-0-2-21 {  }
   .tabButton-d3-0-2-22 {
     cursor: pointer;
     pointer-events: auto;
-    color: #777777;
+    color: #737373;
   }
   .tabButton-d3-0-2-22 i {
-    color: #777777;
+    color: #737373;
   }
   .wrapper-d4-0-2-27 {  }
   .tabButton-d5-0-2-28 {
     cursor: pointer;
     pointer-events: auto;
-    color: #777777;
+    color: #737373;
   }
   .tabButton-d5-0-2-28 i {
-    color: #777777;
+    color: #737373;
   }
   .wrapper-0-2-1 {
     position: relative;
@@ -1496,7 +1511,7 @@ Array [
     position: absolute;
   }
   .navigation-0-2-3 > i {
-    color: #777777;
+    color: #737373;
   }
   .navigationPrev-0-2-4 {
     left: 0;
@@ -1668,14 +1683,14 @@ Array [
     align-self: stretch;
   }
   .wrapper-d0-0-2-19:focus:after {
-    background-color: #000000;
+    background-color: #111111;
   }
   .wrapper-d0-0-2-19:hover:after {
-    background-color: #000000;
+    background-color: #111111;
     opacity: 0;
   }
   .ripple-d1-0-2-20 {
-    background-color: #000000;
+    background-color: #111111;
     height: 0;
     left: 50%;
     top: 50%;
@@ -1684,6 +1699,7 @@ Array [
   }
   .rippleContainer-d2-0-2-21 {
     overflow: hidden;
+    border-radius: 4px;
   }
   .rippleActive-d3-0-2-22 {
     animation: keyframes-ripple-0-2-18 300ms;
@@ -1695,14 +1711,14 @@ Array [
     align-self: stretch;
   }
   .wrapper-d4-0-2-25:focus:after {
-    background-color: #000000;
+    background-color: #111111;
   }
   .wrapper-d4-0-2-25:hover:after {
-    background-color: #000000;
+    background-color: #111111;
     opacity: 0;
   }
   .ripple-d5-0-2-26 {
-    background-color: #000000;
+    background-color: #111111;
     height: 0;
     left: 50%;
     top: 50%;
@@ -1711,6 +1727,7 @@ Array [
   }
   .rippleContainer-d6-0-2-27 {
     overflow: hidden;
+    border-radius: 4px;
   }
   .rippleActive-d7-0-2-28 {
     animation: keyframes-ripple-0-2-18 300ms;
@@ -1722,14 +1739,14 @@ Array [
     align-self: stretch;
   }
   .wrapper-d8-0-2-31:focus:after {
-    background-color: #000000;
+    background-color: #111111;
   }
   .wrapper-d8-0-2-31:hover:after {
-    background-color: #000000;
+    background-color: #111111;
     opacity: 0;
   }
   .ripple-d9-0-2-32 {
-    background-color: #000000;
+    background-color: #111111;
     height: 0;
     left: 50%;
     top: 50%;
@@ -1738,6 +1755,7 @@ Array [
   }
   .rippleContainer-d10-0-2-33 {
     overflow: hidden;
+    border-radius: 4px;
   }
   .rippleActive-d11-0-2-34 {
     animation: keyframes-ripple-0-2-18 300ms;
@@ -1752,7 +1770,7 @@ Array [
     height: 100%;
   }
   .wrapper-0-2-9:hover {
-    background: #00000029;
+    background: #11111129;
   }
   .tabButton-0-2-10 {
     gap: 8px;
@@ -1770,28 +1788,28 @@ Array [
   .tabButton-d1-0-2-12 {
     cursor: pointer;
     pointer-events: auto;
-    color: #777777;
+    color: #737373;
   }
   .tabButton-d1-0-2-12 i {
-    color: #777777;
+    color: #737373;
   }
   .wrapper-d2-0-2-23 {  }
   .tabButton-d3-0-2-24 {
     cursor: pointer;
     pointer-events: auto;
-    color: #777777;
+    color: #737373;
   }
   .tabButton-d3-0-2-24 i {
-    color: #777777;
+    color: #737373;
   }
   .wrapper-d4-0-2-29 {  }
   .tabButton-d5-0-2-30 {
     cursor: pointer;
     pointer-events: auto;
-    color: #777777;
+    color: #737373;
   }
   .tabButton-d5-0-2-30 i {
-    color: #777777;
+    color: #737373;
   }
   .icon-0-2-7 {
     font-family: natds-icons;
@@ -1799,11 +1817,11 @@ Array [
     pointer-events: none;
   }
   .icon-d0-0-2-8 {
-    color: #000000;
+    color: #111111;
     font-size: 24px;
   }
   .icon-d1-0-2-35 {
-    color: #000000;
+    color: #111111;
     font-size: 24px;
   }
   .wrapper-0-2-1 {
@@ -1829,7 +1847,7 @@ Array [
     position: absolute;
   }
   .navigation-0-2-3 > i {
-    color: #777777;
+    color: #737373;
   }
   .navigationPrev-0-2-4 {
     left: 0;
diff --git a/packages/react/src/components/TabItem/__snapshots__/TabItem.test.tsx.snap b/packages/react/src/components/TabItem/__snapshots__/TabItem.test.tsx.snap
index b0d56e16d9..061283bb8e 100644
--- a/packages/react/src/components/TabItem/__snapshots__/TabItem.test.tsx.snap
+++ b/packages/react/src/components/TabItem/__snapshots__/TabItem.test.tsx.snap
@@ -68,14 +68,14 @@ Array [
     align-self: stretch;
   }
   .wrapper-d0-0-2-11:focus:after {
-    background-color: #000000;
+    background-color: #111111;
   }
   .wrapper-d0-0-2-11:hover:after {
-    background-color: #000000;
+    background-color: #111111;
     opacity: 0;
   }
   .ripple-d1-0-2-12 {
-    background-color: #000000;
+    background-color: #111111;
     height: 0;
     left: 50%;
     top: 50%;
@@ -84,6 +84,7 @@ Array [
   }
   .rippleContainer-d2-0-2-13 {
     overflow: hidden;
+    border-radius: 4px;
   }
   .rippleActive-d3-0-2-14 {
     animation: keyframes-ripple-0-2-10 300ms;
@@ -98,7 +99,7 @@ Array [
     height: 100%;
   }
   .wrapper-0-2-1:hover {
-    background: #00000029;
+    background: #11111129;
   }
   .tabButton-0-2-2 {
     gap: 8px;
@@ -116,10 +117,10 @@ Array [
   .tabButton-d1-0-2-4 {
     cursor: pointer;
     pointer-events: auto;
-    color: #777777;
+    color: #737373;
   }
   .tabButton-d1-0-2-4 i {
-    color: #777777;
+    color: #737373;
   }",
   <div>
     <li
diff --git a/packages/react/src/components/Tag/__snapshots__/Tag.test.tsx.snap b/packages/react/src/components/Tag/__snapshots__/Tag.test.tsx.snap
index 4f391a4518..648b879ae8 100644
--- a/packages/react/src/components/Tag/__snapshots__/Tag.test.tsx.snap
+++ b/packages/react/src/components/Tag/__snapshots__/Tag.test.tsx.snap
@@ -37,7 +37,7 @@ Array [
   pointer-events: none;
 }
 .icon-d0-0-2-7 {
-  color: #333333;
+  color: #363636;
   font-size: 16px;
 }",
   <div
@@ -235,7 +235,7 @@ Array [
   height: 16px;
 }
 .content-d1-0-2-5 {
-  color: #ffffff;
+  color: #111111;
 }",
   <div
     class=" container-0-2-2 container-d0-0-2-4 Tag-gaya"
diff --git a/packages/react/src/components/TextField/__snapshots__/TextField.test.tsx.snap b/packages/react/src/components/TextField/__snapshots__/TextField.test.tsx.snap
index 25539c00a9..8976d12cb4 100644
--- a/packages/react/src/components/TextField/__snapshots__/TextField.test.tsx.snap
+++ b/packages/react/src/components/TextField/__snapshots__/TextField.test.tsx.snap
@@ -23,7 +23,7 @@ Array [
   content: \\"\\";
   position: absolute;
   pointer-events: none;
-  background-color: #bbbbbb;
+  background-color: #8c8c8c;
 }
 .leadinContainer-0-2-5 {
   display: flex;
@@ -33,7 +33,7 @@ Array [
   justify-content: center;
 }
 .base-0-2-6 {
-  color: #333333;
+  color: #363636;
   width: 100%;
   border: none;
   outline: none;
@@ -49,11 +49,11 @@ Array [
   pointer-events: none;
 }
 .base-0-2-6:disabled {
-  color: #bbbbbb;
+  color: #8c8c8c;
   cursor: default;
 }
 .input-0-2-7 {
-  color: #333333;
+  color: #363636;
   width: 100%;
   border: none;
   outline: none;
@@ -70,12 +70,12 @@ Array [
   pointer-events: none;
 }
 .input-0-2-7:disabled {
-  color: #bbbbbb;
+  color: #8c8c8c;
   cursor: default;
 }
 .input-0-2-7::placeholder {}
 .textArea-0-2-8 {
-  color: #333333;
+  color: #363636;
   width: 100%;
   border: none;
   outline: none;
@@ -91,16 +91,16 @@ Array [
   pointer-events: none;
 }
 .textArea-0-2-8:disabled {
-  color: #bbbbbb;
+  color: #8c8c8c;
   cursor: default;
 }
 .textArea-0-2-8::placeholder {}
 .wrapper-d0-0-2-9 {
-  border-color: #bbbbbb;
+  border-color: #8c8c8c;
   cursor: text;
 }
 .wrapper-d0-0-2-9:hover {
-  border-color: #777777;
+  border-color: #737373;
 }
 .wrapper-d0-0-2-9:focus-within {
   border-color: #f4ab34;
@@ -112,13 +112,13 @@ Array [
   height: 56px;
 }
 .input-d1-0-2-10::placeholder {
-  color: #777777;
+  color: #737373;
 }
 .textArea-d2-0-2-11 {
   resize: none;
 }
 .textArea-d2-0-2-11::placeholder {
-  color: #777777;
+  color: #737373;
 }
 .helperText-0-2-12 {
   display: flex;
@@ -133,11 +133,11 @@ Array [
 }
 .helperText-0-2-12 > i {}
 .helperText-d0-0-2-13 {
-  color: #777777;
+  color: #737373;
 }
 .helperText-d0-0-2-13 > i {}
 .labelContainer-0-2-3 {
-  color: #000000;
+  color: #111111;
   font-family: \\"Roboto\\", Arial;
 }
 .labelText-0-2-1 {
@@ -149,7 +149,7 @@ Array [
   letter-spacing: 0.11px;
 }
 .labelText-d0-0-2-2 {
-  color: #777777;
+  color: #737373;
   display: inline-block;
 }",
   <div>
@@ -204,7 +204,7 @@ Array [
   content: \\"\\";
   position: absolute;
   pointer-events: none;
-  background-color: #bbbbbb;
+  background-color: #8c8c8c;
 }
 .leadinContainer-0-2-5 {
   display: flex;
@@ -214,7 +214,7 @@ Array [
   justify-content: center;
 }
 .base-0-2-6 {
-  color: #333333;
+  color: #363636;
   width: 100%;
   border: none;
   outline: none;
@@ -230,11 +230,11 @@ Array [
   pointer-events: none;
 }
 .base-0-2-6:disabled {
-  color: #bbbbbb;
+  color: #8c8c8c;
   cursor: default;
 }
 .input-0-2-7 {
-  color: #333333;
+  color: #363636;
   width: 100%;
   border: none;
   outline: none;
@@ -251,12 +251,12 @@ Array [
   pointer-events: none;
 }
 .input-0-2-7:disabled {
-  color: #bbbbbb;
+  color: #8c8c8c;
   cursor: default;
 }
 .input-0-2-7::placeholder {}
 .textArea-0-2-8 {
-  color: #333333;
+  color: #363636;
   width: 100%;
   border: none;
   outline: none;
@@ -272,16 +272,16 @@ Array [
   pointer-events: none;
 }
 .textArea-0-2-8:disabled {
-  color: #bbbbbb;
+  color: #8c8c8c;
   cursor: default;
 }
 .textArea-0-2-8::placeholder {}
 .wrapper-d0-0-2-9 {
-  border-color: #bbbbbb;
+  border-color: #8c8c8c;
   cursor: text;
 }
 .wrapper-d0-0-2-9:hover {
-  border-color: #777777;
+  border-color: #737373;
 }
 .wrapper-d0-0-2-9:focus-within {
   border-color: #f4ab34;
@@ -293,13 +293,13 @@ Array [
   height: 56px;
 }
 .input-d1-0-2-10::placeholder {
-  color: #777777;
+  color: #737373;
 }
 .textArea-d2-0-2-11 {
   resize: none;
 }
 .textArea-d2-0-2-11::placeholder {
-  color: #777777;
+  color: #737373;
 }
 .helperText-0-2-12 {
   display: flex;
@@ -314,11 +314,11 @@ Array [
 }
 .helperText-0-2-12 > i {}
 .helperText-d0-0-2-13 {
-  color: #777777;
+  color: #737373;
 }
 .helperText-d0-0-2-13 > i {}
 .labelContainer-0-2-3 {
-  color: #000000;
+  color: #111111;
   font-family: \\"Roboto\\", Arial;
 }
 .labelText-0-2-1 {
@@ -330,7 +330,7 @@ Array [
   letter-spacing: 0.11px;
 }
 .labelText-d0-0-2-2 {
-  color: #777777;
+  color: #737373;
   display: none;
 }",
   <div>
@@ -383,7 +383,7 @@ Array [
   content: \\"\\";
   position: absolute;
   pointer-events: none;
-  background-color: #bbbbbb;
+  background-color: #8c8c8c;
 }
 .leadinContainer-0-2-5 {
   display: flex;
@@ -393,7 +393,7 @@ Array [
   justify-content: center;
 }
 .base-0-2-6 {
-  color: #333333;
+  color: #363636;
   width: 100%;
   border: none;
   outline: none;
@@ -409,11 +409,11 @@ Array [
   pointer-events: none;
 }
 .base-0-2-6:disabled {
-  color: #bbbbbb;
+  color: #8c8c8c;
   cursor: default;
 }
 .input-0-2-7 {
-  color: #333333;
+  color: #363636;
   width: 100%;
   border: none;
   outline: none;
@@ -430,12 +430,12 @@ Array [
   pointer-events: none;
 }
 .input-0-2-7:disabled {
-  color: #bbbbbb;
+  color: #8c8c8c;
   cursor: default;
 }
 .input-0-2-7::placeholder {}
 .textArea-0-2-8 {
-  color: #333333;
+  color: #363636;
   width: 100%;
   border: none;
   outline: none;
@@ -451,16 +451,16 @@ Array [
   pointer-events: none;
 }
 .textArea-0-2-8:disabled {
-  color: #bbbbbb;
+  color: #8c8c8c;
   cursor: default;
 }
 .textArea-0-2-8::placeholder {}
 .wrapper-d0-0-2-9 {
-  border-color: #bbbbbb;
+  border-color: #8c8c8c;
   cursor: text;
 }
 .wrapper-d0-0-2-9:hover {
-  border-color: #777777;
+  border-color: #737373;
 }
 .wrapper-d0-0-2-9:focus-within {
   border-color: #f4ab34;
@@ -472,13 +472,13 @@ Array [
   height: 56px;
 }
 .input-d1-0-2-10::placeholder {
-  color: #777777;
+  color: #737373;
 }
 .textArea-d2-0-2-11 {
   resize: none;
 }
 .textArea-d2-0-2-11::placeholder {
-  color: #777777;
+  color: #737373;
 }
 .helperText-0-2-12 {
   display: flex;
@@ -493,11 +493,11 @@ Array [
 }
 .helperText-0-2-12 > i {}
 .helperText-d0-0-2-13 {
-  color: #777777;
+  color: #737373;
 }
 .helperText-d0-0-2-13 > i {}
 .labelContainer-0-2-3 {
-  color: #000000;
+  color: #111111;
   font-family: \\"Roboto\\", Arial;
 }
 .labelText-0-2-1 {
@@ -509,7 +509,7 @@ Array [
   letter-spacing: 0.11px;
 }
 .labelText-d0-0-2-2 {
-  color: #777777;
+  color: #737373;
   display: none;
 }",
   <div>
@@ -562,7 +562,7 @@ Array [
   content: \\"\\";
   position: absolute;
   pointer-events: none;
-  background-color: #bbbbbb;
+  background-color: #8c8c8c;
 }
 .leadinContainer-0-2-5 {
   display: flex;
@@ -572,7 +572,7 @@ Array [
   justify-content: center;
 }
 .base-0-2-6 {
-  color: #333333;
+  color: #363636;
   width: 100%;
   border: none;
   outline: none;
@@ -588,11 +588,11 @@ Array [
   pointer-events: none;
 }
 .base-0-2-6:disabled {
-  color: #bbbbbb;
+  color: #8c8c8c;
   cursor: default;
 }
 .input-0-2-7 {
-  color: #333333;
+  color: #363636;
   width: 100%;
   border: none;
   outline: none;
@@ -609,12 +609,12 @@ Array [
   pointer-events: none;
 }
 .input-0-2-7:disabled {
-  color: #bbbbbb;
+  color: #8c8c8c;
   cursor: default;
 }
 .input-0-2-7::placeholder {}
 .textArea-0-2-8 {
-  color: #333333;
+  color: #363636;
   width: 100%;
   border: none;
   outline: none;
@@ -630,16 +630,16 @@ Array [
   pointer-events: none;
 }
 .textArea-0-2-8:disabled {
-  color: #bbbbbb;
+  color: #8c8c8c;
   cursor: default;
 }
 .textArea-0-2-8::placeholder {}
 .wrapper-d0-0-2-9 {
-  border-color: #bbbbbb;
+  border-color: #8c8c8c;
   cursor: text;
 }
 .wrapper-d0-0-2-9:hover {
-  border-color: #777777;
+  border-color: #737373;
 }
 .wrapper-d0-0-2-9:focus-within {
   border-color: #f4ab34;
@@ -651,13 +651,13 @@ Array [
   height: 56px;
 }
 .input-d1-0-2-10::placeholder {
-  color: #777777;
+  color: #737373;
 }
 .textArea-d2-0-2-11 {
   resize: none;
 }
 .textArea-d2-0-2-11::placeholder {
-  color: #777777;
+  color: #737373;
 }
 .helperText-0-2-12 {
   display: flex;
@@ -672,11 +672,11 @@ Array [
 }
 .helperText-0-2-12 > i {}
 .helperText-d0-0-2-13 {
-  color: #777777;
+  color: #737373;
 }
 .helperText-d0-0-2-13 > i {}
 .labelContainer-0-2-3 {
-  color: #000000;
+  color: #111111;
   font-family: \\"Roboto\\", Arial;
 }
 .labelText-0-2-1 {
@@ -688,7 +688,7 @@ Array [
   letter-spacing: 0.11px;
 }
 .labelText-d0-0-2-2 {
-  color: #777777;
+  color: #737373;
   display: none;
 }",
   <div>
@@ -741,7 +741,7 @@ Array [
   content: \\"\\";
   position: absolute;
   pointer-events: none;
-  background-color: #bbbbbb;
+  background-color: #8c8c8c;
 }
 .leadinContainer-0-2-5 {
   display: flex;
@@ -751,7 +751,7 @@ Array [
   justify-content: center;
 }
 .base-0-2-6 {
-  color: #333333;
+  color: #363636;
   width: 100%;
   border: none;
   outline: none;
@@ -767,11 +767,11 @@ Array [
   pointer-events: none;
 }
 .base-0-2-6:disabled {
-  color: #bbbbbb;
+  color: #8c8c8c;
   cursor: default;
 }
 .input-0-2-7 {
-  color: #333333;
+  color: #363636;
   width: 100%;
   border: none;
   outline: none;
@@ -788,12 +788,12 @@ Array [
   pointer-events: none;
 }
 .input-0-2-7:disabled {
-  color: #bbbbbb;
+  color: #8c8c8c;
   cursor: default;
 }
 .input-0-2-7::placeholder {}
 .textArea-0-2-8 {
-  color: #333333;
+  color: #363636;
   width: 100%;
   border: none;
   outline: none;
@@ -809,16 +809,16 @@ Array [
   pointer-events: none;
 }
 .textArea-0-2-8:disabled {
-  color: #bbbbbb;
+  color: #8c8c8c;
   cursor: default;
 }
 .textArea-0-2-8::placeholder {}
 .wrapper-d0-0-2-9 {
-  border-color: #bbbbbb;
+  border-color: #8c8c8c;
   cursor: text;
 }
 .wrapper-d0-0-2-9:hover {
-  border-color: #777777;
+  border-color: #737373;
 }
 .wrapper-d0-0-2-9:focus-within {
   border-color: #f4ab34;
@@ -830,13 +830,13 @@ Array [
   height: 56px;
 }
 .input-d1-0-2-10::placeholder {
-  color: #777777;
+  color: #737373;
 }
 .textArea-d2-0-2-11 {
   resize: none;
 }
 .textArea-d2-0-2-11::placeholder {
-  color: #777777;
+  color: #737373;
 }
 .helperText-0-2-12 {
   display: flex;
@@ -851,11 +851,11 @@ Array [
 }
 .helperText-0-2-12 > i {}
 .helperText-d0-0-2-13 {
-  color: #777777;
+  color: #737373;
 }
 .helperText-d0-0-2-13 > i {}
 .labelContainer-0-2-3 {
-  color: #000000;
+  color: #111111;
   font-family: \\"Roboto\\", Arial;
 }
 .labelText-0-2-1 {
@@ -867,7 +867,7 @@ Array [
   letter-spacing: 0.11px;
 }
 .labelText-d0-0-2-2 {
-  color: #777777;
+  color: #737373;
   display: none;
 }",
   <div>
@@ -922,7 +922,7 @@ Array [
   content: \\"\\";
   position: absolute;
   pointer-events: none;
-  background-color: #bbbbbb;
+  background-color: #8c8c8c;
 }
 .leadinContainer-0-2-5 {
   display: flex;
@@ -932,7 +932,7 @@ Array [
   justify-content: center;
 }
 .base-0-2-6 {
-  color: #333333;
+  color: #363636;
   width: 100%;
   border: none;
   outline: none;
@@ -948,11 +948,11 @@ Array [
   pointer-events: none;
 }
 .base-0-2-6:disabled {
-  color: #bbbbbb;
+  color: #8c8c8c;
   cursor: default;
 }
 .input-0-2-7 {
-  color: #333333;
+  color: #363636;
   width: 100%;
   border: none;
   outline: none;
@@ -969,12 +969,12 @@ Array [
   pointer-events: none;
 }
 .input-0-2-7:disabled {
-  color: #bbbbbb;
+  color: #8c8c8c;
   cursor: default;
 }
 .input-0-2-7::placeholder {}
 .textArea-0-2-8 {
-  color: #333333;
+  color: #363636;
   width: 100%;
   border: none;
   outline: none;
@@ -990,7 +990,7 @@ Array [
   pointer-events: none;
 }
 .textArea-0-2-8:disabled {
-  color: #bbbbbb;
+  color: #8c8c8c;
   cursor: default;
 }
 .textArea-0-2-8::placeholder {}
@@ -1009,13 +1009,13 @@ Array [
   height: 56px;
 }
 .input-d1-0-2-10::placeholder {
-  color: #777777;
+  color: #737373;
 }
 .textArea-d2-0-2-11 {
   resize: none;
 }
 .textArea-d2-0-2-11::placeholder {
-  color: #777777;
+  color: #737373;
 }
 .helperText-0-2-12 {
   display: flex;
@@ -1045,7 +1045,7 @@ Array [
   font-size: 16px;
 }
 .labelContainer-0-2-3 {
-  color: #000000;
+  color: #111111;
   font-family: \\"Roboto\\", Arial;
 }
 .labelText-0-2-1 {
@@ -1117,7 +1117,7 @@ Array [
   content: \\"\\";
   position: absolute;
   pointer-events: none;
-  background-color: #bbbbbb;
+  background-color: #8c8c8c;
 }
 .leadinContainer-0-2-5 {
   display: flex;
@@ -1127,7 +1127,7 @@ Array [
   justify-content: center;
 }
 .base-0-2-6 {
-  color: #333333;
+  color: #363636;
   width: 100%;
   border: none;
   outline: none;
@@ -1143,11 +1143,11 @@ Array [
   pointer-events: none;
 }
 .base-0-2-6:disabled {
-  color: #bbbbbb;
+  color: #8c8c8c;
   cursor: default;
 }
 .input-0-2-7 {
-  color: #333333;
+  color: #363636;
   width: 100%;
   border: none;
   outline: none;
@@ -1164,12 +1164,12 @@ Array [
   pointer-events: none;
 }
 .input-0-2-7:disabled {
-  color: #bbbbbb;
+  color: #8c8c8c;
   cursor: default;
 }
 .input-0-2-7::placeholder {}
 .textArea-0-2-8 {
-  color: #333333;
+  color: #363636;
   width: 100%;
   border: none;
   outline: none;
@@ -1185,7 +1185,7 @@ Array [
   pointer-events: none;
 }
 .textArea-0-2-8:disabled {
-  color: #bbbbbb;
+  color: #8c8c8c;
   cursor: default;
 }
 .textArea-0-2-8::placeholder {}
@@ -1204,13 +1204,13 @@ Array [
   height: 56px;
 }
 .input-d1-0-2-10::placeholder {
-  color: #777777;
+  color: #737373;
 }
 .textArea-d2-0-2-11 {
   resize: none;
 }
 .textArea-d2-0-2-11::placeholder {
-  color: #777777;
+  color: #737373;
 }
 .helperText-0-2-12 {
   display: flex;
@@ -1240,7 +1240,7 @@ Array [
   font-size: 16px;
 }
 .labelContainer-0-2-3 {
-  color: #000000;
+  color: #111111;
   font-family: \\"Roboto\\", Arial;
 }
 .labelText-0-2-1 {
@@ -1312,7 +1312,7 @@ Array [
   content: \\"\\";
   position: absolute;
   pointer-events: none;
-  background-color: #bbbbbb;
+  background-color: #8c8c8c;
 }
 .leadinContainer-0-2-5 {
   display: flex;
@@ -1322,7 +1322,7 @@ Array [
   justify-content: center;
 }
 .base-0-2-6 {
-  color: #333333;
+  color: #363636;
   width: 100%;
   border: none;
   outline: none;
@@ -1338,11 +1338,11 @@ Array [
   pointer-events: none;
 }
 .base-0-2-6:disabled {
-  color: #bbbbbb;
+  color: #8c8c8c;
   cursor: default;
 }
 .input-0-2-7 {
-  color: #333333;
+  color: #363636;
   width: 100%;
   border: none;
   outline: none;
@@ -1359,12 +1359,12 @@ Array [
   pointer-events: none;
 }
 .input-0-2-7:disabled {
-  color: #bbbbbb;
+  color: #8c8c8c;
   cursor: default;
 }
 .input-0-2-7::placeholder {}
 .textArea-0-2-8 {
-  color: #333333;
+  color: #363636;
   width: 100%;
   border: none;
   outline: none;
@@ -1380,16 +1380,16 @@ Array [
   pointer-events: none;
 }
 .textArea-0-2-8:disabled {
-  color: #bbbbbb;
+  color: #8c8c8c;
   cursor: default;
 }
 .textArea-0-2-8::placeholder {}
 .wrapper-d0-0-2-9 {
-  border-color: #bbbbbb;
+  border-color: #8c8c8c;
   cursor: text;
 }
 .wrapper-d0-0-2-9:hover {
-  border-color: #777777;
+  border-color: #737373;
 }
 .wrapper-d0-0-2-9:focus-within {
   border-color: #f4ab34;
@@ -1402,14 +1402,14 @@ Array [
   padding-right: 8px;
 }
 .input-d1-0-2-10::placeholder {
-  color: #777777;
+  color: #737373;
 }
 .textArea-d2-0-2-11 {
   padding-right: 8px;
   resize: none;
 }
 .textArea-d2-0-2-11::placeholder {
-  color: #777777;
+  color: #737373;
 }
 .sharedRippleEffect-0-2-21 {
   top: 0;
@@ -1476,14 +1476,14 @@ Array [
     align-self: start;
   }
   .wrapper-d0-0-2-27:focus:after {
-    background-color: #000000;
+    background-color: #111111;
   }
   .wrapper-d0-0-2-27:hover:after {
-    background-color: #000000;
+    background-color: #111111;
     opacity: 0;
   }
   .ripple-d1-0-2-28 {
-    background-color: #000000;
+    background-color: #111111;
     height: 0;
     left: 50%;
     top: 50%;
@@ -1492,6 +1492,7 @@ Array [
   }
   .rippleContainer-d2-0-2-29 {
     overflow: hidden;
+    border-radius: 4px;
   }
   .rippleActive-d3-0-2-30 {
     animation: keyframes-ripple-0-2-26 300ms;
@@ -1523,7 +1524,7 @@ Array [
     content: \\" \\";
     opacity: 0;
     position: absolute;
-    background-color: #000000;
+    background-color: #111111;
   }
   .iconButtonContainer-0-2-17:hover:not([disabled]):after {
     opacity: 0.04;
@@ -1570,7 +1571,7 @@ Array [
   }
   .helperText-0-2-33 > i {  }
   .helperText-d0-0-2-34 {
-    color: #777777;
+    color: #737373;
   }
   .helperText-d0-0-2-34 > i {  }
   .icon-0-2-31 {
@@ -1579,11 +1580,11 @@ Array [
     pointer-events: none;
   }
   .icon-d0-0-2-32 {
-    color: #333333;
+    color: #363636;
     font-size: 24px;
   }
   .labelContainer-0-2-3 {
-    color: #000000;
+    color: #111111;
     font-family: \\"Roboto\\", Arial;
   }
   .labelText-0-2-1 {
@@ -1595,7 +1596,7 @@ Array [
     letter-spacing: 0.11px;
   }
   .labelText-d0-0-2-2 {
-    color: #777777;
+    color: #737373;
     display: none;
   }",
   <div>
@@ -1679,7 +1680,7 @@ Array [
   content: \\"\\";
   position: absolute;
   pointer-events: none;
-  background-color: #bbbbbb;
+  background-color: #8c8c8c;
 }
 .leadinContainer-0-2-5 {
   display: flex;
@@ -1689,7 +1690,7 @@ Array [
   justify-content: center;
 }
 .base-0-2-6 {
-  color: #333333;
+  color: #363636;
   width: 100%;
   border: none;
   outline: none;
@@ -1705,11 +1706,11 @@ Array [
   pointer-events: none;
 }
 .base-0-2-6:disabled {
-  color: #bbbbbb;
+  color: #8c8c8c;
   cursor: default;
 }
 .input-0-2-7 {
-  color: #333333;
+  color: #363636;
   width: 100%;
   border: none;
   outline: none;
@@ -1726,12 +1727,12 @@ Array [
   pointer-events: none;
 }
 .input-0-2-7:disabled {
-  color: #bbbbbb;
+  color: #8c8c8c;
   cursor: default;
 }
 .input-0-2-7::placeholder {}
 .textArea-0-2-8 {
-  color: #333333;
+  color: #363636;
   width: 100%;
   border: none;
   outline: none;
@@ -1747,16 +1748,16 @@ Array [
   pointer-events: none;
 }
 .textArea-0-2-8:disabled {
-  color: #bbbbbb;
+  color: #8c8c8c;
   cursor: default;
 }
 .textArea-0-2-8::placeholder {}
 .wrapper-d0-0-2-9 {
-  border-color: #bbbbbb;
+  border-color: #8c8c8c;
   cursor: text;
 }
 .wrapper-d0-0-2-9:hover {
-  border-color: #777777;
+  border-color: #737373;
 }
 .wrapper-d0-0-2-9:focus-within {
   border-color: #f4ab34;
@@ -1769,14 +1770,14 @@ Array [
   padding-right: 8px;
 }
 .input-d1-0-2-10::placeholder {
-  color: #777777;
+  color: #737373;
 }
 .textArea-d2-0-2-11 {
   padding-right: 8px;
   resize: none;
 }
 .textArea-d2-0-2-11::placeholder {
-  color: #777777;
+  color: #737373;
 }
 .container-0-2-12 {}
 .wrapper-0-2-13 {
@@ -1807,11 +1808,11 @@ Array [
 }
 .helperText-0-2-17 > i {}
 .helperText-d0-0-2-18 {
-  color: #777777;
+  color: #737373;
 }
 .helperText-d0-0-2-18 > i {}
 .labelContainer-0-2-3 {
-  color: #000000;
+  color: #111111;
   font-family: \\"Roboto\\", Arial;
 }
 .labelText-0-2-1 {
@@ -1823,7 +1824,7 @@ Array [
   letter-spacing: 0.11px;
 }
 .labelText-d0-0-2-2 {
-  color: #777777;
+  color: #737373;
   display: none;
 }",
   <div>
@@ -1890,7 +1891,7 @@ Array [
   content: \\"\\";
   position: absolute;
   pointer-events: none;
-  background-color: #bbbbbb;
+  background-color: #8c8c8c;
 }
 .leadinContainer-0-2-5 {
   display: flex;
@@ -1900,7 +1901,7 @@ Array [
   justify-content: center;
 }
 .base-0-2-6 {
-  color: #333333;
+  color: #363636;
   width: 100%;
   border: none;
   outline: none;
@@ -1916,11 +1917,11 @@ Array [
   pointer-events: none;
 }
 .base-0-2-6:disabled {
-  color: #bbbbbb;
+  color: #8c8c8c;
   cursor: default;
 }
 .input-0-2-7 {
-  color: #333333;
+  color: #363636;
   width: 100%;
   border: none;
   outline: none;
@@ -1937,12 +1938,12 @@ Array [
   pointer-events: none;
 }
 .input-0-2-7:disabled {
-  color: #bbbbbb;
+  color: #8c8c8c;
   cursor: default;
 }
 .input-0-2-7::placeholder {}
 .textArea-0-2-8 {
-  color: #333333;
+  color: #363636;
   width: 100%;
   border: none;
   outline: none;
@@ -1958,16 +1959,16 @@ Array [
   pointer-events: none;
 }
 .textArea-0-2-8:disabled {
-  color: #bbbbbb;
+  color: #8c8c8c;
   cursor: default;
 }
 .textArea-0-2-8::placeholder {}
 .wrapper-d0-0-2-9 {
-  border-color: #bbbbbb;
+  border-color: #8c8c8c;
   cursor: text;
 }
 .wrapper-d0-0-2-9:hover {
-  border-color: #777777;
+  border-color: #737373;
 }
 .wrapper-d0-0-2-9:focus-within {
   border-color: #f4ab34;
@@ -1979,13 +1980,13 @@ Array [
   height: 56px;
 }
 .input-d1-0-2-10::placeholder {
-  color: #777777;
+  color: #737373;
 }
 .textArea-d2-0-2-11 {
   resize: none;
 }
 .textArea-d2-0-2-11::placeholder {
-  color: #777777;
+  color: #737373;
 }
 .helperText-0-2-12 {
   display: flex;
@@ -2000,11 +2001,11 @@ Array [
 }
 .helperText-0-2-12 > i {}
 .helperText-d0-0-2-13 {
-  color: #777777;
+  color: #737373;
 }
 .helperText-d0-0-2-13 > i {}
 .labelContainer-0-2-3 {
-  color: #000000;
+  color: #111111;
   font-family: \\"Roboto\\", Arial;
 }
 .labelText-0-2-1 {
@@ -2016,7 +2017,7 @@ Array [
   letter-spacing: 0.11px;
 }
 .labelText-d0-0-2-2 {
-  color: #777777;
+  color: #737373;
   display: none;
 }",
   <div>
@@ -2068,7 +2069,7 @@ Array [
   content: \\"\\";
   position: absolute;
   pointer-events: none;
-  background-color: #bbbbbb;
+  background-color: #8c8c8c;
 }
 .leadinContainer-0-2-5 {
   display: flex;
@@ -2078,7 +2079,7 @@ Array [
   justify-content: center;
 }
 .base-0-2-6 {
-  color: #333333;
+  color: #363636;
   width: 100%;
   border: none;
   outline: none;
@@ -2094,11 +2095,11 @@ Array [
   pointer-events: none;
 }
 .base-0-2-6:disabled {
-  color: #bbbbbb;
+  color: #8c8c8c;
   cursor: default;
 }
 .input-0-2-7 {
-  color: #333333;
+  color: #363636;
   width: 100%;
   border: none;
   outline: none;
@@ -2115,12 +2116,12 @@ Array [
   pointer-events: none;
 }
 .input-0-2-7:disabled {
-  color: #bbbbbb;
+  color: #8c8c8c;
   cursor: default;
 }
 .input-0-2-7::placeholder {}
 .textArea-0-2-8 {
-  color: #333333;
+  color: #363636;
   width: 100%;
   border: none;
   outline: none;
@@ -2136,16 +2137,16 @@ Array [
   pointer-events: none;
 }
 .textArea-0-2-8:disabled {
-  color: #bbbbbb;
+  color: #8c8c8c;
   cursor: default;
 }
 .textArea-0-2-8::placeholder {}
 .wrapper-d0-0-2-9 {
-  border-color: #bbbbbb;
+  border-color: #8c8c8c;
   cursor: text;
 }
 .wrapper-d0-0-2-9:hover {
-  border-color: #777777;
+  border-color: #737373;
 }
 .wrapper-d0-0-2-9:focus-within {
   border-color: #f4ab34;
@@ -2157,13 +2158,13 @@ Array [
   height: 56px;
 }
 .input-d1-0-2-10::placeholder {
-  color: #777777;
+  color: #737373;
 }
 .textArea-d2-0-2-11 {
   resize: none;
 }
 .textArea-d2-0-2-11::placeholder {
-  color: #777777;
+  color: #737373;
 }
 .helperText-0-2-12 {
   display: flex;
@@ -2178,11 +2179,11 @@ Array [
 }
 .helperText-0-2-12 > i {}
 .helperText-d0-0-2-13 {
-  color: #777777;
+  color: #737373;
 }
 .helperText-d0-0-2-13 > i {}
 .labelContainer-0-2-3 {
-  color: #000000;
+  color: #111111;
   font-family: \\"Roboto\\", Arial;
 }
 .labelText-0-2-1 {
@@ -2194,7 +2195,7 @@ Array [
   letter-spacing: 0.11px;
 }
 .labelText-d0-0-2-2 {
-  color: #777777;
+  color: #737373;
   display: none;
 }",
   <div>
@@ -2247,7 +2248,7 @@ Array [
   content: \\"\\";
   position: absolute;
   pointer-events: none;
-  background-color: #bbbbbb;
+  background-color: #8c8c8c;
 }
 .leadinContainer-0-2-5 {
   display: flex;
@@ -2257,7 +2258,7 @@ Array [
   justify-content: center;
 }
 .base-0-2-6 {
-  color: #333333;
+  color: #363636;
   width: 100%;
   border: none;
   outline: none;
@@ -2273,11 +2274,11 @@ Array [
   pointer-events: none;
 }
 .base-0-2-6:disabled {
-  color: #bbbbbb;
+  color: #8c8c8c;
   cursor: default;
 }
 .input-0-2-7 {
-  color: #333333;
+  color: #363636;
   width: 100%;
   border: none;
   outline: none;
@@ -2294,12 +2295,12 @@ Array [
   pointer-events: none;
 }
 .input-0-2-7:disabled {
-  color: #bbbbbb;
+  color: #8c8c8c;
   cursor: default;
 }
 .input-0-2-7::placeholder {}
 .textArea-0-2-8 {
-  color: #333333;
+  color: #363636;
   width: 100%;
   border: none;
   outline: none;
@@ -2315,16 +2316,16 @@ Array [
   pointer-events: none;
 }
 .textArea-0-2-8:disabled {
-  color: #bbbbbb;
+  color: #8c8c8c;
   cursor: default;
 }
 .textArea-0-2-8::placeholder {}
 .wrapper-d0-0-2-9 {
-  border-color: #bbbbbb;
+  border-color: #8c8c8c;
   cursor: text;
 }
 .wrapper-d0-0-2-9:hover {
-  border-color: #777777;
+  border-color: #737373;
 }
 .wrapper-d0-0-2-9:focus-within {
   border-color: #f4ab34;
@@ -2336,13 +2337,13 @@ Array [
   height: 48px;
 }
 .input-d1-0-2-10::placeholder {
-  color: #777777;
+  color: #737373;
 }
 .textArea-d2-0-2-11 {
   resize: none;
 }
 .textArea-d2-0-2-11::placeholder {
-  color: #777777;
+  color: #737373;
 }
 .helperText-0-2-12 {
   display: flex;
@@ -2357,11 +2358,11 @@ Array [
 }
 .helperText-0-2-12 > i {}
 .helperText-d0-0-2-13 {
-  color: #777777;
+  color: #737373;
 }
 .helperText-d0-0-2-13 > i {}
 .labelContainer-0-2-3 {
-  color: #000000;
+  color: #111111;
   font-family: \\"Roboto\\", Arial;
 }
 .labelText-0-2-1 {
@@ -2373,7 +2374,7 @@ Array [
   letter-spacing: 0.11px;
 }
 .labelText-d0-0-2-2 {
-  color: #777777;
+  color: #737373;
   display: none;
 }",
   <div>
@@ -2426,7 +2427,7 @@ Array [
   content: \\"\\";
   position: absolute;
   pointer-events: none;
-  background-color: #bbbbbb;
+  background-color: #8c8c8c;
 }
 .leadinContainer-0-2-5 {
   display: flex;
@@ -2436,7 +2437,7 @@ Array [
   justify-content: center;
 }
 .base-0-2-6 {
-  color: #333333;
+  color: #363636;
   width: 100%;
   border: none;
   outline: none;
@@ -2452,11 +2453,11 @@ Array [
   pointer-events: none;
 }
 .base-0-2-6:disabled {
-  color: #bbbbbb;
+  color: #8c8c8c;
   cursor: default;
 }
 .input-0-2-7 {
-  color: #333333;
+  color: #363636;
   width: 100%;
   border: none;
   outline: none;
@@ -2473,12 +2474,12 @@ Array [
   pointer-events: none;
 }
 .input-0-2-7:disabled {
-  color: #bbbbbb;
+  color: #8c8c8c;
   cursor: default;
 }
 .input-0-2-7::placeholder {}
 .textArea-0-2-8 {
-  color: #333333;
+  color: #363636;
   width: 100%;
   border: none;
   outline: none;
@@ -2494,16 +2495,16 @@ Array [
   pointer-events: none;
 }
 .textArea-0-2-8:disabled {
-  color: #bbbbbb;
+  color: #8c8c8c;
   cursor: default;
 }
 .textArea-0-2-8::placeholder {}
 .wrapper-d0-0-2-9 {
-  border-color: #bbbbbb;
+  border-color: #8c8c8c;
   cursor: text;
 }
 .wrapper-d0-0-2-9:hover {
-  border-color: #777777;
+  border-color: #737373;
 }
 .wrapper-d0-0-2-9:focus-within {
   border-color: #f4ab34;
@@ -2515,13 +2516,13 @@ Array [
   height: 56px;
 }
 .input-d1-0-2-10::placeholder {
-  color: #777777;
+  color: #737373;
 }
 .textArea-d2-0-2-11 {
   resize: none;
 }
 .textArea-d2-0-2-11::placeholder {
-  color: #777777;
+  color: #737373;
 }
 .helperText-0-2-12 {
   display: flex;
@@ -2536,11 +2537,11 @@ Array [
 }
 .helperText-0-2-12 > i {}
 .helperText-d0-0-2-13 {
-  color: #777777;
+  color: #737373;
 }
 .helperText-d0-0-2-13 > i {}
 .labelContainer-0-2-3 {
-  color: #000000;
+  color: #111111;
   font-family: \\"Roboto\\", Arial;
 }
 .labelText-0-2-1 {
@@ -2552,7 +2553,7 @@ Array [
   letter-spacing: 0.11px;
 }
 .labelText-d0-0-2-2 {
-  color: #777777;
+  color: #737373;
   display: none;
 }",
   <div>
diff --git a/yarn.lock b/yarn.lock
index 00922ce557..4775a2eefa 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2698,19 +2698,19 @@
   resolved "https://registry.yarnpkg.com/@naturacosmeticos/natds-icons/-/natds-icons-1.20.1.tgz#478e01c01c33f2d5825b3e71dd7f01fa576671fb"
   integrity sha512-hmdXCxeKjG9fqdHF1Z/jVFR8PDwj8Qyovwf0V7h0W3gbgw+37NrACzNV/UcHRLtpTpLlQxmS8Nv10ciySSCIxA==
 
-"@naturacosmeticos/natds-themes@0.68.8":
-  version "0.68.8"
-  resolved "https://registry.yarnpkg.com/@naturacosmeticos/natds-themes/-/natds-themes-0.68.8.tgz#941ceb25039c3eb68486732bf992c344b3716e7e"
-  integrity sha512-TRE8M9LQfLEy7fQpPsDUYyD7AXSk3Ww0896wbRAKxv2dI44AEsJ750DmqzKfFbKUOvFnvYp/NzEmIVfurG2MhQ==
+"@naturacosmeticos/natds-themes@0.70.0":
+  version "0.70.0"
+  resolved "https://registry.yarnpkg.com/@naturacosmeticos/natds-themes/-/natds-themes-0.70.0.tgz#0de7525cb7c71dc309c22d010cb39e8d7d7de6a9"
+  integrity sha512-p1fd77WUjNn8y9XShpaBXZgLWW4H+VdVIzF6OH2zedlS5/vD/Lk4OUSMBXSFzbbbhIbhLiEdZRsCPC65DG24iw==
   dependencies:
     open-color "^1.8.0"
     svg2vectordrawable "2.6.26"
     webp-converter "^2.3.3"
 
-"@naturacosmeticos/natds-themes@0.70.0":
-  version "0.70.0"
-  resolved "https://registry.yarnpkg.com/@naturacosmeticos/natds-themes/-/natds-themes-0.70.0.tgz#0de7525cb7c71dc309c22d010cb39e8d7d7de6a9"
-  integrity sha512-p1fd77WUjNn8y9XShpaBXZgLWW4H+VdVIzF6OH2zedlS5/vD/Lk4OUSMBXSFzbbbhIbhLiEdZRsCPC65DG24iw==
+"@naturacosmeticos/natds-themes@0.71.0":
+  version "0.71.0"
+  resolved "https://registry.yarnpkg.com/@naturacosmeticos/natds-themes/-/natds-themes-0.71.0.tgz#5d02e53f8e69c63ca9976a1bf173fe19bcf9fad2"
+  integrity sha512-7eyNmpEUyQqVbLWeL0R68yIDKkma3kRGBomsPioLMz3dgjFRXZFW1rYCXG+aZFQRgLur0U3ciKR4xyVFo2C9Gg==
   dependencies:
     open-color "^1.8.0"
     svg2vectordrawable "2.6.26"