From 9a1cb93e5ffa193ef4c8adc7009c08db78024246 Mon Sep 17 00:00:00 2001 From: evgenitsn Date: Tue, 16 Aug 2022 12:55:57 +0300 Subject: [PATCH 01/26] docs(PPDSC-2297): newskit homepage update - banners, explore and more --- .../__snapshots__/feature-card.test.tsx.snap | 416 ++++------- site/components/feature-card/feature-card.tsx | 9 +- site/components/feature-card/types.ts | 2 + site/components/homepage/explore/explore.tsx | 47 ++ site/components/homepage/explore/index.ts | 1 + site/components/homepage/index.ts | 3 + .../homepage/keep-in-touch/index.ts | 1 + .../homepage/keep-in-touch/keep-in-touch.tsx | 74 ++ .../homepage/supported-brands/index.ts | 1 + .../supported-brands/supported-brands.tsx | 57 ++ .../illustrations/brands/barrons.tsx | 56 ++ site/components/illustrations/brands/index.ts | 25 + .../illustrations/brands/mansion-global.tsx | 20 + .../illustrations/brands/marketwatch.tsx | 24 + site/components/illustrations/brands/sun.tsx | 22 + .../illustrations/brands/talk-radio.tsx | 58 ++ .../illustrations/brands/talk-sport.tsx | 54 ++ .../illustrations/brands/talk-tv.tsx | 46 ++ .../illustrations/brands/times-travel.tsx | 66 ++ .../components/illustrations/brands/times.tsx | 452 +++++++++++ .../illustrations/brands/virgin.tsx | 52 ++ site/components/illustrations/brands/wsj.tsx | 20 + .../illustrations/landing-page/github.tsx | 68 ++ .../illustrations/landing-page/index.ts | 5 + .../illustrations/landing-page/medium.tsx | 28 + .../illustrations/landing-page/storybook.tsx | 43 ++ site/components/index-cards.tsx | 2 +- .../section-introduction.test.ts.snap | 184 +++++ .../__tests__/section-introduction.test.ts | 13 + .../section-introduction-grid/index.ts | 2 + .../section-introduction-grid.tsx | 57 ++ .../section-introduction-grid/types.ts | 9 + site/pages/index-new.tsx | 56 +- .../static/landing/feature-card-banner.svg | 18 + .../landing/feature-card-contribute-old.svg | 23 + .../landing/feature-card-contribute.svg | 39 +- .../__snapshots__/doc-theme.test.ts.snap | 704 +++++++++++++++++- site/theme/style-presets.ts | 87 ++- 38 files changed, 2497 insertions(+), 347 deletions(-) create mode 100644 site/components/homepage/explore/explore.tsx create mode 100644 site/components/homepage/explore/index.ts create mode 100644 site/components/homepage/keep-in-touch/index.ts create mode 100644 site/components/homepage/keep-in-touch/keep-in-touch.tsx create mode 100644 site/components/homepage/supported-brands/index.ts create mode 100644 site/components/homepage/supported-brands/supported-brands.tsx create mode 100644 site/components/illustrations/brands/barrons.tsx create mode 100644 site/components/illustrations/brands/index.ts create mode 100644 site/components/illustrations/brands/mansion-global.tsx create mode 100644 site/components/illustrations/brands/marketwatch.tsx create mode 100644 site/components/illustrations/brands/sun.tsx create mode 100644 site/components/illustrations/brands/talk-radio.tsx create mode 100644 site/components/illustrations/brands/talk-sport.tsx create mode 100644 site/components/illustrations/brands/talk-tv.tsx create mode 100644 site/components/illustrations/brands/times-travel.tsx create mode 100644 site/components/illustrations/brands/times.tsx create mode 100644 site/components/illustrations/brands/virgin.tsx create mode 100644 site/components/illustrations/brands/wsj.tsx create mode 100644 site/components/illustrations/landing-page/github.tsx create mode 100644 site/components/illustrations/landing-page/index.ts create mode 100644 site/components/illustrations/landing-page/medium.tsx create mode 100644 site/components/illustrations/landing-page/storybook.tsx create mode 100644 site/components/section-introduction-grid/__tests__/__snapshots__/section-introduction.test.ts.snap create mode 100644 site/components/section-introduction-grid/__tests__/section-introduction.test.ts create mode 100644 site/components/section-introduction-grid/index.ts create mode 100644 site/components/section-introduction-grid/section-introduction-grid.tsx create mode 100644 site/components/section-introduction-grid/types.ts create mode 100644 site/public/static/landing/feature-card-banner.svg create mode 100644 site/public/static/landing/feature-card-contribute-old.svg diff --git a/site/components/feature-card/__tests__/__snapshots__/feature-card.test.tsx.snap b/site/components/feature-card/__tests__/__snapshots__/feature-card.test.tsx.snap index 0be641b683..eba4bf8a39 100644 --- a/site/components/feature-card/__tests__/__snapshots__/feature-card.test.tsx.snap +++ b/site/components/feature-card/__tests__/__snapshots__/feature-card.test.tsx.snap @@ -2404,57 +2404,32 @@ exports[`FeatureCard Renders interactive vertical card with button 1`] = ` .emotion-3 { box-sizing: border-box; - display: block; - position: relative; - margin-bottom: 0; -} - -.emotion-3 svg { - border-radius: 4px; } .emotion-4 { - -webkit-background-size: cover; - background-size: cover; - -webkit-background-position: right bottom; - background-position: right bottom; - height: 18vh; -} - -@media screen and (min-width: 1024px) { - .emotion-4 { - height: 200px; - } -} - -.emotion-5 { - box-sizing: border-box; -} - -.emotion-6 { box-sizing: border-box; padding: 24px; } -.emotion-6 a:not(.nk-card-link) { +.emotion-4 a:not(.nk-card-link) { z-index: 2; position: relative; } @media screen and (max-width: 1023px) { - .emotion-7 { + .emotion-5 { margin-bottom: 20px; } } @media screen and (min-width: 1024px) { - .emotion-7 { + .emotion-5 { margin-bottom: 24px; } } @media screen and (max-width: 479px) { - .emotion-8 { + .emotion-6 { font-family: "Bitter",serif; font-size: 20px; line-height: 22.5px; @@ -2463,13 +2438,13 @@ exports[`FeatureCard Renders interactive vertical card with button 1`] = ` padding: 0.5px 0px; } - .emotion-8::before { + .emotion-6::before { content: ''; margin-bottom: -0.2055em; display: block; } - .emotion-8::after { + .emotion-6::after { content: ''; margin-top: -0.2275em; display: block; @@ -2477,7 +2452,7 @@ exports[`FeatureCard Renders interactive vertical card with button 1`] = ` } @media screen and (min-width: 480px) and (max-width: 767px) { - .emotion-8 { + .emotion-6 { font-family: "Bitter",serif; font-size: 20px; line-height: 22.5px; @@ -2486,13 +2461,13 @@ exports[`FeatureCard Renders interactive vertical card with button 1`] = ` padding: 0.5px 0px; } - .emotion-8::before { + .emotion-6::before { content: ''; margin-bottom: -0.2055em; display: block; } - .emotion-8::after { + .emotion-6::after { content: ''; margin-top: -0.2275em; display: block; @@ -2500,7 +2475,7 @@ exports[`FeatureCard Renders interactive vertical card with button 1`] = ` } @media screen and (min-width: 768px) and (max-width: 1023px) { - .emotion-8 { + .emotion-6 { font-family: "Bitter",serif; font-size: 22px; line-height: 24.75px; @@ -2509,13 +2484,13 @@ exports[`FeatureCard Renders interactive vertical card with button 1`] = ` padding: 0.5px 0px; } - .emotion-8::before { + .emotion-6::before { content: ''; margin-bottom: -0.2055em; display: block; } - .emotion-8::after { + .emotion-6::after { content: ''; margin-top: -0.2275em; display: block; @@ -2523,7 +2498,7 @@ exports[`FeatureCard Renders interactive vertical card with button 1`] = ` } @media screen and (min-width: 1024px) { - .emotion-8 { + .emotion-6 { font-family: "Bitter",serif; font-size: 28px; line-height: 31.5px; @@ -2532,46 +2507,46 @@ exports[`FeatureCard Renders interactive vertical card with button 1`] = ` padding: 0.5px 0px; } - .emotion-8::before { + .emotion-6::before { content: ''; margin-bottom: -0.2055em; display: block; } - .emotion-8::after { + .emotion-6::after { content: ''; margin-top: -0.2275em; display: block; } } -.emotion-9 { +.emotion-7 { display: inline; font: inherit; margin: 0; } @media screen and (max-width: 1023px) { - .emotion-10 { + .emotion-8 { margin-bottom: 24px; } } @media screen and (min-width: 1024px) { - .emotion-10 { + .emotion-8 { margin-bottom: 32px; } } -.emotion-11 { +.emotion-9 { margin: 0; } -.emotion-12 { +.emotion-10 { margin-bottom: 8px; } -.emotion-13 { +.emotion-11 { box-sizing: border-box; display: -webkit-inline-box; display: -webkit-inline-flex; @@ -2601,13 +2576,13 @@ exports[`FeatureCard Renders interactive vertical card with button 1`] = ` cursor: pointer; } -.emotion-13 svg { +.emotion-11 svg { width: 16px; height: 16px; } @media screen and (prefers-reduced-motion: no-preference) { - .emotion-13 { + .emotion-11 { transition-property: background-color; transition-duration: 200ms; transition-timing-function: cubic-bezier(0, 0, .5, 1); @@ -2615,14 +2590,14 @@ exports[`FeatureCard Renders interactive vertical card with button 1`] = ` } @media screen and (prefers-reduced-motion: reduce) { - .emotion-13 { + .emotion-11 { transition-property: background-color; transition-duration: 0ms; transition-timing-function: cubic-bezier(0, 0, .5, 1); } } -.emotion-14 { +.emotion-12 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -2643,7 +2618,7 @@ exports[`FeatureCard Renders interactive vertical card with button 1`] = ` margin-right: calc(-8px/2); } -.emotion-15 { +.emotion-13 { display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; @@ -2652,7 +2627,7 @@ exports[`FeatureCard Renders interactive vertical card with button 1`] = ` margin-right: calc(8px/2); } -.emotion-16 { +.emotion-14 { margin: 0; font-family: "Poppins",sans-serif; font-size: 12px; @@ -2663,19 +2638,19 @@ exports[`FeatureCard Renders interactive vertical card with button 1`] = ` display: inline-block; } -.emotion-16::before { +.emotion-14::before { content: ''; margin-bottom: -0.403em; display: block; } -.emotion-16::after { +.emotion-14::after { content: ''; margin-top: -0.4em; display: block; } -.emotion-18 { +.emotion-16 { display: inline-block; vertical-align: middle; overflow: hidden; @@ -2685,7 +2660,7 @@ exports[`FeatureCard Renders interactive vertical card with button 1`] = ` } @media screen and (prefers-reduced-motion: no-preference) { - .emotion-18 { + .emotion-16 { transition-property: fill; transition-duration: 200ms; transition-timing-function: cubic-bezier(0, 0, .5, 1); @@ -2693,14 +2668,14 @@ exports[`FeatureCard Renders interactive vertical card with button 1`] = ` } @media screen and (prefers-reduced-motion: reduce) { - .emotion-18 { + .emotion-16 { transition-property: fill; transition-duration: 0ms; transition-timing-function: cubic-bezier(0, 0, .5, 1); } } -.emotion-18.emotion-18 { +.emotion-16.emotion-16 { width: 16px; height: 16px; } @@ -2720,62 +2695,55 @@ exports[`FeatureCard Renders interactive vertical card with button 1`] = ` >
-
-
-

Interactive Horizontal Card

I am interactive

@@ -204,7 +204,7 @@ const FeatureCardHorizontal = React.forwardRef< )} {description && ( - + {buttonLabel} - + )} @@ -245,9 +245,9 @@ const FeatureCardVertical = React.forwardRef( stylePrefix, buttonLabel, buttonHref, - buttonLogicalProps, media, overrides, + buttonOverrides, ...props }, ref, @@ -319,13 +319,13 @@ const FeatureCardVertical = React.forwardRef( diff --git a/site/components/feature-card/types.ts b/site/components/feature-card/types.ts index 7a613f4fe0..13dcf6c21d 100644 --- a/site/components/feature-card/types.ts +++ b/site/components/feature-card/types.ts @@ -1,5 +1,4 @@ -import {CardProps, MQ} from 'newskit'; -import {LogicalProps} from '../../../src/utils/logical-properties'; +import {ButtonProps, CardProps, MQ} from 'newskit'; export interface FeatureCardProps extends Omit { @@ -9,7 +8,7 @@ export interface FeatureCardProps layout?: 'vertical' | 'horizontal'; buttonHref?: string; buttonLabel?: string; - buttonLogicalProps?: LogicalProps; + buttonOverrides?: ButtonProps['overrides']; overrides?: { title?: { typographyPreset?: MQ; diff --git a/site/components/homepage/keep-in-touch/keep-in-touch.tsx b/site/components/homepage/keep-in-touch/keep-in-touch.tsx index 928bcddc2a..2287fbb1bb 100644 --- a/site/components/homepage/keep-in-touch/keep-in-touch.tsx +++ b/site/components/homepage/keep-in-touch/keep-in-touch.tsx @@ -51,11 +51,15 @@ export const KeepInTouch = () => ( stylePreset: 'tagKeepInTouch', }} > - + Explore {title} - + )} > diff --git a/site/components/media-list/__tests__/__snapshots__/media-list.test.tsx.snap b/site/components/media-list/__tests__/__snapshots__/media-list.test.tsx.snap index 40d2841fe6..cbb4739b08 100644 --- a/site/components/media-list/__tests__/__snapshots__/media-list.test.tsx.snap +++ b/site/components/media-list/__tests__/__snapshots__/media-list.test.tsx.snap @@ -1390,8 +1390,8 @@ exports[`Media List renders with feature cardscards 1`] = ` } .emotion-23.emotion-23 { - width: 16px; - height: 16px; + width: 24px; + height: 24px; } @media screen { @@ -1540,6 +1540,10 @@ exports[`Media List renders with feature cardscards 1`] = ` justify-content: center; } +.emotion-35 { + margin-bottom: 24px; +} + .emotion-37 { display: -webkit-box; -webkit-line-clamp: 2; @@ -1708,7 +1712,7 @@ exports[`Media List renders with feature cardscards 1`] = `

{ )} @@ -79,9 +86,16 @@ const Index = (layoutProps: LayoutProps) => { stylePrefix="contributeCard" href="/about/contribute" layout="horizontal" + overrides={{ + title: {typographyPreset: 'editorialHeadline060'}, + description: {typographyPreset: 'editorialSubheadline010'}, + }} buttonLabel="Start contributing" buttonHref="/about/contribute" - buttonLogicalProps={{paddingInline: 'space000'}} + buttonOverrides={{ + paddingInline: 'space000', + typographyPreset: 'utilityButton020', + }} /> diff --git a/site/theme/__tests__/__snapshots__/doc-theme.test.ts.snap b/site/theme/__tests__/__snapshots__/doc-theme.test.ts.snap index 00b6723215..cac3024960 100644 --- a/site/theme/__tests__/__snapshots__/doc-theme.test.ts.snap +++ b/site/theme/__tests__/__snapshots__/doc-theme.test.ts.snap @@ -978,6 +978,9 @@ Object { "color": "{{colors.inkWhiteContrast}}", "iconColor": "{{colors.inkWhiteContrast}}", }, + "hover": Object { + "textDecoration": "underline", + }, }, "contributeCardContainerInteractive": Object { "base": Object { @@ -1088,6 +1091,14 @@ Object { "borderWidth": "{{borders.borderWidth030}}", }, }, + "exploreCardHeadline": Object { + "base": Object { + "color": "{{colors.inkContrast}}", + }, + "hover": Object { + "textDecoration": "underline", + }, + }, "featureCard": Object { "base": Object { "backgroundColor": "{{colors.interfaceBrand040}}", @@ -1336,6 +1347,15 @@ Object { "borderColor": "{{colors.interactivePositive030}}", }, }, + "keepInTouchLink": Object { + "base": Object { + "color": "{{colors.interactiveInput040}}", + "textDecoration": "none", + }, + "hover": Object { + "textDecoration": "underline", + }, + }, "linkFooter": Object { "active": Object { "color": "{{colors.interactivePrimary050}}", @@ -1882,7 +1902,7 @@ Object { "backgroundSize": "cover", }, }, - "worlddesignsystemsweekCardButton": Object { + "worldDesignSystemsWeekCardButton": Object { "active": Object { "backgroundColor": "{{colors.interactiveInverse050}}", "color": "{{colors.inkBrand020}}", @@ -1893,8 +1913,11 @@ Object { "color": "{{colors.inkWhiteContrast}}", "iconColor": "{{colors.inkWhiteContrast}}", }, + "hover": Object { + "textDecoration": "underline", + }, }, - "worlddesignsystemsweekCardContainerInteractive": Object { + "worldDesignSystemsWeekCardContainerInteractive": Object { "base": Object { "backgroundColor": "{{colors.interfaceBrand040}}", "borderRadius": "{{borders.borderRadiusRounded030}}", @@ -1903,7 +1926,7 @@ Object { "boxShadow": "{{shadows.shadow040}}", }, }, - "worlddesignsystemsweekCardMedia": Object { + "worldDesignSystemsWeekCardMedia": Object { "base": Object { "backgroundImage": "url(static/landing/feature-card-banner.svg)", "backgroundPosition": "center", @@ -2423,7 +2446,7 @@ Object { "utilityButton020": Object { "fontFamily": "{{fonts.fontFamily030.fontFamily}}", "fontSize": "{{fonts.fontSize020}}", - "fontWeight": "{{fonts.fontWeight030}}", + "fontWeight": "{{fonts.fontWeight020}}", "letterSpacing": "{{fonts.fontLetterSpacing030}}", "lineHeight": "{{fonts.fontLineHeight040}}", }, @@ -3536,6 +3559,9 @@ Object { "color": "{{colors.inkWhiteContrast}}", "iconColor": "{{colors.inkWhiteContrast}}", }, + "hover": Object { + "textDecoration": "underline", + }, }, "contributeCardContainerInteractive": Object { "base": Object { @@ -3646,6 +3672,14 @@ Object { "borderWidth": "{{borders.borderWidth030}}", }, }, + "exploreCardHeadline": Object { + "base": Object { + "color": "{{colors.inkContrast}}", + }, + "hover": Object { + "textDecoration": "underline", + }, + }, "featureCard": Object { "base": Object { "backgroundColor": "{{colors.interfaceBrand040}}", @@ -3894,6 +3928,15 @@ Object { "borderColor": "{{colors.interactivePositive030}}", }, }, + "keepInTouchLink": Object { + "base": Object { + "color": "{{colors.interactiveInput040}}", + "textDecoration": "none", + }, + "hover": Object { + "textDecoration": "underline", + }, + }, "linkFooter": Object { "active": Object { "color": "{{colors.interactivePrimary050}}", @@ -4440,7 +4483,7 @@ Object { "backgroundSize": "cover", }, }, - "worlddesignsystemsweekCardButton": Object { + "worldDesignSystemsWeekCardButton": Object { "active": Object { "backgroundColor": "{{colors.interactiveInverse050}}", "color": "{{colors.inkBrand020}}", @@ -4451,8 +4494,11 @@ Object { "color": "{{colors.inkWhiteContrast}}", "iconColor": "{{colors.inkWhiteContrast}}", }, + "hover": Object { + "textDecoration": "underline", + }, }, - "worlddesignsystemsweekCardContainerInteractive": Object { + "worldDesignSystemsWeekCardContainerInteractive": Object { "base": Object { "backgroundColor": "{{colors.interfaceBrand040}}", "borderRadius": "{{borders.borderRadiusRounded030}}", @@ -4461,7 +4507,7 @@ Object { "boxShadow": "{{shadows.shadow040}}", }, }, - "worlddesignsystemsweekCardMedia": Object { + "worldDesignSystemsWeekCardMedia": Object { "base": Object { "backgroundImage": "url(static/landing/feature-card-banner.svg)", "backgroundPosition": "center", @@ -4981,7 +5027,7 @@ Object { "utilityButton020": Object { "fontFamily": "{{fonts.fontFamily030.fontFamily}}", "fontSize": "{{fonts.fontSize020}}", - "fontWeight": "{{fonts.fontWeight030}}", + "fontWeight": "{{fonts.fontWeight020}}", "letterSpacing": "{{fonts.fontLetterSpacing030}}", "lineHeight": "{{fonts.fontLineHeight040}}", }, @@ -6097,6 +6143,9 @@ Object { "color": "{{colors.inkWhiteContrast}}", "iconColor": "{{colors.inkWhiteContrast}}", }, + "hover": Object { + "textDecoration": "underline", + }, }, "contributeCardContainerInteractive": Object { "base": Object { @@ -6207,6 +6256,14 @@ Object { "borderWidth": "{{borders.borderWidth030}}", }, }, + "exploreCardHeadline": Object { + "base": Object { + "color": "{{colors.inkContrast}}", + }, + "hover": Object { + "textDecoration": "underline", + }, + }, "featureCard": Object { "base": Object { "backgroundColor": "{{colors.interfaceBrand040}}", @@ -6455,6 +6512,15 @@ Object { "borderColor": "{{colors.interactivePositive030}}", }, }, + "keepInTouchLink": Object { + "base": Object { + "color": "{{colors.interactiveInput040}}", + "textDecoration": "none", + }, + "hover": Object { + "textDecoration": "underline", + }, + }, "linkFooter": Object { "active": Object { "color": "{{colors.interactivePrimary050}}", @@ -7001,7 +7067,7 @@ Object { "backgroundSize": "cover", }, }, - "worlddesignsystemsweekCardButton": Object { + "worldDesignSystemsWeekCardButton": Object { "active": Object { "backgroundColor": "{{colors.interactiveInverse050}}", "color": "{{colors.inkBrand020}}", @@ -7012,8 +7078,11 @@ Object { "color": "{{colors.inkWhiteContrast}}", "iconColor": "{{colors.inkWhiteContrast}}", }, + "hover": Object { + "textDecoration": "underline", + }, }, - "worlddesignsystemsweekCardContainerInteractive": Object { + "worldDesignSystemsWeekCardContainerInteractive": Object { "base": Object { "backgroundColor": "{{colors.interfaceBrand040}}", "borderRadius": "{{borders.borderRadiusRounded030}}", @@ -7022,7 +7091,7 @@ Object { "boxShadow": "{{shadows.shadow040}}", }, }, - "worlddesignsystemsweekCardMedia": Object { + "worldDesignSystemsWeekCardMedia": Object { "base": Object { "backgroundImage": "url(static/landing/feature-card-banner.svg)", "backgroundPosition": "center", @@ -7542,7 +7611,7 @@ Object { "utilityButton020": Object { "fontFamily": "{{fonts.fontFamily030.fontFamily}}", "fontSize": "{{fonts.fontSize020}}", - "fontWeight": "{{fonts.fontWeight030}}", + "fontWeight": "{{fonts.fontWeight020}}", "letterSpacing": "{{fonts.fontLetterSpacing030}}", "lineHeight": "{{fonts.fontLineHeight040}}", }, @@ -8655,6 +8724,9 @@ Object { "color": "{{colors.inkWhiteContrast}}", "iconColor": "{{colors.inkWhiteContrast}}", }, + "hover": Object { + "textDecoration": "underline", + }, }, "contributeCardContainerInteractive": Object { "base": Object { @@ -8765,6 +8837,14 @@ Object { "borderWidth": "{{borders.borderWidth030}}", }, }, + "exploreCardHeadline": Object { + "base": Object { + "color": "{{colors.inkContrast}}", + }, + "hover": Object { + "textDecoration": "underline", + }, + }, "featureCard": Object { "base": Object { "backgroundColor": "{{colors.interfaceBrand040}}", @@ -9013,6 +9093,15 @@ Object { "borderColor": "{{colors.interactivePositive030}}", }, }, + "keepInTouchLink": Object { + "base": Object { + "color": "{{colors.interactiveInput040}}", + "textDecoration": "none", + }, + "hover": Object { + "textDecoration": "underline", + }, + }, "linkFooter": Object { "active": Object { "color": "{{colors.interactivePrimary050}}", @@ -9559,7 +9648,7 @@ Object { "backgroundSize": "cover", }, }, - "worlddesignsystemsweekCardButton": Object { + "worldDesignSystemsWeekCardButton": Object { "active": Object { "backgroundColor": "{{colors.interactiveInverse050}}", "color": "{{colors.inkBrand020}}", @@ -9570,8 +9659,11 @@ Object { "color": "{{colors.inkWhiteContrast}}", "iconColor": "{{colors.inkWhiteContrast}}", }, + "hover": Object { + "textDecoration": "underline", + }, }, - "worlddesignsystemsweekCardContainerInteractive": Object { + "worldDesignSystemsWeekCardContainerInteractive": Object { "base": Object { "backgroundColor": "{{colors.interfaceBrand040}}", "borderRadius": "{{borders.borderRadiusRounded030}}", @@ -9580,7 +9672,7 @@ Object { "boxShadow": "{{shadows.shadow040}}", }, }, - "worlddesignsystemsweekCardMedia": Object { + "worldDesignSystemsWeekCardMedia": Object { "base": Object { "backgroundImage": "url(static/landing/feature-card-banner.svg)", "backgroundPosition": "center", @@ -10100,7 +10192,7 @@ Object { "utilityButton020": Object { "fontFamily": "{{fonts.fontFamily030.fontFamily}}", "fontSize": "{{fonts.fontSize020}}", - "fontWeight": "{{fonts.fontWeight030}}", + "fontWeight": "{{fonts.fontWeight020}}", "letterSpacing": "{{fonts.fontLetterSpacing030}}", "lineHeight": "{{fonts.fontLineHeight040}}", }, @@ -11216,6 +11308,9 @@ Object { "color": "{{colors.inkWhiteContrast}}", "iconColor": "{{colors.inkWhiteContrast}}", }, + "hover": Object { + "textDecoration": "underline", + }, }, "contributeCardContainerInteractive": Object { "base": Object { @@ -11326,6 +11421,14 @@ Object { "borderWidth": "{{borders.borderWidth030}}", }, }, + "exploreCardHeadline": Object { + "base": Object { + "color": "{{colors.inkContrast}}", + }, + "hover": Object { + "textDecoration": "underline", + }, + }, "featureCard": Object { "base": Object { "backgroundColor": "{{colors.interfaceBrand040}}", @@ -11574,6 +11677,15 @@ Object { "borderColor": "{{colors.interactivePositive030}}", }, }, + "keepInTouchLink": Object { + "base": Object { + "color": "{{colors.interactiveInput040}}", + "textDecoration": "none", + }, + "hover": Object { + "textDecoration": "underline", + }, + }, "linkFooter": Object { "active": Object { "color": "{{colors.interactivePrimary050}}", @@ -12120,7 +12232,7 @@ Object { "backgroundSize": "cover", }, }, - "worlddesignsystemsweekCardButton": Object { + "worldDesignSystemsWeekCardButton": Object { "active": Object { "backgroundColor": "{{colors.interactiveInverse050}}", "color": "{{colors.inkBrand020}}", @@ -12131,8 +12243,11 @@ Object { "color": "{{colors.inkWhiteContrast}}", "iconColor": "{{colors.inkWhiteContrast}}", }, + "hover": Object { + "textDecoration": "underline", + }, }, - "worlddesignsystemsweekCardContainerInteractive": Object { + "worldDesignSystemsWeekCardContainerInteractive": Object { "base": Object { "backgroundColor": "{{colors.interfaceBrand040}}", "borderRadius": "{{borders.borderRadiusRounded030}}", @@ -12141,7 +12256,7 @@ Object { "boxShadow": "{{shadows.shadow040}}", }, }, - "worlddesignsystemsweekCardMedia": Object { + "worldDesignSystemsWeekCardMedia": Object { "base": Object { "backgroundImage": "url(static/landing/feature-card-banner.svg)", "backgroundPosition": "center", @@ -12661,7 +12776,7 @@ Object { "utilityButton020": Object { "fontFamily": "{{fonts.fontFamily030.fontFamily}}", "fontSize": "{{fonts.fontSize020}}", - "fontWeight": "{{fonts.fontWeight030}}", + "fontWeight": "{{fonts.fontWeight020}}", "letterSpacing": "{{fonts.fontLetterSpacing030}}", "lineHeight": "{{fonts.fontLineHeight040}}", }, @@ -13774,6 +13889,9 @@ Object { "color": "{{colors.inkWhiteContrast}}", "iconColor": "{{colors.inkWhiteContrast}}", }, + "hover": Object { + "textDecoration": "underline", + }, }, "contributeCardContainerInteractive": Object { "base": Object { @@ -13884,6 +14002,14 @@ Object { "borderWidth": "{{borders.borderWidth030}}", }, }, + "exploreCardHeadline": Object { + "base": Object { + "color": "{{colors.inkContrast}}", + }, + "hover": Object { + "textDecoration": "underline", + }, + }, "featureCard": Object { "base": Object { "backgroundColor": "{{colors.interfaceBrand040}}", @@ -14132,6 +14258,15 @@ Object { "borderColor": "{{colors.interactivePositive030}}", }, }, + "keepInTouchLink": Object { + "base": Object { + "color": "{{colors.interactiveInput040}}", + "textDecoration": "none", + }, + "hover": Object { + "textDecoration": "underline", + }, + }, "linkFooter": Object { "active": Object { "color": "{{colors.interactivePrimary050}}", @@ -14678,7 +14813,7 @@ Object { "backgroundSize": "cover", }, }, - "worlddesignsystemsweekCardButton": Object { + "worldDesignSystemsWeekCardButton": Object { "active": Object { "backgroundColor": "{{colors.interactiveInverse050}}", "color": "{{colors.inkBrand020}}", @@ -14689,8 +14824,11 @@ Object { "color": "{{colors.inkWhiteContrast}}", "iconColor": "{{colors.inkWhiteContrast}}", }, + "hover": Object { + "textDecoration": "underline", + }, }, - "worlddesignsystemsweekCardContainerInteractive": Object { + "worldDesignSystemsWeekCardContainerInteractive": Object { "base": Object { "backgroundColor": "{{colors.interfaceBrand040}}", "borderRadius": "{{borders.borderRadiusRounded030}}", @@ -14699,7 +14837,7 @@ Object { "boxShadow": "{{shadows.shadow040}}", }, }, - "worlddesignsystemsweekCardMedia": Object { + "worldDesignSystemsWeekCardMedia": Object { "base": Object { "backgroundImage": "url(static/landing/feature-card-banner.svg)", "backgroundPosition": "center", @@ -15219,7 +15357,7 @@ Object { "utilityButton020": Object { "fontFamily": "{{fonts.fontFamily030.fontFamily}}", "fontSize": "{{fonts.fontSize020}}", - "fontWeight": "{{fonts.fontWeight030}}", + "fontWeight": "{{fonts.fontWeight020}}", "letterSpacing": "{{fonts.fontLetterSpacing030}}", "lineHeight": "{{fonts.fontLineHeight040}}", }, @@ -16335,6 +16473,9 @@ Object { "color": "{{colors.inkWhiteContrast}}", "iconColor": "{{colors.inkWhiteContrast}}", }, + "hover": Object { + "textDecoration": "underline", + }, }, "contributeCardContainerInteractive": Object { "base": Object { @@ -16445,6 +16586,14 @@ Object { "borderWidth": "{{borders.borderWidth030}}", }, }, + "exploreCardHeadline": Object { + "base": Object { + "color": "{{colors.inkContrast}}", + }, + "hover": Object { + "textDecoration": "underline", + }, + }, "featureCard": Object { "base": Object { "backgroundColor": "{{colors.interfaceBrand040}}", @@ -16693,6 +16842,15 @@ Object { "borderColor": "{{colors.interactivePositive030}}", }, }, + "keepInTouchLink": Object { + "base": Object { + "color": "{{colors.interactiveInput040}}", + "textDecoration": "none", + }, + "hover": Object { + "textDecoration": "underline", + }, + }, "linkFooter": Object { "active": Object { "color": "{{colors.interactivePrimary050}}", @@ -17239,7 +17397,7 @@ Object { "backgroundSize": "cover", }, }, - "worlddesignsystemsweekCardButton": Object { + "worldDesignSystemsWeekCardButton": Object { "active": Object { "backgroundColor": "{{colors.interactiveInverse050}}", "color": "{{colors.inkBrand020}}", @@ -17250,8 +17408,11 @@ Object { "color": "{{colors.inkWhiteContrast}}", "iconColor": "{{colors.inkWhiteContrast}}", }, + "hover": Object { + "textDecoration": "underline", + }, }, - "worlddesignsystemsweekCardContainerInteractive": Object { + "worldDesignSystemsWeekCardContainerInteractive": Object { "base": Object { "backgroundColor": "{{colors.interfaceBrand040}}", "borderRadius": "{{borders.borderRadiusRounded030}}", @@ -17260,7 +17421,7 @@ Object { "boxShadow": "{{shadows.shadow040}}", }, }, - "worlddesignsystemsweekCardMedia": Object { + "worldDesignSystemsWeekCardMedia": Object { "base": Object { "backgroundImage": "url(static/landing/feature-card-banner.svg)", "backgroundPosition": "center", @@ -17780,7 +17941,7 @@ Object { "utilityButton020": Object { "fontFamily": "{{fonts.fontFamily030.fontFamily}}", "fontSize": "{{fonts.fontSize020}}", - "fontWeight": "{{fonts.fontWeight030}}", + "fontWeight": "{{fonts.fontWeight020}}", "letterSpacing": "{{fonts.fontLetterSpacing030}}", "lineHeight": "{{fonts.fontLineHeight040}}", }, @@ -18893,6 +19054,9 @@ Object { "color": "{{colors.inkWhiteContrast}}", "iconColor": "{{colors.inkWhiteContrast}}", }, + "hover": Object { + "textDecoration": "underline", + }, }, "contributeCardContainerInteractive": Object { "base": Object { @@ -19003,6 +19167,14 @@ Object { "borderWidth": "{{borders.borderWidth030}}", }, }, + "exploreCardHeadline": Object { + "base": Object { + "color": "{{colors.inkContrast}}", + }, + "hover": Object { + "textDecoration": "underline", + }, + }, "featureCard": Object { "base": Object { "backgroundColor": "{{colors.interfaceBrand040}}", @@ -19251,6 +19423,15 @@ Object { "borderColor": "{{colors.interactivePositive030}}", }, }, + "keepInTouchLink": Object { + "base": Object { + "color": "{{colors.interactiveInput040}}", + "textDecoration": "none", + }, + "hover": Object { + "textDecoration": "underline", + }, + }, "linkFooter": Object { "active": Object { "color": "{{colors.interactivePrimary050}}", @@ -19797,7 +19978,7 @@ Object { "backgroundSize": "cover", }, }, - "worlddesignsystemsweekCardButton": Object { + "worldDesignSystemsWeekCardButton": Object { "active": Object { "backgroundColor": "{{colors.interactiveInverse050}}", "color": "{{colors.inkBrand020}}", @@ -19808,8 +19989,11 @@ Object { "color": "{{colors.inkWhiteContrast}}", "iconColor": "{{colors.inkWhiteContrast}}", }, + "hover": Object { + "textDecoration": "underline", + }, }, - "worlddesignsystemsweekCardContainerInteractive": Object { + "worldDesignSystemsWeekCardContainerInteractive": Object { "base": Object { "backgroundColor": "{{colors.interfaceBrand040}}", "borderRadius": "{{borders.borderRadiusRounded030}}", @@ -19818,7 +20002,7 @@ Object { "boxShadow": "{{shadows.shadow040}}", }, }, - "worlddesignsystemsweekCardMedia": Object { + "worldDesignSystemsWeekCardMedia": Object { "base": Object { "backgroundImage": "url(static/landing/feature-card-banner.svg)", "backgroundPosition": "center", @@ -20338,7 +20522,7 @@ Object { "utilityButton020": Object { "fontFamily": "{{fonts.fontFamily030.fontFamily}}", "fontSize": "{{fonts.fontSize020}}", - "fontWeight": "{{fonts.fontWeight030}}", + "fontWeight": "{{fonts.fontWeight020}}", "letterSpacing": "{{fonts.fontLetterSpacing030}}", "lineHeight": "{{fonts.fontLineHeight040}}", }, diff --git a/site/theme/style-presets.ts b/site/theme/style-presets.ts index 0c7ecb3608..20be7638f4 100644 --- a/site/theme/style-presets.ts +++ b/site/theme/style-presets.ts @@ -502,6 +502,9 @@ export const stylePresets = { color: '{{colors.inkBrand020}}', iconColor: '{{colors.inkBrand020}}', }, + hover: { + textDecoration: 'underline', + }, }, linkFooter: { base: { @@ -702,7 +705,7 @@ export const stylePresets = { backgroundPosition: 'center left', }, }, - worlddesignsystemsweekCardContainerInteractive: { + worldDesignSystemsWeekCardContainerInteractive: { base: { backgroundColor: '{{colors.interfaceBrand040}}', borderRadius: '{{borders.borderRadiusRounded030}}', @@ -711,7 +714,7 @@ export const stylePresets = { boxShadow: '{{shadows.shadow040}}', }, }, - worlddesignsystemsweekCardButton: { + worldDesignSystemsWeekCardButton: { base: { backgroundColor: '{{colors.transparent}}', color: '{{colors.inkWhiteContrast}}', @@ -722,8 +725,11 @@ export const stylePresets = { color: '{{colors.inkBrand020}}', iconColor: '{{colors.inkBrand020}}', }, + hover: { + textDecoration: 'underline', + }, }, - worlddesignsystemsweekCardMedia: { + worldDesignSystemsWeekCardMedia: { base: { backgroundImage: 'url(static/landing/feature-card-banner.svg)', backgroundSize: 'cover', @@ -1076,6 +1082,15 @@ export const stylePresets = { }, 'focus-visible': defaultFocusVisible, }, + keepInTouchLink: { + base: { + color: '{{colors.interactiveInput040}}', + textDecoration: 'none', + }, + hover: { + textDecoration: 'underline', + }, + }, exploreCardHeadline: { base: { color: '{{colors.inkContrast}}', diff --git a/site/theme/typography-presets.json b/site/theme/typography-presets.json index c51025857e..d20a29f1db 100644 --- a/site/theme/typography-presets.json +++ b/site/theme/typography-presets.json @@ -86,9 +86,6 @@ "utilityButton010": { "fontWeight": "{{fonts.fontWeight030}}" }, - "utilityButton020": { - "fontWeight": "{{fonts.fontWeight030}}" - }, "utilityButton030": { "fontWeight": "{{fonts.fontWeight030}}" }, From 5f6bda995325a044055f3fd1b1e631e5328d2163 Mon Sep 17 00:00:00 2001 From: evgenitsn Date: Thu, 18 Aug 2022 11:50:38 +0300 Subject: [PATCH 08/26] docs(PPDSC-2297): add full stop to a copy --- site/components/homepage/keep-in-touch/keep-in-touch.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/components/homepage/keep-in-touch/keep-in-touch.tsx b/site/components/homepage/keep-in-touch/keep-in-touch.tsx index 2287fbb1bb..1b956ffdde 100644 --- a/site/components/homepage/keep-in-touch/keep-in-touch.tsx +++ b/site/components/homepage/keep-in-touch/keep-in-touch.tsx @@ -28,7 +28,7 @@ const keepInTouchContent = [ { title: 'Blog', url: 'https://medium.com/newskit-design-system', - description: 'Hear what our team’s been up to', + description: 'Hear what our team’s been up to.', icon: () => , }, ]; From 9192ad4dd588cac4202841c6053fed298d9ce27f Mon Sep 17 00:00:00 2001 From: evgenitsn Date: Thu, 18 Aug 2022 13:51:18 +0300 Subject: [PATCH 09/26] docs(PPDSC-2297): update the banners to non interactive --- site/pages/index-new.tsx | 2 -- site/theme/style-presets.ts | 18 +++++++----------- 2 files changed, 7 insertions(+), 13 deletions(-) diff --git a/site/pages/index-new.tsx b/site/pages/index-new.tsx index 62ba316b71..687be60595 100644 --- a/site/pages/index-new.tsx +++ b/site/pages/index-new.tsx @@ -56,7 +56,6 @@ const Index = (layoutProps: LayoutProps) => { title="World Design Systems Week 2022" description="19-23 September 2022" stylePrefix="worldDesignSystemsWeekCard" - href="https://www.designsystemsweek.com/" layout="horizontal" overrides={{ title: {typographyPreset: 'editorialHeadline060'}, @@ -84,7 +83,6 @@ const Index = (layoutProps: LayoutProps) => { title="Contribute" description="Join the community and help grow NewsKit for everyone." stylePrefix="contributeCard" - href="/about/contribute" layout="horizontal" overrides={{ title: {typographyPreset: 'editorialHeadline060'}, diff --git a/site/theme/style-presets.ts b/site/theme/style-presets.ts index 20be7638f4..23233308cc 100644 --- a/site/theme/style-presets.ts +++ b/site/theme/style-presets.ts @@ -480,7 +480,7 @@ export const stylePresets = { contributeCardContainerNonInteractive: { base: { backgroundColor: '{{colors.interfaceBrand050}}', - borderRadius: '{{borders.borderRadiusRounded020}}', + borderRadius: '{{borders.borderRadiusRounded030}}', }, }, contributeCardMedia: { @@ -497,11 +497,6 @@ export const stylePresets = { iconColor: '{{colors.inkWhiteContrast}}', borderRadius: '{{borders.borderRadiusDefault}}', }, - active: { - backgroundColor: '{{colors.interactiveInverse050}}', - color: '{{colors.inkBrand020}}', - iconColor: '{{colors.inkBrand020}}', - }, hover: { textDecoration: 'underline', }, @@ -714,17 +709,18 @@ export const stylePresets = { boxShadow: '{{shadows.shadow040}}', }, }, + worldDesignSystemsWeekCardContainerNonInteractive: { + base: { + backgroundColor: '{{colors.interfaceBrand040}}', + borderRadius: '{{borders.borderRadiusRounded030}}', + }, + }, worldDesignSystemsWeekCardButton: { base: { backgroundColor: '{{colors.transparent}}', color: '{{colors.inkWhiteContrast}}', iconColor: '{{colors.inkWhiteContrast}}', }, - active: { - backgroundColor: '{{colors.interactiveInverse050}}', - color: '{{colors.inkBrand020}}', - iconColor: '{{colors.inkBrand020}}', - }, hover: { textDecoration: 'underline', }, From b322036e23865715a0157d4ad78fb1547e8beb95 Mon Sep 17 00:00:00 2001 From: evgenitsn Date: Thu, 18 Aug 2022 14:09:22 +0300 Subject: [PATCH 10/26] docs(PPDSC-2297): update snapshots --- .../__snapshots__/doc-theme.test.ts.snap | 144 +++++++----------- 1 file changed, 56 insertions(+), 88 deletions(-) diff --git a/site/theme/__tests__/__snapshots__/doc-theme.test.ts.snap b/site/theme/__tests__/__snapshots__/doc-theme.test.ts.snap index cac3024960..17c0c8d49c 100644 --- a/site/theme/__tests__/__snapshots__/doc-theme.test.ts.snap +++ b/site/theme/__tests__/__snapshots__/doc-theme.test.ts.snap @@ -967,11 +967,6 @@ Object { }, }, "contributeCardButton": Object { - "active": Object { - "backgroundColor": "{{colors.interactiveInverse050}}", - "color": "{{colors.inkBrand020}}", - "iconColor": "{{colors.inkBrand020}}", - }, "base": Object { "backgroundColor": "{{colors.transparent}}", "borderRadius": "{{borders.borderRadiusDefault}}", @@ -994,7 +989,7 @@ Object { "contributeCardContainerNonInteractive": Object { "base": Object { "backgroundColor": "{{colors.interfaceBrand050}}", - "borderRadius": "{{borders.borderRadiusRounded020}}", + "borderRadius": "{{borders.borderRadiusRounded030}}", }, }, "contributeCardMedia": Object { @@ -1903,11 +1898,6 @@ Object { }, }, "worldDesignSystemsWeekCardButton": Object { - "active": Object { - "backgroundColor": "{{colors.interactiveInverse050}}", - "color": "{{colors.inkBrand020}}", - "iconColor": "{{colors.inkBrand020}}", - }, "base": Object { "backgroundColor": "{{colors.transparent}}", "color": "{{colors.inkWhiteContrast}}", @@ -1926,6 +1916,12 @@ Object { "boxShadow": "{{shadows.shadow040}}", }, }, + "worldDesignSystemsWeekCardContainerNonInteractive": Object { + "base": Object { + "backgroundColor": "{{colors.interfaceBrand040}}", + "borderRadius": "{{borders.borderRadiusRounded030}}", + }, + }, "worldDesignSystemsWeekCardMedia": Object { "base": Object { "backgroundImage": "url(static/landing/feature-card-banner.svg)", @@ -3548,11 +3544,6 @@ Object { }, }, "contributeCardButton": Object { - "active": Object { - "backgroundColor": "{{colors.interactiveInverse050}}", - "color": "{{colors.inkBrand020}}", - "iconColor": "{{colors.inkBrand020}}", - }, "base": Object { "backgroundColor": "{{colors.transparent}}", "borderRadius": "{{borders.borderRadiusDefault}}", @@ -3575,7 +3566,7 @@ Object { "contributeCardContainerNonInteractive": Object { "base": Object { "backgroundColor": "{{colors.interfaceBrand050}}", - "borderRadius": "{{borders.borderRadiusRounded020}}", + "borderRadius": "{{borders.borderRadiusRounded030}}", }, }, "contributeCardMedia": Object { @@ -4484,11 +4475,6 @@ Object { }, }, "worldDesignSystemsWeekCardButton": Object { - "active": Object { - "backgroundColor": "{{colors.interactiveInverse050}}", - "color": "{{colors.inkBrand020}}", - "iconColor": "{{colors.inkBrand020}}", - }, "base": Object { "backgroundColor": "{{colors.transparent}}", "color": "{{colors.inkWhiteContrast}}", @@ -4507,6 +4493,12 @@ Object { "boxShadow": "{{shadows.shadow040}}", }, }, + "worldDesignSystemsWeekCardContainerNonInteractive": Object { + "base": Object { + "backgroundColor": "{{colors.interfaceBrand040}}", + "borderRadius": "{{borders.borderRadiusRounded030}}", + }, + }, "worldDesignSystemsWeekCardMedia": Object { "base": Object { "backgroundImage": "url(static/landing/feature-card-banner.svg)", @@ -6132,11 +6124,6 @@ Object { }, }, "contributeCardButton": Object { - "active": Object { - "backgroundColor": "{{colors.interactiveInverse050}}", - "color": "{{colors.inkBrand020}}", - "iconColor": "{{colors.inkBrand020}}", - }, "base": Object { "backgroundColor": "{{colors.transparent}}", "borderRadius": "{{borders.borderRadiusDefault}}", @@ -6159,7 +6146,7 @@ Object { "contributeCardContainerNonInteractive": Object { "base": Object { "backgroundColor": "{{colors.interfaceBrand050}}", - "borderRadius": "{{borders.borderRadiusRounded020}}", + "borderRadius": "{{borders.borderRadiusRounded030}}", }, }, "contributeCardMedia": Object { @@ -7068,11 +7055,6 @@ Object { }, }, "worldDesignSystemsWeekCardButton": Object { - "active": Object { - "backgroundColor": "{{colors.interactiveInverse050}}", - "color": "{{colors.inkBrand020}}", - "iconColor": "{{colors.inkBrand020}}", - }, "base": Object { "backgroundColor": "{{colors.transparent}}", "color": "{{colors.inkWhiteContrast}}", @@ -7091,6 +7073,12 @@ Object { "boxShadow": "{{shadows.shadow040}}", }, }, + "worldDesignSystemsWeekCardContainerNonInteractive": Object { + "base": Object { + "backgroundColor": "{{colors.interfaceBrand040}}", + "borderRadius": "{{borders.borderRadiusRounded030}}", + }, + }, "worldDesignSystemsWeekCardMedia": Object { "base": Object { "backgroundImage": "url(static/landing/feature-card-banner.svg)", @@ -8713,11 +8701,6 @@ Object { }, }, "contributeCardButton": Object { - "active": Object { - "backgroundColor": "{{colors.interactiveInverse050}}", - "color": "{{colors.inkBrand020}}", - "iconColor": "{{colors.inkBrand020}}", - }, "base": Object { "backgroundColor": "{{colors.transparent}}", "borderRadius": "{{borders.borderRadiusDefault}}", @@ -8740,7 +8723,7 @@ Object { "contributeCardContainerNonInteractive": Object { "base": Object { "backgroundColor": "{{colors.interfaceBrand050}}", - "borderRadius": "{{borders.borderRadiusRounded020}}", + "borderRadius": "{{borders.borderRadiusRounded030}}", }, }, "contributeCardMedia": Object { @@ -9649,11 +9632,6 @@ Object { }, }, "worldDesignSystemsWeekCardButton": Object { - "active": Object { - "backgroundColor": "{{colors.interactiveInverse050}}", - "color": "{{colors.inkBrand020}}", - "iconColor": "{{colors.inkBrand020}}", - }, "base": Object { "backgroundColor": "{{colors.transparent}}", "color": "{{colors.inkWhiteContrast}}", @@ -9672,6 +9650,12 @@ Object { "boxShadow": "{{shadows.shadow040}}", }, }, + "worldDesignSystemsWeekCardContainerNonInteractive": Object { + "base": Object { + "backgroundColor": "{{colors.interfaceBrand040}}", + "borderRadius": "{{borders.borderRadiusRounded030}}", + }, + }, "worldDesignSystemsWeekCardMedia": Object { "base": Object { "backgroundImage": "url(static/landing/feature-card-banner.svg)", @@ -11297,11 +11281,6 @@ Object { }, }, "contributeCardButton": Object { - "active": Object { - "backgroundColor": "{{colors.interactiveInverse050}}", - "color": "{{colors.inkBrand020}}", - "iconColor": "{{colors.inkBrand020}}", - }, "base": Object { "backgroundColor": "{{colors.transparent}}", "borderRadius": "{{borders.borderRadiusDefault}}", @@ -11324,7 +11303,7 @@ Object { "contributeCardContainerNonInteractive": Object { "base": Object { "backgroundColor": "{{colors.interfaceBrand050}}", - "borderRadius": "{{borders.borderRadiusRounded020}}", + "borderRadius": "{{borders.borderRadiusRounded030}}", }, }, "contributeCardMedia": Object { @@ -12233,11 +12212,6 @@ Object { }, }, "worldDesignSystemsWeekCardButton": Object { - "active": Object { - "backgroundColor": "{{colors.interactiveInverse050}}", - "color": "{{colors.inkBrand020}}", - "iconColor": "{{colors.inkBrand020}}", - }, "base": Object { "backgroundColor": "{{colors.transparent}}", "color": "{{colors.inkWhiteContrast}}", @@ -12256,6 +12230,12 @@ Object { "boxShadow": "{{shadows.shadow040}}", }, }, + "worldDesignSystemsWeekCardContainerNonInteractive": Object { + "base": Object { + "backgroundColor": "{{colors.interfaceBrand040}}", + "borderRadius": "{{borders.borderRadiusRounded030}}", + }, + }, "worldDesignSystemsWeekCardMedia": Object { "base": Object { "backgroundImage": "url(static/landing/feature-card-banner.svg)", @@ -13878,11 +13858,6 @@ Object { }, }, "contributeCardButton": Object { - "active": Object { - "backgroundColor": "{{colors.interactiveInverse050}}", - "color": "{{colors.inkBrand020}}", - "iconColor": "{{colors.inkBrand020}}", - }, "base": Object { "backgroundColor": "{{colors.transparent}}", "borderRadius": "{{borders.borderRadiusDefault}}", @@ -13905,7 +13880,7 @@ Object { "contributeCardContainerNonInteractive": Object { "base": Object { "backgroundColor": "{{colors.interfaceBrand050}}", - "borderRadius": "{{borders.borderRadiusRounded020}}", + "borderRadius": "{{borders.borderRadiusRounded030}}", }, }, "contributeCardMedia": Object { @@ -14814,11 +14789,6 @@ Object { }, }, "worldDesignSystemsWeekCardButton": Object { - "active": Object { - "backgroundColor": "{{colors.interactiveInverse050}}", - "color": "{{colors.inkBrand020}}", - "iconColor": "{{colors.inkBrand020}}", - }, "base": Object { "backgroundColor": "{{colors.transparent}}", "color": "{{colors.inkWhiteContrast}}", @@ -14837,6 +14807,12 @@ Object { "boxShadow": "{{shadows.shadow040}}", }, }, + "worldDesignSystemsWeekCardContainerNonInteractive": Object { + "base": Object { + "backgroundColor": "{{colors.interfaceBrand040}}", + "borderRadius": "{{borders.borderRadiusRounded030}}", + }, + }, "worldDesignSystemsWeekCardMedia": Object { "base": Object { "backgroundImage": "url(static/landing/feature-card-banner.svg)", @@ -16462,11 +16438,6 @@ Object { }, }, "contributeCardButton": Object { - "active": Object { - "backgroundColor": "{{colors.interactiveInverse050}}", - "color": "{{colors.inkBrand020}}", - "iconColor": "{{colors.inkBrand020}}", - }, "base": Object { "backgroundColor": "{{colors.transparent}}", "borderRadius": "{{borders.borderRadiusDefault}}", @@ -16489,7 +16460,7 @@ Object { "contributeCardContainerNonInteractive": Object { "base": Object { "backgroundColor": "{{colors.interfaceBrand050}}", - "borderRadius": "{{borders.borderRadiusRounded020}}", + "borderRadius": "{{borders.borderRadiusRounded030}}", }, }, "contributeCardMedia": Object { @@ -17398,11 +17369,6 @@ Object { }, }, "worldDesignSystemsWeekCardButton": Object { - "active": Object { - "backgroundColor": "{{colors.interactiveInverse050}}", - "color": "{{colors.inkBrand020}}", - "iconColor": "{{colors.inkBrand020}}", - }, "base": Object { "backgroundColor": "{{colors.transparent}}", "color": "{{colors.inkWhiteContrast}}", @@ -17421,6 +17387,12 @@ Object { "boxShadow": "{{shadows.shadow040}}", }, }, + "worldDesignSystemsWeekCardContainerNonInteractive": Object { + "base": Object { + "backgroundColor": "{{colors.interfaceBrand040}}", + "borderRadius": "{{borders.borderRadiusRounded030}}", + }, + }, "worldDesignSystemsWeekCardMedia": Object { "base": Object { "backgroundImage": "url(static/landing/feature-card-banner.svg)", @@ -19043,11 +19015,6 @@ Object { }, }, "contributeCardButton": Object { - "active": Object { - "backgroundColor": "{{colors.interactiveInverse050}}", - "color": "{{colors.inkBrand020}}", - "iconColor": "{{colors.inkBrand020}}", - }, "base": Object { "backgroundColor": "{{colors.transparent}}", "borderRadius": "{{borders.borderRadiusDefault}}", @@ -19070,7 +19037,7 @@ Object { "contributeCardContainerNonInteractive": Object { "base": Object { "backgroundColor": "{{colors.interfaceBrand050}}", - "borderRadius": "{{borders.borderRadiusRounded020}}", + "borderRadius": "{{borders.borderRadiusRounded030}}", }, }, "contributeCardMedia": Object { @@ -19979,11 +19946,6 @@ Object { }, }, "worldDesignSystemsWeekCardButton": Object { - "active": Object { - "backgroundColor": "{{colors.interactiveInverse050}}", - "color": "{{colors.inkBrand020}}", - "iconColor": "{{colors.inkBrand020}}", - }, "base": Object { "backgroundColor": "{{colors.transparent}}", "color": "{{colors.inkWhiteContrast}}", @@ -20002,6 +19964,12 @@ Object { "boxShadow": "{{shadows.shadow040}}", }, }, + "worldDesignSystemsWeekCardContainerNonInteractive": Object { + "base": Object { + "backgroundColor": "{{colors.interfaceBrand040}}", + "borderRadius": "{{borders.borderRadiusRounded030}}", + }, + }, "worldDesignSystemsWeekCardMedia": Object { "base": Object { "backgroundImage": "url(static/landing/feature-card-banner.svg)", From fa902b15a40c5b2aed3694c83bdb433638e87f45 Mon Sep 17 00:00:00 2001 From: evgenitsn Date: Thu, 18 Aug 2022 15:26:17 +0300 Subject: [PATCH 11/26] feat(PPDSC-1995): update typography presets --- src/theme/presets/typography-presets.ts | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/src/theme/presets/typography-presets.ts b/src/theme/presets/typography-presets.ts index d6b9dc53a1..9388a7f980 100644 --- a/src/theme/presets/typography-presets.ts +++ b/src/theme/presets/typography-presets.ts @@ -4,21 +4,21 @@ export const typographyPresets: Record = {}; // Editorial Display typographyPresets.editorialDisplay010 = { fontFamily: '{{fonts.fontFamily020.fontFamily}}', - fontSize: '{{fonts.fontSize120}}', + fontSize: '{{fonts.fontSize140}}', lineHeight: '{{fonts.fontLineHeight020}}', fontWeight: '{{fonts.fontWeight020}}', letterSpacing: '{{fonts.fontLetterSpacing030}}', }; typographyPresets.editorialDisplay020 = { fontFamily: '{{fonts.fontFamily020.fontFamily}}', - fontSize: '{{fonts.fontSize130}}', + fontSize: '{{fonts.fontSize150}}', lineHeight: '{{fonts.fontLineHeight020}}', fontWeight: '{{fonts.fontWeight020}}', letterSpacing: '{{fonts.fontLetterSpacing030}}', }; typographyPresets.editorialDisplay030 = { fontFamily: '{{fonts.fontFamily020.fontFamily}}', - fontSize: '{{fonts.fontSize140}}', + fontSize: '{{fonts.fontSize160}}', lineHeight: '{{fonts.fontLineHeight020}}', fontWeight: '{{fonts.fontWeight020}}', letterSpacing: '{{fonts.fontLetterSpacing030}}', @@ -40,42 +40,42 @@ typographyPresets.editorialHeadline020 = { }; typographyPresets.editorialHeadline030 = { fontFamily: '{{fonts.fontFamily020.fontFamily}}', - fontSize: '{{fonts.fontSize060}}', + fontSize: '{{fonts.fontSize070}}', lineHeight: '{{fonts.fontLineHeight020}}', fontWeight: '{{fonts.fontWeight020}}', letterSpacing: '{{fonts.fontLetterSpacing030}}', }; typographyPresets.editorialHeadline040 = { fontFamily: '{{fonts.fontFamily020.fontFamily}}', - fontSize: '{{fonts.fontSize070}}', + fontSize: '{{fonts.fontSize080}}', lineHeight: '{{fonts.fontLineHeight020}}', fontWeight: '{{fonts.fontWeight020}}', letterSpacing: '{{fonts.fontLetterSpacing030}}', }; typographyPresets.editorialHeadline050 = { fontFamily: '{{fonts.fontFamily020.fontFamily}}', - fontSize: '{{fonts.fontSize080}}', + fontSize: '{{fonts.fontSize090}}', lineHeight: '{{fonts.fontLineHeight020}}', fontWeight: '{{fonts.fontWeight020}}', letterSpacing: '{{fonts.fontLetterSpacing030}}', }; typographyPresets.editorialHeadline060 = { fontFamily: '{{fonts.fontFamily020.fontFamily}}', - fontSize: '{{fonts.fontSize090}}', + fontSize: '{{fonts.fontSize100}}', lineHeight: '{{fonts.fontLineHeight020}}', fontWeight: '{{fonts.fontWeight020}}', letterSpacing: '{{fonts.fontLetterSpacing030}}', }; typographyPresets.editorialHeadline070 = { fontFamily: '{{fonts.fontFamily020.fontFamily}}', - fontSize: '{{fonts.fontSize100}}', + fontSize: '{{fonts.fontSize110}}', lineHeight: '{{fonts.fontLineHeight020}}', fontWeight: '{{fonts.fontWeight020}}', letterSpacing: '{{fonts.fontLetterSpacing030}}', }; typographyPresets.editorialHeadline080 = { fontFamily: '{{fonts.fontFamily020.fontFamily}}', - fontSize: '{{fonts.fontSize110}}', + fontSize: '{{fonts.fontSize130}}', lineHeight: '{{fonts.fontLineHeight020}}', fontWeight: '{{fonts.fontWeight020}}', letterSpacing: '{{fonts.fontLetterSpacing030}}', From d755c2e8f6a178e106ab484518161f0aba23151b Mon Sep 17 00:00:00 2001 From: evgenitsn Date: Thu, 18 Aug 2022 15:54:39 +0300 Subject: [PATCH 12/26] feat(PPDSC-1995): update snapshots --- .../__snapshots__/component-api.test.tsx.snap | 4 +- .../content-structure.test.tsx.snap | 128 ++++++------ .../__snapshots__/feature-card.test.tsx.snap | 84 ++++---- .../__snapshots__/header-index.test.tsx.snap | 8 +- .../__snapshots__/media-list.test.tsx.snap | 12 +- .../page-introduction.test.tsx.snap | 16 +- .../section-introduction.test.ts.snap | 8 +- .../tabs-with-table.test.tsx.snap | 16 +- .../__snapshots__/content-text.test.ts.snap | 8 +- .../__snapshots__/usage-card.test.tsx.snap | 8 +- .../accessibility-section.test.tsx.snap | 12 +- .../anatomy-section.test.tsx.snap | 8 +- .../behaviors-section.test.tsx.snap | 8 +- .../code-examples-section.test.tsx.snap | 20 +- .../compliance-section.test.tsx.snap | 8 +- .../component-api-section.test.tsx.snap | 12 +- .../interactive-demo-section.test.tsx.snap | 8 +- .../options-section.test.tsx.snap | 8 +- .../related-components-section.test.tsx.snap | 8 +- .../__snapshots__/seo-section.test.tsx.snap | 8 +- .../states-section.test.tsx.snap | 8 +- .../__snapshots__/usage-section.test.tsx.snap | 8 +- .../__snapshots__/doc-theme.test.ts.snap | 192 +++++++++--------- .../__snapshots__/card.test.tsx.snap | 32 +-- .../__snapshots__/headline.test.tsx.snap | 76 +++---- .../selection-list.test.tsx.snap | 4 +- .../__snapshots__/creator.test.ts.snap | 24 +-- .../__snapshots__/theme.test.ts.snap | 24 +-- .../__snapshots__/index.test.ts.snap | 24 +-- .../__snapshots__/title-bar.test.tsx.snap | 160 +++++++-------- .../__snapshots__/heading.test.tsx.snap | 120 +++++------ .../__snapshots__/paragraph.test.tsx.snap | 18 +- 32 files changed, 541 insertions(+), 541 deletions(-) diff --git a/site/components/component-api/__tests__/__snapshots__/component-api.test.tsx.snap b/site/components/component-api/__tests__/__snapshots__/component-api.test.tsx.snap index fb8f217c29..9030a015f9 100644 --- a/site/components/component-api/__tests__/__snapshots__/component-api.test.tsx.snap +++ b/site/components/component-api/__tests__/__snapshots__/component-api.test.tsx.snap @@ -554,8 +554,8 @@ exports[`ComponentAPI renders with props for multiple components 1`] = ` @media screen and (min-width: 1440px) { .emotion-3 { font-family: "Poppins",sans-serif; - font-size: 22px; - line-height: 24.75px; + font-size: 24px; + line-height: 27px; font-weight: 700; letter-spacing: 0; padding: 0.5px 0px; diff --git a/site/components/content-structure/__tests__/__snapshots__/content-structure.test.tsx.snap b/site/components/content-structure/__tests__/__snapshots__/content-structure.test.tsx.snap index 84f8ab7fe8..0f699df1a9 100644 --- a/site/components/content-structure/__tests__/__snapshots__/content-structure.test.tsx.snap +++ b/site/components/content-structure/__tests__/__snapshots__/content-structure.test.tsx.snap @@ -487,8 +487,8 @@ exports[`Content Primary renders with headline and children 1`] = ` @media screen and (max-width: 767px) { .emotion-2 { font-family: "Poppins",sans-serif; - font-size: 28px; - line-height: 31.5px; + font-size: 32px; + line-height: 36px; font-weight: 700; letter-spacing: 0; padding: 0.5px 0px; @@ -510,8 +510,8 @@ exports[`Content Primary renders with headline and children 1`] = ` @media screen and (min-width: 768px) and (max-width: 1023px) { .emotion-2 { font-family: "Poppins",sans-serif; - font-size: 28px; - line-height: 31.5px; + font-size: 32px; + line-height: 36px; font-weight: 700; letter-spacing: 0; padding: 0.5px 0px; @@ -533,8 +533,8 @@ exports[`Content Primary renders with headline and children 1`] = ` @media screen and (min-width: 1024px) and (max-width: 1439px) { .emotion-2 { font-family: "Poppins",sans-serif; - font-size: 28px; - line-height: 31.5px; + font-size: 32px; + line-height: 36px; font-weight: 700; letter-spacing: 0; padding: 0.5px 0px; @@ -556,8 +556,8 @@ exports[`Content Primary renders with headline and children 1`] = ` @media screen and (min-width: 1440px) { .emotion-2 { font-family: "Poppins",sans-serif; - font-size: 28px; - line-height: 31.5px; + font-size: 32px; + line-height: 36px; font-weight: 700; letter-spacing: 0; padding: 0.5px 0px; @@ -706,8 +706,8 @@ exports[`Content Primary renders with headline and description 1`] = ` @media screen and (max-width: 767px) { .emotion-2 { font-family: "Poppins",sans-serif; - font-size: 28px; - line-height: 31.5px; + font-size: 32px; + line-height: 36px; font-weight: 700; letter-spacing: 0; padding: 0.5px 0px; @@ -729,8 +729,8 @@ exports[`Content Primary renders with headline and description 1`] = ` @media screen and (min-width: 768px) and (max-width: 1023px) { .emotion-2 { font-family: "Poppins",sans-serif; - font-size: 28px; - line-height: 31.5px; + font-size: 32px; + line-height: 36px; font-weight: 700; letter-spacing: 0; padding: 0.5px 0px; @@ -752,8 +752,8 @@ exports[`Content Primary renders with headline and description 1`] = ` @media screen and (min-width: 1024px) and (max-width: 1439px) { .emotion-2 { font-family: "Poppins",sans-serif; - font-size: 28px; - line-height: 31.5px; + font-size: 32px; + line-height: 36px; font-weight: 700; letter-spacing: 0; padding: 0.5px 0px; @@ -775,8 +775,8 @@ exports[`Content Primary renders with headline and description 1`] = ` @media screen and (min-width: 1440px) { .emotion-2 { font-family: "Poppins",sans-serif; - font-size: 28px; - line-height: 31.5px; + font-size: 32px; + line-height: 36px; font-weight: 700; letter-spacing: 0; padding: 0.5px 0px; @@ -1016,8 +1016,8 @@ exports[`Content Primary renders with headline only 1`] = ` @media screen and (max-width: 767px) { .emotion-2 { font-family: "Poppins",sans-serif; - font-size: 28px; - line-height: 31.5px; + font-size: 32px; + line-height: 36px; font-weight: 700; letter-spacing: 0; padding: 0.5px 0px; @@ -1039,8 +1039,8 @@ exports[`Content Primary renders with headline only 1`] = ` @media screen and (min-width: 768px) and (max-width: 1023px) { .emotion-2 { font-family: "Poppins",sans-serif; - font-size: 28px; - line-height: 31.5px; + font-size: 32px; + line-height: 36px; font-weight: 700; letter-spacing: 0; padding: 0.5px 0px; @@ -1062,8 +1062,8 @@ exports[`Content Primary renders with headline only 1`] = ` @media screen and (min-width: 1024px) and (max-width: 1439px) { .emotion-2 { font-family: "Poppins",sans-serif; - font-size: 28px; - line-height: 31.5px; + font-size: 32px; + line-height: 36px; font-weight: 700; letter-spacing: 0; padding: 0.5px 0px; @@ -1085,8 +1085,8 @@ exports[`Content Primary renders with headline only 1`] = ` @media screen and (min-width: 1440px) { .emotion-2 { font-family: "Poppins",sans-serif; - font-size: 28px; - line-height: 31.5px; + font-size: 32px; + line-height: 36px; font-weight: 700; letter-spacing: 0; padding: 0.5px 0px; @@ -1189,8 +1189,8 @@ exports[`Content Primary renders with headline, description and content 1`] = ` @media screen and (max-width: 767px) { .emotion-2 { font-family: "Poppins",sans-serif; - font-size: 28px; - line-height: 31.5px; + font-size: 32px; + line-height: 36px; font-weight: 700; letter-spacing: 0; padding: 0.5px 0px; @@ -1212,8 +1212,8 @@ exports[`Content Primary renders with headline, description and content 1`] = ` @media screen and (min-width: 768px) and (max-width: 1023px) { .emotion-2 { font-family: "Poppins",sans-serif; - font-size: 28px; - line-height: 31.5px; + font-size: 32px; + line-height: 36px; font-weight: 700; letter-spacing: 0; padding: 0.5px 0px; @@ -1235,8 +1235,8 @@ exports[`Content Primary renders with headline, description and content 1`] = ` @media screen and (min-width: 1024px) and (max-width: 1439px) { .emotion-2 { font-family: "Poppins",sans-serif; - font-size: 28px; - line-height: 31.5px; + font-size: 32px; + line-height: 36px; font-weight: 700; letter-spacing: 0; padding: 0.5px 0px; @@ -1258,8 +1258,8 @@ exports[`Content Primary renders with headline, description and content 1`] = ` @media screen and (min-width: 1440px) { .emotion-2 { font-family: "Poppins",sans-serif; - font-size: 28px; - line-height: 31.5px; + font-size: 32px; + line-height: 36px; font-weight: 700; letter-spacing: 0; padding: 0.5px 0px; @@ -2001,8 +2001,8 @@ exports[`Content Secondary renders with headline and children 1`] = ` @media screen and (max-width: 767px) { .emotion-2 { font-family: "Poppins",sans-serif; - font-size: 22px; - line-height: 24.75px; + font-size: 24px; + line-height: 27px; font-weight: 700; letter-spacing: 0; padding: 0.5px 0px; @@ -2024,8 +2024,8 @@ exports[`Content Secondary renders with headline and children 1`] = ` @media screen and (min-width: 768px) and (max-width: 1023px) { .emotion-2 { font-family: "Poppins",sans-serif; - font-size: 22px; - line-height: 24.75px; + font-size: 24px; + line-height: 27px; font-weight: 700; letter-spacing: 0; padding: 0.5px 0px; @@ -2047,8 +2047,8 @@ exports[`Content Secondary renders with headline and children 1`] = ` @media screen and (min-width: 1024px) and (max-width: 1439px) { .emotion-2 { font-family: "Poppins",sans-serif; - font-size: 22px; - line-height: 24.75px; + font-size: 24px; + line-height: 27px; font-weight: 700; letter-spacing: 0; padding: 0.5px 0px; @@ -2070,8 +2070,8 @@ exports[`Content Secondary renders with headline and children 1`] = ` @media screen and (min-width: 1440px) { .emotion-2 { font-family: "Poppins",sans-serif; - font-size: 22px; - line-height: 24.75px; + font-size: 24px; + line-height: 27px; font-weight: 700; letter-spacing: 0; padding: 0.5px 0px; @@ -2218,8 +2218,8 @@ exports[`Content Secondary renders with headline and description 1`] = ` @media screen and (max-width: 767px) { .emotion-2 { font-family: "Poppins",sans-serif; - font-size: 22px; - line-height: 24.75px; + font-size: 24px; + line-height: 27px; font-weight: 700; letter-spacing: 0; padding: 0.5px 0px; @@ -2241,8 +2241,8 @@ exports[`Content Secondary renders with headline and description 1`] = ` @media screen and (min-width: 768px) and (max-width: 1023px) { .emotion-2 { font-family: "Poppins",sans-serif; - font-size: 22px; - line-height: 24.75px; + font-size: 24px; + line-height: 27px; font-weight: 700; letter-spacing: 0; padding: 0.5px 0px; @@ -2264,8 +2264,8 @@ exports[`Content Secondary renders with headline and description 1`] = ` @media screen and (min-width: 1024px) and (max-width: 1439px) { .emotion-2 { font-family: "Poppins",sans-serif; - font-size: 22px; - line-height: 24.75px; + font-size: 24px; + line-height: 27px; font-weight: 700; letter-spacing: 0; padding: 0.5px 0px; @@ -2287,8 +2287,8 @@ exports[`Content Secondary renders with headline and description 1`] = ` @media screen and (min-width: 1440px) { .emotion-2 { font-family: "Poppins",sans-serif; - font-size: 22px; - line-height: 24.75px; + font-size: 24px; + line-height: 27px; font-weight: 700; letter-spacing: 0; padding: 0.5px 0px; @@ -2526,8 +2526,8 @@ exports[`Content Secondary renders with headline only 1`] = ` @media screen and (max-width: 767px) { .emotion-2 { font-family: "Poppins",sans-serif; - font-size: 22px; - line-height: 24.75px; + font-size: 24px; + line-height: 27px; font-weight: 700; letter-spacing: 0; padding: 0.5px 0px; @@ -2549,8 +2549,8 @@ exports[`Content Secondary renders with headline only 1`] = ` @media screen and (min-width: 768px) and (max-width: 1023px) { .emotion-2 { font-family: "Poppins",sans-serif; - font-size: 22px; - line-height: 24.75px; + font-size: 24px; + line-height: 27px; font-weight: 700; letter-spacing: 0; padding: 0.5px 0px; @@ -2572,8 +2572,8 @@ exports[`Content Secondary renders with headline only 1`] = ` @media screen and (min-width: 1024px) and (max-width: 1439px) { .emotion-2 { font-family: "Poppins",sans-serif; - font-size: 22px; - line-height: 24.75px; + font-size: 24px; + line-height: 27px; font-weight: 700; letter-spacing: 0; padding: 0.5px 0px; @@ -2595,8 +2595,8 @@ exports[`Content Secondary renders with headline only 1`] = ` @media screen and (min-width: 1440px) { .emotion-2 { font-family: "Poppins",sans-serif; - font-size: 22px; - line-height: 24.75px; + font-size: 24px; + line-height: 27px; font-weight: 700; letter-spacing: 0; padding: 0.5px 0px; @@ -2697,8 +2697,8 @@ exports[`Content Secondary renders with headline, description and content 1`] = @media screen and (max-width: 767px) { .emotion-2 { font-family: "Poppins",sans-serif; - font-size: 22px; - line-height: 24.75px; + font-size: 24px; + line-height: 27px; font-weight: 700; letter-spacing: 0; padding: 0.5px 0px; @@ -2720,8 +2720,8 @@ exports[`Content Secondary renders with headline, description and content 1`] = @media screen and (min-width: 768px) and (max-width: 1023px) { .emotion-2 { font-family: "Poppins",sans-serif; - font-size: 22px; - line-height: 24.75px; + font-size: 24px; + line-height: 27px; font-weight: 700; letter-spacing: 0; padding: 0.5px 0px; @@ -2743,8 +2743,8 @@ exports[`Content Secondary renders with headline, description and content 1`] = @media screen and (min-width: 1024px) and (max-width: 1439px) { .emotion-2 { font-family: "Poppins",sans-serif; - font-size: 22px; - line-height: 24.75px; + font-size: 24px; + line-height: 27px; font-weight: 700; letter-spacing: 0; padding: 0.5px 0px; @@ -2766,8 +2766,8 @@ exports[`Content Secondary renders with headline, description and content 1`] = @media screen and (min-width: 1440px) { .emotion-2 { font-family: "Poppins",sans-serif; - font-size: 22px; - line-height: 24.75px; + font-size: 24px; + line-height: 27px; font-weight: 700; letter-spacing: 0; padding: 0.5px 0px; diff --git a/site/components/feature-card/__tests__/__snapshots__/feature-card.test.tsx.snap b/site/components/feature-card/__tests__/__snapshots__/feature-card.test.tsx.snap index 5df93c034b..5f2a406ffc 100644 --- a/site/components/feature-card/__tests__/__snapshots__/feature-card.test.tsx.snap +++ b/site/components/feature-card/__tests__/__snapshots__/feature-card.test.tsx.snap @@ -160,8 +160,8 @@ exports[`FeatureCard Renders horizontal card with clickable button only 1`] = ` @media screen and (min-width: 768px) and (max-width: 1023px) { .emotion-7 { font-family: "Bitter",serif; - font-size: 22px; - line-height: 24.75px; + font-size: 24px; + line-height: 27px; font-weight: 500; letter-spacing: 0; padding: 0.5px 0px; @@ -183,8 +183,8 @@ exports[`FeatureCard Renders horizontal card with clickable button only 1`] = ` @media screen and (min-width: 1024px) { .emotion-7 { font-family: "Bitter",serif; - font-size: 28px; - line-height: 31.5px; + font-size: 32px; + line-height: 36px; font-weight: 500; letter-spacing: 0; padding: 0.5px 0px; @@ -705,8 +705,8 @@ exports[`FeatureCard Renders horizontal card with clickable button only 1`] = ` @media screen and (min-width: 768px) and (max-width: 1023px) { .emotion-8 { font-family: "Bitter",serif; - font-size: 22px; - line-height: 24.75px; + font-size: 24px; + line-height: 27px; font-weight: 500; letter-spacing: 0; padding: 0.5px 0px; @@ -728,8 +728,8 @@ exports[`FeatureCard Renders horizontal card with clickable button only 1`] = ` @media screen and (min-width: 1024px) { .emotion-8 { font-family: "Bitter",serif; - font-size: 28px; - line-height: 31.5px; + font-size: 32px; + line-height: 36px; font-weight: 500; letter-spacing: 0; padding: 0.5px 0px; @@ -1251,8 +1251,8 @@ exports[`FeatureCard Renders interactive horizontal card with button 1`] = ` @media screen and (min-width: 768px) and (max-width: 1023px) { .emotion-9 { font-family: "Bitter",serif; - font-size: 22px; - line-height: 24.75px; + font-size: 24px; + line-height: 27px; font-weight: 500; letter-spacing: 0; padding: 0.5px 0px; @@ -1274,8 +1274,8 @@ exports[`FeatureCard Renders interactive horizontal card with button 1`] = ` @media screen and (min-width: 1024px) { .emotion-9 { font-family: "Bitter",serif; - font-size: 28px; - line-height: 31.5px; + font-size: 32px; + line-height: 36px; font-weight: 500; letter-spacing: 0; padding: 0.5px 0px; @@ -2007,8 +2007,8 @@ exports[`FeatureCard Renders interactive horizontal card without button 1`] = ` @media screen and (min-width: 768px) and (max-width: 1023px) { .emotion-9 { font-family: "Bitter",serif; - font-size: 22px; - line-height: 24.75px; + font-size: 24px; + line-height: 27px; font-weight: 500; letter-spacing: 0; padding: 0.5px 0px; @@ -2030,8 +2030,8 @@ exports[`FeatureCard Renders interactive horizontal card without button 1`] = ` @media screen and (min-width: 1024px) { .emotion-9 { font-family: "Bitter",serif; - font-size: 28px; - line-height: 31.5px; + font-size: 32px; + line-height: 36px; font-weight: 500; letter-spacing: 0; padding: 0.5px 0px; @@ -2477,8 +2477,8 @@ exports[`FeatureCard Renders interactive vertical card with button 1`] = ` @media screen and (min-width: 768px) and (max-width: 1023px) { .emotion-6 { font-family: "Bitter",serif; - font-size: 22px; - line-height: 24.75px; + font-size: 24px; + line-height: 27px; font-weight: 500; letter-spacing: 0; padding: 0.5px 0px; @@ -2500,8 +2500,8 @@ exports[`FeatureCard Renders interactive vertical card with button 1`] = ` @media screen and (min-width: 1024px) { .emotion-6 { font-family: "Bitter",serif; - font-size: 28px; - line-height: 31.5px; + font-size: 32px; + line-height: 36px; font-weight: 500; letter-spacing: 0; padding: 0.5px 0px; @@ -2908,8 +2908,8 @@ exports[`FeatureCard Renders interactive vertical card without button 1`] = ` @media screen and (min-width: 768px) and (max-width: 1023px) { .emotion-6 { font-family: "Bitter",serif; - font-size: 22px; - line-height: 24.75px; + font-size: 24px; + line-height: 27px; font-weight: 500; letter-spacing: 0; padding: 0.5px 0px; @@ -2931,8 +2931,8 @@ exports[`FeatureCard Renders interactive vertical card without button 1`] = ` @media screen and (min-width: 1024px) { .emotion-6 { font-family: "Bitter",serif; - font-size: 28px; - line-height: 31.5px; + font-size: 32px; + line-height: 36px; font-weight: 500; letter-spacing: 0; padding: 0.5px 0px; @@ -3179,8 +3179,8 @@ exports[`FeatureCard Renders non-interactive horizontal card 1`] = ` @media screen and (min-width: 768px) and (max-width: 1023px) { .emotion-7 { font-family: "Bitter",serif; - font-size: 22px; - line-height: 24.75px; + font-size: 24px; + line-height: 27px; font-weight: 500; letter-spacing: 0; padding: 0.5px 0px; @@ -3202,8 +3202,8 @@ exports[`FeatureCard Renders non-interactive horizontal card 1`] = ` @media screen and (min-width: 1024px) { .emotion-7 { font-family: "Bitter",serif; - font-size: 28px; - line-height: 31.5px; + font-size: 32px; + line-height: 36px; font-weight: 500; letter-spacing: 0; padding: 0.5px 0px; @@ -3495,8 +3495,8 @@ exports[`FeatureCard Renders non-interactive horizontal card 1`] = ` @media screen and (min-width: 768px) and (max-width: 1023px) { .emotion-8 { font-family: "Bitter",serif; - font-size: 22px; - line-height: 24.75px; + font-size: 24px; + line-height: 27px; font-weight: 500; letter-spacing: 0; padding: 0.5px 0px; @@ -3518,8 +3518,8 @@ exports[`FeatureCard Renders non-interactive horizontal card 1`] = ` @media screen and (min-width: 1024px) { .emotion-8 { font-family: "Bitter",serif; - font-size: 28px; - line-height: 31.5px; + font-size: 32px; + line-height: 36px; font-weight: 500; letter-spacing: 0; padding: 0.5px 0px; @@ -3709,8 +3709,8 @@ exports[`FeatureCard Renders non-interactive vertical card 1`] = ` @media screen and (min-width: 768px) and (max-width: 1023px) { .emotion-4 { font-family: "Bitter",serif; - font-size: 22px; - line-height: 24.75px; + font-size: 24px; + line-height: 27px; font-weight: 500; letter-spacing: 0; padding: 0.5px 0px; @@ -3732,8 +3732,8 @@ exports[`FeatureCard Renders non-interactive vertical card 1`] = ` @media screen and (min-width: 1024px) { .emotion-4 { font-family: "Bitter",serif; - font-size: 28px; - line-height: 31.5px; + font-size: 32px; + line-height: 36px; font-weight: 500; letter-spacing: 0; padding: 0.5px 0px; @@ -3969,8 +3969,8 @@ exports[`FeatureCard Renders overrides when card is horizontal 1`] = ` .emotion-9 { font-family: "Bitter",serif; - font-size: 24px; - line-height: 27px; + font-size: 28px; + line-height: 31.5px; font-weight: 500; letter-spacing: 0; padding: 0.5px 0px; @@ -4388,8 +4388,8 @@ exports[`FeatureCard Renders vertical card with clickable button only 1`] = ` @media screen and (min-width: 768px) and (max-width: 1023px) { .emotion-4 { font-family: "Bitter",serif; - font-size: 22px; - line-height: 24.75px; + font-size: 24px; + line-height: 27px; font-weight: 500; letter-spacing: 0; padding: 0.5px 0px; @@ -4411,8 +4411,8 @@ exports[`FeatureCard Renders vertical card with clickable button only 1`] = ` @media screen and (min-width: 1024px) { .emotion-4 { font-family: "Bitter",serif; - font-size: 28px; - line-height: 31.5px; + font-size: 32px; + line-height: 36px; font-weight: 500; letter-spacing: 0; padding: 0.5px 0px; diff --git a/site/components/header-index/__tests__/__snapshots__/header-index.test.tsx.snap b/site/components/header-index/__tests__/__snapshots__/header-index.test.tsx.snap index b66bf01f70..63c619a2eb 100644 --- a/site/components/header-index/__tests__/__snapshots__/header-index.test.tsx.snap +++ b/site/components/header-index/__tests__/__snapshots__/header-index.test.tsx.snap @@ -247,8 +247,8 @@ exports[`HeaderIndex renders without crashing 1`] = ` @media screen and (max-width: 767px) { .emotion-9 { font-family: "Poppins",sans-serif; - font-size: 32px; - line-height: 36px; + font-size: 36px; + line-height: 40.5px; font-weight: 700; letter-spacing: 0; padding: 0.5px 0px; @@ -270,8 +270,8 @@ exports[`HeaderIndex renders without crashing 1`] = ` @media screen and (min-width: 768px) { .emotion-9 { font-family: "Poppins",sans-serif; - font-size: 40px; - line-height: 45px; + font-size: 48px; + line-height: 54px; font-weight: 700; letter-spacing: 0; padding: 0.5px 0px; diff --git a/site/components/media-list/__tests__/__snapshots__/media-list.test.tsx.snap b/site/components/media-list/__tests__/__snapshots__/media-list.test.tsx.snap index cbb4739b08..27e095aa6d 100644 --- a/site/components/media-list/__tests__/__snapshots__/media-list.test.tsx.snap +++ b/site/components/media-list/__tests__/__snapshots__/media-list.test.tsx.snap @@ -1135,8 +1135,8 @@ exports[`Media List renders with feature cardscards 1`] = ` @media screen and (max-width: 1023px) { .emotion-13 { font-family: "Poppins",sans-serif; - font-size: 24px; - line-height: 27px; + font-size: 28px; + line-height: 31.5px; font-weight: 700; letter-spacing: 0; padding: 0.5px 0px; @@ -1158,8 +1158,8 @@ exports[`Media List renders with feature cardscards 1`] = ` @media screen and (min-width: 1024px) { .emotion-13 { font-family: "Poppins",sans-serif; - font-size: 32px; - line-height: 36px; + font-size: 36px; + line-height: 40.5px; font-weight: 700; letter-spacing: 0; padding: 0.5px 0px; @@ -2131,8 +2131,8 @@ exports[`Media List renders with usage cards 1`] = ` .emotion-17 { font-family: "Poppins",sans-serif; - font-size: 22px; - line-height: 24.75px; + font-size: 24px; + line-height: 27px; font-weight: 700; letter-spacing: 0; padding: 0.5px 0px; diff --git a/site/components/page-introduction/__tests__/__snapshots__/page-introduction.test.tsx.snap b/site/components/page-introduction/__tests__/__snapshots__/page-introduction.test.tsx.snap index 30b48740c3..8193a7e35e 100644 --- a/site/components/page-introduction/__tests__/__snapshots__/page-introduction.test.tsx.snap +++ b/site/components/page-introduction/__tests__/__snapshots__/page-introduction.test.tsx.snap @@ -95,8 +95,8 @@ exports[`Page Introduction renders with mandatory props 1`] = ` @media screen and (min-width: 768px) { .emotion-2 { font-family: "Poppins",sans-serif; - font-size: 22px; - line-height: 24.75px; + font-size: 24px; + line-height: 27px; font-weight: 700; letter-spacing: 0; padding: 0.5px 0px; @@ -139,8 +139,8 @@ exports[`Page Introduction renders with mandatory props 1`] = ` @media screen and (max-width: 767px) { .emotion-4 { font-family: "Poppins",sans-serif; - font-size: 32px; - line-height: 36px; + font-size: 36px; + line-height: 40.5px; font-weight: 700; letter-spacing: 0; padding: 0.5px 0px; @@ -162,8 +162,8 @@ exports[`Page Introduction renders with mandatory props 1`] = ` @media screen and (min-width: 768px) and (max-width: 1023px) { .emotion-4 { font-family: "Poppins",sans-serif; - font-size: 36px; - line-height: 40.5px; + font-size: 40px; + line-height: 45px; font-weight: 700; letter-spacing: 0; padding: 0.5px 0px; @@ -185,8 +185,8 @@ exports[`Page Introduction renders with mandatory props 1`] = ` @media screen and (min-width: 1024px) { .emotion-4 { font-family: "Poppins",sans-serif; - font-size: 40px; - line-height: 45px; + font-size: 48px; + line-height: 54px; font-weight: 700; letter-spacing: 0; padding: 0.5px 0px; diff --git a/site/components/section-introduction/__tests__/__snapshots__/section-introduction.test.ts.snap b/site/components/section-introduction/__tests__/__snapshots__/section-introduction.test.ts.snap index 7fce96373c..df63b76809 100644 --- a/site/components/section-introduction/__tests__/__snapshots__/section-introduction.test.ts.snap +++ b/site/components/section-introduction/__tests__/__snapshots__/section-introduction.test.ts.snap @@ -94,8 +94,8 @@ exports[`SectionIntroduction renders with all props 1`] = ` @media screen and (max-width: 767px) { .emotion-4 { font-family: "Poppins",sans-serif; - font-size: 24px; - line-height: 27px; + font-size: 28px; + line-height: 31.5px; font-weight: 700; letter-spacing: 0; padding: 0.5px 0px; @@ -117,8 +117,8 @@ exports[`SectionIntroduction renders with all props 1`] = ` @media screen and (min-width: 768px) { .emotion-4 { font-family: "Poppins",sans-serif; - font-size: 28px; - line-height: 31.5px; + font-size: 32px; + line-height: 36px; font-weight: 700; letter-spacing: 0; padding: 0.5px 0px; diff --git a/site/components/tabs-with-table/__tests__/__snapshots__/tabs-with-table.test.tsx.snap b/site/components/tabs-with-table/__tests__/__snapshots__/tabs-with-table.test.tsx.snap index d18a6807a6..4e08506aad 100644 --- a/site/components/tabs-with-table/__tests__/__snapshots__/tabs-with-table.test.tsx.snap +++ b/site/components/tabs-with-table/__tests__/__snapshots__/tabs-with-table.test.tsx.snap @@ -31,8 +31,8 @@ exports[`TabsWithTable renders with default data 1`] = ` @media screen and (max-width: 767px) { .emotion-2 { font-family: "Poppins",sans-serif; - font-size: 22px; - line-height: 24.75px; + font-size: 24px; + line-height: 27px; font-weight: 700; letter-spacing: 0; padding: 0.5px 0px; @@ -54,8 +54,8 @@ exports[`TabsWithTable renders with default data 1`] = ` @media screen and (min-width: 768px) and (max-width: 1023px) { .emotion-2 { font-family: "Poppins",sans-serif; - font-size: 22px; - line-height: 24.75px; + font-size: 24px; + line-height: 27px; font-weight: 700; letter-spacing: 0; padding: 0.5px 0px; @@ -77,8 +77,8 @@ exports[`TabsWithTable renders with default data 1`] = ` @media screen and (min-width: 1024px) and (max-width: 1439px) { .emotion-2 { font-family: "Poppins",sans-serif; - font-size: 22px; - line-height: 24.75px; + font-size: 24px; + line-height: 27px; font-weight: 700; letter-spacing: 0; padding: 0.5px 0px; @@ -100,8 +100,8 @@ exports[`TabsWithTable renders with default data 1`] = ` @media screen and (min-width: 1440px) { .emotion-2 { font-family: "Poppins",sans-serif; - font-size: 22px; - line-height: 24.75px; + font-size: 24px; + line-height: 27px; font-weight: 700; letter-spacing: 0; padding: 0.5px 0px; diff --git a/site/components/text-section/__tests__/__snapshots__/content-text.test.ts.snap b/site/components/text-section/__tests__/__snapshots__/content-text.test.ts.snap index 28a2a9c419..cf658d402c 100644 --- a/site/components/text-section/__tests__/__snapshots__/content-text.test.ts.snap +++ b/site/components/text-section/__tests__/__snapshots__/content-text.test.ts.snap @@ -114,8 +114,8 @@ exports[`ContentText renders with only the title 1`] = ` @media screen and (min-width: 1440px) { .emotion-1 { font-family: "Poppins",sans-serif; - font-size: 22px; - line-height: 24.75px; + font-size: 24px; + line-height: 27px; font-weight: 700; letter-spacing: 0; padding: 0.5px 0px; @@ -195,8 +195,8 @@ exports[`ContentText renders with title and description 1`] = ` @media screen and (min-width: 1440px) { .emotion-1 { font-family: "Poppins",sans-serif; - font-size: 22px; - line-height: 24.75px; + font-size: 24px; + line-height: 27px; font-weight: 700; letter-spacing: 0; padding: 0.5px 0px; diff --git a/site/components/usage-card/__tests__/__snapshots__/usage-card.test.tsx.snap b/site/components/usage-card/__tests__/__snapshots__/usage-card.test.tsx.snap index 4271b2e695..b51d8a1e54 100644 --- a/site/components/usage-card/__tests__/__snapshots__/usage-card.test.tsx.snap +++ b/site/components/usage-card/__tests__/__snapshots__/usage-card.test.tsx.snap @@ -176,8 +176,8 @@ exports[`UsageCard Renders Dont UsageCard when kind=dont 1`] = ` .emotion-13 { font-family: "Poppins",sans-serif; - font-size: 22px; - line-height: 24.75px; + font-size: 24px; + line-height: 27px; font-weight: 700; letter-spacing: 0; padding: 0.5px 0px; @@ -491,8 +491,8 @@ exports[`UsageCard Renders default (Do) UsageCard 1`] = ` .emotion-13 { font-family: "Poppins",sans-serif; - font-size: 22px; - line-height: 24.75px; + font-size: 24px; + line-height: 27px; font-weight: 700; letter-spacing: 0; padding: 0.5px 0px; diff --git a/site/templates/template-sections/__tests__/__snapshots__/accessibility-section.test.tsx.snap b/site/templates/template-sections/__tests__/__snapshots__/accessibility-section.test.tsx.snap index f9419055a1..4bd433093e 100644 --- a/site/templates/template-sections/__tests__/__snapshots__/accessibility-section.test.tsx.snap +++ b/site/templates/template-sections/__tests__/__snapshots__/accessibility-section.test.tsx.snap @@ -49,8 +49,8 @@ exports[`AccessibilitySection renders section as expected 1`] = ` @media screen and (max-width: 767px) { .emotion-4 { font-family: "Poppins",sans-serif; - font-size: 24px; - line-height: 27px; + font-size: 28px; + line-height: 31.5px; font-weight: 700; letter-spacing: 0; padding: 0.5px 0px; @@ -72,8 +72,8 @@ exports[`AccessibilitySection renders section as expected 1`] = ` @media screen and (min-width: 768px) { .emotion-4 { font-family: "Poppins",sans-serif; - font-size: 28px; - line-height: 31.5px; + font-size: 32px; + line-height: 36px; font-weight: 700; letter-spacing: 0; padding: 0.5px 0px; @@ -194,8 +194,8 @@ exports[`AccessibilitySection renders section as expected 1`] = ` @media screen and (min-width: 1440px) { .emotion-10 { font-family: "Poppins",sans-serif; - font-size: 22px; - line-height: 24.75px; + font-size: 24px; + line-height: 27px; font-weight: 700; letter-spacing: 0; padding: 0.5px 0px; diff --git a/site/templates/template-sections/__tests__/__snapshots__/anatomy-section.test.tsx.snap b/site/templates/template-sections/__tests__/__snapshots__/anatomy-section.test.tsx.snap index 8843d5913c..4ab354a067 100644 --- a/site/templates/template-sections/__tests__/__snapshots__/anatomy-section.test.tsx.snap +++ b/site/templates/template-sections/__tests__/__snapshots__/anatomy-section.test.tsx.snap @@ -49,8 +49,8 @@ exports[`AnatomySection renders section as expected 1`] = ` @media screen and (max-width: 767px) { .emotion-4 { font-family: "Poppins",sans-serif; - font-size: 24px; - line-height: 27px; + font-size: 28px; + line-height: 31.5px; font-weight: 700; letter-spacing: 0; padding: 0.5px 0px; @@ -72,8 +72,8 @@ exports[`AnatomySection renders section as expected 1`] = ` @media screen and (min-width: 768px) { .emotion-4 { font-family: "Poppins",sans-serif; - font-size: 28px; - line-height: 31.5px; + font-size: 32px; + line-height: 36px; font-weight: 700; letter-spacing: 0; padding: 0.5px 0px; diff --git a/site/templates/template-sections/__tests__/__snapshots__/behaviors-section.test.tsx.snap b/site/templates/template-sections/__tests__/__snapshots__/behaviors-section.test.tsx.snap index 1fd959f9b8..6eec4530f0 100644 --- a/site/templates/template-sections/__tests__/__snapshots__/behaviors-section.test.tsx.snap +++ b/site/templates/template-sections/__tests__/__snapshots__/behaviors-section.test.tsx.snap @@ -49,8 +49,8 @@ exports[`BehaviorsSection renders section as expected 1`] = ` @media screen and (max-width: 767px) { .emotion-4 { font-family: "Poppins",sans-serif; - font-size: 24px; - line-height: 27px; + font-size: 28px; + line-height: 31.5px; font-weight: 700; letter-spacing: 0; padding: 0.5px 0px; @@ -72,8 +72,8 @@ exports[`BehaviorsSection renders section as expected 1`] = ` @media screen and (min-width: 768px) { .emotion-4 { font-family: "Poppins",sans-serif; - font-size: 28px; - line-height: 31.5px; + font-size: 32px; + line-height: 36px; font-weight: 700; letter-spacing: 0; padding: 0.5px 0px; diff --git a/site/templates/template-sections/__tests__/__snapshots__/code-examples-section.test.tsx.snap b/site/templates/template-sections/__tests__/__snapshots__/code-examples-section.test.tsx.snap index 114b089a95..80290b5cfe 100644 --- a/site/templates/template-sections/__tests__/__snapshots__/code-examples-section.test.tsx.snap +++ b/site/templates/template-sections/__tests__/__snapshots__/code-examples-section.test.tsx.snap @@ -177,8 +177,8 @@ exports[`CodeExamplesSection renders section as expected 1`] = ` @media screen and (max-width: 767px) { .emotion-8 { font-family: "Poppins",sans-serif; - font-size: 24px; - line-height: 27px; + font-size: 28px; + line-height: 31.5px; font-weight: 700; letter-spacing: 0; padding: 0.5px 0px; @@ -200,8 +200,8 @@ exports[`CodeExamplesSection renders section as expected 1`] = ` @media screen and (min-width: 768px) { .emotion-8 { font-family: "Poppins",sans-serif; - font-size: 28px; - line-height: 31.5px; + font-size: 32px; + line-height: 36px; font-weight: 700; letter-spacing: 0; padding: 0.5px 0px; @@ -330,8 +330,8 @@ exports[`CodeExamplesSection renders section as expected 1`] = ` @media screen and (max-width: 767px) { .emotion-15 { font-family: "Poppins",sans-serif; - font-size: 24px; - line-height: 27px; + font-size: 28px; + line-height: 31.5px; font-weight: 700; letter-spacing: 0; padding: 0.5px 0px; @@ -353,8 +353,8 @@ exports[`CodeExamplesSection renders section as expected 1`] = ` @media screen and (min-width: 768px) { .emotion-15 { font-family: "Poppins",sans-serif; - font-size: 28px; - line-height: 31.5px; + font-size: 32px; + line-height: 36px; font-weight: 700; letter-spacing: 0; padding: 0.5px 0px; @@ -542,8 +542,8 @@ exports[`CodeExamplesSection renders section as expected 1`] = ` @media screen and (min-width: 1440px) { .emotion-25 { font-family: "Poppins",sans-serif; - font-size: 22px; - line-height: 24.75px; + font-size: 24px; + line-height: 27px; font-weight: 700; letter-spacing: 0; padding: 0.5px 0px; diff --git a/site/templates/template-sections/__tests__/__snapshots__/compliance-section.test.tsx.snap b/site/templates/template-sections/__tests__/__snapshots__/compliance-section.test.tsx.snap index 1f8c0ed7a6..75532cd4eb 100644 --- a/site/templates/template-sections/__tests__/__snapshots__/compliance-section.test.tsx.snap +++ b/site/templates/template-sections/__tests__/__snapshots__/compliance-section.test.tsx.snap @@ -49,8 +49,8 @@ exports[`ComplianceSection renders section as expected 1`] = ` @media screen and (max-width: 767px) { .emotion-4 { font-family: "Poppins",sans-serif; - font-size: 24px; - line-height: 27px; + font-size: 28px; + line-height: 31.5px; font-weight: 700; letter-spacing: 0; padding: 0.5px 0px; @@ -72,8 +72,8 @@ exports[`ComplianceSection renders section as expected 1`] = ` @media screen and (min-width: 768px) { .emotion-4 { font-family: "Poppins",sans-serif; - font-size: 28px; - line-height: 31.5px; + font-size: 32px; + line-height: 36px; font-weight: 700; letter-spacing: 0; padding: 0.5px 0px; diff --git a/site/templates/template-sections/__tests__/__snapshots__/component-api-section.test.tsx.snap b/site/templates/template-sections/__tests__/__snapshots__/component-api-section.test.tsx.snap index bb37cfdfb1..7154b1355e 100644 --- a/site/templates/template-sections/__tests__/__snapshots__/component-api-section.test.tsx.snap +++ b/site/templates/template-sections/__tests__/__snapshots__/component-api-section.test.tsx.snap @@ -49,8 +49,8 @@ exports[`ComponentAPISection renders section as expected 1`] = ` @media screen and (max-width: 767px) { .emotion-4 { font-family: "Poppins",sans-serif; - font-size: 24px; - line-height: 27px; + font-size: 28px; + line-height: 31.5px; font-weight: 700; letter-spacing: 0; padding: 0.5px 0px; @@ -72,8 +72,8 @@ exports[`ComponentAPISection renders section as expected 1`] = ` @media screen and (min-width: 768px) { .emotion-4 { font-family: "Poppins",sans-serif; - font-size: 28px; - line-height: 31.5px; + font-size: 32px; + line-height: 36px; font-weight: 700; letter-spacing: 0; padding: 0.5px 0px; @@ -190,8 +190,8 @@ exports[`ComponentAPISection renders section as expected 1`] = ` @media screen and (min-width: 1440px) { .emotion-10 { font-family: "Poppins",sans-serif; - font-size: 22px; - line-height: 24.75px; + font-size: 24px; + line-height: 27px; font-weight: 700; letter-spacing: 0; padding: 0.5px 0px; diff --git a/site/templates/template-sections/__tests__/__snapshots__/interactive-demo-section.test.tsx.snap b/site/templates/template-sections/__tests__/__snapshots__/interactive-demo-section.test.tsx.snap index 5fe4167fd6..e1070e1d6d 100644 --- a/site/templates/template-sections/__tests__/__snapshots__/interactive-demo-section.test.tsx.snap +++ b/site/templates/template-sections/__tests__/__snapshots__/interactive-demo-section.test.tsx.snap @@ -49,8 +49,8 @@ exports[`InteractiveDemoSection renders section as expected 1`] = ` @media screen and (max-width: 767px) { .emotion-4 { font-family: "Poppins",sans-serif; - font-size: 24px; - line-height: 27px; + font-size: 28px; + line-height: 31.5px; font-weight: 700; letter-spacing: 0; padding: 0.5px 0px; @@ -72,8 +72,8 @@ exports[`InteractiveDemoSection renders section as expected 1`] = ` @media screen and (min-width: 768px) { .emotion-4 { font-family: "Poppins",sans-serif; - font-size: 28px; - line-height: 31.5px; + font-size: 32px; + line-height: 36px; font-weight: 700; letter-spacing: 0; padding: 0.5px 0px; diff --git a/site/templates/template-sections/__tests__/__snapshots__/options-section.test.tsx.snap b/site/templates/template-sections/__tests__/__snapshots__/options-section.test.tsx.snap index d59c9c53ba..5c8f7c9971 100644 --- a/site/templates/template-sections/__tests__/__snapshots__/options-section.test.tsx.snap +++ b/site/templates/template-sections/__tests__/__snapshots__/options-section.test.tsx.snap @@ -49,8 +49,8 @@ exports[`OptionsSection renders section as expected 1`] = ` @media screen and (max-width: 767px) { .emotion-4 { font-family: "Poppins",sans-serif; - font-size: 24px; - line-height: 27px; + font-size: 28px; + line-height: 31.5px; font-weight: 700; letter-spacing: 0; padding: 0.5px 0px; @@ -72,8 +72,8 @@ exports[`OptionsSection renders section as expected 1`] = ` @media screen and (min-width: 768px) { .emotion-4 { font-family: "Poppins",sans-serif; - font-size: 28px; - line-height: 31.5px; + font-size: 32px; + line-height: 36px; font-weight: 700; letter-spacing: 0; padding: 0.5px 0px; diff --git a/site/templates/template-sections/__tests__/__snapshots__/related-components-section.test.tsx.snap b/site/templates/template-sections/__tests__/__snapshots__/related-components-section.test.tsx.snap index 9b2913c625..78a958c621 100644 --- a/site/templates/template-sections/__tests__/__snapshots__/related-components-section.test.tsx.snap +++ b/site/templates/template-sections/__tests__/__snapshots__/related-components-section.test.tsx.snap @@ -49,8 +49,8 @@ exports[`RelatedComponentsSection renders a RelatedComp with its data coming fro @media screen and (max-width: 767px) { .emotion-4 { font-family: "Poppins",sans-serif; - font-size: 24px; - line-height: 27px; + font-size: 28px; + line-height: 31.5px; font-weight: 700; letter-spacing: 0; padding: 0.5px 0px; @@ -72,8 +72,8 @@ exports[`RelatedComponentsSection renders a RelatedComp with its data coming fro @media screen and (min-width: 768px) { .emotion-4 { font-family: "Poppins",sans-serif; - font-size: 28px; - line-height: 31.5px; + font-size: 32px; + line-height: 36px; font-weight: 700; letter-spacing: 0; padding: 0.5px 0px; diff --git a/site/templates/template-sections/__tests__/__snapshots__/seo-section.test.tsx.snap b/site/templates/template-sections/__tests__/__snapshots__/seo-section.test.tsx.snap index 3463201028..86cc8a3987 100644 --- a/site/templates/template-sections/__tests__/__snapshots__/seo-section.test.tsx.snap +++ b/site/templates/template-sections/__tests__/__snapshots__/seo-section.test.tsx.snap @@ -49,8 +49,8 @@ exports[`SEOSection renders section as expected 1`] = ` @media screen and (max-width: 767px) { .emotion-4 { font-family: "Poppins",sans-serif; - font-size: 24px; - line-height: 27px; + font-size: 28px; + line-height: 31.5px; font-weight: 700; letter-spacing: 0; padding: 0.5px 0px; @@ -72,8 +72,8 @@ exports[`SEOSection renders section as expected 1`] = ` @media screen and (min-width: 768px) { .emotion-4 { font-family: "Poppins",sans-serif; - font-size: 28px; - line-height: 31.5px; + font-size: 32px; + line-height: 36px; font-weight: 700; letter-spacing: 0; padding: 0.5px 0px; diff --git a/site/templates/template-sections/__tests__/__snapshots__/states-section.test.tsx.snap b/site/templates/template-sections/__tests__/__snapshots__/states-section.test.tsx.snap index d9058497c1..050e92168b 100644 --- a/site/templates/template-sections/__tests__/__snapshots__/states-section.test.tsx.snap +++ b/site/templates/template-sections/__tests__/__snapshots__/states-section.test.tsx.snap @@ -49,8 +49,8 @@ exports[`StatesSection renders section as expected 1`] = ` @media screen and (max-width: 767px) { .emotion-4 { font-family: "Poppins",sans-serif; - font-size: 24px; - line-height: 27px; + font-size: 28px; + line-height: 31.5px; font-weight: 700; letter-spacing: 0; padding: 0.5px 0px; @@ -72,8 +72,8 @@ exports[`StatesSection renders section as expected 1`] = ` @media screen and (min-width: 768px) { .emotion-4 { font-family: "Poppins",sans-serif; - font-size: 28px; - line-height: 31.5px; + font-size: 32px; + line-height: 36px; font-weight: 700; letter-spacing: 0; padding: 0.5px 0px; diff --git a/site/templates/template-sections/__tests__/__snapshots__/usage-section.test.tsx.snap b/site/templates/template-sections/__tests__/__snapshots__/usage-section.test.tsx.snap index 7e98ab56ee..1d15023494 100644 --- a/site/templates/template-sections/__tests__/__snapshots__/usage-section.test.tsx.snap +++ b/site/templates/template-sections/__tests__/__snapshots__/usage-section.test.tsx.snap @@ -49,8 +49,8 @@ exports[`UsageSection renders section as expected 1`] = ` @media screen and (max-width: 767px) { .emotion-4 { font-family: "Poppins",sans-serif; - font-size: 24px; - line-height: 27px; + font-size: 28px; + line-height: 31.5px; font-weight: 700; letter-spacing: 0; padding: 0.5px 0px; @@ -72,8 +72,8 @@ exports[`UsageSection renders section as expected 1`] = ` @media screen and (min-width: 768px) { .emotion-4 { font-family: "Poppins",sans-serif; - font-size: 28px; - line-height: 31.5px; + font-size: 32px; + line-height: 36px; font-weight: 700; letter-spacing: 0; padding: 0.5px 0px; diff --git a/site/theme/__tests__/__snapshots__/doc-theme.test.ts.snap b/site/theme/__tests__/__snapshots__/doc-theme.test.ts.snap index 17c0c8d49c..5261162159 100644 --- a/site/theme/__tests__/__snapshots__/doc-theme.test.ts.snap +++ b/site/theme/__tests__/__snapshots__/doc-theme.test.ts.snap @@ -2224,42 +2224,42 @@ Object { }, "editorialDisplay010": Object { "fontFamily": "{{fonts.fontFamily030.fontFamily}}", - "fontSize": "{{fonts.fontSize120}}", + "fontSize": "{{fonts.fontSize140}}", "fontWeight": "{{fonts.fontWeight040}}", "letterSpacing": "{{fonts.fontLetterSpacing030}}", "lineHeight": "{{fonts.fontLineHeight020}}", }, "editorialDisplay020": Object { "fontFamily": "{{fonts.fontFamily030.fontFamily}}", - "fontSize": "{{fonts.fontSize130}}", + "fontSize": "{{fonts.fontSize150}}", "fontWeight": "{{fonts.fontWeight040}}", "letterSpacing": "{{fonts.fontLetterSpacing030}}", "lineHeight": "{{fonts.fontLineHeight020}}", }, "editorialDisplay030": Object { "fontFamily": "{{fonts.fontFamily030.fontFamily}}", - "fontSize": "{{fonts.fontSize140}}", + "fontSize": "{{fonts.fontSize160}}", "fontWeight": "{{fonts.fontWeight040}}", "letterSpacing": "{{fonts.fontLetterSpacing030}}", "lineHeight": "{{fonts.fontLineHeight020}}", }, "editorialDropCap010": Object { "fontFamily": "{{fonts.fontFamily030.fontFamily}}", - "fontSize": "{{fonts.fontSize120}}", + "fontSize": "{{fonts.fontSize140}}", "fontWeight": "{{fonts.fontWeight040}}", "letterSpacing": "{{fonts.fontLetterSpacing030}}", "lineHeight": "{{fonts.fontLineHeight020}}", }, "editorialDropCap020": Object { "fontFamily": "{{fonts.fontFamily030.fontFamily}}", - "fontSize": "{{fonts.fontSize130}}", + "fontSize": "{{fonts.fontSize150}}", "fontWeight": "{{fonts.fontWeight040}}", "letterSpacing": "{{fonts.fontLetterSpacing030}}", "lineHeight": "{{fonts.fontLineHeight020}}", }, "editorialDropCap030": Object { "fontFamily": "{{fonts.fontFamily030.fontFamily}}", - "fontSize": "{{fonts.fontSize140}}", + "fontSize": "{{fonts.fontSize160}}", "fontWeight": "{{fonts.fontWeight040}}", "letterSpacing": "{{fonts.fontLetterSpacing030}}", "lineHeight": "{{fonts.fontLineHeight020}}", @@ -2280,42 +2280,42 @@ Object { }, "editorialHeadline030": Object { "fontFamily": "{{fonts.fontFamily030.fontFamily}}", - "fontSize": "{{fonts.fontSize060}}", + "fontSize": "{{fonts.fontSize070}}", "fontWeight": "{{fonts.fontWeight040}}", "letterSpacing": "{{fonts.fontLetterSpacing030}}", "lineHeight": "{{fonts.fontLineHeight020}}", }, "editorialHeadline040": Object { "fontFamily": "{{fonts.fontFamily030.fontFamily}}", - "fontSize": "{{fonts.fontSize070}}", + "fontSize": "{{fonts.fontSize080}}", "fontWeight": "{{fonts.fontWeight040}}", "letterSpacing": "{{fonts.fontLetterSpacing030}}", "lineHeight": "{{fonts.fontLineHeight020}}", }, "editorialHeadline050": Object { "fontFamily": "{{fonts.fontFamily030.fontFamily}}", - "fontSize": "{{fonts.fontSize080}}", + "fontSize": "{{fonts.fontSize090}}", "fontWeight": "{{fonts.fontWeight040}}", "letterSpacing": "{{fonts.fontLetterSpacing030}}", "lineHeight": "{{fonts.fontLineHeight020}}", }, "editorialHeadline060": Object { "fontFamily": "{{fonts.fontFamily030.fontFamily}}", - "fontSize": "{{fonts.fontSize090}}", + "fontSize": "{{fonts.fontSize100}}", "fontWeight": "{{fonts.fontWeight040}}", "letterSpacing": "{{fonts.fontLetterSpacing030}}", "lineHeight": "{{fonts.fontLineHeight020}}", }, "editorialHeadline070": Object { "fontFamily": "{{fonts.fontFamily030.fontFamily}}", - "fontSize": "{{fonts.fontSize100}}", + "fontSize": "{{fonts.fontSize110}}", "fontWeight": "{{fonts.fontWeight040}}", "letterSpacing": "{{fonts.fontLetterSpacing030}}", "lineHeight": "{{fonts.fontLineHeight020}}", }, "editorialHeadline080": Object { "fontFamily": "{{fonts.fontFamily030.fontFamily}}", - "fontSize": "{{fonts.fontSize110}}", + "fontSize": "{{fonts.fontSize130}}", "fontWeight": "{{fonts.fontWeight040}}", "letterSpacing": "{{fonts.fontLetterSpacing030}}", "lineHeight": "{{fonts.fontLineHeight020}}", @@ -4801,42 +4801,42 @@ Object { }, "editorialDisplay010": Object { "fontFamily": "{{fonts.fontFamily030.fontFamily}}", - "fontSize": "{{fonts.fontSize120}}", + "fontSize": "{{fonts.fontSize140}}", "fontWeight": "{{fonts.fontWeight040}}", "letterSpacing": "{{fonts.fontLetterSpacing030}}", "lineHeight": "{{fonts.fontLineHeight020}}", }, "editorialDisplay020": Object { "fontFamily": "{{fonts.fontFamily030.fontFamily}}", - "fontSize": "{{fonts.fontSize130}}", + "fontSize": "{{fonts.fontSize150}}", "fontWeight": "{{fonts.fontWeight040}}", "letterSpacing": "{{fonts.fontLetterSpacing030}}", "lineHeight": "{{fonts.fontLineHeight020}}", }, "editorialDisplay030": Object { "fontFamily": "{{fonts.fontFamily030.fontFamily}}", - "fontSize": "{{fonts.fontSize140}}", + "fontSize": "{{fonts.fontSize160}}", "fontWeight": "{{fonts.fontWeight040}}", "letterSpacing": "{{fonts.fontLetterSpacing030}}", "lineHeight": "{{fonts.fontLineHeight020}}", }, "editorialDropCap010": Object { "fontFamily": "{{fonts.fontFamily030.fontFamily}}", - "fontSize": "{{fonts.fontSize120}}", + "fontSize": "{{fonts.fontSize140}}", "fontWeight": "{{fonts.fontWeight040}}", "letterSpacing": "{{fonts.fontLetterSpacing030}}", "lineHeight": "{{fonts.fontLineHeight020}}", }, "editorialDropCap020": Object { "fontFamily": "{{fonts.fontFamily030.fontFamily}}", - "fontSize": "{{fonts.fontSize130}}", + "fontSize": "{{fonts.fontSize150}}", "fontWeight": "{{fonts.fontWeight040}}", "letterSpacing": "{{fonts.fontLetterSpacing030}}", "lineHeight": "{{fonts.fontLineHeight020}}", }, "editorialDropCap030": Object { "fontFamily": "{{fonts.fontFamily030.fontFamily}}", - "fontSize": "{{fonts.fontSize140}}", + "fontSize": "{{fonts.fontSize160}}", "fontWeight": "{{fonts.fontWeight040}}", "letterSpacing": "{{fonts.fontLetterSpacing030}}", "lineHeight": "{{fonts.fontLineHeight020}}", @@ -4857,42 +4857,42 @@ Object { }, "editorialHeadline030": Object { "fontFamily": "{{fonts.fontFamily030.fontFamily}}", - "fontSize": "{{fonts.fontSize060}}", + "fontSize": "{{fonts.fontSize070}}", "fontWeight": "{{fonts.fontWeight040}}", "letterSpacing": "{{fonts.fontLetterSpacing030}}", "lineHeight": "{{fonts.fontLineHeight020}}", }, "editorialHeadline040": Object { "fontFamily": "{{fonts.fontFamily030.fontFamily}}", - "fontSize": "{{fonts.fontSize070}}", + "fontSize": "{{fonts.fontSize080}}", "fontWeight": "{{fonts.fontWeight040}}", "letterSpacing": "{{fonts.fontLetterSpacing030}}", "lineHeight": "{{fonts.fontLineHeight020}}", }, "editorialHeadline050": Object { "fontFamily": "{{fonts.fontFamily030.fontFamily}}", - "fontSize": "{{fonts.fontSize080}}", + "fontSize": "{{fonts.fontSize090}}", "fontWeight": "{{fonts.fontWeight040}}", "letterSpacing": "{{fonts.fontLetterSpacing030}}", "lineHeight": "{{fonts.fontLineHeight020}}", }, "editorialHeadline060": Object { "fontFamily": "{{fonts.fontFamily030.fontFamily}}", - "fontSize": "{{fonts.fontSize090}}", + "fontSize": "{{fonts.fontSize100}}", "fontWeight": "{{fonts.fontWeight040}}", "letterSpacing": "{{fonts.fontLetterSpacing030}}", "lineHeight": "{{fonts.fontLineHeight020}}", }, "editorialHeadline070": Object { "fontFamily": "{{fonts.fontFamily030.fontFamily}}", - "fontSize": "{{fonts.fontSize100}}", + "fontSize": "{{fonts.fontSize110}}", "fontWeight": "{{fonts.fontWeight040}}", "letterSpacing": "{{fonts.fontLetterSpacing030}}", "lineHeight": "{{fonts.fontLineHeight020}}", }, "editorialHeadline080": Object { "fontFamily": "{{fonts.fontFamily030.fontFamily}}", - "fontSize": "{{fonts.fontSize110}}", + "fontSize": "{{fonts.fontSize130}}", "fontWeight": "{{fonts.fontWeight040}}", "letterSpacing": "{{fonts.fontLetterSpacing030}}", "lineHeight": "{{fonts.fontLineHeight020}}", @@ -7381,42 +7381,42 @@ Object { }, "editorialDisplay010": Object { "fontFamily": "{{fonts.fontFamily030.fontFamily}}", - "fontSize": "{{fonts.fontSize120}}", + "fontSize": "{{fonts.fontSize140}}", "fontWeight": "{{fonts.fontWeight040}}", "letterSpacing": "{{fonts.fontLetterSpacing030}}", "lineHeight": "{{fonts.fontLineHeight020}}", }, "editorialDisplay020": Object { "fontFamily": "{{fonts.fontFamily030.fontFamily}}", - "fontSize": "{{fonts.fontSize130}}", + "fontSize": "{{fonts.fontSize150}}", "fontWeight": "{{fonts.fontWeight040}}", "letterSpacing": "{{fonts.fontLetterSpacing030}}", "lineHeight": "{{fonts.fontLineHeight020}}", }, "editorialDisplay030": Object { "fontFamily": "{{fonts.fontFamily030.fontFamily}}", - "fontSize": "{{fonts.fontSize140}}", + "fontSize": "{{fonts.fontSize160}}", "fontWeight": "{{fonts.fontWeight040}}", "letterSpacing": "{{fonts.fontLetterSpacing030}}", "lineHeight": "{{fonts.fontLineHeight020}}", }, "editorialDropCap010": Object { "fontFamily": "{{fonts.fontFamily030.fontFamily}}", - "fontSize": "{{fonts.fontSize120}}", + "fontSize": "{{fonts.fontSize140}}", "fontWeight": "{{fonts.fontWeight040}}", "letterSpacing": "{{fonts.fontLetterSpacing030}}", "lineHeight": "{{fonts.fontLineHeight020}}", }, "editorialDropCap020": Object { "fontFamily": "{{fonts.fontFamily030.fontFamily}}", - "fontSize": "{{fonts.fontSize130}}", + "fontSize": "{{fonts.fontSize150}}", "fontWeight": "{{fonts.fontWeight040}}", "letterSpacing": "{{fonts.fontLetterSpacing030}}", "lineHeight": "{{fonts.fontLineHeight020}}", }, "editorialDropCap030": Object { "fontFamily": "{{fonts.fontFamily030.fontFamily}}", - "fontSize": "{{fonts.fontSize140}}", + "fontSize": "{{fonts.fontSize160}}", "fontWeight": "{{fonts.fontWeight040}}", "letterSpacing": "{{fonts.fontLetterSpacing030}}", "lineHeight": "{{fonts.fontLineHeight020}}", @@ -7437,42 +7437,42 @@ Object { }, "editorialHeadline030": Object { "fontFamily": "{{fonts.fontFamily030.fontFamily}}", - "fontSize": "{{fonts.fontSize060}}", + "fontSize": "{{fonts.fontSize070}}", "fontWeight": "{{fonts.fontWeight040}}", "letterSpacing": "{{fonts.fontLetterSpacing030}}", "lineHeight": "{{fonts.fontLineHeight020}}", }, "editorialHeadline040": Object { "fontFamily": "{{fonts.fontFamily030.fontFamily}}", - "fontSize": "{{fonts.fontSize070}}", + "fontSize": "{{fonts.fontSize080}}", "fontWeight": "{{fonts.fontWeight040}}", "letterSpacing": "{{fonts.fontLetterSpacing030}}", "lineHeight": "{{fonts.fontLineHeight020}}", }, "editorialHeadline050": Object { "fontFamily": "{{fonts.fontFamily030.fontFamily}}", - "fontSize": "{{fonts.fontSize080}}", + "fontSize": "{{fonts.fontSize090}}", "fontWeight": "{{fonts.fontWeight040}}", "letterSpacing": "{{fonts.fontLetterSpacing030}}", "lineHeight": "{{fonts.fontLineHeight020}}", }, "editorialHeadline060": Object { "fontFamily": "{{fonts.fontFamily030.fontFamily}}", - "fontSize": "{{fonts.fontSize090}}", + "fontSize": "{{fonts.fontSize100}}", "fontWeight": "{{fonts.fontWeight040}}", "letterSpacing": "{{fonts.fontLetterSpacing030}}", "lineHeight": "{{fonts.fontLineHeight020}}", }, "editorialHeadline070": Object { "fontFamily": "{{fonts.fontFamily030.fontFamily}}", - "fontSize": "{{fonts.fontSize100}}", + "fontSize": "{{fonts.fontSize110}}", "fontWeight": "{{fonts.fontWeight040}}", "letterSpacing": "{{fonts.fontLetterSpacing030}}", "lineHeight": "{{fonts.fontLineHeight020}}", }, "editorialHeadline080": Object { "fontFamily": "{{fonts.fontFamily030.fontFamily}}", - "fontSize": "{{fonts.fontSize110}}", + "fontSize": "{{fonts.fontSize130}}", "fontWeight": "{{fonts.fontWeight040}}", "letterSpacing": "{{fonts.fontLetterSpacing030}}", "lineHeight": "{{fonts.fontLineHeight020}}", @@ -9958,42 +9958,42 @@ Object { }, "editorialDisplay010": Object { "fontFamily": "{{fonts.fontFamily030.fontFamily}}", - "fontSize": "{{fonts.fontSize120}}", + "fontSize": "{{fonts.fontSize140}}", "fontWeight": "{{fonts.fontWeight040}}", "letterSpacing": "{{fonts.fontLetterSpacing030}}", "lineHeight": "{{fonts.fontLineHeight020}}", }, "editorialDisplay020": Object { "fontFamily": "{{fonts.fontFamily030.fontFamily}}", - "fontSize": "{{fonts.fontSize130}}", + "fontSize": "{{fonts.fontSize150}}", "fontWeight": "{{fonts.fontWeight040}}", "letterSpacing": "{{fonts.fontLetterSpacing030}}", "lineHeight": "{{fonts.fontLineHeight020}}", }, "editorialDisplay030": Object { "fontFamily": "{{fonts.fontFamily030.fontFamily}}", - "fontSize": "{{fonts.fontSize140}}", + "fontSize": "{{fonts.fontSize160}}", "fontWeight": "{{fonts.fontWeight040}}", "letterSpacing": "{{fonts.fontLetterSpacing030}}", "lineHeight": "{{fonts.fontLineHeight020}}", }, "editorialDropCap010": Object { "fontFamily": "{{fonts.fontFamily030.fontFamily}}", - "fontSize": "{{fonts.fontSize120}}", + "fontSize": "{{fonts.fontSize140}}", "fontWeight": "{{fonts.fontWeight040}}", "letterSpacing": "{{fonts.fontLetterSpacing030}}", "lineHeight": "{{fonts.fontLineHeight020}}", }, "editorialDropCap020": Object { "fontFamily": "{{fonts.fontFamily030.fontFamily}}", - "fontSize": "{{fonts.fontSize130}}", + "fontSize": "{{fonts.fontSize150}}", "fontWeight": "{{fonts.fontWeight040}}", "letterSpacing": "{{fonts.fontLetterSpacing030}}", "lineHeight": "{{fonts.fontLineHeight020}}", }, "editorialDropCap030": Object { "fontFamily": "{{fonts.fontFamily030.fontFamily}}", - "fontSize": "{{fonts.fontSize140}}", + "fontSize": "{{fonts.fontSize160}}", "fontWeight": "{{fonts.fontWeight040}}", "letterSpacing": "{{fonts.fontLetterSpacing030}}", "lineHeight": "{{fonts.fontLineHeight020}}", @@ -10014,42 +10014,42 @@ Object { }, "editorialHeadline030": Object { "fontFamily": "{{fonts.fontFamily030.fontFamily}}", - "fontSize": "{{fonts.fontSize060}}", + "fontSize": "{{fonts.fontSize070}}", "fontWeight": "{{fonts.fontWeight040}}", "letterSpacing": "{{fonts.fontLetterSpacing030}}", "lineHeight": "{{fonts.fontLineHeight020}}", }, "editorialHeadline040": Object { "fontFamily": "{{fonts.fontFamily030.fontFamily}}", - "fontSize": "{{fonts.fontSize070}}", + "fontSize": "{{fonts.fontSize080}}", "fontWeight": "{{fonts.fontWeight040}}", "letterSpacing": "{{fonts.fontLetterSpacing030}}", "lineHeight": "{{fonts.fontLineHeight020}}", }, "editorialHeadline050": Object { "fontFamily": "{{fonts.fontFamily030.fontFamily}}", - "fontSize": "{{fonts.fontSize080}}", + "fontSize": "{{fonts.fontSize090}}", "fontWeight": "{{fonts.fontWeight040}}", "letterSpacing": "{{fonts.fontLetterSpacing030}}", "lineHeight": "{{fonts.fontLineHeight020}}", }, "editorialHeadline060": Object { "fontFamily": "{{fonts.fontFamily030.fontFamily}}", - "fontSize": "{{fonts.fontSize090}}", + "fontSize": "{{fonts.fontSize100}}", "fontWeight": "{{fonts.fontWeight040}}", "letterSpacing": "{{fonts.fontLetterSpacing030}}", "lineHeight": "{{fonts.fontLineHeight020}}", }, "editorialHeadline070": Object { "fontFamily": "{{fonts.fontFamily030.fontFamily}}", - "fontSize": "{{fonts.fontSize100}}", + "fontSize": "{{fonts.fontSize110}}", "fontWeight": "{{fonts.fontWeight040}}", "letterSpacing": "{{fonts.fontLetterSpacing030}}", "lineHeight": "{{fonts.fontLineHeight020}}", }, "editorialHeadline080": Object { "fontFamily": "{{fonts.fontFamily030.fontFamily}}", - "fontSize": "{{fonts.fontSize110}}", + "fontSize": "{{fonts.fontSize130}}", "fontWeight": "{{fonts.fontWeight040}}", "letterSpacing": "{{fonts.fontLetterSpacing030}}", "lineHeight": "{{fonts.fontLineHeight020}}", @@ -12538,42 +12538,42 @@ Object { }, "editorialDisplay010": Object { "fontFamily": "{{fonts.fontFamily030.fontFamily}}", - "fontSize": "{{fonts.fontSize120}}", + "fontSize": "{{fonts.fontSize140}}", "fontWeight": "{{fonts.fontWeight040}}", "letterSpacing": "{{fonts.fontLetterSpacing030}}", "lineHeight": "{{fonts.fontLineHeight020}}", }, "editorialDisplay020": Object { "fontFamily": "{{fonts.fontFamily030.fontFamily}}", - "fontSize": "{{fonts.fontSize130}}", + "fontSize": "{{fonts.fontSize150}}", "fontWeight": "{{fonts.fontWeight040}}", "letterSpacing": "{{fonts.fontLetterSpacing030}}", "lineHeight": "{{fonts.fontLineHeight020}}", }, "editorialDisplay030": Object { "fontFamily": "{{fonts.fontFamily030.fontFamily}}", - "fontSize": "{{fonts.fontSize140}}", + "fontSize": "{{fonts.fontSize160}}", "fontWeight": "{{fonts.fontWeight040}}", "letterSpacing": "{{fonts.fontLetterSpacing030}}", "lineHeight": "{{fonts.fontLineHeight020}}", }, "editorialDropCap010": Object { "fontFamily": "{{fonts.fontFamily030.fontFamily}}", - "fontSize": "{{fonts.fontSize120}}", + "fontSize": "{{fonts.fontSize140}}", "fontWeight": "{{fonts.fontWeight040}}", "letterSpacing": "{{fonts.fontLetterSpacing030}}", "lineHeight": "{{fonts.fontLineHeight020}}", }, "editorialDropCap020": Object { "fontFamily": "{{fonts.fontFamily030.fontFamily}}", - "fontSize": "{{fonts.fontSize130}}", + "fontSize": "{{fonts.fontSize150}}", "fontWeight": "{{fonts.fontWeight040}}", "letterSpacing": "{{fonts.fontLetterSpacing030}}", "lineHeight": "{{fonts.fontLineHeight020}}", }, "editorialDropCap030": Object { "fontFamily": "{{fonts.fontFamily030.fontFamily}}", - "fontSize": "{{fonts.fontSize140}}", + "fontSize": "{{fonts.fontSize160}}", "fontWeight": "{{fonts.fontWeight040}}", "letterSpacing": "{{fonts.fontLetterSpacing030}}", "lineHeight": "{{fonts.fontLineHeight020}}", @@ -12594,42 +12594,42 @@ Object { }, "editorialHeadline030": Object { "fontFamily": "{{fonts.fontFamily030.fontFamily}}", - "fontSize": "{{fonts.fontSize060}}", + "fontSize": "{{fonts.fontSize070}}", "fontWeight": "{{fonts.fontWeight040}}", "letterSpacing": "{{fonts.fontLetterSpacing030}}", "lineHeight": "{{fonts.fontLineHeight020}}", }, "editorialHeadline040": Object { "fontFamily": "{{fonts.fontFamily030.fontFamily}}", - "fontSize": "{{fonts.fontSize070}}", + "fontSize": "{{fonts.fontSize080}}", "fontWeight": "{{fonts.fontWeight040}}", "letterSpacing": "{{fonts.fontLetterSpacing030}}", "lineHeight": "{{fonts.fontLineHeight020}}", }, "editorialHeadline050": Object { "fontFamily": "{{fonts.fontFamily030.fontFamily}}", - "fontSize": "{{fonts.fontSize080}}", + "fontSize": "{{fonts.fontSize090}}", "fontWeight": "{{fonts.fontWeight040}}", "letterSpacing": "{{fonts.fontLetterSpacing030}}", "lineHeight": "{{fonts.fontLineHeight020}}", }, "editorialHeadline060": Object { "fontFamily": "{{fonts.fontFamily030.fontFamily}}", - "fontSize": "{{fonts.fontSize090}}", + "fontSize": "{{fonts.fontSize100}}", "fontWeight": "{{fonts.fontWeight040}}", "letterSpacing": "{{fonts.fontLetterSpacing030}}", "lineHeight": "{{fonts.fontLineHeight020}}", }, "editorialHeadline070": Object { "fontFamily": "{{fonts.fontFamily030.fontFamily}}", - "fontSize": "{{fonts.fontSize100}}", + "fontSize": "{{fonts.fontSize110}}", "fontWeight": "{{fonts.fontWeight040}}", "letterSpacing": "{{fonts.fontLetterSpacing030}}", "lineHeight": "{{fonts.fontLineHeight020}}", }, "editorialHeadline080": Object { "fontFamily": "{{fonts.fontFamily030.fontFamily}}", - "fontSize": "{{fonts.fontSize110}}", + "fontSize": "{{fonts.fontSize130}}", "fontWeight": "{{fonts.fontWeight040}}", "letterSpacing": "{{fonts.fontLetterSpacing030}}", "lineHeight": "{{fonts.fontLineHeight020}}", @@ -15115,42 +15115,42 @@ Object { }, "editorialDisplay010": Object { "fontFamily": "{{fonts.fontFamily030.fontFamily}}", - "fontSize": "{{fonts.fontSize120}}", + "fontSize": "{{fonts.fontSize140}}", "fontWeight": "{{fonts.fontWeight040}}", "letterSpacing": "{{fonts.fontLetterSpacing030}}", "lineHeight": "{{fonts.fontLineHeight020}}", }, "editorialDisplay020": Object { "fontFamily": "{{fonts.fontFamily030.fontFamily}}", - "fontSize": "{{fonts.fontSize130}}", + "fontSize": "{{fonts.fontSize150}}", "fontWeight": "{{fonts.fontWeight040}}", "letterSpacing": "{{fonts.fontLetterSpacing030}}", "lineHeight": "{{fonts.fontLineHeight020}}", }, "editorialDisplay030": Object { "fontFamily": "{{fonts.fontFamily030.fontFamily}}", - "fontSize": "{{fonts.fontSize140}}", + "fontSize": "{{fonts.fontSize160}}", "fontWeight": "{{fonts.fontWeight040}}", "letterSpacing": "{{fonts.fontLetterSpacing030}}", "lineHeight": "{{fonts.fontLineHeight020}}", }, "editorialDropCap010": Object { "fontFamily": "{{fonts.fontFamily030.fontFamily}}", - "fontSize": "{{fonts.fontSize120}}", + "fontSize": "{{fonts.fontSize140}}", "fontWeight": "{{fonts.fontWeight040}}", "letterSpacing": "{{fonts.fontLetterSpacing030}}", "lineHeight": "{{fonts.fontLineHeight020}}", }, "editorialDropCap020": Object { "fontFamily": "{{fonts.fontFamily030.fontFamily}}", - "fontSize": "{{fonts.fontSize130}}", + "fontSize": "{{fonts.fontSize150}}", "fontWeight": "{{fonts.fontWeight040}}", "letterSpacing": "{{fonts.fontLetterSpacing030}}", "lineHeight": "{{fonts.fontLineHeight020}}", }, "editorialDropCap030": Object { "fontFamily": "{{fonts.fontFamily030.fontFamily}}", - "fontSize": "{{fonts.fontSize140}}", + "fontSize": "{{fonts.fontSize160}}", "fontWeight": "{{fonts.fontWeight040}}", "letterSpacing": "{{fonts.fontLetterSpacing030}}", "lineHeight": "{{fonts.fontLineHeight020}}", @@ -15171,42 +15171,42 @@ Object { }, "editorialHeadline030": Object { "fontFamily": "{{fonts.fontFamily030.fontFamily}}", - "fontSize": "{{fonts.fontSize060}}", + "fontSize": "{{fonts.fontSize070}}", "fontWeight": "{{fonts.fontWeight040}}", "letterSpacing": "{{fonts.fontLetterSpacing030}}", "lineHeight": "{{fonts.fontLineHeight020}}", }, "editorialHeadline040": Object { "fontFamily": "{{fonts.fontFamily030.fontFamily}}", - "fontSize": "{{fonts.fontSize070}}", + "fontSize": "{{fonts.fontSize080}}", "fontWeight": "{{fonts.fontWeight040}}", "letterSpacing": "{{fonts.fontLetterSpacing030}}", "lineHeight": "{{fonts.fontLineHeight020}}", }, "editorialHeadline050": Object { "fontFamily": "{{fonts.fontFamily030.fontFamily}}", - "fontSize": "{{fonts.fontSize080}}", + "fontSize": "{{fonts.fontSize090}}", "fontWeight": "{{fonts.fontWeight040}}", "letterSpacing": "{{fonts.fontLetterSpacing030}}", "lineHeight": "{{fonts.fontLineHeight020}}", }, "editorialHeadline060": Object { "fontFamily": "{{fonts.fontFamily030.fontFamily}}", - "fontSize": "{{fonts.fontSize090}}", + "fontSize": "{{fonts.fontSize100}}", "fontWeight": "{{fonts.fontWeight040}}", "letterSpacing": "{{fonts.fontLetterSpacing030}}", "lineHeight": "{{fonts.fontLineHeight020}}", }, "editorialHeadline070": Object { "fontFamily": "{{fonts.fontFamily030.fontFamily}}", - "fontSize": "{{fonts.fontSize100}}", + "fontSize": "{{fonts.fontSize110}}", "fontWeight": "{{fonts.fontWeight040}}", "letterSpacing": "{{fonts.fontLetterSpacing030}}", "lineHeight": "{{fonts.fontLineHeight020}}", }, "editorialHeadline080": Object { "fontFamily": "{{fonts.fontFamily030.fontFamily}}", - "fontSize": "{{fonts.fontSize110}}", + "fontSize": "{{fonts.fontSize130}}", "fontWeight": "{{fonts.fontWeight040}}", "letterSpacing": "{{fonts.fontLetterSpacing030}}", "lineHeight": "{{fonts.fontLineHeight020}}", @@ -17695,42 +17695,42 @@ Object { }, "editorialDisplay010": Object { "fontFamily": "{{fonts.fontFamily030.fontFamily}}", - "fontSize": "{{fonts.fontSize120}}", + "fontSize": "{{fonts.fontSize140}}", "fontWeight": "{{fonts.fontWeight040}}", "letterSpacing": "{{fonts.fontLetterSpacing030}}", "lineHeight": "{{fonts.fontLineHeight020}}", }, "editorialDisplay020": Object { "fontFamily": "{{fonts.fontFamily030.fontFamily}}", - "fontSize": "{{fonts.fontSize130}}", + "fontSize": "{{fonts.fontSize150}}", "fontWeight": "{{fonts.fontWeight040}}", "letterSpacing": "{{fonts.fontLetterSpacing030}}", "lineHeight": "{{fonts.fontLineHeight020}}", }, "editorialDisplay030": Object { "fontFamily": "{{fonts.fontFamily030.fontFamily}}", - "fontSize": "{{fonts.fontSize140}}", + "fontSize": "{{fonts.fontSize160}}", "fontWeight": "{{fonts.fontWeight040}}", "letterSpacing": "{{fonts.fontLetterSpacing030}}", "lineHeight": "{{fonts.fontLineHeight020}}", }, "editorialDropCap010": Object { "fontFamily": "{{fonts.fontFamily030.fontFamily}}", - "fontSize": "{{fonts.fontSize120}}", + "fontSize": "{{fonts.fontSize140}}", "fontWeight": "{{fonts.fontWeight040}}", "letterSpacing": "{{fonts.fontLetterSpacing030}}", "lineHeight": "{{fonts.fontLineHeight020}}", }, "editorialDropCap020": Object { "fontFamily": "{{fonts.fontFamily030.fontFamily}}", - "fontSize": "{{fonts.fontSize130}}", + "fontSize": "{{fonts.fontSize150}}", "fontWeight": "{{fonts.fontWeight040}}", "letterSpacing": "{{fonts.fontLetterSpacing030}}", "lineHeight": "{{fonts.fontLineHeight020}}", }, "editorialDropCap030": Object { "fontFamily": "{{fonts.fontFamily030.fontFamily}}", - "fontSize": "{{fonts.fontSize140}}", + "fontSize": "{{fonts.fontSize160}}", "fontWeight": "{{fonts.fontWeight040}}", "letterSpacing": "{{fonts.fontLetterSpacing030}}", "lineHeight": "{{fonts.fontLineHeight020}}", @@ -17751,42 +17751,42 @@ Object { }, "editorialHeadline030": Object { "fontFamily": "{{fonts.fontFamily030.fontFamily}}", - "fontSize": "{{fonts.fontSize060}}", + "fontSize": "{{fonts.fontSize070}}", "fontWeight": "{{fonts.fontWeight040}}", "letterSpacing": "{{fonts.fontLetterSpacing030}}", "lineHeight": "{{fonts.fontLineHeight020}}", }, "editorialHeadline040": Object { "fontFamily": "{{fonts.fontFamily030.fontFamily}}", - "fontSize": "{{fonts.fontSize070}}", + "fontSize": "{{fonts.fontSize080}}", "fontWeight": "{{fonts.fontWeight040}}", "letterSpacing": "{{fonts.fontLetterSpacing030}}", "lineHeight": "{{fonts.fontLineHeight020}}", }, "editorialHeadline050": Object { "fontFamily": "{{fonts.fontFamily030.fontFamily}}", - "fontSize": "{{fonts.fontSize080}}", + "fontSize": "{{fonts.fontSize090}}", "fontWeight": "{{fonts.fontWeight040}}", "letterSpacing": "{{fonts.fontLetterSpacing030}}", "lineHeight": "{{fonts.fontLineHeight020}}", }, "editorialHeadline060": Object { "fontFamily": "{{fonts.fontFamily030.fontFamily}}", - "fontSize": "{{fonts.fontSize090}}", + "fontSize": "{{fonts.fontSize100}}", "fontWeight": "{{fonts.fontWeight040}}", "letterSpacing": "{{fonts.fontLetterSpacing030}}", "lineHeight": "{{fonts.fontLineHeight020}}", }, "editorialHeadline070": Object { "fontFamily": "{{fonts.fontFamily030.fontFamily}}", - "fontSize": "{{fonts.fontSize100}}", + "fontSize": "{{fonts.fontSize110}}", "fontWeight": "{{fonts.fontWeight040}}", "letterSpacing": "{{fonts.fontLetterSpacing030}}", "lineHeight": "{{fonts.fontLineHeight020}}", }, "editorialHeadline080": Object { "fontFamily": "{{fonts.fontFamily030.fontFamily}}", - "fontSize": "{{fonts.fontSize110}}", + "fontSize": "{{fonts.fontSize130}}", "fontWeight": "{{fonts.fontWeight040}}", "letterSpacing": "{{fonts.fontLetterSpacing030}}", "lineHeight": "{{fonts.fontLineHeight020}}", @@ -20272,42 +20272,42 @@ Object { }, "editorialDisplay010": Object { "fontFamily": "{{fonts.fontFamily030.fontFamily}}", - "fontSize": "{{fonts.fontSize120}}", + "fontSize": "{{fonts.fontSize140}}", "fontWeight": "{{fonts.fontWeight040}}", "letterSpacing": "{{fonts.fontLetterSpacing030}}", "lineHeight": "{{fonts.fontLineHeight020}}", }, "editorialDisplay020": Object { "fontFamily": "{{fonts.fontFamily030.fontFamily}}", - "fontSize": "{{fonts.fontSize130}}", + "fontSize": "{{fonts.fontSize150}}", "fontWeight": "{{fonts.fontWeight040}}", "letterSpacing": "{{fonts.fontLetterSpacing030}}", "lineHeight": "{{fonts.fontLineHeight020}}", }, "editorialDisplay030": Object { "fontFamily": "{{fonts.fontFamily030.fontFamily}}", - "fontSize": "{{fonts.fontSize140}}", + "fontSize": "{{fonts.fontSize160}}", "fontWeight": "{{fonts.fontWeight040}}", "letterSpacing": "{{fonts.fontLetterSpacing030}}", "lineHeight": "{{fonts.fontLineHeight020}}", }, "editorialDropCap010": Object { "fontFamily": "{{fonts.fontFamily030.fontFamily}}", - "fontSize": "{{fonts.fontSize120}}", + "fontSize": "{{fonts.fontSize140}}", "fontWeight": "{{fonts.fontWeight040}}", "letterSpacing": "{{fonts.fontLetterSpacing030}}", "lineHeight": "{{fonts.fontLineHeight020}}", }, "editorialDropCap020": Object { "fontFamily": "{{fonts.fontFamily030.fontFamily}}", - "fontSize": "{{fonts.fontSize130}}", + "fontSize": "{{fonts.fontSize150}}", "fontWeight": "{{fonts.fontWeight040}}", "letterSpacing": "{{fonts.fontLetterSpacing030}}", "lineHeight": "{{fonts.fontLineHeight020}}", }, "editorialDropCap030": Object { "fontFamily": "{{fonts.fontFamily030.fontFamily}}", - "fontSize": "{{fonts.fontSize140}}", + "fontSize": "{{fonts.fontSize160}}", "fontWeight": "{{fonts.fontWeight040}}", "letterSpacing": "{{fonts.fontLetterSpacing030}}", "lineHeight": "{{fonts.fontLineHeight020}}", @@ -20328,42 +20328,42 @@ Object { }, "editorialHeadline030": Object { "fontFamily": "{{fonts.fontFamily030.fontFamily}}", - "fontSize": "{{fonts.fontSize060}}", + "fontSize": "{{fonts.fontSize070}}", "fontWeight": "{{fonts.fontWeight040}}", "letterSpacing": "{{fonts.fontLetterSpacing030}}", "lineHeight": "{{fonts.fontLineHeight020}}", }, "editorialHeadline040": Object { "fontFamily": "{{fonts.fontFamily030.fontFamily}}", - "fontSize": "{{fonts.fontSize070}}", + "fontSize": "{{fonts.fontSize080}}", "fontWeight": "{{fonts.fontWeight040}}", "letterSpacing": "{{fonts.fontLetterSpacing030}}", "lineHeight": "{{fonts.fontLineHeight020}}", }, "editorialHeadline050": Object { "fontFamily": "{{fonts.fontFamily030.fontFamily}}", - "fontSize": "{{fonts.fontSize080}}", + "fontSize": "{{fonts.fontSize090}}", "fontWeight": "{{fonts.fontWeight040}}", "letterSpacing": "{{fonts.fontLetterSpacing030}}", "lineHeight": "{{fonts.fontLineHeight020}}", }, "editorialHeadline060": Object { "fontFamily": "{{fonts.fontFamily030.fontFamily}}", - "fontSize": "{{fonts.fontSize090}}", + "fontSize": "{{fonts.fontSize100}}", "fontWeight": "{{fonts.fontWeight040}}", "letterSpacing": "{{fonts.fontLetterSpacing030}}", "lineHeight": "{{fonts.fontLineHeight020}}", }, "editorialHeadline070": Object { "fontFamily": "{{fonts.fontFamily030.fontFamily}}", - "fontSize": "{{fonts.fontSize100}}", + "fontSize": "{{fonts.fontSize110}}", "fontWeight": "{{fonts.fontWeight040}}", "letterSpacing": "{{fonts.fontLetterSpacing030}}", "lineHeight": "{{fonts.fontLineHeight020}}", }, "editorialHeadline080": Object { "fontFamily": "{{fonts.fontFamily030.fontFamily}}", - "fontSize": "{{fonts.fontSize110}}", + "fontSize": "{{fonts.fontSize130}}", "fontWeight": "{{fonts.fontWeight040}}", "letterSpacing": "{{fonts.fontLetterSpacing030}}", "lineHeight": "{{fonts.fontLineHeight020}}", diff --git a/src/card/__tests__/__snapshots__/card.test.tsx.snap b/src/card/__tests__/__snapshots__/card.test.tsx.snap index c281281a0b..7d22f485c0 100644 --- a/src/card/__tests__/__snapshots__/card.test.tsx.snap +++ b/src/card/__tests__/__snapshots__/card.test.tsx.snap @@ -1661,8 +1661,8 @@ exports[`Card renders correctly with Headline component in cardBody 1`] = ` @media screen and (min-width: 768px) and (max-width: 1023px) { .emotion-4 { font-family: "Bitter",serif; - font-size: 22px; - line-height: 24.75px; + font-size: 24px; + line-height: 27px; font-weight: 500; letter-spacing: 0; padding: 0.5px 0px; @@ -1684,8 +1684,8 @@ exports[`Card renders correctly with Headline component in cardBody 1`] = ` @media screen and (min-width: 1024px) { .emotion-4 { font-family: "Bitter",serif; - font-size: 28px; - line-height: 31.5px; + font-size: 32px; + line-height: 36px; font-weight: 500; letter-spacing: 0; padding: 0.5px 0px; @@ -5569,8 +5569,8 @@ exports[`Card with href wraps the Headline component from cardBody with a link a @media screen and (min-width: 768px) and (max-width: 1023px) { .emotion-5 { font-family: "Bitter",serif; - font-size: 22px; - line-height: 24.75px; + font-size: 24px; + line-height: 27px; font-weight: 500; letter-spacing: 0; padding: 0.5px 0px; @@ -5592,8 +5592,8 @@ exports[`Card with href wraps the Headline component from cardBody with a link a @media screen and (min-width: 1024px) { .emotion-5 { font-family: "Bitter",serif; - font-size: 28px; - line-height: 31.5px; + font-size: 32px; + line-height: 36px; font-weight: 500; letter-spacing: 0; padding: 0.5px 0px; @@ -5801,8 +5801,8 @@ exports[`Card with href wraps the Headline component from cardBody with a link a @media screen and (min-width: 768px) and (max-width: 1023px) { .emotion-5 { font-family: "Bitter",serif; - font-size: 22px; - line-height: 24.75px; + font-size: 24px; + line-height: 27px; font-weight: 500; letter-spacing: 0; padding: 0.5px 0px; @@ -5824,8 +5824,8 @@ exports[`Card with href wraps the Headline component from cardBody with a link a @media screen and (min-width: 1024px) { .emotion-5 { font-family: "Bitter",serif; - font-size: 28px; - line-height: 31.5px; + font-size: 32px; + line-height: 36px; font-weight: 500; letter-spacing: 0; padding: 0.5px 0px; @@ -6043,8 +6043,8 @@ exports[`Card with href wraps the Headline component from cardBody with a link a @media screen and (min-width: 768px) and (max-width: 1023px) { .emotion-5 { font-family: "Bitter",serif; - font-size: 22px; - line-height: 24.75px; + font-size: 24px; + line-height: 27px; font-weight: 500; letter-spacing: 0; padding: 0.5px 0px; @@ -6066,8 +6066,8 @@ exports[`Card with href wraps the Headline component from cardBody with a link a @media screen and (min-width: 1024px) { .emotion-5 { font-family: "Bitter",serif; - font-size: 28px; - line-height: 31.5px; + font-size: 32px; + line-height: 36px; font-weight: 500; letter-spacing: 0; padding: 0.5px 0px; diff --git a/src/headline/__tests__/__snapshots__/headline.test.tsx.snap b/src/headline/__tests__/__snapshots__/headline.test.tsx.snap index 43de80a856..1171209288 100644 --- a/src/headline/__tests__/__snapshots__/headline.test.tsx.snap +++ b/src/headline/__tests__/__snapshots__/headline.test.tsx.snap @@ -5,8 +5,8 @@ exports[`headline renders correctly with custom props 1`] = ` @media screen and (max-width: 479px) { .emotion-0 { font-family: "Bitter",serif; - font-size: 32px; - line-height: 36px; + font-size: 36px; + line-height: 40.5px; font-weight: 500; letter-spacing: 0; padding: 0.5px 0px; @@ -28,8 +28,8 @@ exports[`headline renders correctly with custom props 1`] = ` @media screen and (min-width: 480px) and (max-width: 767px) { .emotion-0 { font-family: "Bitter",serif; - font-size: 32px; - line-height: 36px; + font-size: 36px; + line-height: 40.5px; font-weight: 500; letter-spacing: 0; padding: 0.5px 0px; @@ -51,8 +51,8 @@ exports[`headline renders correctly with custom props 1`] = ` @media screen and (min-width: 768px) and (max-width: 1023px) { .emotion-0 { font-family: "Bitter",serif; - font-size: 36px; - line-height: 40.5px; + font-size: 40px; + line-height: 45px; font-weight: 500; letter-spacing: 0; padding: 0.5px 0px; @@ -74,8 +74,8 @@ exports[`headline renders correctly with custom props 1`] = ` @media screen and (min-width: 1024px) { .emotion-0 { font-family: "Bitter",serif; - font-size: 40px; - line-height: 45px; + font-size: 48px; + line-height: 54px; font-weight: 500; letter-spacing: 0; padding: 0.5px 0px; @@ -163,8 +163,8 @@ exports[`headline renders correctly with default props, just heading 1`] = ` @media screen and (max-width: 479px) { .emotion-0 { font-family: "Bitter",serif; - font-size: 32px; - line-height: 36px; + font-size: 36px; + line-height: 40.5px; font-weight: 500; letter-spacing: 0; padding: 0.5px 0px; @@ -186,8 +186,8 @@ exports[`headline renders correctly with default props, just heading 1`] = ` @media screen and (min-width: 480px) and (max-width: 767px) { .emotion-0 { font-family: "Bitter",serif; - font-size: 32px; - line-height: 36px; + font-size: 36px; + line-height: 40.5px; font-weight: 500; letter-spacing: 0; padding: 0.5px 0px; @@ -209,8 +209,8 @@ exports[`headline renders correctly with default props, just heading 1`] = ` @media screen and (min-width: 768px) and (max-width: 1023px) { .emotion-0 { font-family: "Bitter",serif; - font-size: 36px; - line-height: 40.5px; + font-size: 40px; + line-height: 45px; font-weight: 500; letter-spacing: 0; padding: 0.5px 0px; @@ -232,8 +232,8 @@ exports[`headline renders correctly with default props, just heading 1`] = ` @media screen and (min-width: 1024px) { .emotion-0 { font-family: "Bitter",serif; - font-size: 40px; - line-height: 45px; + font-size: 48px; + line-height: 54px; font-weight: 500; letter-spacing: 0; padding: 0.5px 0px; @@ -280,8 +280,8 @@ exports[`headline renders correctly with default props, with heading and kicker @media screen and (max-width: 479px) { .emotion-0 { font-family: "Bitter",serif; - font-size: 32px; - line-height: 36px; + font-size: 36px; + line-height: 40.5px; font-weight: 500; letter-spacing: 0; padding: 0.5px 0px; @@ -303,8 +303,8 @@ exports[`headline renders correctly with default props, with heading and kicker @media screen and (min-width: 480px) and (max-width: 767px) { .emotion-0 { font-family: "Bitter",serif; - font-size: 32px; - line-height: 36px; + font-size: 36px; + line-height: 40.5px; font-weight: 500; letter-spacing: 0; padding: 0.5px 0px; @@ -326,8 +326,8 @@ exports[`headline renders correctly with default props, with heading and kicker @media screen and (min-width: 768px) and (max-width: 1023px) { .emotion-0 { font-family: "Bitter",serif; - font-size: 36px; - line-height: 40.5px; + font-size: 40px; + line-height: 45px; font-weight: 500; letter-spacing: 0; padding: 0.5px 0px; @@ -349,8 +349,8 @@ exports[`headline renders correctly with default props, with heading and kicker @media screen and (min-width: 1024px) { .emotion-0 { font-family: "Bitter",serif; - font-size: 40px; - line-height: 45px; + font-size: 48px; + line-height: 54px; font-weight: 500; letter-spacing: 0; padding: 0.5px 0px; @@ -437,8 +437,8 @@ exports[`headline renders correctly with logical prop margin overrides and crop @media screen and (max-width: 479px) { .emotion-0 { font-family: "Bitter",serif; - font-size: 32px; - line-height: 36px; + font-size: 36px; + line-height: 40.5px; font-weight: 500; letter-spacing: 0; padding: 0.5px 0px; @@ -460,8 +460,8 @@ exports[`headline renders correctly with logical prop margin overrides and crop @media screen and (min-width: 480px) and (max-width: 767px) { .emotion-0 { font-family: "Bitter",serif; - font-size: 32px; - line-height: 36px; + font-size: 36px; + line-height: 40.5px; font-weight: 500; letter-spacing: 0; padding: 0.5px 0px; @@ -483,8 +483,8 @@ exports[`headline renders correctly with logical prop margin overrides and crop @media screen and (min-width: 768px) and (max-width: 1023px) { .emotion-0 { font-family: "Bitter",serif; - font-size: 36px; - line-height: 40.5px; + font-size: 40px; + line-height: 45px; font-weight: 500; letter-spacing: 0; padding: 0.5px 0px; @@ -506,8 +506,8 @@ exports[`headline renders correctly with logical prop margin overrides and crop @media screen and (min-width: 1024px) { .emotion-0 { font-family: "Bitter",serif; - font-size: 40px; - line-height: 45px; + font-size: 48px; + line-height: 54px; font-weight: 500; letter-spacing: 0; padding: 0.5px 0px; @@ -556,7 +556,7 @@ exports[`headline renders correctly with logical prop padding overrides and crop @media screen and (max-width: 479px) { .emotion-0 { font-family: "Bitter",serif; - font-size: 32px; + font-size: 36px; line-height: 1.125; font-weight: 500; letter-spacing: 0; @@ -566,7 +566,7 @@ exports[`headline renders correctly with logical prop padding overrides and crop @media screen and (min-width: 480px) and (max-width: 767px) { .emotion-0 { font-family: "Bitter",serif; - font-size: 32px; + font-size: 36px; line-height: 1.125; font-weight: 500; letter-spacing: 0; @@ -576,7 +576,7 @@ exports[`headline renders correctly with logical prop padding overrides and crop @media screen and (min-width: 768px) and (max-width: 1023px) { .emotion-0 { font-family: "Bitter",serif; - font-size: 36px; + font-size: 40px; line-height: 1.125; font-weight: 500; letter-spacing: 0; @@ -586,7 +586,7 @@ exports[`headline renders correctly with logical prop padding overrides and crop @media screen and (min-width: 1024px) { .emotion-0 { font-family: "Bitter",serif; - font-size: 40px; + font-size: 48px; line-height: 1.125; font-weight: 500; letter-spacing: 0; @@ -618,8 +618,8 @@ exports[`headline renders correctly with overriden props 1`] = ` .emotion-0 { font-family: "Bitter",serif; - font-size: 28px; - line-height: 31.5px; + font-size: 32px; + line-height: 36px; font-weight: 500; letter-spacing: 0; padding: 0.5px 0px; diff --git a/src/selection-list/__tests__/__snapshots__/selection-list.test.tsx.snap b/src/selection-list/__tests__/__snapshots__/selection-list.test.tsx.snap index 78237a9e04..ea6794d3c3 100644 --- a/src/selection-list/__tests__/__snapshots__/selection-list.test.tsx.snap +++ b/src/selection-list/__tests__/__snapshots__/selection-list.test.tsx.snap @@ -1077,7 +1077,7 @@ exports[`SelectionList render should render SelectionListOptions with overrides border-width: 1px; border-color: transparent; font-family: "Bitter",serif; - font-size: 22px; + font-size: 24px; line-height: 1.125; font-weight: 500; letter-spacing: 0; @@ -1195,7 +1195,7 @@ exports[`SelectionList render should render SelectionListOptions with overrides border-width: 1px; border-color: transparent; font-family: "Bitter",serif; - font-size: 22px; + font-size: 24px; line-height: 1.125; font-weight: 500; letter-spacing: 0; diff --git a/src/theme/__tests__/__snapshots__/creator.test.ts.snap b/src/theme/__tests__/__snapshots__/creator.test.ts.snap index 073665716e..11dbb0cf42 100644 --- a/src/theme/__tests__/__snapshots__/creator.test.ts.snap +++ b/src/theme/__tests__/__snapshots__/creator.test.ts.snap @@ -842,42 +842,42 @@ Object { }, "editorialDisplay010": Object { "fontFamily": "{{fonts.fontFamily020.fontFamily}}", - "fontSize": "{{fonts.fontSize120}}", + "fontSize": "{{fonts.fontSize140}}", "fontWeight": "{{fonts.fontWeight020}}", "letterSpacing": "{{fonts.fontLetterSpacing030}}", "lineHeight": "{{fonts.fontLineHeight020}}", }, "editorialDisplay020": Object { "fontFamily": "{{fonts.fontFamily020.fontFamily}}", - "fontSize": "{{fonts.fontSize130}}", + "fontSize": "{{fonts.fontSize150}}", "fontWeight": "{{fonts.fontWeight020}}", "letterSpacing": "{{fonts.fontLetterSpacing030}}", "lineHeight": "{{fonts.fontLineHeight020}}", }, "editorialDisplay030": Object { "fontFamily": "{{fonts.fontFamily020.fontFamily}}", - "fontSize": "{{fonts.fontSize140}}", + "fontSize": "{{fonts.fontSize160}}", "fontWeight": "{{fonts.fontWeight020}}", "letterSpacing": "{{fonts.fontLetterSpacing030}}", "lineHeight": "{{fonts.fontLineHeight020}}", }, "editorialDropCap010": Object { "fontFamily": "{{fonts.fontFamily020.fontFamily}}", - "fontSize": "{{fonts.fontSize120}}", + "fontSize": "{{fonts.fontSize140}}", "fontWeight": "{{fonts.fontWeight020}}", "letterSpacing": "{{fonts.fontLetterSpacing030}}", "lineHeight": "{{fonts.fontLineHeight020}}", }, "editorialDropCap020": Object { "fontFamily": "{{fonts.fontFamily020.fontFamily}}", - "fontSize": "{{fonts.fontSize130}}", + "fontSize": "{{fonts.fontSize150}}", "fontWeight": "{{fonts.fontWeight020}}", "letterSpacing": "{{fonts.fontLetterSpacing030}}", "lineHeight": "{{fonts.fontLineHeight020}}", }, "editorialDropCap030": Object { "fontFamily": "{{fonts.fontFamily020.fontFamily}}", - "fontSize": "{{fonts.fontSize140}}", + "fontSize": "{{fonts.fontSize160}}", "fontWeight": "{{fonts.fontWeight020}}", "letterSpacing": "{{fonts.fontLetterSpacing030}}", "lineHeight": "{{fonts.fontLineHeight020}}", @@ -898,42 +898,42 @@ Object { }, "editorialHeadline030": Object { "fontFamily": "{{fonts.fontFamily020.fontFamily}}", - "fontSize": "{{fonts.fontSize060}}", + "fontSize": "{{fonts.fontSize070}}", "fontWeight": "{{fonts.fontWeight020}}", "letterSpacing": "{{fonts.fontLetterSpacing030}}", "lineHeight": "{{fonts.fontLineHeight020}}", }, "editorialHeadline040": Object { "fontFamily": "{{fonts.fontFamily020.fontFamily}}", - "fontSize": "{{fonts.fontSize070}}", + "fontSize": "{{fonts.fontSize080}}", "fontWeight": "{{fonts.fontWeight020}}", "letterSpacing": "{{fonts.fontLetterSpacing030}}", "lineHeight": "{{fonts.fontLineHeight020}}", }, "editorialHeadline050": Object { "fontFamily": "{{fonts.fontFamily020.fontFamily}}", - "fontSize": "{{fonts.fontSize080}}", + "fontSize": "{{fonts.fontSize090}}", "fontWeight": "{{fonts.fontWeight020}}", "letterSpacing": "{{fonts.fontLetterSpacing030}}", "lineHeight": "{{fonts.fontLineHeight020}}", }, "editorialHeadline060": Object { "fontFamily": "{{fonts.fontFamily020.fontFamily}}", - "fontSize": "{{fonts.fontSize090}}", + "fontSize": "{{fonts.fontSize100}}", "fontWeight": "{{fonts.fontWeight020}}", "letterSpacing": "{{fonts.fontLetterSpacing030}}", "lineHeight": "{{fonts.fontLineHeight020}}", }, "editorialHeadline070": Object { "fontFamily": "{{fonts.fontFamily020.fontFamily}}", - "fontSize": "{{fonts.fontSize100}}", + "fontSize": "{{fonts.fontSize110}}", "fontWeight": "{{fonts.fontWeight020}}", "letterSpacing": "{{fonts.fontLetterSpacing030}}", "lineHeight": "{{fonts.fontLineHeight020}}", }, "editorialHeadline080": Object { "fontFamily": "{{fonts.fontFamily020.fontFamily}}", - "fontSize": "{{fonts.fontSize110}}", + "fontSize": "{{fonts.fontSize130}}", "fontWeight": "{{fonts.fontWeight020}}", "letterSpacing": "{{fonts.fontLetterSpacing030}}", "lineHeight": "{{fonts.fontLineHeight020}}", diff --git a/src/theme/__tests__/__snapshots__/theme.test.ts.snap b/src/theme/__tests__/__snapshots__/theme.test.ts.snap index 7cdea32c38..9e78b9fa0e 100644 --- a/src/theme/__tests__/__snapshots__/theme.test.ts.snap +++ b/src/theme/__tests__/__snapshots__/theme.test.ts.snap @@ -858,42 +858,42 @@ Object { }, "editorialDisplay010": Object { "fontFamily": "{{fonts.fontFamily020.fontFamily}}", - "fontSize": "{{fonts.fontSize120}}", + "fontSize": "{{fonts.fontSize140}}", "fontWeight": "{{fonts.fontWeight020}}", "letterSpacing": "{{fonts.fontLetterSpacing030}}", "lineHeight": "{{fonts.fontLineHeight020}}", }, "editorialDisplay020": Object { "fontFamily": "{{fonts.fontFamily020.fontFamily}}", - "fontSize": "{{fonts.fontSize130}}", + "fontSize": "{{fonts.fontSize150}}", "fontWeight": "{{fonts.fontWeight020}}", "letterSpacing": "{{fonts.fontLetterSpacing030}}", "lineHeight": "{{fonts.fontLineHeight020}}", }, "editorialDisplay030": Object { "fontFamily": "{{fonts.fontFamily020.fontFamily}}", - "fontSize": "{{fonts.fontSize140}}", + "fontSize": "{{fonts.fontSize160}}", "fontWeight": "{{fonts.fontWeight020}}", "letterSpacing": "{{fonts.fontLetterSpacing030}}", "lineHeight": "{{fonts.fontLineHeight020}}", }, "editorialDropCap010": Object { "fontFamily": "{{fonts.fontFamily020.fontFamily}}", - "fontSize": "{{fonts.fontSize120}}", + "fontSize": "{{fonts.fontSize140}}", "fontWeight": "{{fonts.fontWeight020}}", "letterSpacing": "{{fonts.fontLetterSpacing030}}", "lineHeight": "{{fonts.fontLineHeight020}}", }, "editorialDropCap020": Object { "fontFamily": "{{fonts.fontFamily020.fontFamily}}", - "fontSize": "{{fonts.fontSize130}}", + "fontSize": "{{fonts.fontSize150}}", "fontWeight": "{{fonts.fontWeight020}}", "letterSpacing": "{{fonts.fontLetterSpacing030}}", "lineHeight": "{{fonts.fontLineHeight020}}", }, "editorialDropCap030": Object { "fontFamily": "{{fonts.fontFamily020.fontFamily}}", - "fontSize": "{{fonts.fontSize140}}", + "fontSize": "{{fonts.fontSize160}}", "fontWeight": "{{fonts.fontWeight020}}", "letterSpacing": "{{fonts.fontLetterSpacing030}}", "lineHeight": "{{fonts.fontLineHeight020}}", @@ -914,42 +914,42 @@ Object { }, "editorialHeadline030": Object { "fontFamily": "{{fonts.fontFamily020.fontFamily}}", - "fontSize": "{{fonts.fontSize060}}", + "fontSize": "{{fonts.fontSize070}}", "fontWeight": "{{fonts.fontWeight020}}", "letterSpacing": "{{fonts.fontLetterSpacing030}}", "lineHeight": "{{fonts.fontLineHeight020}}", }, "editorialHeadline040": Object { "fontFamily": "{{fonts.fontFamily020.fontFamily}}", - "fontSize": "{{fonts.fontSize070}}", + "fontSize": "{{fonts.fontSize080}}", "fontWeight": "{{fonts.fontWeight020}}", "letterSpacing": "{{fonts.fontLetterSpacing030}}", "lineHeight": "{{fonts.fontLineHeight020}}", }, "editorialHeadline050": Object { "fontFamily": "{{fonts.fontFamily020.fontFamily}}", - "fontSize": "{{fonts.fontSize080}}", + "fontSize": "{{fonts.fontSize090}}", "fontWeight": "{{fonts.fontWeight020}}", "letterSpacing": "{{fonts.fontLetterSpacing030}}", "lineHeight": "{{fonts.fontLineHeight020}}", }, "editorialHeadline060": Object { "fontFamily": "{{fonts.fontFamily020.fontFamily}}", - "fontSize": "{{fonts.fontSize090}}", + "fontSize": "{{fonts.fontSize100}}", "fontWeight": "{{fonts.fontWeight020}}", "letterSpacing": "{{fonts.fontLetterSpacing030}}", "lineHeight": "{{fonts.fontLineHeight020}}", }, "editorialHeadline070": Object { "fontFamily": "{{fonts.fontFamily020.fontFamily}}", - "fontSize": "{{fonts.fontSize100}}", + "fontSize": "{{fonts.fontSize110}}", "fontWeight": "{{fonts.fontWeight020}}", "letterSpacing": "{{fonts.fontLetterSpacing030}}", "lineHeight": "{{fonts.fontLineHeight020}}", }, "editorialHeadline080": Object { "fontFamily": "{{fonts.fontFamily020.fontFamily}}", - "fontSize": "{{fonts.fontSize110}}", + "fontSize": "{{fonts.fontSize130}}", "fontWeight": "{{fonts.fontWeight020}}", "letterSpacing": "{{fonts.fontLetterSpacing030}}", "lineHeight": "{{fonts.fontLineHeight020}}", diff --git a/src/theme/compiler/__tests__/__snapshots__/index.test.ts.snap b/src/theme/compiler/__tests__/__snapshots__/index.test.ts.snap index 8f7a8f9abb..edc90df49e 100644 --- a/src/theme/compiler/__tests__/__snapshots__/index.test.ts.snap +++ b/src/theme/compiler/__tests__/__snapshots__/index.test.ts.snap @@ -986,42 +986,42 @@ Object { }, "editorialDisplay010": Object { "fontFamily": "\\"Bitter\\", serif", - "fontSize": "44px", + "fontSize": "56px", "fontWeight": 500, "letterSpacing": "0", "lineHeight": 1.125, }, "editorialDisplay020": Object { "fontFamily": "\\"Bitter\\", serif", - "fontSize": "48px", + "fontSize": "64px", "fontWeight": 500, "letterSpacing": "0", "lineHeight": 1.125, }, "editorialDisplay030": Object { "fontFamily": "\\"Bitter\\", serif", - "fontSize": "56px", + "fontSize": "80px", "fontWeight": 500, "letterSpacing": "0", "lineHeight": 1.125, }, "editorialDropCap010": Object { "fontFamily": "\\"Bitter\\", serif", - "fontSize": "44px", + "fontSize": "56px", "fontWeight": 500, "letterSpacing": "0", "lineHeight": 1.125, }, "editorialDropCap020": Object { "fontFamily": "\\"Bitter\\", serif", - "fontSize": "48px", + "fontSize": "64px", "fontWeight": 500, "letterSpacing": "0", "lineHeight": 1.125, }, "editorialDropCap030": Object { "fontFamily": "\\"Bitter\\", serif", - "fontSize": "56px", + "fontSize": "80px", "fontWeight": 500, "letterSpacing": "0", "lineHeight": 1.125, @@ -1042,42 +1042,42 @@ Object { }, "editorialHeadline030": Object { "fontFamily": "\\"Bitter\\", serif", - "fontSize": "22px", + "fontSize": "24px", "fontWeight": 500, "letterSpacing": "0", "lineHeight": 1.125, }, "editorialHeadline040": Object { "fontFamily": "\\"Bitter\\", serif", - "fontSize": "24px", + "fontSize": "28px", "fontWeight": 500, "letterSpacing": "0", "lineHeight": 1.125, }, "editorialHeadline050": Object { "fontFamily": "\\"Bitter\\", serif", - "fontSize": "28px", + "fontSize": "32px", "fontWeight": 500, "letterSpacing": "0", "lineHeight": 1.125, }, "editorialHeadline060": Object { "fontFamily": "\\"Bitter\\", serif", - "fontSize": "32px", + "fontSize": "36px", "fontWeight": 500, "letterSpacing": "0", "lineHeight": 1.125, }, "editorialHeadline070": Object { "fontFamily": "\\"Bitter\\", serif", - "fontSize": "36px", + "fontSize": "40px", "fontWeight": 500, "letterSpacing": "0", "lineHeight": 1.125, }, "editorialHeadline080": Object { "fontFamily": "\\"Bitter\\", serif", - "fontSize": "40px", + "fontSize": "48px", "fontWeight": 500, "letterSpacing": "0", "lineHeight": 1.125, diff --git a/src/title-bar/__tests__/__snapshots__/title-bar.test.tsx.snap b/src/title-bar/__tests__/__snapshots__/title-bar.test.tsx.snap index 03a152cece..0a8965f6b9 100644 --- a/src/title-bar/__tests__/__snapshots__/title-bar.test.tsx.snap +++ b/src/title-bar/__tests__/__snapshots__/title-bar.test.tsx.snap @@ -44,8 +44,8 @@ exports[`TitleBar Should display correctly with action item as: Button 1`] = ` @media screen and (max-width: 767px) { .emotion-2 { font-family: "Bitter",serif; - font-size: 28px; - line-height: 31.5px; + font-size: 32px; + line-height: 36px; font-weight: 500; letter-spacing: 0; padding: 0.5px 0px; @@ -67,8 +67,8 @@ exports[`TitleBar Should display correctly with action item as: Button 1`] = ` @media screen and (min-width: 768px) and (max-width: 1023px) { .emotion-2 { font-family: "Bitter",serif; - font-size: 36px; - line-height: 40.5px; + font-size: 40px; + line-height: 45px; font-weight: 500; letter-spacing: 0; padding: 0.5px 0px; @@ -90,8 +90,8 @@ exports[`TitleBar Should display correctly with action item as: Button 1`] = ` @media screen and (min-width: 1024px) { .emotion-2 { font-family: "Bitter",serif; - font-size: 40px; - line-height: 45px; + font-size: 48px; + line-height: 54px; font-weight: 500; letter-spacing: 0; padding: 0.5px 0px; @@ -381,8 +381,8 @@ exports[`TitleBar Should display correctly with action item as: Button hidden in @media screen and (max-width: 767px) { .emotion-2 { font-family: "Bitter",serif; - font-size: 28px; - line-height: 31.5px; + font-size: 32px; + line-height: 36px; font-weight: 500; letter-spacing: 0; padding: 0.5px 0px; @@ -404,8 +404,8 @@ exports[`TitleBar Should display correctly with action item as: Button hidden in @media screen and (min-width: 768px) and (max-width: 1023px) { .emotion-2 { font-family: "Bitter",serif; - font-size: 36px; - line-height: 40.5px; + font-size: 40px; + line-height: 45px; font-weight: 500; letter-spacing: 0; padding: 0.5px 0px; @@ -427,8 +427,8 @@ exports[`TitleBar Should display correctly with action item as: Button hidden in @media screen and (min-width: 1024px) { .emotion-2 { font-family: "Bitter",serif; - font-size: 40px; - line-height: 45px; + font-size: 48px; + line-height: 54px; font-weight: 500; letter-spacing: 0; padding: 0.5px 0px; @@ -718,8 +718,8 @@ exports[`TitleBar Should display correctly with action item as: Link 1`] = ` @media screen and (max-width: 767px) { .emotion-2 { font-family: "Bitter",serif; - font-size: 28px; - line-height: 31.5px; + font-size: 32px; + line-height: 36px; font-weight: 500; letter-spacing: 0; padding: 0.5px 0px; @@ -741,8 +741,8 @@ exports[`TitleBar Should display correctly with action item as: Link 1`] = ` @media screen and (min-width: 768px) and (max-width: 1023px) { .emotion-2 { font-family: "Bitter",serif; - font-size: 36px; - line-height: 40.5px; + font-size: 40px; + line-height: 45px; font-weight: 500; letter-spacing: 0; padding: 0.5px 0px; @@ -764,8 +764,8 @@ exports[`TitleBar Should display correctly with action item as: Link 1`] = ` @media screen and (min-width: 1024px) { .emotion-2 { font-family: "Bitter",serif; - font-size: 40px; - line-height: 45px; + font-size: 48px; + line-height: 54px; font-weight: 500; letter-spacing: 0; padding: 0.5px 0px; @@ -1017,8 +1017,8 @@ exports[`TitleBar renders a title bar with logical props overrides 1`] = ` @media screen and (max-width: 767px) { .emotion-2 { font-family: "Bitter",serif; - font-size: 28px; - line-height: 31.5px; + font-size: 32px; + line-height: 36px; font-weight: 500; letter-spacing: 0; padding: 0.5px 0px; @@ -1040,8 +1040,8 @@ exports[`TitleBar renders a title bar with logical props overrides 1`] = ` @media screen and (min-width: 768px) and (max-width: 1023px) { .emotion-2 { font-family: "Bitter",serif; - font-size: 36px; - line-height: 40.5px; + font-size: 40px; + line-height: 45px; font-weight: 500; letter-spacing: 0; padding: 0.5px 0px; @@ -1063,8 +1063,8 @@ exports[`TitleBar renders a title bar with logical props overrides 1`] = ` @media screen and (min-width: 1024px) { .emotion-2 { font-family: "Bitter",serif; - font-size: 40px; - line-height: 45px; + font-size: 48px; + line-height: 54px; font-weight: 500; letter-spacing: 0; padding: 0.5px 0px; @@ -1157,8 +1157,8 @@ exports[`TitleBar should apply correctly only stylePreset for the heading 1`] = @media screen and (max-width: 767px) { .emotion-2 { font-family: "Bitter",serif; - font-size: 28px; - line-height: 31.5px; + font-size: 32px; + line-height: 36px; font-weight: 500; letter-spacing: 0; padding: 0.5px 0px; @@ -1180,8 +1180,8 @@ exports[`TitleBar should apply correctly only stylePreset for the heading 1`] = @media screen and (min-width: 768px) and (max-width: 1023px) { .emotion-2 { font-family: "Bitter",serif; - font-size: 36px; - line-height: 40.5px; + font-size: 40px; + line-height: 45px; font-weight: 500; letter-spacing: 0; padding: 0.5px 0px; @@ -1203,8 +1203,8 @@ exports[`TitleBar should apply correctly only stylePreset for the heading 1`] = @media screen and (min-width: 1024px) { .emotion-2 { font-family: "Bitter",serif; - font-size: 40px; - line-height: 45px; + font-size: 48px; + line-height: 54px; font-weight: 500; letter-spacing: 0; padding: 0.5px 0px; @@ -1343,8 +1343,8 @@ exports[`TitleBar should apply correctly only typographyPreset for the heading 1 @media screen and (min-width: 768px) and (max-width: 1023px) { .emotion-2 { font-family: "Bitter",serif; - font-size: 22px; - line-height: 24.75px; + font-size: 24px; + line-height: 27px; font-weight: 500; letter-spacing: 0; padding: 0.5px 0px; @@ -1366,8 +1366,8 @@ exports[`TitleBar should apply correctly only typographyPreset for the heading 1 @media screen and (min-width: 1024px) { .emotion-2 { font-family: "Bitter",serif; - font-size: 24px; - line-height: 27px; + font-size: 28px; + line-height: 31.5px; font-weight: 500; letter-spacing: 0; padding: 0.5px 0px; @@ -1494,8 +1494,8 @@ exports[`TitleBar should apply correctly the props and overrides 1`] = ` @media screen and (min-width: 768px) and (max-width: 1023px) { .emotion-2 { font-family: "Bitter",serif; - font-size: 22px; - line-height: 24.75px; + font-size: 24px; + line-height: 27px; font-weight: 500; letter-spacing: 0; padding: 0.5px 0px; @@ -1517,8 +1517,8 @@ exports[`TitleBar should apply correctly the props and overrides 1`] = ` @media screen and (min-width: 1024px) { .emotion-2 { font-family: "Bitter",serif; - font-size: 24px; - line-height: 27px; + font-size: 28px; + line-height: 31.5px; font-weight: 500; letter-spacing: 0; padding: 0.5px 0px; @@ -1611,8 +1611,8 @@ exports[`TitleBar should display correctly as renders with h1 size 1`] = ` @media screen and (max-width: 767px) { .emotion-2 { font-family: "Bitter",serif; - font-size: 28px; - line-height: 31.5px; + font-size: 32px; + line-height: 36px; font-weight: 500; letter-spacing: 0; padding: 0.5px 0px; @@ -1634,8 +1634,8 @@ exports[`TitleBar should display correctly as renders with h1 size 1`] = ` @media screen and (min-width: 768px) and (max-width: 1023px) { .emotion-2 { font-family: "Bitter",serif; - font-size: 36px; - line-height: 40.5px; + font-size: 40px; + line-height: 45px; font-weight: 500; letter-spacing: 0; padding: 0.5px 0px; @@ -1657,8 +1657,8 @@ exports[`TitleBar should display correctly as renders with h1 size 1`] = ` @media screen and (min-width: 1024px) { .emotion-2 { font-family: "Bitter",serif; - font-size: 40px; - line-height: 45px; + font-size: 48px; + line-height: 54px; font-weight: 500; letter-spacing: 0; padding: 0.5px 0px; @@ -1751,8 +1751,8 @@ exports[`TitleBar should display correctly as renders with h2 size 1`] = ` @media screen and (max-width: 767px) { .emotion-2 { font-family: "Bitter",serif; - font-size: 28px; - line-height: 31.5px; + font-size: 32px; + line-height: 36px; font-weight: 500; letter-spacing: 0; padding: 0.5px 0px; @@ -1774,8 +1774,8 @@ exports[`TitleBar should display correctly as renders with h2 size 1`] = ` @media screen and (min-width: 768px) and (max-width: 1023px) { .emotion-2 { font-family: "Bitter",serif; - font-size: 36px; - line-height: 40.5px; + font-size: 40px; + line-height: 45px; font-weight: 500; letter-spacing: 0; padding: 0.5px 0px; @@ -1797,8 +1797,8 @@ exports[`TitleBar should display correctly as renders with h2 size 1`] = ` @media screen and (min-width: 1024px) { .emotion-2 { font-family: "Bitter",serif; - font-size: 40px; - line-height: 45px; + font-size: 48px; + line-height: 54px; font-weight: 500; letter-spacing: 0; padding: 0.5px 0px; @@ -1891,8 +1891,8 @@ exports[`TitleBar should display correctly as renders with h3 size 1`] = ` @media screen and (max-width: 767px) { .emotion-2 { font-family: "Bitter",serif; - font-size: 28px; - line-height: 31.5px; + font-size: 32px; + line-height: 36px; font-weight: 500; letter-spacing: 0; padding: 0.5px 0px; @@ -1914,8 +1914,8 @@ exports[`TitleBar should display correctly as renders with h3 size 1`] = ` @media screen and (min-width: 768px) and (max-width: 1023px) { .emotion-2 { font-family: "Bitter",serif; - font-size: 36px; - line-height: 40.5px; + font-size: 40px; + line-height: 45px; font-weight: 500; letter-spacing: 0; padding: 0.5px 0px; @@ -1937,8 +1937,8 @@ exports[`TitleBar should display correctly as renders with h3 size 1`] = ` @media screen and (min-width: 1024px) { .emotion-2 { font-family: "Bitter",serif; - font-size: 40px; - line-height: 45px; + font-size: 48px; + line-height: 54px; font-weight: 500; letter-spacing: 0; padding: 0.5px 0px; @@ -2031,8 +2031,8 @@ exports[`TitleBar should display correctly as renders with h4 size 1`] = ` @media screen and (max-width: 767px) { .emotion-2 { font-family: "Bitter",serif; - font-size: 28px; - line-height: 31.5px; + font-size: 32px; + line-height: 36px; font-weight: 500; letter-spacing: 0; padding: 0.5px 0px; @@ -2054,8 +2054,8 @@ exports[`TitleBar should display correctly as renders with h4 size 1`] = ` @media screen and (min-width: 768px) and (max-width: 1023px) { .emotion-2 { font-family: "Bitter",serif; - font-size: 36px; - line-height: 40.5px; + font-size: 40px; + line-height: 45px; font-weight: 500; letter-spacing: 0; padding: 0.5px 0px; @@ -2077,8 +2077,8 @@ exports[`TitleBar should display correctly as renders with h4 size 1`] = ` @media screen and (min-width: 1024px) { .emotion-2 { font-family: "Bitter",serif; - font-size: 40px; - line-height: 45px; + font-size: 48px; + line-height: 54px; font-weight: 500; letter-spacing: 0; padding: 0.5px 0px; @@ -2171,8 +2171,8 @@ exports[`TitleBar should display correctly as renders with h5 size 1`] = ` @media screen and (max-width: 767px) { .emotion-2 { font-family: "Bitter",serif; - font-size: 28px; - line-height: 31.5px; + font-size: 32px; + line-height: 36px; font-weight: 500; letter-spacing: 0; padding: 0.5px 0px; @@ -2194,8 +2194,8 @@ exports[`TitleBar should display correctly as renders with h5 size 1`] = ` @media screen and (min-width: 768px) and (max-width: 1023px) { .emotion-2 { font-family: "Bitter",serif; - font-size: 36px; - line-height: 40.5px; + font-size: 40px; + line-height: 45px; font-weight: 500; letter-spacing: 0; padding: 0.5px 0px; @@ -2217,8 +2217,8 @@ exports[`TitleBar should display correctly as renders with h5 size 1`] = ` @media screen and (min-width: 1024px) { .emotion-2 { font-family: "Bitter",serif; - font-size: 40px; - line-height: 45px; + font-size: 48px; + line-height: 54px; font-weight: 500; letter-spacing: 0; padding: 0.5px 0px; @@ -2311,8 +2311,8 @@ exports[`TitleBar should display correctly as renders with h6 size 1`] = ` @media screen and (max-width: 767px) { .emotion-2 { font-family: "Bitter",serif; - font-size: 28px; - line-height: 31.5px; + font-size: 32px; + line-height: 36px; font-weight: 500; letter-spacing: 0; padding: 0.5px 0px; @@ -2334,8 +2334,8 @@ exports[`TitleBar should display correctly as renders with h6 size 1`] = ` @media screen and (min-width: 768px) and (max-width: 1023px) { .emotion-2 { font-family: "Bitter",serif; - font-size: 36px; - line-height: 40.5px; + font-size: 40px; + line-height: 45px; font-weight: 500; letter-spacing: 0; padding: 0.5px 0px; @@ -2357,8 +2357,8 @@ exports[`TitleBar should display correctly as renders with h6 size 1`] = ` @media screen and (min-width: 1024px) { .emotion-2 { font-family: "Bitter",serif; - font-size: 40px; - line-height: 45px; + font-size: 48px; + line-height: 54px; font-weight: 500; letter-spacing: 0; padding: 0.5px 0px; @@ -2451,8 +2451,8 @@ exports[`TitleBar should display correctly with default styles and given title 1 @media screen and (max-width: 767px) { .emotion-2 { font-family: "Bitter",serif; - font-size: 28px; - line-height: 31.5px; + font-size: 32px; + line-height: 36px; font-weight: 500; letter-spacing: 0; padding: 0.5px 0px; @@ -2474,8 +2474,8 @@ exports[`TitleBar should display correctly with default styles and given title 1 @media screen and (min-width: 768px) and (max-width: 1023px) { .emotion-2 { font-family: "Bitter",serif; - font-size: 36px; - line-height: 40.5px; + font-size: 40px; + line-height: 45px; font-weight: 500; letter-spacing: 0; padding: 0.5px 0px; @@ -2497,8 +2497,8 @@ exports[`TitleBar should display correctly with default styles and given title 1 @media screen and (min-width: 1024px) { .emotion-2 { font-family: "Bitter",serif; - font-size: 40px; - line-height: 45px; + font-size: 48px; + line-height: 54px; font-weight: 500; letter-spacing: 0; padding: 0.5px 0px; diff --git a/src/typography/__tests__/__snapshots__/heading.test.tsx.snap b/src/typography/__tests__/__snapshots__/heading.test.tsx.snap index 57a23e563b..a9dded6c62 100644 --- a/src/typography/__tests__/__snapshots__/heading.test.tsx.snap +++ b/src/typography/__tests__/__snapshots__/heading.test.tsx.snap @@ -18,7 +18,7 @@ exports[`Headings renders H1 correctly with logical props 1`] = ` @media screen and (max-width: 1023px) { .emotion-0 { font-family: "Bitter",serif; - font-size: 28px; + font-size: 32px; line-height: 1.125; font-weight: 500; letter-spacing: 0; @@ -28,7 +28,7 @@ exports[`Headings renders H1 correctly with logical props 1`] = ` @media screen and (min-width: 1024px) and (max-width: 1439px) { .emotion-0 { font-family: "Bitter",serif; - font-size: 36px; + font-size: 40px; line-height: 1.125; font-weight: 500; letter-spacing: 0; @@ -38,7 +38,7 @@ exports[`Headings renders H1 correctly with logical props 1`] = ` @media screen and (min-width: 1440px) { .emotion-0 { font-family: "Bitter",serif; - font-size: 40px; + font-size: 48px; line-height: 1.125; font-weight: 500; letter-spacing: 0; @@ -59,8 +59,8 @@ exports[`Headings renders H1 correctly with overrides 1`] = ` margin: 0; color: #FFFFFF; font-family: "Bitter",serif; - font-size: 28px; - line-height: 31.5px; + font-size: 32px; + line-height: 36px; font-weight: 500; letter-spacing: 0; padding: 0.5px 0px; @@ -104,8 +104,8 @@ exports[`Headings renders H1 with default styles 1`] = ` @media screen and (max-width: 1023px) { .emotion-0 { font-family: "Bitter",serif; - font-size: 28px; - line-height: 31.5px; + font-size: 32px; + line-height: 36px; font-weight: 500; letter-spacing: 0; padding: 0.5px 0px; @@ -127,8 +127,8 @@ exports[`Headings renders H1 with default styles 1`] = ` @media screen and (min-width: 1024px) and (max-width: 1439px) { .emotion-0 { font-family: "Bitter",serif; - font-size: 36px; - line-height: 40.5px; + font-size: 40px; + line-height: 45px; font-weight: 500; letter-spacing: 0; padding: 0.5px 0px; @@ -150,8 +150,8 @@ exports[`Headings renders H1 with default styles 1`] = ` @media screen and (min-width: 1440px) { .emotion-0 { font-family: "Bitter",serif; - font-size: 40px; - line-height: 45px; + font-size: 48px; + line-height: 54px; font-weight: 500; letter-spacing: 0; padding: 0.5px 0px; @@ -196,7 +196,7 @@ exports[`Headings renders H2 correctly with logical props 1`] = ` @media screen and (max-width: 767px) { .emotion-0 { font-family: "Bitter",serif; - font-size: 22px; + font-size: 24px; line-height: 1.125; font-weight: 500; letter-spacing: 0; @@ -206,7 +206,7 @@ exports[`Headings renders H2 correctly with logical props 1`] = ` @media screen and (min-width: 768px) { .emotion-0 { font-family: "Bitter",serif; - font-size: 24px; + font-size: 28px; line-height: 1.125; font-weight: 500; letter-spacing: 0; @@ -227,8 +227,8 @@ exports[`Headings renders H2 correctly with overrides 1`] = ` margin: 0; color: #FFFFFF; font-family: "Bitter",serif; - font-size: 28px; - line-height: 31.5px; + font-size: 32px; + line-height: 36px; font-weight: 500; letter-spacing: 0; padding: 0.5px 0px; @@ -272,8 +272,8 @@ exports[`Headings renders H2 with default styles 1`] = ` @media screen and (max-width: 767px) { .emotion-0 { font-family: "Bitter",serif; - font-size: 22px; - line-height: 24.75px; + font-size: 24px; + line-height: 27px; font-weight: 500; letter-spacing: 0; padding: 0.5px 0px; @@ -295,8 +295,8 @@ exports[`Headings renders H2 with default styles 1`] = ` @media screen and (min-width: 768px) { .emotion-0 { font-family: "Bitter",serif; - font-size: 24px; - line-height: 27px; + font-size: 28px; + line-height: 31.5px; font-weight: 500; letter-spacing: 0; padding: 0.5px 0px; @@ -351,7 +351,7 @@ exports[`Headings renders H3 correctly with logical props 1`] = ` @media screen and (min-width: 768px) { .emotion-0 { font-family: "Bitter",serif; - font-size: 22px; + font-size: 24px; line-height: 1.125; font-weight: 500; letter-spacing: 0; @@ -372,8 +372,8 @@ exports[`Headings renders H3 correctly with overrides 1`] = ` margin: 0; color: #FFFFFF; font-family: "Bitter",serif; - font-size: 28px; - line-height: 31.5px; + font-size: 32px; + line-height: 36px; font-weight: 500; letter-spacing: 0; padding: 0.5px 0px; @@ -440,8 +440,8 @@ exports[`Headings renders H3 with default styles 1`] = ` @media screen and (min-width: 768px) { .emotion-0 { font-family: "Bitter",serif; - font-size: 22px; - line-height: 24.75px; + font-size: 24px; + line-height: 27px; font-weight: 500; letter-spacing: 0; padding: 0.5px 0px; @@ -517,8 +517,8 @@ exports[`Headings renders H4 correctly with overrides 1`] = ` margin: 0; color: #FFFFFF; font-family: "Bitter",serif; - font-size: 28px; - line-height: 31.5px; + font-size: 32px; + line-height: 36px; font-weight: 500; letter-spacing: 0; padding: 0.5px 0px; @@ -647,8 +647,8 @@ exports[`Headings renders H5 correctly with overrides 1`] = ` margin: 0; color: #FFFFFF; font-family: "Bitter",serif; - font-size: 28px; - line-height: 31.5px; + font-size: 32px; + line-height: 36px; font-weight: 500; letter-spacing: 0; padding: 0.5px 0px; @@ -749,8 +749,8 @@ exports[`Headings renders H6 correctly with overrides 1`] = ` margin: 0; color: #FFFFFF; font-family: "Bitter",serif; - font-size: 28px; - line-height: 31.5px; + font-size: 32px; + line-height: 36px; font-weight: 500; letter-spacing: 0; padding: 0.5px 0px; @@ -835,7 +835,7 @@ exports[`Headings renders Heading1 correctly with logical props 1`] = ` @media screen and (max-width: 1023px) { .emotion-0 { font-family: "Bitter",serif; - font-size: 28px; + font-size: 32px; line-height: 1.125; font-weight: 500; letter-spacing: 0; @@ -845,7 +845,7 @@ exports[`Headings renders Heading1 correctly with logical props 1`] = ` @media screen and (min-width: 1024px) and (max-width: 1439px) { .emotion-0 { font-family: "Bitter",serif; - font-size: 36px; + font-size: 40px; line-height: 1.125; font-weight: 500; letter-spacing: 0; @@ -855,7 +855,7 @@ exports[`Headings renders Heading1 correctly with logical props 1`] = ` @media screen and (min-width: 1440px) { .emotion-0 { font-family: "Bitter",serif; - font-size: 40px; + font-size: 48px; line-height: 1.125; font-weight: 500; letter-spacing: 0; @@ -876,8 +876,8 @@ exports[`Headings renders Heading1 correctly with overrides 1`] = ` margin: 0; color: #FFFFFF; font-family: "Bitter",serif; - font-size: 28px; - line-height: 31.5px; + font-size: 32px; + line-height: 36px; font-weight: 500; letter-spacing: 0; padding: 0.5px 0px; @@ -921,8 +921,8 @@ exports[`Headings renders Heading1 with default styles 1`] = ` @media screen and (max-width: 1023px) { .emotion-0 { font-family: "Bitter",serif; - font-size: 28px; - line-height: 31.5px; + font-size: 32px; + line-height: 36px; font-weight: 500; letter-spacing: 0; padding: 0.5px 0px; @@ -944,8 +944,8 @@ exports[`Headings renders Heading1 with default styles 1`] = ` @media screen and (min-width: 1024px) and (max-width: 1439px) { .emotion-0 { font-family: "Bitter",serif; - font-size: 36px; - line-height: 40.5px; + font-size: 40px; + line-height: 45px; font-weight: 500; letter-spacing: 0; padding: 0.5px 0px; @@ -967,8 +967,8 @@ exports[`Headings renders Heading1 with default styles 1`] = ` @media screen and (min-width: 1440px) { .emotion-0 { font-family: "Bitter",serif; - font-size: 40px; - line-height: 45px; + font-size: 48px; + line-height: 54px; font-weight: 500; letter-spacing: 0; padding: 0.5px 0px; @@ -1013,7 +1013,7 @@ exports[`Headings renders Heading2 correctly with logical props 1`] = ` @media screen and (max-width: 767px) { .emotion-0 { font-family: "Bitter",serif; - font-size: 22px; + font-size: 24px; line-height: 1.125; font-weight: 500; letter-spacing: 0; @@ -1023,7 +1023,7 @@ exports[`Headings renders Heading2 correctly with logical props 1`] = ` @media screen and (min-width: 768px) { .emotion-0 { font-family: "Bitter",serif; - font-size: 24px; + font-size: 28px; line-height: 1.125; font-weight: 500; letter-spacing: 0; @@ -1044,8 +1044,8 @@ exports[`Headings renders Heading2 correctly with overrides 1`] = ` margin: 0; color: #FFFFFF; font-family: "Bitter",serif; - font-size: 28px; - line-height: 31.5px; + font-size: 32px; + line-height: 36px; font-weight: 500; letter-spacing: 0; padding: 0.5px 0px; @@ -1089,8 +1089,8 @@ exports[`Headings renders Heading2 with default styles 1`] = ` @media screen and (max-width: 767px) { .emotion-0 { font-family: "Bitter",serif; - font-size: 22px; - line-height: 24.75px; + font-size: 24px; + line-height: 27px; font-weight: 500; letter-spacing: 0; padding: 0.5px 0px; @@ -1112,8 +1112,8 @@ exports[`Headings renders Heading2 with default styles 1`] = ` @media screen and (min-width: 768px) { .emotion-0 { font-family: "Bitter",serif; - font-size: 24px; - line-height: 27px; + font-size: 28px; + line-height: 31.5px; font-weight: 500; letter-spacing: 0; padding: 0.5px 0px; @@ -1168,7 +1168,7 @@ exports[`Headings renders Heading3 correctly with logical props 1`] = ` @media screen and (min-width: 768px) { .emotion-0 { font-family: "Bitter",serif; - font-size: 22px; + font-size: 24px; line-height: 1.125; font-weight: 500; letter-spacing: 0; @@ -1189,8 +1189,8 @@ exports[`Headings renders Heading3 correctly with overrides 1`] = ` margin: 0; color: #FFFFFF; font-family: "Bitter",serif; - font-size: 28px; - line-height: 31.5px; + font-size: 32px; + line-height: 36px; font-weight: 500; letter-spacing: 0; padding: 0.5px 0px; @@ -1257,8 +1257,8 @@ exports[`Headings renders Heading3 with default styles 1`] = ` @media screen and (min-width: 768px) { .emotion-0 { font-family: "Bitter",serif; - font-size: 22px; - line-height: 24.75px; + font-size: 24px; + line-height: 27px; font-weight: 500; letter-spacing: 0; padding: 0.5px 0px; @@ -1334,8 +1334,8 @@ exports[`Headings renders Heading4 correctly with overrides 1`] = ` margin: 0; color: #FFFFFF; font-family: "Bitter",serif; - font-size: 28px; - line-height: 31.5px; + font-size: 32px; + line-height: 36px; font-weight: 500; letter-spacing: 0; padding: 0.5px 0px; @@ -1464,8 +1464,8 @@ exports[`Headings renders Heading5 correctly with overrides 1`] = ` margin: 0; color: #FFFFFF; font-family: "Bitter",serif; - font-size: 28px; - line-height: 31.5px; + font-size: 32px; + line-height: 36px; font-weight: 500; letter-spacing: 0; padding: 0.5px 0px; @@ -1566,8 +1566,8 @@ exports[`Headings renders Heading6 correctly with overrides 1`] = ` margin: 0; color: #FFFFFF; font-family: "Bitter",serif; - font-size: 28px; - line-height: 31.5px; + font-size: 32px; + line-height: 36px; font-weight: 500; letter-spacing: 0; padding: 0.5px 0px; diff --git a/src/typography/__tests__/__snapshots__/paragraph.test.tsx.snap b/src/typography/__tests__/__snapshots__/paragraph.test.tsx.snap index 1f3241aca1..ae4e6d4397 100644 --- a/src/typography/__tests__/__snapshots__/paragraph.test.tsx.snap +++ b/src/typography/__tests__/__snapshots__/paragraph.test.tsx.snap @@ -149,7 +149,7 @@ exports[`Paragraph renders with drop cap 1`] = ` @media screen and (max-width: 767px) { .emotion-1 { font-family: "Bitter",serif; - font-size: 44px; + font-size: 56px; line-height: 1.125; font-weight: 500; letter-spacing: 0; @@ -159,7 +159,7 @@ exports[`Paragraph renders with drop cap 1`] = ` @media screen and (min-width: 768px) and (max-width: 1023px) { .emotion-1 { font-family: "Bitter",serif; - font-size: 48px; + font-size: 64px; line-height: 1.125; font-weight: 500; letter-spacing: 0; @@ -169,7 +169,7 @@ exports[`Paragraph renders with drop cap 1`] = ` @media screen and (min-width: 1024px) { .emotion-1 { font-family: "Bitter",serif; - font-size: 56px; + font-size: 80px; line-height: 1.125; font-weight: 500; letter-spacing: 0; @@ -259,7 +259,7 @@ exports[`Paragraph renders with drop cap and complex children 1`] = ` @media screen and (max-width: 767px) { .emotion-1 { font-family: "Bitter",serif; - font-size: 44px; + font-size: 56px; line-height: 1.125; font-weight: 500; letter-spacing: 0; @@ -269,7 +269,7 @@ exports[`Paragraph renders with drop cap and complex children 1`] = ` @media screen and (min-width: 768px) and (max-width: 1023px) { .emotion-1 { font-family: "Bitter",serif; - font-size: 48px; + font-size: 64px; line-height: 1.125; font-weight: 500; letter-spacing: 0; @@ -279,7 +279,7 @@ exports[`Paragraph renders with drop cap and complex children 1`] = ` @media screen and (min-width: 1024px) { .emotion-1 { font-family: "Bitter",serif; - font-size: 56px; + font-size: 80px; line-height: 1.125; font-weight: 500; letter-spacing: 0; @@ -391,7 +391,7 @@ exports[`Paragraph renders with dropCap logical props 1`] = ` @media screen and (max-width: 767px) { .emotion-1 { font-family: "Bitter",serif; - font-size: 44px; + font-size: 56px; line-height: 1.125; font-weight: 500; letter-spacing: 0; @@ -401,7 +401,7 @@ exports[`Paragraph renders with dropCap logical props 1`] = ` @media screen and (min-width: 768px) and (max-width: 1023px) { .emotion-1 { font-family: "Bitter",serif; - font-size: 48px; + font-size: 64px; line-height: 1.125; font-weight: 500; letter-spacing: 0; @@ -411,7 +411,7 @@ exports[`Paragraph renders with dropCap logical props 1`] = ` @media screen and (min-width: 1024px) { .emotion-1 { font-family: "Bitter",serif; - font-size: 56px; + font-size: 80px; line-height: 1.125; font-weight: 500; letter-spacing: 0; From 3873ad0519035c4efefcf48f602f2b5639434989 Mon Sep 17 00:00:00 2001 From: evgenitsn Date: Fri, 19 Aug 2022 10:28:14 +0300 Subject: [PATCH 13/26] feat(PPDSC-1995): update theme --- .../__snapshots__/enum-table.test.tsx.snap | 8 +- .../__snapshots__/site-header.test.tsx.snap | 244 +- .../__snapshots__/base-card.test.tsx.snap | 60 +- .../__snapshots__/border-card.test.tsx.snap | 16 +- .../__snapshots__/component-api.test.tsx.snap | 92 +- .../content-structure.test.tsx.snap | 96 +- .../__snapshots__/feature-card.test.tsx.snap | 10 +- .../__snapshots__/mono-color.test.tsx.snap | 6 +- .../__snapshots__/mono-keyboard.test.tsx.snap | 74 +- .../__snapshots__/header-index.test.tsx.snap | 14 +- site/components/homepage/explore/explore.tsx | 7 +- .../homepage/keep-in-touch/keep-in-touch.tsx | 5 +- .../__snapshots__/icons.test.tsx.snap | 50 +- .../__snapshots__/legacyblock.test.tsx.snap | 16 +- .../__snapshots__/logo.test.tsx.snap | 8 +- .../__snapshots__/media-list.test.tsx.snap | 98 +- .../__snapshots__/meta.test.tsx.snap | 126 +- .../page-introduction.test.tsx.snap | 16 +- site/components/playground/index.tsx | 6 +- .../release-header.test.tsx.snap | 14 +- .../__snapshots__/release-notes.test.tsx.snap | 10 +- .../section-introduction.test.ts.snap | 8 +- .../sidebar-navigation.test.tsx.snap | 130 +- .../__snapshots__/sidebar.test.tsx.snap | 196 +- .../__snapshots__/step.test.tsx.snap | 10 +- .../__snapshots__/swatch-card.test.tsx.snap | 4 +- .../table-of-contents.test.tsx.snap | 20 +- .../__snapshots__/table.test.tsx.snap | 128 +- .../tabs-with-table.test.tsx.snap | 40 +- .../__snapshots__/content-text.test.ts.snap | 16 +- .../__snapshots__/svg-previewer.test.tsx.snap | 148 +- .../__snapshots__/usage-card.test.tsx.snap | 40 +- .../code/engineering-overview.tsx | 11 +- .../design/design-overview.tsx | 2 +- .../accessibility-section.test.tsx.snap | 18 +- .../anatomy-section.test.tsx.snap | 10 +- .../behaviors-section.test.tsx.snap | 10 +- .../code-examples-section.test.tsx.snap | 48 +- .../compliance-section.test.tsx.snap | 10 +- .../component-api-section.test.tsx.snap | 18 +- .../interactive-demo-section.test.tsx.snap | 10 +- .../options-section.test.tsx.snap | 10 +- .../related-components-section.test.tsx.snap | 28 +- .../__snapshots__/seo-section.test.tsx.snap | 10 +- .../states-section.test.tsx.snap | 10 +- .../__snapshots__/usage-section.test.tsx.snap | 10 +- .../__snapshots__/doc-theme.test.ts.snap | 2640 +++++++++-------- site/theme/colors-dark.json | 112 +- site/theme/colors-light.json | 150 +- site/theme/doc-theme.ts | 250 +- site/theme/style-presets.ts | 26 +- .../__snapshots__/accordion.test.tsx.snap | 198 +- .../assistive-text.test.tsx.snap | 48 +- .../audio-player-composable.test.tsx.snap | 614 ++-- .../__snapshots__/audio-player.test.tsx.snap | 432 +-- .../__snapshots__/popout-button.test.tsx.snap | 12 +- .../__snapshots__/banner.test.tsx.snap | 180 +- .../__snapshots__/block.test.tsx.snap | 2 +- .../__snapshots__/button.test.tsx.snap | 186 +- .../__snapshots__/byline.test.tsx.snap | 116 +- .../__snapshots__/caption.test.tsx.snap | 48 +- .../__snapshots__/card.test.tsx.snap | 358 +-- .../__snapshots__/checkbox.test.tsx.snap | 2260 +++++++------- .../consent-settings-link.test.tsx.snap | 24 +- .../__snapshots__/date-time.test.tsx.snap | 12 +- .../__snapshots__/divider.test.tsx.snap | 6 +- .../__snapshots__/drawer.test.tsx.snap | 346 +-- .../__snapshots__/email-input.test.tsx.snap | 24 +- .../__snapshots__/fieldset.test.tsx.snap | 546 ++-- .../__snapshots__/flag.test.tsx.snap | 8 +- .../__snapshots__/form.test.tsx.snap | 1548 +++++----- .../__snapshots__/headline.test.tsx.snap | 20 +- .../__snapshots__/icon-button.test.tsx.snap | 90 +- .../__snapshots__/custom-icons.test.tsx.snap | 270 +- .../material-icons.test.tsx.snap | 8 +- .../__snapshots__/image.test.tsx.snap | 92 +- .../inline-message.test.tsx.snap | 58 +- .../__snapshots__/label.test.tsx.snap | 18 +- .../__snapshots__/link.test.tsx.snap | 120 +- .../__snapshots__/menu.test.tsx.snap | 586 ++-- .../__snapshots__/modal.test.tsx.snap | 214 +- .../__snapshots__/ordered-list.test.tsx.snap | 26 +- .../__snapshots__/overlay.test.tsx.snap | 2 +- .../__snapshots__/popover.test.tsx.snap | 456 +-- .../__snapshots__/radio-button.test.tsx.snap | 170 +- .../__snapshots__/select.test.tsx.snap | 670 ++--- .../selection-list.test.tsx.snap | 206 +- .../__snapshots__/share-bar.test.tsx.snap | 226 +- .../__snapshots__/slider.test.tsx.snap | 268 +- .../stateful-slider.test.tsx.snap | 28 +- .../__snapshots__/stack-child.test.tsx.snap | 32 +- .../__snapshots__/stack.test.tsx.snap | 628 ++-- .../__snapshots__/standfirst.test.tsx.snap | 10 +- .../structured-list.test.tsx.snap | 284 +- .../__snapshots__/switch.test.tsx.snap | 476 +-- .../__snapshots__/tabs.test.tsx.snap | 1520 +++++----- .../__tests__/__snapshots__/tag.test.tsx.snap | 184 +- .../__snapshots__/text-field.test.tsx.snap | 404 +-- .../__snapshots__/text-input.test.tsx.snap | 388 +-- .../__snapshots__/creator.test.ts.snap | 195 +- .../__snapshots__/theme.test.ts.snap | 171 +- .../__snapshots__/index.test.ts.snap | 443 +-- src/theme/foundations/colors.ts | 220 +- .../__snapshots__/title-bar.test.tsx.snap | 84 +- .../__snapshots__/toast.test.tsx.snap | 56 +- .../__snapshots__/tooltip.test.tsx.snap | 56 +- .../__snapshots__/heading.test.tsx.snap | 96 +- .../__snapshots__/paragraph.test.tsx.snap | 40 +- .../unordered-list.test.tsx.snap | 138 +- .../__snapshots__/style-preset.test.tsx.snap | 240 +- .../__snapshots__/video-player.test.tsx.snap | 8 +- .../volume-control.test.tsx.snap | 288 +- 112 files changed, 10925 insertions(+), 10631 deletions(-) diff --git a/site/components/__tests__/__snapshots__/enum-table.test.tsx.snap b/site/components/__tests__/__snapshots__/enum-table.test.tsx.snap index ebc5a39275..008d980b0d 100644 --- a/site/components/__tests__/__snapshots__/enum-table.test.tsx.snap +++ b/site/components/__tests__/__snapshots__/enum-table.test.tsx.snap @@ -14,16 +14,16 @@ exports[`EnumTable renders enum as expected 1`] = ` line-height: 1.5; font-weight: 400; letter-spacing: 0; - background-color: #FFFFFF; - box-shadow: 0 3px 4px 2px #FFFFFF; + background-color: #F0F1F3; + box-shadow: 0 3px 4px 2px #F0F1F3; } .emotion-1, .emotion-1 td, .emotion-1 th { - color: #0A0A0A; + color: #09111C; border-spacing: 0; - border: solid 1px #E4E4E4; + border: solid 1px #DEE2E5; } .emotion-1 td, diff --git a/site/components/__tests__/__snapshots__/site-header.test.tsx.snap b/site/components/__tests__/__snapshots__/site-header.test.tsx.snap index 242ea522d6..1e8a2bbadd 100644 --- a/site/components/__tests__/__snapshots__/site-header.test.tsx.snap +++ b/site/components/__tests__/__snapshots__/site-header.test.tsx.snap @@ -10,7 +10,7 @@ exports[`SiteHeader has first item highlighted (About) if we are on a section wi z-index: 4; height: 48px; border-bottom-width: 1px; - border-bottom-color: #E4E4E4; + border-bottom-color: #DEE2E5; background-color: #FFFFFF; font-family: "Poppins",sans-serif; font-size: 14px; @@ -106,7 +106,7 @@ exports[`SiteHeader has first item highlighted (About) if we are on a section wi appearance: none; background-color: transparent; border-radius: 50%; - color: #577FFB; + color: #3358CC; margin: 0; cursor: pointer; } @@ -117,24 +117,24 @@ exports[`SiteHeader has first item highlighted (About) if we are on a section wi } .emotion-4 svg { - fill: #577FFB; + fill: #3358CC; } .emotion-4:hover:not(:disabled) { - background-color: #E0E7FF; + background-color: #ECF1FF; } .emotion-4:active:not(:disabled) { - background-color: #AEBFFF; + background-color: #D5E0FC; } .emotion-4:disabled { background-color: transparent; - color: #C0C0C0; + color: #C0C7CC; } .emotion-4:disabled svg { - fill: #C0C0C0; + fill: #C0C7CC; } .emotion-4:focus-visible:not(:disabled) { @@ -202,8 +202,8 @@ exports[`SiteHeader has first item highlighted (About) if we are on a section wi display: inline-block; vertical-align: middle; overflow: hidden; - color: #0A0A0A; - fill: #0A0A0A; + color: #09111C; + fill: #09111C; vertical-align: unset; display: inline-block; } @@ -227,8 +227,8 @@ exports[`SiteHeader has first item highlighted (About) if we are on a section wi .emotion-7.emotion-7 { width: 24px; height: 24px; - color: #0A0A0A; - fill: #0A0A0A; + color: #09111C; + fill: #09111C; } @media screen and (prefers-reduced-motion: no-preference) { @@ -249,7 +249,7 @@ exports[`SiteHeader has first item highlighted (About) if we are on a section wi .emotion-9 { display: inline-block; - color: #2E2E2E; + color: #2E3F54; } @media screen and (prefers-reduced-motion: no-preference) { @@ -269,7 +269,7 @@ exports[`SiteHeader has first item highlighted (About) if we are on a section wi } .emotion-9 svg { - fill: #2E2E2E; + fill: #2E3F54; } .emotion-10 { @@ -319,8 +319,8 @@ exports[`SiteHeader has first item highlighted (About) if we are on a section wi } .emotion-13 { - fill: #162740; - color: #162740; + fill: #09111C; + color: #09111C; } @media screen { @@ -382,7 +382,7 @@ exports[`SiteHeader has first item highlighted (About) if we are on a section wi .emotion-17 { display: inline-block; - color: #577FFB; + color: #3358CC; -webkit-text-decoration: none; text-decoration: none; } @@ -404,27 +404,27 @@ exports[`SiteHeader has first item highlighted (About) if we are on a section wi } .emotion-17 svg { - fill: #577FFB; + fill: #3358CC; } .emotion-17:hover:not(:disabled) { - color: #3358CC; + color: #254CAC; -webkit-text-decoration: underline; text-decoration: underline; } .emotion-17:hover:not(:disabled) svg { - fill: #3358CC; + fill: #254CAC; } .emotion-17:active:not(:disabled) { - color: #213A82; + color: #14328D; -webkit-text-decoration: underline; text-decoration: underline; } .emotion-17:active:not(:disabled) svg { - fill: #213A82; + fill: #14328D; } .emotion-17:focus-visible:not(:disabled) { @@ -500,7 +500,7 @@ exports[`SiteHeader has first item highlighted (About) if we are on a section wi -moz-appearance: none; -ms-appearance: none; appearance: none; - color: #535353; + color: #5A6A79; -webkit-text-decoration: none; text-decoration: none; border-color: transparent; @@ -509,10 +509,10 @@ exports[`SiteHeader has first item highlighted (About) if we are on a section wi margin: 0; cursor: pointer; margin-inline: 10px; - color: #577FFB; + color: #3358CC; -webkit-text-decoration: none; text-decoration: none; - border-color: transparent transparent #577FFB transparent; + border-color: transparent transparent #3358CC transparent; border-width: 4px; border-style: solid; -webkit-box-pack: center; @@ -540,7 +540,7 @@ exports[`SiteHeader has first item highlighted (About) if we are on a section wi } .emotion-25:hover:not(:disabled) { - color: #535353; + color: #5A6A79; -webkit-text-decoration: none; text-decoration: none; } @@ -638,7 +638,7 @@ exports[`SiteHeader has first item highlighted (About) if we are on a section wi -moz-appearance: none; -ms-appearance: none; appearance: none; - color: #535353; + color: #5A6A79; -webkit-text-decoration: none; text-decoration: none; border-color: transparent; @@ -672,7 +672,7 @@ exports[`SiteHeader has first item highlighted (About) if we are on a section wi } .emotion-30:hover:not(:disabled) { - color: #535353; + color: #5A6A79; -webkit-text-decoration: none; text-decoration: none; } @@ -752,10 +752,10 @@ exports[`SiteHeader has first item highlighted (About) if we are on a section wi appearance: none; background-color: transparent; border-style: solid; - border-color: #535353; + border-color: #2E3F54; border-width: 1px; border-radius: 24px; - color: #2E2E2E; + color: #2E3F54; margin: 0; cursor: pointer; } @@ -766,26 +766,26 @@ exports[`SiteHeader has first item highlighted (About) if we are on a section wi } .emotion-50 svg { - fill: #2E2E2E; + fill: #2E3F54; } .emotion-50:hover:not(:disabled) { - background-color: #F4F4F4; - border-color: #2E2E2E; + background-color: #F0F1F3; + border-color: #15263E; } .emotion-50:active:not(:disabled) { - background-color: #CCCCCC; - border-color: #0A0A0A; + background-color: #DEE2E5; + border-color: #09111C; } .emotion-50:disabled { - border-color: #F4F4F4; - color: #C0C0C0; + border-color: #DEE2E5; + color: #C0C7CC; } .emotion-50:disabled svg { - fill: #C0C0C0; + fill: #C0C7CC; } .emotion-50:focus-visible:not(:disabled) { @@ -820,7 +820,7 @@ exports[`SiteHeader has first item highlighted (About) if we are on a section wi } .emotion-53 { - fill: #2E2E2E; + fill: #2E3F54; vertical-align: unset; display: inline-block; } @@ -894,7 +894,7 @@ exports[`SiteHeader has first item highlighted (About) if we are on a section wi -moz-appearance: none; -ms-appearance: none; appearance: none; - background-color: #F4F4F4; + background-color: #F0F1F3; border-radius: 50%; margin: 0; cursor: pointer; @@ -906,11 +906,11 @@ exports[`SiteHeader has first item highlighted (About) if we are on a section wi } .emotion-57:hover:not(:disabled) { - background-color: #CCCCCC; + background-color: #DEE2E5; } .emotion-57:active:not(:disabled) { - background-color: #CCCCCC; + background-color: #DEE2E5; } .emotion-57:focus-visible:not(:disabled) { @@ -945,7 +945,7 @@ exports[`SiteHeader has first item highlighted (About) if we are on a section wi } .emotion-60 { - fill: #2E2E2E; + fill: #2E3F54; vertical-align: unset; display: inline-block; } @@ -1379,7 +1379,7 @@ exports[`SiteHeader has first item highlighted (About) if we are on the /about s z-index: 4; height: 48px; border-bottom-width: 1px; - border-bottom-color: #E4E4E4; + border-bottom-color: #DEE2E5; background-color: #FFFFFF; font-family: "Poppins",sans-serif; font-size: 14px; @@ -1475,7 +1475,7 @@ exports[`SiteHeader has first item highlighted (About) if we are on the /about s appearance: none; background-color: transparent; border-radius: 50%; - color: #577FFB; + color: #3358CC; margin: 0; cursor: pointer; } @@ -1486,24 +1486,24 @@ exports[`SiteHeader has first item highlighted (About) if we are on the /about s } .emotion-4 svg { - fill: #577FFB; + fill: #3358CC; } .emotion-4:hover:not(:disabled) { - background-color: #E0E7FF; + background-color: #ECF1FF; } .emotion-4:active:not(:disabled) { - background-color: #AEBFFF; + background-color: #D5E0FC; } .emotion-4:disabled { background-color: transparent; - color: #C0C0C0; + color: #C0C7CC; } .emotion-4:disabled svg { - fill: #C0C0C0; + fill: #C0C7CC; } .emotion-4:focus-visible:not(:disabled) { @@ -1571,8 +1571,8 @@ exports[`SiteHeader has first item highlighted (About) if we are on the /about s display: inline-block; vertical-align: middle; overflow: hidden; - color: #0A0A0A; - fill: #0A0A0A; + color: #09111C; + fill: #09111C; vertical-align: unset; display: inline-block; } @@ -1596,8 +1596,8 @@ exports[`SiteHeader has first item highlighted (About) if we are on the /about s .emotion-7.emotion-7 { width: 24px; height: 24px; - color: #0A0A0A; - fill: #0A0A0A; + color: #09111C; + fill: #09111C; } @media screen and (prefers-reduced-motion: no-preference) { @@ -1618,7 +1618,7 @@ exports[`SiteHeader has first item highlighted (About) if we are on the /about s .emotion-9 { display: inline-block; - color: #2E2E2E; + color: #2E3F54; } @media screen and (prefers-reduced-motion: no-preference) { @@ -1638,7 +1638,7 @@ exports[`SiteHeader has first item highlighted (About) if we are on the /about s } .emotion-9 svg { - fill: #2E2E2E; + fill: #2E3F54; } .emotion-10 { @@ -1688,8 +1688,8 @@ exports[`SiteHeader has first item highlighted (About) if we are on the /about s } .emotion-13 { - fill: #162740; - color: #162740; + fill: #09111C; + color: #09111C; } @media screen { @@ -1751,7 +1751,7 @@ exports[`SiteHeader has first item highlighted (About) if we are on the /about s .emotion-17 { display: inline-block; - color: #577FFB; + color: #3358CC; -webkit-text-decoration: none; text-decoration: none; } @@ -1773,27 +1773,27 @@ exports[`SiteHeader has first item highlighted (About) if we are on the /about s } .emotion-17 svg { - fill: #577FFB; + fill: #3358CC; } .emotion-17:hover:not(:disabled) { - color: #3358CC; + color: #254CAC; -webkit-text-decoration: underline; text-decoration: underline; } .emotion-17:hover:not(:disabled) svg { - fill: #3358CC; + fill: #254CAC; } .emotion-17:active:not(:disabled) { - color: #213A82; + color: #14328D; -webkit-text-decoration: underline; text-decoration: underline; } .emotion-17:active:not(:disabled) svg { - fill: #213A82; + fill: #14328D; } .emotion-17:focus-visible:not(:disabled) { @@ -1869,7 +1869,7 @@ exports[`SiteHeader has first item highlighted (About) if we are on the /about s -moz-appearance: none; -ms-appearance: none; appearance: none; - color: #535353; + color: #5A6A79; -webkit-text-decoration: none; text-decoration: none; border-color: transparent; @@ -1878,10 +1878,10 @@ exports[`SiteHeader has first item highlighted (About) if we are on the /about s margin: 0; cursor: pointer; margin-inline: 10px; - color: #577FFB; + color: #3358CC; -webkit-text-decoration: none; text-decoration: none; - border-color: transparent transparent #577FFB transparent; + border-color: transparent transparent #3358CC transparent; border-width: 4px; border-style: solid; -webkit-box-pack: center; @@ -1909,7 +1909,7 @@ exports[`SiteHeader has first item highlighted (About) if we are on the /about s } .emotion-25:hover:not(:disabled) { - color: #535353; + color: #5A6A79; -webkit-text-decoration: none; text-decoration: none; } @@ -2007,7 +2007,7 @@ exports[`SiteHeader has first item highlighted (About) if we are on the /about s -moz-appearance: none; -ms-appearance: none; appearance: none; - color: #535353; + color: #5A6A79; -webkit-text-decoration: none; text-decoration: none; border-color: transparent; @@ -2041,7 +2041,7 @@ exports[`SiteHeader has first item highlighted (About) if we are on the /about s } .emotion-30:hover:not(:disabled) { - color: #535353; + color: #5A6A79; -webkit-text-decoration: none; text-decoration: none; } @@ -2121,10 +2121,10 @@ exports[`SiteHeader has first item highlighted (About) if we are on the /about s appearance: none; background-color: transparent; border-style: solid; - border-color: #535353; + border-color: #2E3F54; border-width: 1px; border-radius: 24px; - color: #2E2E2E; + color: #2E3F54; margin: 0; cursor: pointer; } @@ -2135,26 +2135,26 @@ exports[`SiteHeader has first item highlighted (About) if we are on the /about s } .emotion-50 svg { - fill: #2E2E2E; + fill: #2E3F54; } .emotion-50:hover:not(:disabled) { - background-color: #F4F4F4; - border-color: #2E2E2E; + background-color: #F0F1F3; + border-color: #15263E; } .emotion-50:active:not(:disabled) { - background-color: #CCCCCC; - border-color: #0A0A0A; + background-color: #DEE2E5; + border-color: #09111C; } .emotion-50:disabled { - border-color: #F4F4F4; - color: #C0C0C0; + border-color: #DEE2E5; + color: #C0C7CC; } .emotion-50:disabled svg { - fill: #C0C0C0; + fill: #C0C7CC; } .emotion-50:focus-visible:not(:disabled) { @@ -2189,7 +2189,7 @@ exports[`SiteHeader has first item highlighted (About) if we are on the /about s } .emotion-53 { - fill: #2E2E2E; + fill: #2E3F54; vertical-align: unset; display: inline-block; } @@ -2263,7 +2263,7 @@ exports[`SiteHeader has first item highlighted (About) if we are on the /about s -moz-appearance: none; -ms-appearance: none; appearance: none; - background-color: #F4F4F4; + background-color: #F0F1F3; border-radius: 50%; margin: 0; cursor: pointer; @@ -2275,11 +2275,11 @@ exports[`SiteHeader has first item highlighted (About) if we are on the /about s } .emotion-57:hover:not(:disabled) { - background-color: #CCCCCC; + background-color: #DEE2E5; } .emotion-57:active:not(:disabled) { - background-color: #CCCCCC; + background-color: #DEE2E5; } .emotion-57:focus-visible:not(:disabled) { @@ -2314,7 +2314,7 @@ exports[`SiteHeader has first item highlighted (About) if we are on the /about s } .emotion-60 { - fill: #2E2E2E; + fill: #2E3F54; vertical-align: unset; display: inline-block; } @@ -2748,7 +2748,7 @@ exports[`SiteHeader has no highlighted items if we are on the homepage 1`] = ` z-index: 4; height: 48px; border-bottom-width: 1px; - border-bottom-color: #E4E4E4; + border-bottom-color: #DEE2E5; background-color: #FFFFFF; font-family: "Poppins",sans-serif; font-size: 14px; @@ -2844,7 +2844,7 @@ exports[`SiteHeader has no highlighted items if we are on the homepage 1`] = ` appearance: none; background-color: transparent; border-radius: 50%; - color: #577FFB; + color: #3358CC; margin: 0; cursor: pointer; } @@ -2855,24 +2855,24 @@ exports[`SiteHeader has no highlighted items if we are on the homepage 1`] = ` } .emotion-4 svg { - fill: #577FFB; + fill: #3358CC; } .emotion-4:hover:not(:disabled) { - background-color: #E0E7FF; + background-color: #ECF1FF; } .emotion-4:active:not(:disabled) { - background-color: #AEBFFF; + background-color: #D5E0FC; } .emotion-4:disabled { background-color: transparent; - color: #C0C0C0; + color: #C0C7CC; } .emotion-4:disabled svg { - fill: #C0C0C0; + fill: #C0C7CC; } .emotion-4:focus-visible:not(:disabled) { @@ -2940,8 +2940,8 @@ exports[`SiteHeader has no highlighted items if we are on the homepage 1`] = ` display: inline-block; vertical-align: middle; overflow: hidden; - color: #0A0A0A; - fill: #0A0A0A; + color: #09111C; + fill: #09111C; vertical-align: unset; display: inline-block; } @@ -2965,8 +2965,8 @@ exports[`SiteHeader has no highlighted items if we are on the homepage 1`] = ` .emotion-7.emotion-7 { width: 24px; height: 24px; - color: #0A0A0A; - fill: #0A0A0A; + color: #09111C; + fill: #09111C; } @media screen and (prefers-reduced-motion: no-preference) { @@ -2987,7 +2987,7 @@ exports[`SiteHeader has no highlighted items if we are on the homepage 1`] = ` .emotion-9 { display: inline-block; - color: #2E2E2E; + color: #2E3F54; } @media screen and (prefers-reduced-motion: no-preference) { @@ -3007,7 +3007,7 @@ exports[`SiteHeader has no highlighted items if we are on the homepage 1`] = ` } .emotion-9 svg { - fill: #2E2E2E; + fill: #2E3F54; } .emotion-10 { @@ -3057,8 +3057,8 @@ exports[`SiteHeader has no highlighted items if we are on the homepage 1`] = ` } .emotion-13 { - fill: #162740; - color: #162740; + fill: #09111C; + color: #09111C; } @media screen { @@ -3120,7 +3120,7 @@ exports[`SiteHeader has no highlighted items if we are on the homepage 1`] = ` .emotion-17 { display: inline-block; - color: #577FFB; + color: #3358CC; -webkit-text-decoration: none; text-decoration: none; } @@ -3142,27 +3142,27 @@ exports[`SiteHeader has no highlighted items if we are on the homepage 1`] = ` } .emotion-17 svg { - fill: #577FFB; + fill: #3358CC; } .emotion-17:hover:not(:disabled) { - color: #3358CC; + color: #254CAC; -webkit-text-decoration: underline; text-decoration: underline; } .emotion-17:hover:not(:disabled) svg { - fill: #3358CC; + fill: #254CAC; } .emotion-17:active:not(:disabled) { - color: #213A82; + color: #14328D; -webkit-text-decoration: underline; text-decoration: underline; } .emotion-17:active:not(:disabled) svg { - fill: #213A82; + fill: #14328D; } .emotion-17:focus-visible:not(:disabled) { @@ -3238,7 +3238,7 @@ exports[`SiteHeader has no highlighted items if we are on the homepage 1`] = ` -moz-appearance: none; -ms-appearance: none; appearance: none; - color: #535353; + color: #5A6A79; -webkit-text-decoration: none; text-decoration: none; border-color: transparent; @@ -3272,7 +3272,7 @@ exports[`SiteHeader has no highlighted items if we are on the homepage 1`] = ` } .emotion-25:hover:not(:disabled) { - color: #535353; + color: #5A6A79; -webkit-text-decoration: none; text-decoration: none; } @@ -3375,10 +3375,10 @@ exports[`SiteHeader has no highlighted items if we are on the homepage 1`] = ` appearance: none; background-color: transparent; border-style: solid; - border-color: #535353; + border-color: #2E3F54; border-width: 1px; border-radius: 24px; - color: #2E2E2E; + color: #2E3F54; margin: 0; cursor: pointer; } @@ -3389,26 +3389,26 @@ exports[`SiteHeader has no highlighted items if we are on the homepage 1`] = ` } .emotion-50 svg { - fill: #2E2E2E; + fill: #2E3F54; } .emotion-50:hover:not(:disabled) { - background-color: #F4F4F4; - border-color: #2E2E2E; + background-color: #F0F1F3; + border-color: #15263E; } .emotion-50:active:not(:disabled) { - background-color: #CCCCCC; - border-color: #0A0A0A; + background-color: #DEE2E5; + border-color: #09111C; } .emotion-50:disabled { - border-color: #F4F4F4; - color: #C0C0C0; + border-color: #DEE2E5; + color: #C0C7CC; } .emotion-50:disabled svg { - fill: #C0C0C0; + fill: #C0C7CC; } .emotion-50:focus-visible:not(:disabled) { @@ -3443,7 +3443,7 @@ exports[`SiteHeader has no highlighted items if we are on the homepage 1`] = ` } .emotion-53 { - fill: #2E2E2E; + fill: #2E3F54; vertical-align: unset; display: inline-block; } @@ -3517,7 +3517,7 @@ exports[`SiteHeader has no highlighted items if we are on the homepage 1`] = ` -moz-appearance: none; -ms-appearance: none; appearance: none; - background-color: #F4F4F4; + background-color: #F0F1F3; border-radius: 50%; margin: 0; cursor: pointer; @@ -3529,11 +3529,11 @@ exports[`SiteHeader has no highlighted items if we are on the homepage 1`] = ` } .emotion-57:hover:not(:disabled) { - background-color: #CCCCCC; + background-color: #DEE2E5; } .emotion-57:active:not(:disabled) { - background-color: #CCCCCC; + background-color: #DEE2E5; } .emotion-57:focus-visible:not(:disabled) { @@ -3568,7 +3568,7 @@ exports[`SiteHeader has no highlighted items if we are on the homepage 1`] = ` } .emotion-60 { - fill: #2E2E2E; + fill: #2E3F54; vertical-align: unset; display: inline-block; } diff --git a/site/components/base-card/__tests__/__snapshots__/base-card.test.tsx.snap b/site/components/base-card/__tests__/__snapshots__/base-card.test.tsx.snap index df9d992a2f..e58f31724a 100644 --- a/site/components/base-card/__tests__/__snapshots__/base-card.test.tsx.snap +++ b/site/components/base-card/__tests__/__snapshots__/base-card.test.tsx.snap @@ -62,16 +62,16 @@ exports[`BaseCard Renders default (vertical) non-interactive card 1`] = ` display: inline; font: inherit; margin: 0; - color: #0A0A0A; + color: #09111C; } .emotion-5 svg { - fill: #0A0A0A; + fill: #09111C; } .emotion-6 { margin: 0; - color: #2E2E2E; + color: #2E3F54; font-family: "DM Sans",sans-serif; font-size: 16px; line-height: 24px; @@ -81,7 +81,7 @@ exports[`BaseCard Renders default (vertical) non-interactive card 1`] = ` } .emotion-6 svg { - fill: #2E2E2E; + fill: #2E3F54; } .emotion-6::before { @@ -137,7 +137,7 @@ exports[`BaseCard Renders horizontal interactive card 1`] = ` border-style: solid; border-radius: 12px; border-width: 1px; - border-color: #E4E4E4; + border-color: #DEE2E5; position: relative; display: -webkit-box; display: -webkit-flex; @@ -193,31 +193,31 @@ exports[`BaseCard Renders horizontal interactive card 1`] = ` } .emotion-4 .nk-headline-kicker { - color: #577FFB; + color: #3358CC; } .emotion-4:hover:not(:disabled) .nk-headline-kicker { - color: #3358CC; + color: #254CAC; -webkit-text-decoration: underline; text-decoration: underline; } .emotion-4:active:not(:disabled) .nk-headline-kicker { - color: #213A82; + color: #14328D; -webkit-text-decoration: underline; text-decoration: underline; } .emotion-4:visited:not(:disabled) .nk-headline-kicker { - color: #5E44E4; + color: #6454E3; } .emotion-4 .nk-headline-heading { - color: #0A0A0A; + color: #09111C; } .emotion-4 .nk-headline-heading svg { - fill: #0A0A0A; + fill: #09111C; } .emotion-4:before { @@ -256,16 +256,16 @@ exports[`BaseCard Renders horizontal interactive card 1`] = ` display: inline; font: inherit; margin: 0; - color: #0A0A0A; + color: #09111C; } .emotion-6 svg { - fill: #0A0A0A; + fill: #09111C; } .emotion-7 { margin: 0; - color: #2E2E2E; + color: #2E3F54; font-family: "DM Sans",sans-serif; font-size: 16px; line-height: 24px; @@ -275,7 +275,7 @@ exports[`BaseCard Renders horizontal interactive card 1`] = ` } .emotion-7 svg { - fill: #2E2E2E; + fill: #2E3F54; } .emotion-7::before { @@ -403,16 +403,16 @@ exports[`BaseCard Renders horizontal non-interactive card 1`] = ` display: inline; font: inherit; margin: 0; - color: #0A0A0A; + color: #09111C; } .emotion-5 svg { - fill: #0A0A0A; + fill: #09111C; } .emotion-6 { margin: 0; - color: #2E2E2E; + color: #2E3F54; font-family: "DM Sans",sans-serif; font-size: 16px; line-height: 24px; @@ -422,7 +422,7 @@ exports[`BaseCard Renders horizontal non-interactive card 1`] = ` } .emotion-6 svg { - fill: #2E2E2E; + fill: #2E3F54; } .emotion-6::before { @@ -478,7 +478,7 @@ exports[`BaseCard Renders vertical interactive card 1`] = ` border-style: solid; border-radius: 12px; border-width: 1px; - border-color: #E4E4E4; + border-color: #DEE2E5; position: relative; display: -webkit-box; display: -webkit-flex; @@ -521,31 +521,31 @@ exports[`BaseCard Renders vertical interactive card 1`] = ` } .emotion-4 .nk-headline-kicker { - color: #577FFB; + color: #3358CC; } .emotion-4:hover:not(:disabled) .nk-headline-kicker { - color: #3358CC; + color: #254CAC; -webkit-text-decoration: underline; text-decoration: underline; } .emotion-4:active:not(:disabled) .nk-headline-kicker { - color: #213A82; + color: #14328D; -webkit-text-decoration: underline; text-decoration: underline; } .emotion-4:visited:not(:disabled) .nk-headline-kicker { - color: #5E44E4; + color: #6454E3; } .emotion-4 .nk-headline-heading { - color: #0A0A0A; + color: #09111C; } .emotion-4 .nk-headline-heading svg { - fill: #0A0A0A; + fill: #09111C; } .emotion-4:before { @@ -584,16 +584,16 @@ exports[`BaseCard Renders vertical interactive card 1`] = ` display: inline; font: inherit; margin: 0; - color: #0A0A0A; + color: #09111C; } .emotion-6 svg { - fill: #0A0A0A; + fill: #09111C; } .emotion-7 { margin: 0; - color: #2E2E2E; + color: #2E3F54; font-family: "DM Sans",sans-serif; font-size: 16px; line-height: 24px; @@ -603,7 +603,7 @@ exports[`BaseCard Renders vertical interactive card 1`] = ` } .emotion-7 svg { - fill: #2E2E2E; + fill: #2E3F54; } .emotion-7::before { diff --git a/site/components/border-card/__tests__/__snapshots__/border-card.test.tsx.snap b/site/components/border-card/__tests__/__snapshots__/border-card.test.tsx.snap index 45faa3380c..4dcc61d702 100644 --- a/site/components/border-card/__tests__/__snapshots__/border-card.test.tsx.snap +++ b/site/components/border-card/__tests__/__snapshots__/border-card.test.tsx.snap @@ -10,8 +10,8 @@ exports[`BorderCard renders default card 1`] = ` width: 80px; height: 80px; border: solid; - border-color: #0A0A0A; - background: #FAFAFA; + border-color: #111111; + background: #F1F1F1; border-radius: 8px; border-width: 1px; } @@ -32,8 +32,8 @@ exports[`BorderCard renders with different borderRadius token 1`] = ` width: 80px; height: 80px; border: solid; - border-color: #0A0A0A; - background: #FAFAFA; + border-color: #111111; + background: #F1F1F1; border-radius: 50%; border-width: 1px; } @@ -54,8 +54,8 @@ exports[`BorderCard renders with different borderWidth token 1`] = ` width: 80px; height: 80px; border: solid; - border-color: #0A0A0A; - background: #FAFAFA; + border-color: #111111; + background: #F1F1F1; border-radius: 8px; border-width: 0; } @@ -76,8 +76,8 @@ exports[`BorderCard renders with different boxShadow token 1`] = ` width: 80px; height: 80px; border: solid; - border-color: #0A0A0A; - background: #FAFAFA; + border-color: #111111; + background: #F1F1F1; border-radius: 8px; border-width: 0; box-shadow: 0 0 2px 0 rgba(10,10,10,0.08); diff --git a/site/components/component-api/__tests__/__snapshots__/component-api.test.tsx.snap b/site/components/component-api/__tests__/__snapshots__/component-api.test.tsx.snap index 9030a015f9..2e8b62be37 100644 --- a/site/components/component-api/__tests__/__snapshots__/component-api.test.tsx.snap +++ b/site/components/component-api/__tests__/__snapshots__/component-api.test.tsx.snap @@ -60,9 +60,9 @@ exports[`ComponentAPI renders with mandatory props for one component 1`] = ` .emotion-4 { border-style: solid; - border-color: #BBC3C9; + border-color: #C0C7CC; border-width: 0 0 1px 0; - color: #0A0A0A; + color: #09111C; font-family: "Poppins",sans-serif; font-size: 12px; line-height: 1.5; @@ -79,9 +79,9 @@ exports[`ComponentAPI renders with mandatory props for one component 1`] = ` .emotion-5 { border-style: solid; - border-color: #BBC3C9; + border-color: #C0C7CC; border-width: 0 0 1px 0; - color: #0A0A0A; + color: #09111C; font-family: "Poppins",sans-serif; font-size: 12px; line-height: 1.5; @@ -98,9 +98,9 @@ exports[`ComponentAPI renders with mandatory props for one component 1`] = ` .emotion-8 { border-style: solid; - border-color: #BBC3C9; + border-color: #C0C7CC; border-width: 0 0 1px 0; - color: #0A0A0A; + color: #09111C; font-family: "Poppins",sans-serif; font-size: 12px; line-height: 1.5; @@ -117,9 +117,9 @@ exports[`ComponentAPI renders with mandatory props for one component 1`] = ` .emotion-9 { border-style: solid; - border-color: #E4E4E4; + border-color: #DEE2E5; border-width: 0 0 1px 0; - color: #2E2E2E; + color: #2E3F54; font-family: "DM Sans",sans-serif; font-size: 14px; line-height: 1.5; @@ -166,9 +166,9 @@ exports[`ComponentAPI renders with mandatory props for one component 1`] = ` -moz-appearance: none; -ms-appearance: none; appearance: none; - background-color: #F4F4F4; + background-color: #F0F1F3; border-radius: 4px; - color: #2E2E2E; + color: #2E3F54; white-space: nowrap; } @@ -178,7 +178,7 @@ exports[`ComponentAPI renders with mandatory props for one component 1`] = ` } .emotion-12 svg { - fill: #2E2E2E; + fill: #2E3F54; } .emotion-13 { @@ -272,8 +272,8 @@ exports[`ComponentAPI renders with mandatory props for one component 1`] = ` -ms-appearance: none; appearance: none; border-style: solid; - border-color: #0A782A; - background-color: #E6FAEB; + border-color: #007B22; + background-color: #E5F4EA; border-radius: 50%; border-width: 1px; } @@ -284,14 +284,14 @@ exports[`ComponentAPI renders with mandatory props for one component 1`] = ` } .emotion-19 svg { - fill: #0A782A; + fill: #007B22; } .emotion-22 { display: inline-block; vertical-align: middle; overflow: hidden; - fill: #0A782A; + fill: #007B22; vertical-align: unset; display: inline-block; } @@ -313,7 +313,7 @@ exports[`ComponentAPI renders with mandatory props for one component 1`] = ` } .emotion-22.emotion-22 { - fill: #0A782A; + fill: #007B22; } @media screen and (prefers-reduced-motion: no-preference) { @@ -520,12 +520,12 @@ exports[`ComponentAPI renders with props for multiple components 1`] = ` .emotion-3 { margin: 0; - color: #0A0A0A; + color: #09111C; display: inline-block; } .emotion-3 svg { - fill: #0A0A0A; + fill: #09111C; } @media screen and (max-width: 1439px) { @@ -580,11 +580,11 @@ exports[`ComponentAPI renders with props for multiple components 1`] = ` .emotion-5 { margin: 0; - color: #2E2E2E; + color: #2E3F54; } .emotion-5 svg { - fill: #2E2E2E; + fill: #2E3F54; } @media screen and (max-width: 1439px) { @@ -645,9 +645,9 @@ exports[`ComponentAPI renders with props for multiple components 1`] = ` .emotion-8 { border-style: solid; - border-color: #BBC3C9; + border-color: #C0C7CC; border-width: 0 0 1px 0; - color: #0A0A0A; + color: #09111C; font-family: "Poppins",sans-serif; font-size: 12px; line-height: 1.5; @@ -664,9 +664,9 @@ exports[`ComponentAPI renders with props for multiple components 1`] = ` .emotion-9 { border-style: solid; - border-color: #BBC3C9; + border-color: #C0C7CC; border-width: 0 0 1px 0; - color: #0A0A0A; + color: #09111C; font-family: "Poppins",sans-serif; font-size: 12px; line-height: 1.5; @@ -683,9 +683,9 @@ exports[`ComponentAPI renders with props for multiple components 1`] = ` .emotion-12 { border-style: solid; - border-color: #BBC3C9; + border-color: #C0C7CC; border-width: 0 0 1px 0; - color: #0A0A0A; + color: #09111C; font-family: "Poppins",sans-serif; font-size: 12px; line-height: 1.5; @@ -702,9 +702,9 @@ exports[`ComponentAPI renders with props for multiple components 1`] = ` .emotion-13 { border-style: solid; - border-color: #E4E4E4; + border-color: #DEE2E5; border-width: 0 0 1px 0; - color: #2E2E2E; + color: #2E3F54; font-family: "DM Sans",sans-serif; font-size: 14px; line-height: 1.5; @@ -751,9 +751,9 @@ exports[`ComponentAPI renders with props for multiple components 1`] = ` -moz-appearance: none; -ms-appearance: none; appearance: none; - background-color: #F4F4F4; + background-color: #F0F1F3; border-radius: 4px; - color: #2E2E2E; + color: #2E3F54; white-space: nowrap; } @@ -763,7 +763,7 @@ exports[`ComponentAPI renders with props for multiple components 1`] = ` } .emotion-16 svg { - fill: #2E2E2E; + fill: #2E3F54; } .emotion-17 { @@ -857,8 +857,8 @@ exports[`ComponentAPI renders with props for multiple components 1`] = ` -ms-appearance: none; appearance: none; border-style: solid; - border-color: #0A782A; - background-color: #E6FAEB; + border-color: #007B22; + background-color: #E5F4EA; border-radius: 50%; border-width: 1px; } @@ -869,14 +869,14 @@ exports[`ComponentAPI renders with props for multiple components 1`] = ` } .emotion-23 svg { - fill: #0A782A; + fill: #007B22; } .emotion-26 { display: inline-block; vertical-align: middle; overflow: hidden; - fill: #0A782A; + fill: #007B22; vertical-align: unset; display: inline-block; } @@ -898,7 +898,7 @@ exports[`ComponentAPI renders with props for multiple components 1`] = ` } .emotion-26.emotion-26 { - fill: #0A782A; + fill: #007B22; } @media screen and (prefers-reduced-motion: no-preference) { @@ -1039,13 +1039,13 @@ exports[`ComponentAPI renders with props for multiple components 1`] = ` appearance: none; border-radius: borderRadiusSharp; background-color: transparent; - color: #535353; + color: #5A6A79; margin: 0; cursor: pointer; border-radius: borderRadiusSharp; background-color: transparent; - color: #0A0A0A; - border-color: #577FFB; + color: #09111C; + border-color: #3358CC; } .emotion-40 svg { @@ -1054,11 +1054,11 @@ exports[`ComponentAPI renders with props for multiple components 1`] = ` } .emotion-40:hover:not(:disabled) { - color: #2E2E2E; + color: #2E3F54; } .emotion-40:active:not(:disabled) { - color: #2E2E2E; + color: #2E3F54; } @media screen and (prefers-reduced-motion: no-preference) { @@ -1162,7 +1162,7 @@ exports[`ComponentAPI renders with props for multiple components 1`] = ` appearance: none; border-radius: borderRadiusSharp; background-color: transparent; - color: #535353; + color: #5A6A79; margin: 0; cursor: pointer; } @@ -1173,11 +1173,11 @@ exports[`ComponentAPI renders with props for multiple components 1`] = ` } .emotion-46:hover:not(:disabled) { - color: #2E2E2E; + color: #2E3F54; } .emotion-46:active:not(:disabled) { - color: #2E2E2E; + color: #2E3F54; } @media screen and (prefers-reduced-motion: no-preference) { @@ -1197,7 +1197,7 @@ exports[`ComponentAPI renders with props for multiple components 1`] = ` } .emotion-50 { - background-color: #577FFB; + background-color: #3358CC; position: absolute; z-index: 2; bottom: 0px; @@ -1205,7 +1205,7 @@ exports[`ComponentAPI renders with props for multiple components 1`] = ` } .emotion-51 { - background-color: #E4E4E4; + background-color: #DEE2E5; display: block; position: absolute; z-index: 1; diff --git a/site/components/content-structure/__tests__/__snapshots__/content-structure.test.tsx.snap b/site/components/content-structure/__tests__/__snapshots__/content-structure.test.tsx.snap index 0f699df1a9..c91aaa8ea3 100644 --- a/site/components/content-structure/__tests__/__snapshots__/content-structure.test.tsx.snap +++ b/site/components/content-structure/__tests__/__snapshots__/content-structure.test.tsx.snap @@ -89,11 +89,11 @@ exports[`Content Primary renders with description and children 1`] = ` .emotion-2 { margin: 0; - color: #2E2E2E; + color: #2E3F54; } .emotion-2 svg { - fill: #2E2E2E; + fill: #2E3F54; } @media screen and (max-width: 767px) { @@ -306,11 +306,11 @@ exports[`Content Primary renders with description only 1`] = ` .emotion-2 { margin: 0; - color: #2E2E2E; + color: #2E3F54; } .emotion-2 svg { - fill: #2E2E2E; + fill: #2E3F54; } @media screen and (max-width: 767px) { @@ -477,11 +477,11 @@ exports[`Content Primary renders with headline and children 1`] = ` .emotion-2 { margin: 0; - color: #0A0A0A; + color: #09111C; } .emotion-2 svg { - fill: #0A0A0A; + fill: #09111C; } @media screen and (max-width: 767px) { @@ -696,11 +696,11 @@ exports[`Content Primary renders with headline and description 1`] = ` .emotion-2 { margin: 0; - color: #0A0A0A; + color: #09111C; } .emotion-2 svg { - fill: #0A0A0A; + fill: #09111C; } @media screen and (max-width: 767px) { @@ -821,11 +821,11 @@ exports[`Content Primary renders with headline and description 1`] = ` .emotion-5 { margin: 0; - color: #2E2E2E; + color: #2E3F54; } .emotion-5 svg { - fill: #2E2E2E; + fill: #2E3F54; } @media screen and (max-width: 767px) { @@ -1006,11 +1006,11 @@ exports[`Content Primary renders with headline only 1`] = ` .emotion-2 { margin: 0; - color: #0A0A0A; + color: #09111C; } .emotion-2 svg { - fill: #0A0A0A; + fill: #09111C; } @media screen and (max-width: 767px) { @@ -1179,11 +1179,11 @@ exports[`Content Primary renders with headline, description and content 1`] = ` .emotion-2 { margin: 0; - color: #0A0A0A; + color: #09111C; } .emotion-2 svg { - fill: #0A0A0A; + fill: #09111C; } @media screen and (max-width: 767px) { @@ -1304,11 +1304,11 @@ exports[`Content Primary renders with headline, description and content 1`] = ` .emotion-5 { margin: 0; - color: #2E2E2E; + color: #2E3F54; } .emotion-5 svg { - fill: #2E2E2E; + fill: #2E3F54; } @media screen and (max-width: 767px) { @@ -1603,11 +1603,11 @@ exports[`Content Secondary renders with description and children 1`] = ` .emotion-2 { margin: 0; - color: #2E2E2E; + color: #2E3F54; } .emotion-2 svg { - fill: #2E2E2E; + fill: #2E3F54; } @media screen and (max-width: 767px) { @@ -1820,11 +1820,11 @@ exports[`Content Secondary renders with description only 1`] = ` .emotion-2 { margin: 0; - color: #2E2E2E; + color: #2E3F54; } .emotion-2 svg { - fill: #2E2E2E; + fill: #2E3F54; } @media screen and (max-width: 767px) { @@ -1991,11 +1991,11 @@ exports[`Content Secondary renders with headline and children 1`] = ` .emotion-2 { margin: 0; - color: #0A0A0A; + color: #09111C; } .emotion-2 svg { - fill: #0A0A0A; + fill: #09111C; } @media screen and (max-width: 767px) { @@ -2208,11 +2208,11 @@ exports[`Content Secondary renders with headline and description 1`] = ` .emotion-2 { margin: 0; - color: #0A0A0A; + color: #09111C; } .emotion-2 svg { - fill: #0A0A0A; + fill: #09111C; } @media screen and (max-width: 767px) { @@ -2333,11 +2333,11 @@ exports[`Content Secondary renders with headline and description 1`] = ` .emotion-5 { margin: 0; - color: #2E2E2E; + color: #2E3F54; } .emotion-5 svg { - fill: #2E2E2E; + fill: #2E3F54; } @media screen and (max-width: 767px) { @@ -2516,11 +2516,11 @@ exports[`Content Secondary renders with headline only 1`] = ` .emotion-2 { margin: 0; - color: #0A0A0A; + color: #09111C; } .emotion-2 svg { - fill: #0A0A0A; + fill: #09111C; } @media screen and (max-width: 767px) { @@ -2687,11 +2687,11 @@ exports[`Content Secondary renders with headline, description and content 1`] = .emotion-2 { margin: 0; - color: #0A0A0A; + color: #09111C; } .emotion-2 svg { - fill: #0A0A0A; + fill: #09111C; } @media screen and (max-width: 767px) { @@ -2812,11 +2812,11 @@ exports[`Content Secondary renders with headline, description and content 1`] = .emotion-5 { margin: 0; - color: #2E2E2E; + color: #2E3F54; } .emotion-5 svg { - fill: #2E2E2E; + fill: #2E3F54; } @media screen and (max-width: 767px) { @@ -3129,11 +3129,11 @@ exports[`Content Tertiary renders with description and children 1`] = ` .emotion-2 { margin: 0; - color: #2E2E2E; + color: #2E3F54; } .emotion-2 svg { - fill: #2E2E2E; + fill: #2E3F54; } @media screen and (max-width: 767px) { @@ -3346,11 +3346,11 @@ exports[`Content Tertiary renders with description only 1`] = ` .emotion-2 { margin: 0; - color: #2E2E2E; + color: #2E3F54; } .emotion-2 svg { - fill: #2E2E2E; + fill: #2E3F54; } @media screen and (max-width: 767px) { @@ -3517,11 +3517,11 @@ exports[`Content Tertiary renders with headline and children 1`] = ` .emotion-2 { margin: 0; - color: #0A0A0A; + color: #09111C; } .emotion-2 svg { - fill: #0A0A0A; + fill: #09111C; } @media screen and (max-width: 767px) { @@ -3734,11 +3734,11 @@ exports[`Content Tertiary renders with headline and description 1`] = ` .emotion-2 { margin: 0; - color: #0A0A0A; + color: #09111C; } .emotion-2 svg { - fill: #0A0A0A; + fill: #09111C; } @media screen and (max-width: 767px) { @@ -3859,11 +3859,11 @@ exports[`Content Tertiary renders with headline and description 1`] = ` .emotion-5 { margin: 0; - color: #2E2E2E; + color: #2E3F54; } .emotion-5 svg { - fill: #2E2E2E; + fill: #2E3F54; } @media screen and (max-width: 767px) { @@ -4042,11 +4042,11 @@ exports[`Content Tertiary renders with headline only 1`] = ` .emotion-2 { margin: 0; - color: #0A0A0A; + color: #09111C; } .emotion-2 svg { - fill: #0A0A0A; + fill: #09111C; } @media screen and (max-width: 767px) { @@ -4213,11 +4213,11 @@ exports[`Content Tertiary renders with headline, description and content 1`] = ` .emotion-2 { margin: 0; - color: #0A0A0A; + color: #09111C; } .emotion-2 svg { - fill: #0A0A0A; + fill: #09111C; } @media screen and (max-width: 767px) { @@ -4338,11 +4338,11 @@ exports[`Content Tertiary renders with headline, description and content 1`] = ` .emotion-5 { margin: 0; - color: #2E2E2E; + color: #2E3F54; } .emotion-5 svg { - fill: #2E2E2E; + fill: #2E3F54; } @media screen and (max-width: 767px) { diff --git a/site/components/feature-card/__tests__/__snapshots__/feature-card.test.tsx.snap b/site/components/feature-card/__tests__/__snapshots__/feature-card.test.tsx.snap index 5f2a406ffc..0d75b7147f 100644 --- a/site/components/feature-card/__tests__/__snapshots__/feature-card.test.tsx.snap +++ b/site/components/feature-card/__tests__/__snapshots__/feature-card.test.tsx.snap @@ -376,7 +376,7 @@ exports[`FeatureCard Renders horizontal card with clickable button only 1`] = ` display: inline-block; vertical-align: middle; overflow: hidden; - fill: #2E2E2E; + fill: #3B3B3B; vertical-align: unset; display: inline-block; } @@ -916,7 +916,7 @@ exports[`FeatureCard Renders horizontal card with clickable button only 1`] = ` display: inline-block; vertical-align: middle; overflow: hidden; - fill: #2E2E2E; + fill: #3B3B3B; vertical-align: unset; display: inline-block; } @@ -1428,7 +1428,7 @@ exports[`FeatureCard Renders interactive horizontal card with button 1`] = ` display: inline-block; vertical-align: middle; overflow: hidden; - fill: #2E2E2E; + fill: #3B3B3B; vertical-align: unset; display: inline-block; } @@ -2654,7 +2654,7 @@ exports[`FeatureCard Renders interactive vertical card with button 1`] = ` display: inline-block; vertical-align: middle; overflow: hidden; - fill: #2E2E2E; + fill: #3B3B3B; vertical-align: unset; display: inline-block; } @@ -4604,7 +4604,7 @@ exports[`FeatureCard Renders vertical card with clickable button only 1`] = ` display: inline-block; vertical-align: middle; overflow: hidden; - fill: #2E2E2E; + fill: #3B3B3B; vertical-align: unset; display: inline-block; } diff --git a/site/components/flags/mono-color/__tests__/__snapshots__/mono-color.test.tsx.snap b/site/components/flags/mono-color/__tests__/__snapshots__/mono-color.test.tsx.snap index a6bc237142..1bc0a1e227 100644 --- a/site/components/flags/mono-color/__tests__/__snapshots__/mono-color.test.tsx.snap +++ b/site/components/flags/mono-color/__tests__/__snapshots__/mono-color.test.tsx.snap @@ -27,7 +27,7 @@ exports[`MonoColor renders mono token with color 1`] = ` -moz-appearance: none; -ms-appearance: none; appearance: none; - background-color: #535353; + background-color: #3B3B3B; border-radius: 0; color: #FFFFFF; } @@ -75,10 +75,10 @@ exports[`MonoColor renders mono token with color 1`] = ` display: inline-block; height: 12px; width: 12px; - background: #D20600; + background: #D60000; border-radius: 50%; border: 1px solid; - border-color: #DEDEDE; + border-color: #C6C6C6; } .emotion-5 { diff --git a/site/components/flags/mono-keyboard/__tests__/__snapshots__/mono-keyboard.test.tsx.snap b/site/components/flags/mono-keyboard/__tests__/__snapshots__/mono-keyboard.test.tsx.snap index f0abba6338..76017b70b5 100644 --- a/site/components/flags/mono-keyboard/__tests__/__snapshots__/mono-keyboard.test.tsx.snap +++ b/site/components/flags/mono-keyboard/__tests__/__snapshots__/mono-keyboard.test.tsx.snap @@ -36,7 +36,7 @@ exports[`MonoKeyboard with multiple keys should render as expected 1`] = ` display: inline-block; vertical-align: middle; overflow: hidden; - fill: #2E2E2E; + fill: #2E3F54; vertical-align: unset; display: inline-block; } @@ -66,8 +66,8 @@ exports[`MonoKeyboard with multiple keys should render as expected 1`] = ` display: inline-block; vertical-align: middle; overflow: hidden; - color: #577FFB; - fill: #577FFB; + color: #3358CC; + fill: #3358CC; vertical-align: unset; display: inline-block; } @@ -91,8 +91,8 @@ exports[`MonoKeyboard with multiple keys should render as expected 1`] = ` .emotion-6.emotion-6 { width: 16px; height: 16px; - color: #577FFB; - fill: #577FFB; + color: #3358CC; + fill: #3358CC; } @media screen and (prefers-reduced-motion: no-preference) { @@ -256,8 +256,8 @@ exports[`MonoKeyboard with single key should render the IconOutlinedKeyboardArro display: inline-block; vertical-align: middle; overflow: hidden; - color: #577FFB; - fill: #577FFB; + color: #3358CC; + fill: #3358CC; vertical-align: unset; display: inline-block; } @@ -281,8 +281,8 @@ exports[`MonoKeyboard with single key should render the IconOutlinedKeyboardArro .emotion-2.emotion-2 { width: 16px; height: 16px; - color: #577FFB; - fill: #577FFB; + color: #3358CC; + fill: #3358CC; } @media screen and (prefers-reduced-motion: no-preference) { @@ -370,8 +370,8 @@ exports[`MonoKeyboard with single key should render the IconOutlinedKeyboardArro display: inline-block; vertical-align: middle; overflow: hidden; - color: #577FFB; - fill: #577FFB; + color: #3358CC; + fill: #3358CC; vertical-align: unset; display: inline-block; } @@ -395,8 +395,8 @@ exports[`MonoKeyboard with single key should render the IconOutlinedKeyboardArro .emotion-2.emotion-2 { width: 16px; height: 16px; - color: #577FFB; - fill: #577FFB; + color: #3358CC; + fill: #3358CC; } @media screen and (prefers-reduced-motion: no-preference) { @@ -484,8 +484,8 @@ exports[`MonoKeyboard with single key should render the IconOutlinedKeyboardArro display: inline-block; vertical-align: middle; overflow: hidden; - color: #577FFB; - fill: #577FFB; + color: #3358CC; + fill: #3358CC; vertical-align: unset; display: inline-block; } @@ -509,8 +509,8 @@ exports[`MonoKeyboard with single key should render the IconOutlinedKeyboardArro .emotion-2.emotion-2 { width: 16px; height: 16px; - color: #577FFB; - fill: #577FFB; + color: #3358CC; + fill: #3358CC; } @media screen and (prefers-reduced-motion: no-preference) { @@ -598,8 +598,8 @@ exports[`MonoKeyboard with single key should render the IconOutlinedKeyboardArro display: inline-block; vertical-align: middle; overflow: hidden; - color: #577FFB; - fill: #577FFB; + color: #3358CC; + fill: #3358CC; vertical-align: unset; display: inline-block; } @@ -623,8 +623,8 @@ exports[`MonoKeyboard with single key should render the IconOutlinedKeyboardArro .emotion-2.emotion-2 { width: 16px; height: 16px; - color: #577FFB; - fill: #577FFB; + color: #3358CC; + fill: #3358CC; } @media screen and (prefers-reduced-motion: no-preference) { @@ -712,8 +712,8 @@ exports[`MonoKeyboard with single key should render the IconOutlinedKeyboardBack display: inline-block; vertical-align: middle; overflow: hidden; - color: #577FFB; - fill: #577FFB; + color: #3358CC; + fill: #3358CC; vertical-align: unset; display: inline-block; } @@ -737,8 +737,8 @@ exports[`MonoKeyboard with single key should render the IconOutlinedKeyboardBack .emotion-2.emotion-2 { width: 16px; height: 16px; - color: #577FFB; - fill: #577FFB; + color: #3358CC; + fill: #3358CC; } @media screen and (prefers-reduced-motion: no-preference) { @@ -826,8 +826,8 @@ exports[`MonoKeyboard with single key should render the IconOutlinedKeyboardRetu display: inline-block; vertical-align: middle; overflow: hidden; - color: #577FFB; - fill: #577FFB; + color: #3358CC; + fill: #3358CC; vertical-align: unset; display: inline-block; } @@ -851,8 +851,8 @@ exports[`MonoKeyboard with single key should render the IconOutlinedKeyboardRetu .emotion-2.emotion-2 { width: 16px; height: 16px; - color: #577FFB; - fill: #577FFB; + color: #3358CC; + fill: #3358CC; } @media screen and (prefers-reduced-motion: no-preference) { @@ -940,8 +940,8 @@ exports[`MonoKeyboard with single key should render the IconOutlinedKeyboardTab display: inline-block; vertical-align: middle; overflow: hidden; - color: #577FFB; - fill: #577FFB; + color: #3358CC; + fill: #3358CC; vertical-align: unset; display: inline-block; } @@ -965,8 +965,8 @@ exports[`MonoKeyboard with single key should render the IconOutlinedKeyboardTab .emotion-2.emotion-2 { width: 16px; height: 16px; - color: #577FFB; - fill: #577FFB; + color: #3358CC; + fill: #3358CC; } @media screen and (prefers-reduced-motion: no-preference) { @@ -1054,8 +1054,8 @@ exports[`MonoKeyboard with single key should render the IconOutlinedSpaceBar for display: inline-block; vertical-align: middle; overflow: hidden; - color: #577FFB; - fill: #577FFB; + color: #3358CC; + fill: #3358CC; vertical-align: unset; display: inline-block; } @@ -1079,8 +1079,8 @@ exports[`MonoKeyboard with single key should render the IconOutlinedSpaceBar for .emotion-2.emotion-2 { width: 16px; height: 16px; - color: #577FFB; - fill: #577FFB; + color: #3358CC; + fill: #3358CC; } @media screen and (prefers-reduced-motion: no-preference) { diff --git a/site/components/header-index/__tests__/__snapshots__/header-index.test.tsx.snap b/site/components/header-index/__tests__/__snapshots__/header-index.test.tsx.snap index 63c619a2eb..b3fd125489 100644 --- a/site/components/header-index/__tests__/__snapshots__/header-index.test.tsx.snap +++ b/site/components/header-index/__tests__/__snapshots__/header-index.test.tsx.snap @@ -4,7 +4,7 @@ exports[`HeaderIndex renders without crashing 1`] = ` .emotion-0 { border-bottom: 1px solid; - border-color: #E4E4E4; + border-color: #DEE2E5; } @media screen and (max-width: 767px) { @@ -145,11 +145,11 @@ exports[`HeaderIndex renders without crashing 1`] = ` height: 0; width: 100%; border-radius: 8px; - background-color: #F4F4F4; + background-color: #F0F1F3; } .emotion-4 svg { - fill: #C0C0C0; + fill: #C0C7CC; } .emotion-5 { @@ -237,11 +237,11 @@ exports[`HeaderIndex renders without crashing 1`] = ` .emotion-9 { margin: 0; - color: #0A0A0A; + color: #09111C; } .emotion-9 svg { - fill: #0A0A0A; + fill: #09111C; } @media screen and (max-width: 767px) { @@ -304,7 +304,7 @@ exports[`HeaderIndex renders without crashing 1`] = ` .emotion-11 { margin: 0; - color: #2E2E2E; + color: #2E3F54; font-family: "Poppins",sans-serif; font-size: 20px; line-height: 30px; @@ -314,7 +314,7 @@ exports[`HeaderIndex renders without crashing 1`] = ` } .emotion-11 svg { - fill: #2E2E2E; + fill: #2E3F54; } .emotion-11::before { diff --git a/site/components/homepage/explore/explore.tsx b/site/components/homepage/explore/explore.tsx index 1928fc05ff..94a19891c0 100644 --- a/site/components/homepage/explore/explore.tsx +++ b/site/components/homepage/explore/explore.tsx @@ -38,7 +38,12 @@ export const Explore = () => ( columnGap="space050" > {cardsContent.map(({media, title, href, description}) => ( - media}> + media} + overrides={{stylePreset: 'homepageCard'}} + > ( > {keepInTouchContent.map(({title, url, description, icon}) => ( ( diff --git a/site/components/icons/__tests__/__snapshots__/icons.test.tsx.snap b/site/components/icons/__tests__/__snapshots__/icons.test.tsx.snap index 4e8881c5c3..8bf759f0fb 100644 --- a/site/components/icons/__tests__/__snapshots__/icons.test.tsx.snap +++ b/site/components/icons/__tests__/__snapshots__/icons.test.tsx.snap @@ -3,7 +3,7 @@ exports[`Icons IconExpandLess icon renders as expected 1`] = ` .emotion-0 { - fill: #2E2E2E; + fill: #2E3F54; vertical-align: unset; display: inline-block; } @@ -47,7 +47,7 @@ exports[`Icons IconExpandLess icon renders as expected 1`] = ` exports[`Icons IconExpandMore icon renders as expected 1`] = ` .emotion-0 { - fill: #2E2E2E; + fill: #2E3F54; vertical-align: unset; display: inline-block; } @@ -92,7 +92,7 @@ exports[`Icons IconExpandMore icon renders as expected 1`] = ` exports[`Icons IconFilledAA icon renders as expected 1`] = ` .emotion-0 { - fill: #2E2E2E; + fill: #2E3F54; vertical-align: unset; display: inline-block; } @@ -132,7 +132,7 @@ exports[`Icons IconFilledAA icon renders as expected 1`] = ` exports[`Icons IconFilledAAA icon renders as expected 1`] = ` .emotion-0 { - fill: #2E2E2E; + fill: #2E3F54; vertical-align: unset; display: inline-block; } @@ -198,8 +198,8 @@ exports[`Icons IconFilledCheckCircle icon renders as expected 1`] = ` -ms-appearance: none; appearance: none; border-style: solid; - border-color: #0A782A; - background-color: #E6FAEB; + border-color: #007B22; + background-color: #E5F4EA; border-radius: 50%; border-width: 1px; } @@ -210,7 +210,7 @@ exports[`Icons IconFilledCheckCircle icon renders as expected 1`] = ` } .emotion-0 svg { - fill: #0A782A; + fill: #007B22; } .emotion-1 { @@ -247,7 +247,7 @@ exports[`Icons IconFilledCheckCircle icon renders as expected 1`] = ` display: inline-block; vertical-align: middle; overflow: hidden; - fill: #0A782A; + fill: #007B22; vertical-align: unset; display: inline-block; } @@ -271,7 +271,7 @@ exports[`Icons IconFilledCheckCircle icon renders as expected 1`] = ` .emotion-3.emotion-3 { width: 24px; height: 24px; - fill: #0A782A; + fill: #007B22; } @media screen and (prefers-reduced-motion: no-preference) { @@ -325,7 +325,7 @@ exports[`Icons IconFilledCheckCircle icon renders as expected 1`] = ` exports[`Icons IconFilledChrome icon renders as expected 1`] = ` .emotion-0 { - fill: #2E2E2E; + fill: #2E3F54; vertical-align: unset; display: inline-block; } @@ -372,7 +372,7 @@ exports[`Icons IconFilledChrome icon renders as expected 1`] = ` exports[`Icons IconFilledCircle icon renders as expected 1`] = ` .emotion-0 { - fill: #2E2E2E; + fill: #2E3F54; vertical-align: unset; display: inline-block; } @@ -438,8 +438,8 @@ exports[`Icons IconFilledCrossCircle icon renders as expected 1`] = ` -ms-appearance: none; appearance: none; border-style: solid; - border-color: #D20600; - background-color: #FFE6E5; + border-color: #D60000; + background-color: #FEECEC; border-radius: 50%; border-width: 1px; } @@ -450,7 +450,7 @@ exports[`Icons IconFilledCrossCircle icon renders as expected 1`] = ` } .emotion-0 svg { - fill: #D20600; + fill: #D60000; } .emotion-1 { @@ -487,7 +487,7 @@ exports[`Icons IconFilledCrossCircle icon renders as expected 1`] = ` display: inline-block; vertical-align: middle; overflow: hidden; - fill: #D20600; + fill: #D60000; vertical-align: unset; display: inline-block; } @@ -511,7 +511,7 @@ exports[`Icons IconFilledCrossCircle icon renders as expected 1`] = ` .emotion-3.emotion-3 { width: 24px; height: 24px; - fill: #D20600; + fill: #D60000; } @media screen and (prefers-reduced-motion: no-preference) { @@ -565,7 +565,7 @@ exports[`Icons IconFilledCrossCircle icon renders as expected 1`] = ` exports[`Icons IconFilledDark icon renders as expected 1`] = ` .emotion-0 { - fill: #2E2E2E; + fill: #2E3F54; vertical-align: unset; display: inline-block; } @@ -614,7 +614,7 @@ exports[`Icons IconFilledDark icon renders as expected 1`] = ` exports[`Icons IconFilledEdge icon renders as expected 1`] = ` .emotion-0 { - fill: #2E2E2E; + fill: #2E3F54; vertical-align: unset; display: inline-block; } @@ -652,7 +652,7 @@ exports[`Icons IconFilledEdge icon renders as expected 1`] = ` exports[`Icons IconFilledFirefox icon renders as expected 1`] = ` .emotion-0 { - fill: #2E2E2E; + fill: #2E3F54; vertical-align: unset; display: inline-block; } @@ -690,7 +690,7 @@ exports[`Icons IconFilledFirefox icon renders as expected 1`] = ` exports[`Icons IconFilledLight icon renders as expected 1`] = ` .emotion-0 { - fill: #2E2E2E; + fill: #2E3F54; vertical-align: unset; display: inline-block; } @@ -739,7 +739,7 @@ exports[`Icons IconFilledLight icon renders as expected 1`] = ` exports[`Icons IconFilledNpm icon renders as expected 1`] = ` .emotion-0 { - fill: #2E2E2E; + fill: #2E3F54; vertical-align: unset; display: inline-block; } @@ -779,7 +779,7 @@ exports[`Icons IconFilledNpm icon renders as expected 1`] = ` exports[`Icons IconFilledNullDot icon renders as expected 1`] = ` .emotion-0 { - fill: #E4E4E4; + fill: #DEE2E5; vertical-align: unset; display: inline-block; margin: 0 6px; @@ -804,7 +804,7 @@ exports[`Icons IconFilledNullDot icon renders as expected 1`] = ` .emotion-0.emotion-0 { width: 12px; height: 12px; - fill: #E4E4E4; + fill: #DEE2E5; } @media screen and (prefers-reduced-motion: no-preference) { @@ -842,7 +842,7 @@ exports[`Icons IconFilledNullDot icon renders as expected 1`] = ` exports[`Icons IconFilledSafari icon renders as expected 1`] = ` .emotion-0 { - fill: #2E2E2E; + fill: #2E3F54; vertical-align: unset; display: inline-block; } @@ -880,7 +880,7 @@ exports[`Icons IconFilledSafari icon renders as expected 1`] = ` exports[`Icons IconFilledTimer icon renders as expected 1`] = ` .emotion-0 { - fill: #2E2E2E; + fill: #2E3F54; vertical-align: unset; display: inline-block; } diff --git a/site/components/legacy-block/__tests__/__snapshots__/legacyblock.test.tsx.snap b/site/components/legacy-block/__tests__/__snapshots__/legacyblock.test.tsx.snap index 06af3510ca..6898b61f4e 100644 --- a/site/components/legacy-block/__tests__/__snapshots__/legacyblock.test.tsx.snap +++ b/site/components/legacy-block/__tests__/__snapshots__/legacyblock.test.tsx.snap @@ -63,8 +63,8 @@ exports[`Block with overflow set to scrollY renders no overflow prop 1`] = ` exports[`Block with responsive style props renders a responsive styled div 1`] = ` .emotion-0 { - color: #0A0A0A; - background-color: #FFFFFF; + color: #09111C; + background-color: #F0F1F3; font-family: "DM Sans",sans-serif; font-weight: 400; font-size: 14px; @@ -126,8 +126,8 @@ exports[`Block with responsive style props renders a responsive styled div 1`] = @media screen and (min-width: 0px) { .emotion-0 { - color: #2E2E2E; - background-color: #F4F4F4; + color: #2E3F54; + background-color: #F0F1F3; font-family: "DM Sans",sans-serif; font-weight: 400; font-size: 16px; @@ -185,8 +185,8 @@ exports[`Block with responsive style props renders a responsive styled div 1`] = @media screen and (min-width: 480px) { .emotion-0 { - color: #535353; - background-color: #EBEBEB; + color: #5A6A79; + background-color: #DEE2E5; font-family: "DM Sans",sans-serif; font-weight: 400; font-size: 18px; @@ -255,8 +255,8 @@ exports[`Block with responsive style props renders a responsive styled div 1`] = exports[`Block with simple style props renders a styled div 1`] = ` .emotion-0 { - color: #0A0A0A; - background-color: #213A82; + color: #09111C; + background-color: #14328D; font-family: "DM Sans",sans-serif; font-weight: 400; font-size: 14px; diff --git a/site/components/logo/__tests__/__snapshots__/logo.test.tsx.snap b/site/components/logo/__tests__/__snapshots__/logo.test.tsx.snap index c7c1c6d223..825c59e552 100644 --- a/site/components/logo/__tests__/__snapshots__/logo.test.tsx.snap +++ b/site/components/logo/__tests__/__snapshots__/logo.test.tsx.snap @@ -30,8 +30,8 @@ exports[`Logo Default logo renders as expected 1`] = ` } .emotion-2 { - fill: #162740; - color: #162740; + fill: #09111C; + color: #09111C; }

diff --git a/site/components/release-notes/__tests__/__snapshots__/release-header.test.tsx.snap b/site/components/release-notes/__tests__/__snapshots__/release-header.test.tsx.snap index 6fdf6f2816..a267bb0eb2 100644 --- a/site/components/release-notes/__tests__/__snapshots__/release-header.test.tsx.snap +++ b/site/components/release-notes/__tests__/__snapshots__/release-header.test.tsx.snap @@ -30,23 +30,23 @@ exports[`ReleaseHeader renders correctly 1`] = ` } .emotion-1:hover:not(:disabled) { - color: #2B4AAB; + color: #254CAC; -webkit-text-decoration: underline; text-decoration: underline; } .emotion-1:hover:not(:disabled) svg { - fill: #2B4AAB; + fill: #254CAC; } .emotion-1:active:not(:disabled) { - color: #213A82; + color: #14328D; -webkit-text-decoration: underline; text-decoration: underline; } .emotion-1:active:not(:disabled) svg { - fill: #213A82; + fill: #14328D; } .emotion-1:focus-visible:not(:disabled) { @@ -122,7 +122,7 @@ exports[`ReleaseHeader renders correctly 1`] = ` display: inline-block; vertical-align: middle; overflow: hidden; - fill: #2E2E2E; + fill: #3B3B3B; vertical-align: unset; display: inline-block; } @@ -150,7 +150,7 @@ exports[`ReleaseHeader renders correctly 1`] = ` .emotion-8 { margin: 0; - color: #535353; + color: #6A6A6A; font-family: "DM Sans",sans-serif; font-size: 16px; line-height: 24px; @@ -163,7 +163,7 @@ exports[`ReleaseHeader renders correctly 1`] = ` } .emotion-8 svg { - fill: #535353; + fill: #6A6A6A; } .emotion-8::before { diff --git a/site/components/release-notes/__tests__/__snapshots__/release-notes.test.tsx.snap b/site/components/release-notes/__tests__/__snapshots__/release-notes.test.tsx.snap index 300e968821..ecd907fe7c 100644 --- a/site/components/release-notes/__tests__/__snapshots__/release-notes.test.tsx.snap +++ b/site/components/release-notes/__tests__/__snapshots__/release-notes.test.tsx.snap @@ -56,23 +56,23 @@ exports[`ReleaseNotes renders correctly 1`] = ` } .emotion-2:hover:not(:disabled) { - color: #2B4AAB; + color: #254CAC; -webkit-text-decoration: underline; text-decoration: underline; } .emotion-2:hover:not(:disabled) svg { - fill: #2B4AAB; + fill: #254CAC; } .emotion-2:active:not(:disabled) { - color: #213A82; + color: #14328D; -webkit-text-decoration: underline; text-decoration: underline; } .emotion-2:active:not(:disabled) svg { - fill: #213A82; + fill: #14328D; } .emotion-2:focus-visible:not(:disabled) { @@ -148,7 +148,7 @@ exports[`ReleaseNotes renders correctly 1`] = ` display: inline-block; vertical-align: middle; overflow: hidden; - fill: #2E2E2E; + fill: #3B3B3B; vertical-align: unset; display: inline-block; } diff --git a/site/components/section-introduction/__tests__/__snapshots__/section-introduction.test.ts.snap b/site/components/section-introduction/__tests__/__snapshots__/section-introduction.test.ts.snap index df63b76809..a54aa4e03a 100644 --- a/site/components/section-introduction/__tests__/__snapshots__/section-introduction.test.ts.snap +++ b/site/components/section-introduction/__tests__/__snapshots__/section-introduction.test.ts.snap @@ -141,11 +141,11 @@ exports[`SectionIntroduction renders with all props 1`] = ` display: inline; font: inherit; margin: 0; - color: #0A0A0A; + color: #09111C; } .emotion-5 svg { - fill: #0A0A0A; + fill: #09111C; } @media screen and (max-width: 767px) { @@ -168,7 +168,7 @@ exports[`SectionIntroduction renders with all props 1`] = ` .emotion-7 { margin: 0; - color: #2E2E2E; + color: #2E3F54; font-family: "Poppins",sans-serif; font-size: 20px; line-height: 30px; @@ -178,7 +178,7 @@ exports[`SectionIntroduction renders with all props 1`] = ` } .emotion-7 svg { - fill: #2E2E2E; + fill: #2E3F54; } .emotion-7::before { diff --git a/site/components/sidebar/__tests__/__snapshots__/sidebar-navigation.test.tsx.snap b/site/components/sidebar/__tests__/__snapshots__/sidebar-navigation.test.tsx.snap index 49653b3a36..c50617c945 100644 --- a/site/components/sidebar/__tests__/__snapshots__/sidebar-navigation.test.tsx.snap +++ b/site/components/sidebar/__tests__/__snapshots__/sidebar-navigation.test.tsx.snap @@ -64,7 +64,7 @@ exports[`Sidebar navigation should match snapshot with active link 1`] = ` .emotion-3 { background-color: transparent; - color: #0A0A0A; + color: #09111C; margin-top: 16px; margin-bottom: 0; } @@ -146,7 +146,7 @@ exports[`Sidebar navigation should match snapshot with active link 1`] = ` appearance: none; background-color: transparent; border-radius: 50%; - color: #577FFB; + color: #3358CC; margin: 0; cursor: pointer; } @@ -157,24 +157,24 @@ exports[`Sidebar navigation should match snapshot with active link 1`] = ` } .emotion-6 svg { - fill: #577FFB; + fill: #3358CC; } .emotion-6:hover:not(:disabled) { - background-color: #E0E7FF; + background-color: #ECF1FF; } .emotion-6:active:not(:disabled) { - background-color: #AEBFFF; + background-color: #D5E0FC; } .emotion-6:disabled { background-color: transparent; - color: #C0C0C0; + color: #C0C7CC; } .emotion-6:disabled svg { - fill: #C0C0C0; + fill: #C0C7CC; } .emotion-6:focus-visible:not(:disabled) { @@ -239,8 +239,8 @@ exports[`Sidebar navigation should match snapshot with active link 1`] = ` } .emotion-9 { - color: #0A0A0A; - fill: #0A0A0A; + color: #09111C; + fill: #09111C; vertical-align: unset; display: inline-block; } @@ -264,8 +264,8 @@ exports[`Sidebar navigation should match snapshot with active link 1`] = ` .emotion-9.emotion-9 { width: 24px; height: 24px; - color: #0A0A0A; - fill: #0A0A0A; + color: #09111C; + fill: #09111C; } @media screen and (prefers-reduced-motion: no-preference) { @@ -321,16 +321,16 @@ exports[`Sidebar navigation should match snapshot with active link 1`] = ` border-color: transparent; border-width: 4px; border-style: solid; - color: #535353; + color: #5A6A79; margin: 0; cursor: pointer; padding-inline: 64px; -webkit-text-decoration: none; text-decoration: none; - border-color: transparent transparent transparent #577FFB; + border-color: transparent transparent transparent #3358CC; border-width: 4px; border-style: solid; - color: #577FFB; + color: #3358CC; -webkit-box-pack: start; -ms-flex-pack: start; -webkit-justify-content: flex-start; @@ -344,12 +344,12 @@ exports[`Sidebar navigation should match snapshot with active link 1`] = ` } .emotion-11:hover:not(:disabled) { - color: #577FFB; - background-color: #E0E7FF; + color: #254CAC; + background-color: #D5E0FC; } .emotion-11:active:not(:disabled) { - color: #213A82; + color: #14328D; } @media screen and (prefers-reduced-motion: no-preference) { @@ -413,7 +413,7 @@ exports[`Sidebar navigation should match snapshot with active link 1`] = ` .emotion-25 { margin: 0; background-color: transparent; - color: #0A0A0A; + color: #09111C; font-family: "Poppins",sans-serif; font-size: 16px; line-height: 18px; @@ -466,7 +466,7 @@ exports[`Sidebar navigation should match snapshot with active link 1`] = ` border-color: transparent; border-width: 4px; border-style: solid; - color: #535353; + color: #5A6A79; margin: 0; cursor: pointer; padding-inline: 64px; @@ -483,12 +483,12 @@ exports[`Sidebar navigation should match snapshot with active link 1`] = ` } .emotion-27:hover:not(:disabled) { - color: #577FFB; - background-color: #E0E7FF; + color: #254CAC; + background-color: #D5E0FC; } .emotion-27:active:not(:disabled) { - color: #213A82; + color: #14328D; } @media screen and (prefers-reduced-motion: no-preference) { @@ -517,7 +517,7 @@ exports[`Sidebar navigation should match snapshot with active link 1`] = ` .emotion-50 { border-style: solid; - border-color: #E4E4E4; + border-color: #DEE2E5; border-width: 1px; border-width: 0px; margin: 0; @@ -898,7 +898,7 @@ exports[`Sidebar navigation should match snapshot with active link 1`] = ` border-color: transparent; border-width: 4px; border-style: solid; - color: #535353; + color: #5A6A79; margin: 0; cursor: pointer; -webkit-padding-start: 32px; @@ -916,12 +916,12 @@ exports[`Sidebar navigation should match snapshot with active link 1`] = ` } .emotion-3:hover:not(:disabled) { - color: #577FFB; - background-color: #E0E7FF; + color: #254CAC; + background-color: #D5E0FC; } .emotion-3:active:not(:disabled) { - color: #213A82; + color: #14328D; } @media screen and (prefers-reduced-motion: no-preference) { @@ -1119,7 +1119,7 @@ exports[`Sidebar navigation should match snapshot with no active link 1`] = ` .emotion-3 { background-color: transparent; - color: #0A0A0A; + color: #09111C; margin-top: 16px; margin-bottom: 0; } @@ -1201,7 +1201,7 @@ exports[`Sidebar navigation should match snapshot with no active link 1`] = ` appearance: none; background-color: transparent; border-radius: 50%; - color: #577FFB; + color: #3358CC; margin: 0; cursor: pointer; } @@ -1212,24 +1212,24 @@ exports[`Sidebar navigation should match snapshot with no active link 1`] = ` } .emotion-6 svg { - fill: #577FFB; + fill: #3358CC; } .emotion-6:hover:not(:disabled) { - background-color: #E0E7FF; + background-color: #ECF1FF; } .emotion-6:active:not(:disabled) { - background-color: #AEBFFF; + background-color: #D5E0FC; } .emotion-6:disabled { background-color: transparent; - color: #C0C0C0; + color: #C0C7CC; } .emotion-6:disabled svg { - fill: #C0C0C0; + fill: #C0C7CC; } .emotion-6:focus-visible:not(:disabled) { @@ -1294,8 +1294,8 @@ exports[`Sidebar navigation should match snapshot with no active link 1`] = ` } .emotion-9 { - color: #0A0A0A; - fill: #0A0A0A; + color: #09111C; + fill: #09111C; vertical-align: unset; display: inline-block; } @@ -1319,8 +1319,8 @@ exports[`Sidebar navigation should match snapshot with no active link 1`] = ` .emotion-9.emotion-9 { width: 24px; height: 24px; - color: #0A0A0A; - fill: #0A0A0A; + color: #09111C; + fill: #09111C; } @media screen and (prefers-reduced-motion: no-preference) { @@ -1376,7 +1376,7 @@ exports[`Sidebar navigation should match snapshot with no active link 1`] = ` border-color: transparent; border-width: 4px; border-style: solid; - color: #535353; + color: #5A6A79; margin: 0; cursor: pointer; padding-inline: 64px; @@ -1393,12 +1393,12 @@ exports[`Sidebar navigation should match snapshot with no active link 1`] = ` } .emotion-11:hover:not(:disabled) { - color: #577FFB; - background-color: #E0E7FF; + color: #254CAC; + background-color: #D5E0FC; } .emotion-11:active:not(:disabled) { - color: #213A82; + color: #14328D; } @media screen and (prefers-reduced-motion: no-preference) { @@ -1462,7 +1462,7 @@ exports[`Sidebar navigation should match snapshot with no active link 1`] = ` .emotion-25 { margin: 0; background-color: transparent; - color: #0A0A0A; + color: #09111C; font-family: "Poppins",sans-serif; font-size: 16px; line-height: 18px; @@ -1493,7 +1493,7 @@ exports[`Sidebar navigation should match snapshot with no active link 1`] = ` .emotion-50 { border-style: solid; - border-color: #E4E4E4; + border-color: #DEE2E5; border-width: 1px; border-width: 0px; margin: 0; @@ -1925,7 +1925,7 @@ exports[`Sidebar navigation should render only routes under current section 1`] .emotion-3 { background-color: transparent; - color: #0A0A0A; + color: #09111C; margin-top: 16px; margin-bottom: 0; } @@ -2007,7 +2007,7 @@ exports[`Sidebar navigation should render only routes under current section 1`] appearance: none; background-color: transparent; border-radius: 50%; - color: #577FFB; + color: #3358CC; margin: 0; cursor: pointer; } @@ -2018,24 +2018,24 @@ exports[`Sidebar navigation should render only routes under current section 1`] } .emotion-6 svg { - fill: #577FFB; + fill: #3358CC; } .emotion-6:hover:not(:disabled) { - background-color: #E0E7FF; + background-color: #ECF1FF; } .emotion-6:active:not(:disabled) { - background-color: #AEBFFF; + background-color: #D5E0FC; } .emotion-6:disabled { background-color: transparent; - color: #C0C0C0; + color: #C0C7CC; } .emotion-6:disabled svg { - fill: #C0C0C0; + fill: #C0C7CC; } .emotion-6:focus-visible:not(:disabled) { @@ -2100,8 +2100,8 @@ exports[`Sidebar navigation should render only routes under current section 1`] } .emotion-9 { - color: #0A0A0A; - fill: #0A0A0A; + color: #09111C; + fill: #09111C; vertical-align: unset; display: inline-block; } @@ -2125,8 +2125,8 @@ exports[`Sidebar navigation should render only routes under current section 1`] .emotion-9.emotion-9 { width: 24px; height: 24px; - color: #0A0A0A; - fill: #0A0A0A; + color: #09111C; + fill: #09111C; } @media screen and (prefers-reduced-motion: no-preference) { @@ -2182,7 +2182,7 @@ exports[`Sidebar navigation should render only routes under current section 1`] border-color: transparent; border-width: 4px; border-style: solid; - color: #535353; + color: #5A6A79; margin: 0; cursor: pointer; padding-inline: 64px; @@ -2199,12 +2199,12 @@ exports[`Sidebar navigation should render only routes under current section 1`] } .emotion-11:hover:not(:disabled) { - color: #577FFB; - background-color: #E0E7FF; + color: #254CAC; + background-color: #D5E0FC; } .emotion-11:active:not(:disabled) { - color: #213A82; + color: #14328D; } @media screen and (prefers-reduced-motion: no-preference) { @@ -2268,7 +2268,7 @@ exports[`Sidebar navigation should render only routes under current section 1`] .emotion-25 { margin: 0; background-color: transparent; - color: #0A0A0A; + color: #09111C; font-family: "Poppins",sans-serif; font-size: 16px; line-height: 18px; @@ -2299,7 +2299,7 @@ exports[`Sidebar navigation should render only routes under current section 1`] .emotion-50 { border-style: solid; - border-color: #E4E4E4; + border-color: #DEE2E5; border-width: 1px; border-width: 0px; margin: 0; @@ -2680,7 +2680,7 @@ exports[`Sidebar navigation should render only routes under current section 1`] border-color: transparent; border-width: 4px; border-style: solid; - color: #535353; + color: #5A6A79; margin: 0; cursor: pointer; -webkit-padding-start: 32px; @@ -2698,12 +2698,12 @@ exports[`Sidebar navigation should render only routes under current section 1`] } .emotion-3:hover:not(:disabled) { - color: #577FFB; - background-color: #E0E7FF; + color: #254CAC; + background-color: #D5E0FC; } .emotion-3:active:not(:disabled) { - color: #213A82; + color: #14328D; } @media screen and (prefers-reduced-motion: no-preference) { diff --git a/site/components/sidebar/__tests__/__snapshots__/sidebar.test.tsx.snap b/site/components/sidebar/__tests__/__snapshots__/sidebar.test.tsx.snap index 83742eef74..3c4a0986b5 100644 --- a/site/components/sidebar/__tests__/__snapshots__/sidebar.test.tsx.snap +++ b/site/components/sidebar/__tests__/__snapshots__/sidebar.test.tsx.snap @@ -71,9 +71,9 @@ exports[`Sidebar renders correctly when closed 1`] = ` z-index: 3; padding-top: 16px; margin-top: 48px; - background-color: #F4F4F4; + background-color: #F0F1F3; border-style: solid; - border-color: #E4E4E4; + border-color: #DEE2E5; border-width: 0 1px 0 0; width: 276px; margin-top: 80px; @@ -127,7 +127,7 @@ exports[`Sidebar renders correctly when closed 1`] = ` .emotion-7 { background-color: transparent; - color: #0A0A0A; + color: #09111C; margin-top: 16px; margin-bottom: 0; } @@ -209,7 +209,7 @@ exports[`Sidebar renders correctly when closed 1`] = ` appearance: none; background-color: transparent; border-radius: 50%; - color: #577FFB; + color: #3358CC; margin: 0; cursor: pointer; } @@ -220,24 +220,24 @@ exports[`Sidebar renders correctly when closed 1`] = ` } .emotion-10 svg { - fill: #577FFB; + fill: #3358CC; } .emotion-10:hover:not(:disabled) { - background-color: #E0E7FF; + background-color: #ECF1FF; } .emotion-10:active:not(:disabled) { - background-color: #AEBFFF; + background-color: #D5E0FC; } .emotion-10:disabled { background-color: transparent; - color: #C0C0C0; + color: #C0C7CC; } .emotion-10:disabled svg { - fill: #C0C0C0; + fill: #C0C7CC; } .emotion-10:focus-visible:not(:disabled) { @@ -302,8 +302,8 @@ exports[`Sidebar renders correctly when closed 1`] = ` } .emotion-13 { - color: #0A0A0A; - fill: #0A0A0A; + color: #09111C; + fill: #09111C; vertical-align: unset; display: inline-block; } @@ -327,8 +327,8 @@ exports[`Sidebar renders correctly when closed 1`] = ` .emotion-13.emotion-13 { width: 24px; height: 24px; - color: #0A0A0A; - fill: #0A0A0A; + color: #09111C; + fill: #09111C; } @media screen and (prefers-reduced-motion: no-preference) { @@ -384,7 +384,7 @@ exports[`Sidebar renders correctly when closed 1`] = ` border-color: transparent; border-width: 4px; border-style: solid; - color: #535353; + color: #5A6A79; margin: 0; cursor: pointer; padding-inline: 64px; @@ -401,12 +401,12 @@ exports[`Sidebar renders correctly when closed 1`] = ` } .emotion-15:hover:not(:disabled) { - color: #577FFB; - background-color: #E0E7FF; + color: #254CAC; + background-color: #D5E0FC; } .emotion-15:active:not(:disabled) { - color: #213A82; + color: #14328D; } @media screen and (prefers-reduced-motion: no-preference) { @@ -481,7 +481,7 @@ exports[`Sidebar renders correctly when closed 1`] = ` border-color: transparent; border-width: 4px; border-style: solid; - color: #535353; + color: #5A6A79; margin: 0; cursor: pointer; margin-block-end: 12px; @@ -499,12 +499,12 @@ exports[`Sidebar renders correctly when closed 1`] = ` } .emotion-48:hover:not(:disabled) { - color: #577FFB; - background-color: #E0E7FF; + color: #254CAC; + background-color: #D5E0FC; } .emotion-48:active:not(:disabled) { - color: #213A82; + color: #14328D; } @media screen and (prefers-reduced-motion: no-preference) { @@ -545,7 +545,7 @@ exports[`Sidebar renders correctly when closed 1`] = ` .emotion-54 { margin: 0; background-color: transparent; - color: #0A0A0A; + color: #09111C; font-family: "Poppins",sans-serif; font-size: 16px; line-height: 18px; @@ -576,7 +576,7 @@ exports[`Sidebar renders correctly when closed 1`] = ` .emotion-609 { border-style: solid; - border-color: #E4E4E4; + border-color: #DEE2E5; border-width: 1px; border-width: 0px; margin: 0; @@ -3664,9 +3664,9 @@ exports[`Sidebar renders correctly when closed 1`] = ` max-width: 100%; min-width: 100%; height: 100%; - background-color: #F4F4F4; + background-color: #F0F1F3; border-style: solid; - border-color: #E4E4E4; + border-color: #DEE2E5; border-width: 0 1px 0 0; margin-top: 48px; height: calc(100vh - 48px); @@ -3899,7 +3899,7 @@ exports[`Sidebar renders correctly when closed 1`] = ` .emotion-5 { background-color: transparent; - color: #0A0A0A; + color: #09111C; margin-top: 16px; margin-bottom: 0; } @@ -3981,7 +3981,7 @@ exports[`Sidebar renders correctly when closed 1`] = ` appearance: none; background-color: transparent; border-radius: 50%; - color: #577FFB; + color: #3358CC; margin: 0; cursor: pointer; } @@ -3992,24 +3992,24 @@ exports[`Sidebar renders correctly when closed 1`] = ` } .emotion-8 svg { - fill: #577FFB; + fill: #3358CC; } .emotion-8:hover:not(:disabled) { - background-color: #E0E7FF; + background-color: #ECF1FF; } .emotion-8:active:not(:disabled) { - background-color: #AEBFFF; + background-color: #D5E0FC; } .emotion-8:disabled { background-color: transparent; - color: #C0C0C0; + color: #C0C7CC; } .emotion-8:disabled svg { - fill: #C0C0C0; + fill: #C0C7CC; } .emotion-8:focus-visible:not(:disabled) { @@ -4074,8 +4074,8 @@ exports[`Sidebar renders correctly when closed 1`] = ` } .emotion-11 { - color: #0A0A0A; - fill: #0A0A0A; + color: #09111C; + fill: #09111C; vertical-align: unset; display: inline-block; } @@ -4099,8 +4099,8 @@ exports[`Sidebar renders correctly when closed 1`] = ` .emotion-11.emotion-11 { width: 24px; height: 24px; - color: #0A0A0A; - fill: #0A0A0A; + color: #09111C; + fill: #09111C; } @media screen and (prefers-reduced-motion: no-preference) { @@ -4156,7 +4156,7 @@ exports[`Sidebar renders correctly when closed 1`] = ` border-color: transparent; border-width: 4px; border-style: solid; - color: #535353; + color: #5A6A79; margin: 0; cursor: pointer; padding-inline: 64px; @@ -4173,12 +4173,12 @@ exports[`Sidebar renders correctly when closed 1`] = ` } .emotion-13:hover:not(:disabled) { - color: #577FFB; - background-color: #E0E7FF; + color: #254CAC; + background-color: #D5E0FC; } .emotion-13:active:not(:disabled) { - color: #213A82; + color: #14328D; } @media screen and (prefers-reduced-motion: no-preference) { @@ -4253,7 +4253,7 @@ exports[`Sidebar renders correctly when closed 1`] = ` border-color: transparent; border-width: 4px; border-style: solid; - color: #535353; + color: #5A6A79; margin: 0; cursor: pointer; margin-block-end: 12px; @@ -4271,12 +4271,12 @@ exports[`Sidebar renders correctly when closed 1`] = ` } .emotion-46:hover:not(:disabled) { - color: #577FFB; - background-color: #E0E7FF; + color: #254CAC; + background-color: #D5E0FC; } .emotion-46:active:not(:disabled) { - color: #213A82; + color: #14328D; } @media screen and (prefers-reduced-motion: no-preference) { @@ -4317,7 +4317,7 @@ exports[`Sidebar renders correctly when closed 1`] = ` .emotion-52 { margin: 0; background-color: transparent; - color: #0A0A0A; + color: #09111C; font-family: "Poppins",sans-serif; font-size: 16px; line-height: 18px; @@ -4348,7 +4348,7 @@ exports[`Sidebar renders correctly when closed 1`] = ` .emotion-607 { border-style: solid; - border-color: #E4E4E4; + border-color: #DEE2E5; border-width: 1px; border-width: 0px; margin: 0; @@ -4407,7 +4407,7 @@ exports[`Sidebar renders correctly when closed 1`] = ` .emotion-614 { margin: 0; - color: #2E2E2E; + color: #2E3F54; font-family: "Poppins",sans-serif; font-size: 16px; line-height: 1.5; @@ -4416,14 +4416,14 @@ exports[`Sidebar renders correctly when closed 1`] = ` } .emotion-614 svg { - fill: #2E2E2E; + fill: #2E3F54; } .emotion-615 { display: inline-block; vertical-align: middle; overflow: hidden; - fill: #2E2E2E; + fill: #2E3F54; vertical-align: unset; display: inline-block; } @@ -7761,9 +7761,9 @@ exports[`Sidebar renders correctly when open 1`] = ` z-index: 3; padding-top: 16px; margin-top: 48px; - background-color: #F4F4F4; + background-color: #F0F1F3; border-style: solid; - border-color: #E4E4E4; + border-color: #DEE2E5; border-width: 0 1px 0 0; width: 276px; margin-top: 80px; @@ -7817,7 +7817,7 @@ exports[`Sidebar renders correctly when open 1`] = ` .emotion-7 { background-color: transparent; - color: #0A0A0A; + color: #09111C; margin-top: 16px; margin-bottom: 0; } @@ -7899,7 +7899,7 @@ exports[`Sidebar renders correctly when open 1`] = ` appearance: none; background-color: transparent; border-radius: 50%; - color: #577FFB; + color: #3358CC; margin: 0; cursor: pointer; } @@ -7910,24 +7910,24 @@ exports[`Sidebar renders correctly when open 1`] = ` } .emotion-10 svg { - fill: #577FFB; + fill: #3358CC; } .emotion-10:hover:not(:disabled) { - background-color: #E0E7FF; + background-color: #ECF1FF; } .emotion-10:active:not(:disabled) { - background-color: #AEBFFF; + background-color: #D5E0FC; } .emotion-10:disabled { background-color: transparent; - color: #C0C0C0; + color: #C0C7CC; } .emotion-10:disabled svg { - fill: #C0C0C0; + fill: #C0C7CC; } .emotion-10:focus-visible:not(:disabled) { @@ -7992,8 +7992,8 @@ exports[`Sidebar renders correctly when open 1`] = ` } .emotion-13 { - color: #0A0A0A; - fill: #0A0A0A; + color: #09111C; + fill: #09111C; vertical-align: unset; display: inline-block; } @@ -8017,8 +8017,8 @@ exports[`Sidebar renders correctly when open 1`] = ` .emotion-13.emotion-13 { width: 24px; height: 24px; - color: #0A0A0A; - fill: #0A0A0A; + color: #09111C; + fill: #09111C; } @media screen and (prefers-reduced-motion: no-preference) { @@ -8074,7 +8074,7 @@ exports[`Sidebar renders correctly when open 1`] = ` border-color: transparent; border-width: 4px; border-style: solid; - color: #535353; + color: #5A6A79; margin: 0; cursor: pointer; padding-inline: 64px; @@ -8091,12 +8091,12 @@ exports[`Sidebar renders correctly when open 1`] = ` } .emotion-15:hover:not(:disabled) { - color: #577FFB; - background-color: #E0E7FF; + color: #254CAC; + background-color: #D5E0FC; } .emotion-15:active:not(:disabled) { - color: #213A82; + color: #14328D; } @media screen and (prefers-reduced-motion: no-preference) { @@ -8171,7 +8171,7 @@ exports[`Sidebar renders correctly when open 1`] = ` border-color: transparent; border-width: 4px; border-style: solid; - color: #535353; + color: #5A6A79; margin: 0; cursor: pointer; margin-block-end: 12px; @@ -8189,12 +8189,12 @@ exports[`Sidebar renders correctly when open 1`] = ` } .emotion-48:hover:not(:disabled) { - color: #577FFB; - background-color: #E0E7FF; + color: #254CAC; + background-color: #D5E0FC; } .emotion-48:active:not(:disabled) { - color: #213A82; + color: #14328D; } @media screen and (prefers-reduced-motion: no-preference) { @@ -8235,7 +8235,7 @@ exports[`Sidebar renders correctly when open 1`] = ` .emotion-54 { margin: 0; background-color: transparent; - color: #0A0A0A; + color: #09111C; font-family: "Poppins",sans-serif; font-size: 16px; line-height: 18px; @@ -8266,7 +8266,7 @@ exports[`Sidebar renders correctly when open 1`] = ` .emotion-609 { border-style: solid; - border-color: #E4E4E4; + border-color: #DEE2E5; border-width: 1px; border-width: 0px; margin: 0; @@ -11357,9 +11357,9 @@ exports[`Sidebar renders correctly when open 1`] = ` max-width: 100%; min-width: 100%; height: 100%; - background-color: #F4F4F4; + background-color: #F0F1F3; border-style: solid; - border-color: #E4E4E4; + border-color: #DEE2E5; border-width: 0 1px 0 0; margin-top: 48px; height: calc(100vh - 48px); @@ -11592,7 +11592,7 @@ exports[`Sidebar renders correctly when open 1`] = ` .emotion-5 { background-color: transparent; - color: #0A0A0A; + color: #09111C; margin-top: 16px; margin-bottom: 0; } @@ -11674,7 +11674,7 @@ exports[`Sidebar renders correctly when open 1`] = ` appearance: none; background-color: transparent; border-radius: 50%; - color: #577FFB; + color: #3358CC; margin: 0; cursor: pointer; } @@ -11685,24 +11685,24 @@ exports[`Sidebar renders correctly when open 1`] = ` } .emotion-8 svg { - fill: #577FFB; + fill: #3358CC; } .emotion-8:hover:not(:disabled) { - background-color: #E0E7FF; + background-color: #ECF1FF; } .emotion-8:active:not(:disabled) { - background-color: #AEBFFF; + background-color: #D5E0FC; } .emotion-8:disabled { background-color: transparent; - color: #C0C0C0; + color: #C0C7CC; } .emotion-8:disabled svg { - fill: #C0C0C0; + fill: #C0C7CC; } .emotion-8:focus-visible:not(:disabled) { @@ -11767,8 +11767,8 @@ exports[`Sidebar renders correctly when open 1`] = ` } .emotion-11 { - color: #0A0A0A; - fill: #0A0A0A; + color: #09111C; + fill: #09111C; vertical-align: unset; display: inline-block; } @@ -11792,8 +11792,8 @@ exports[`Sidebar renders correctly when open 1`] = ` .emotion-11.emotion-11 { width: 24px; height: 24px; - color: #0A0A0A; - fill: #0A0A0A; + color: #09111C; + fill: #09111C; } @media screen and (prefers-reduced-motion: no-preference) { @@ -11849,7 +11849,7 @@ exports[`Sidebar renders correctly when open 1`] = ` border-color: transparent; border-width: 4px; border-style: solid; - color: #535353; + color: #5A6A79; margin: 0; cursor: pointer; padding-inline: 64px; @@ -11866,12 +11866,12 @@ exports[`Sidebar renders correctly when open 1`] = ` } .emotion-13:hover:not(:disabled) { - color: #577FFB; - background-color: #E0E7FF; + color: #254CAC; + background-color: #D5E0FC; } .emotion-13:active:not(:disabled) { - color: #213A82; + color: #14328D; } @media screen and (prefers-reduced-motion: no-preference) { @@ -11946,7 +11946,7 @@ exports[`Sidebar renders correctly when open 1`] = ` border-color: transparent; border-width: 4px; border-style: solid; - color: #535353; + color: #5A6A79; margin: 0; cursor: pointer; margin-block-end: 12px; @@ -11964,12 +11964,12 @@ exports[`Sidebar renders correctly when open 1`] = ` } .emotion-46:hover:not(:disabled) { - color: #577FFB; - background-color: #E0E7FF; + color: #254CAC; + background-color: #D5E0FC; } .emotion-46:active:not(:disabled) { - color: #213A82; + color: #14328D; } @media screen and (prefers-reduced-motion: no-preference) { @@ -12010,7 +12010,7 @@ exports[`Sidebar renders correctly when open 1`] = ` .emotion-52 { margin: 0; background-color: transparent; - color: #0A0A0A; + color: #09111C; font-family: "Poppins",sans-serif; font-size: 16px; line-height: 18px; @@ -12041,7 +12041,7 @@ exports[`Sidebar renders correctly when open 1`] = ` .emotion-607 { border-style: solid; - border-color: #E4E4E4; + border-color: #DEE2E5; border-width: 1px; border-width: 0px; margin: 0; @@ -12100,7 +12100,7 @@ exports[`Sidebar renders correctly when open 1`] = ` .emotion-614 { margin: 0; - color: #2E2E2E; + color: #2E3F54; font-family: "Poppins",sans-serif; font-size: 16px; line-height: 1.5; @@ -12109,14 +12109,14 @@ exports[`Sidebar renders correctly when open 1`] = ` } .emotion-614 svg { - fill: #2E2E2E; + fill: #2E3F54; } .emotion-615 { display: inline-block; vertical-align: middle; overflow: hidden; - fill: #2E2E2E; + fill: #2E3F54; vertical-align: unset; display: inline-block; } diff --git a/site/components/step/__tests__/__snapshots__/step.test.tsx.snap b/site/components/step/__tests__/__snapshots__/step.test.tsx.snap index ebf378edd8..e5a8342d98 100644 --- a/site/components/step/__tests__/__snapshots__/step.test.tsx.snap +++ b/site/components/step/__tests__/__snapshots__/step.test.tsx.snap @@ -30,7 +30,7 @@ exports[`Step renders with props 1`] = ` @@ -166,9 +166,9 @@ exports[`Step renders with props 1`] = ` -moz-appearance: none; -ms-appearance: none; appearance: none; - background-color: #DEDEDE; + background-color: #C6C6C6; border-radius: 24px; - color: #535353; + color: #3B3B3B; } .emotion-5 svg { @@ -177,11 +177,11 @@ exports[`Step renders with props 1`] = ` } .emotion-5 svg { - fill: #0A0A0A; + fill: #111111; } .emotion-8 { - fill: #2E2E2E; + fill: #2E3F54; vertical-align: unset; display: inline-block; } diff --git a/site/components/swatch-card/__tests__/__snapshots__/swatch-card.test.tsx.snap b/site/components/swatch-card/__tests__/__snapshots__/swatch-card.test.tsx.snap index dffd0c8c2d..4a5f806f03 100644 --- a/site/components/swatch-card/__tests__/__snapshots__/swatch-card.test.tsx.snap +++ b/site/components/swatch-card/__tests__/__snapshots__/swatch-card.test.tsx.snap @@ -7,13 +7,13 @@ exports[`SwatchCard renders with inkBase 1`] = ` display: -webkit-flex; display: -ms-flexbox; display: flex; - background: #2E2E2E; + background: #3B3B3B; height: 80px; width: 100px; margin-right: 8px; border-radius: 8px; border: 1px solid; - border-color: #DEDEDE; + border-color: #C6C6C6; } .emotion-1 { diff --git a/site/components/table-of-contents/__tests__/__snapshots__/table-of-contents.test.tsx.snap b/site/components/table-of-contents/__tests__/__snapshots__/table-of-contents.test.tsx.snap index 7668992324..5382603291 100644 --- a/site/components/table-of-contents/__tests__/__snapshots__/table-of-contents.test.tsx.snap +++ b/site/components/table-of-contents/__tests__/__snapshots__/table-of-contents.test.tsx.snap @@ -30,15 +30,15 @@ exports[`TableOfContent should render with no errors 1`] = ` .emotion-2 { display: inline-block; - color: #535353; + color: #5A6A79; border-style: solid; - border-color: #EBEBEB; + border-color: #DEE2E5; border-width: 2px; -webkit-text-decoration: none; text-decoration: none; - color: #0A0A0A; + color: #09111C; border-style: solid; - border-color: #577FFB; + border-color: #3358CC; border-width: 2px; -webkit-text-decoration: none; text-decoration: none; @@ -65,11 +65,11 @@ exports[`TableOfContent should render with no errors 1`] = ` } .emotion-2:hover:not(:disabled) { - color: #2E2E2E; + color: #2E3F54; } .emotion-2:active:not(:disabled) { - color: #2E2E2E; + color: #2E3F54; } .emotion-3 { @@ -117,9 +117,9 @@ exports[`TableOfContent should render with no errors 1`] = ` .emotion-5 { display: inline-block; - color: #535353; + color: #5A6A79; border-style: solid; - border-color: #EBEBEB; + border-color: #DEE2E5; border-width: 2px; -webkit-text-decoration: none; text-decoration: none; @@ -146,11 +146,11 @@ exports[`TableOfContent should render with no errors 1`] = ` } .emotion-5:hover:not(:disabled) { - color: #2E2E2E; + color: #2E3F54; } .emotion-5:active:not(:disabled) { - color: #2E2E2E; + color: #2E3F54; }
@@ -588,7 +588,7 @@ exports[`SvgPreviewer should change theme colors correctly when selecting a diff @@ -609,7 +609,7 @@ exports[`SvgPreviewer should change theme colors correctly when selecting a diff @@ -625,7 +625,7 @@ exports[`SvgPreviewer should change theme colors correctly when selecting a diff @@ -648,7 +648,7 @@ exports[`SvgPreviewer should change theme colors correctly when selecting a diff @@ -664,7 +664,7 @@ exports[`SvgPreviewer should change theme colors correctly when selecting a diff @@ -687,7 +687,7 @@ exports[`SvgPreviewer should change theme colors correctly when selecting a diff @@ -703,7 +703,7 @@ exports[`SvgPreviewer should change theme colors correctly when selecting a diff @@ -936,9 +936,9 @@ Object { -moz-appearance: none; -ms-appearance: none; appearance: none; - background-color: #F4F4F4; + background-color: #DEE2E5; border-radius: 8px; - color: #C0C0C0; + color: #C0C7CC; margin: 0; margin: 50px 20px 30px 20px; } @@ -949,7 +949,7 @@ Object { } .emotion-2 svg { - fill: #C0C0C0; + fill: #C0C7CC; } @media screen and (prefers-reduced-motion: no-preference) { @@ -1047,9 +1047,9 @@ Object { -moz-appearance: none; -ms-appearance: none; appearance: none; - background-color: #F4F4F4; + background-color: #DEE2E5; border-radius: 8px; - color: #C0C0C0; + color: #C0C7CC; margin: 0; margin-right: 20px; } @@ -1060,7 +1060,7 @@ Object { } .emotion-8 svg { - fill: #C0C0C0; + fill: #C0C7CC; } @media screen and (prefers-reduced-motion: no-preference) { @@ -1105,9 +1105,9 @@ Object { -moz-appearance: none; -ms-appearance: none; appearance: none; - background-color: #F4F4F4; + background-color: #DEE2E5; border-radius: 8px; - color: #C0C0C0; + color: #C0C7CC; margin: 0; } @@ -1117,7 +1117,7 @@ Object { } .emotion-12 svg { - fill: #C0C0C0; + fill: #C0C7CC; } @media screen and (prefers-reduced-motion: no-preference) { @@ -1305,9 +1305,9 @@ Object { -moz-appearance: none; -ms-appearance: none; appearance: none; - background-color: #F4F4F4; + background-color: #DEE2E5; border-radius: 8px; - color: #C0C0C0; + color: #C0C7CC; margin: 0; margin: 50px 20px 30px 20px; } @@ -1318,7 +1318,7 @@ Object { } .emotion-2 svg { - fill: #C0C0C0; + fill: #C0C7CC; } @media screen and (prefers-reduced-motion: no-preference) { @@ -1416,9 +1416,9 @@ Object { -moz-appearance: none; -ms-appearance: none; appearance: none; - background-color: #F4F4F4; + background-color: #DEE2E5; border-radius: 8px; - color: #C0C0C0; + color: #C0C7CC; margin: 0; margin-right: 20px; } @@ -1429,7 +1429,7 @@ Object { } .emotion-8 svg { - fill: #C0C0C0; + fill: #C0C7CC; } @media screen and (prefers-reduced-motion: no-preference) { @@ -1474,9 +1474,9 @@ Object { -moz-appearance: none; -ms-appearance: none; appearance: none; - background-color: #F4F4F4; + background-color: #DEE2E5; border-radius: 8px; - color: #C0C0C0; + color: #C0C7CC; margin: 0; } @@ -1486,7 +1486,7 @@ Object { } .emotion-12 svg { - fill: #C0C0C0; + fill: #C0C7CC; } @media screen and (prefers-reduced-motion: no-preference) { @@ -1725,7 +1725,7 @@ exports[`SvgPreviewer should render correctly when receiving one svg data 1`] = -moz-appearance: none; -ms-appearance: none; appearance: none; - background-color: #577FFB; + background-color: #3358CC; border-radius: 8px; color: #FFFFFF; margin: 0; @@ -1743,20 +1743,20 @@ exports[`SvgPreviewer should render correctly when receiving one svg data 1`] = } .emotion-2:hover:not(:disabled) { - background-color: #3358CC; + background-color: #254CAC; } .emotion-2:active:not(:disabled) { - background-color: #213A82; + background-color: #14328D; } .emotion-2:disabled { - background-color: #F4F4F4; - color: #C0C0C0; + background-color: #DEE2E5; + color: #C0C7CC; } .emotion-2:disabled svg { - fill: #C0C0C0; + fill: #C0C7CC; } .emotion-2:focus-visible:not(:disabled) { @@ -1869,7 +1869,7 @@ exports[`SvgPreviewer should render correctly when receiving one svg data 1`] = -moz-appearance: none; -ms-appearance: none; appearance: none; - background-color: #23A248; + background-color: #007B22; border-radius: 8px; color: #FFFFFF; margin: 0; @@ -1887,20 +1887,20 @@ exports[`SvgPreviewer should render correctly when receiving one svg data 1`] = } .emotion-8:hover:not(:disabled) { - background-color: #148F39; + background-color: #00601A; } .emotion-8:active:not(:disabled) { - background-color: #0A782A; + background-color: #004914; } .emotion-8:disabled { - background-color: #F4F4F4; - color: #C0C0C0; + background-color: #DEE2E5; + color: #C0C7CC; } .emotion-8:disabled svg { - fill: #C0C0C0; + fill: #C0C7CC; } .emotion-8:focus-visible:not(:disabled) { @@ -1960,7 +1960,7 @@ exports[`SvgPreviewer should render correctly when receiving one svg data 1`] = -moz-appearance: none; -ms-appearance: none; appearance: none; - background-color: #23A248; + background-color: #007B22; border-radius: 8px; color: #FFFFFF; margin: 0; @@ -1977,20 +1977,20 @@ exports[`SvgPreviewer should render correctly when receiving one svg data 1`] = } .emotion-12:hover:not(:disabled) { - background-color: #148F39; + background-color: #00601A; } .emotion-12:active:not(:disabled) { - background-color: #0A782A; + background-color: #004914; } .emotion-12:disabled { - background-color: #F4F4F4; - color: #C0C0C0; + background-color: #DEE2E5; + color: #C0C7CC; } .emotion-12:disabled svg { - fill: #C0C0C0; + fill: #C0C7CC; } .emotion-12:focus-visible:not(:disabled) { @@ -2039,7 +2039,7 @@ exports[`SvgPreviewer should render correctly when receiving one svg data 1`] = .emotion-18 { margin: 0; - color: #2E2E2E; + color: #2E3F54; font-family: "DM Sans",sans-serif; font-size: 16px; line-height: 1.5; @@ -2048,7 +2048,7 @@ exports[`SvgPreviewer should render correctly when receiving one svg data 1`] = } .emotion-18 svg { - fill: #2E2E2E; + fill: #2E3F54; }
@@ -2250,7 +2250,7 @@ exports[`SvgPreviewer should render correctly when receiving one svg data 1`] = @@ -2265,7 +2265,7 @@ exports[`SvgPreviewer should render correctly when receiving one svg data 1`] = @@ -2302,7 +2302,7 @@ exports[`SvgPreviewer should render correctly when receiving one svg data 1`] = @@ -2341,7 +2341,7 @@ exports[`SvgPreviewer should render correctly when receiving one svg data 1`] = @@ -2380,7 +2380,7 @@ exports[`SvgPreviewer should render correctly when receiving one svg data 1`] = diff --git a/site/components/usage-card/__tests__/__snapshots__/usage-card.test.tsx.snap b/site/components/usage-card/__tests__/__snapshots__/usage-card.test.tsx.snap index b51d8a1e54..817598986a 100644 --- a/site/components/usage-card/__tests__/__snapshots__/usage-card.test.tsx.snap +++ b/site/components/usage-card/__tests__/__snapshots__/usage-card.test.tsx.snap @@ -40,8 +40,8 @@ exports[`UsageCard Renders Dont UsageCard when kind=dont 1`] = ` -ms-appearance: none; appearance: none; border-style: solid; - border-color: #D20600; - background-color: #FFE6E5; + border-color: #D60000; + background-color: #FEECEC; border-radius: 50%; border-width: 1px; } @@ -52,7 +52,7 @@ exports[`UsageCard Renders Dont UsageCard when kind=dont 1`] = ` } .emotion-2 svg { - fill: #D20600; + fill: #D60000; } .emotion-3 { @@ -89,7 +89,7 @@ exports[`UsageCard Renders Dont UsageCard when kind=dont 1`] = ` display: inline-block; vertical-align: middle; overflow: hidden; - fill: #D20600; + fill: #D60000; vertical-align: unset; display: inline-block; } @@ -113,7 +113,7 @@ exports[`UsageCard Renders Dont UsageCard when kind=dont 1`] = ` .emotion-5.emotion-5 { width: 24px; height: 24px; - fill: #D20600; + fill: #D60000; } @media screen and (prefers-reduced-motion: no-preference) { @@ -165,7 +165,7 @@ exports[`UsageCard Renders Dont UsageCard when kind=dont 1`] = ` .emotion-11 { border-style: solid; - border-color: #D20600; + border-color: #D60000; border-width: 4px; border-radius: 4px; border-width: 0px; @@ -199,16 +199,16 @@ exports[`UsageCard Renders Dont UsageCard when kind=dont 1`] = ` display: inline; font: inherit; margin: 0; - color: #D20600; + color: #D60000; } .emotion-14 svg { - fill: #D20600; + fill: #D60000; } .emotion-16 { margin: 0; - color: #2E2E2E; + color: #2E3F54; font-family: "DM Sans",sans-serif; font-size: 16px; line-height: 24px; @@ -218,7 +218,7 @@ exports[`UsageCard Renders Dont UsageCard when kind=dont 1`] = ` } .emotion-16 svg { - fill: #2E2E2E; + fill: #2E3F54; } .emotion-16::before { @@ -355,8 +355,8 @@ exports[`UsageCard Renders default (Do) UsageCard 1`] = ` -ms-appearance: none; appearance: none; border-style: solid; - border-color: #0A782A; - background-color: #E6FAEB; + border-color: #007B22; + background-color: #E5F4EA; border-radius: 50%; border-width: 1px; } @@ -367,7 +367,7 @@ exports[`UsageCard Renders default (Do) UsageCard 1`] = ` } .emotion-2 svg { - fill: #0A782A; + fill: #007B22; } .emotion-3 { @@ -404,7 +404,7 @@ exports[`UsageCard Renders default (Do) UsageCard 1`] = ` display: inline-block; vertical-align: middle; overflow: hidden; - fill: #0A782A; + fill: #007B22; vertical-align: unset; display: inline-block; } @@ -428,7 +428,7 @@ exports[`UsageCard Renders default (Do) UsageCard 1`] = ` .emotion-5.emotion-5 { width: 24px; height: 24px; - fill: #0A782A; + fill: #007B22; } @media screen and (prefers-reduced-motion: no-preference) { @@ -480,7 +480,7 @@ exports[`UsageCard Renders default (Do) UsageCard 1`] = ` .emotion-11 { border-style: solid; - border-color: #0A782A; + border-color: #007B22; border-width: 4px; border-radius: 4px; border-width: 0px; @@ -514,16 +514,16 @@ exports[`UsageCard Renders default (Do) UsageCard 1`] = ` display: inline; font: inherit; margin: 0; - color: #0A782A; + color: #007B22; } .emotion-14 svg { - fill: #0A782A; + fill: #007B22; } .emotion-16 { margin: 0; - color: #2E2E2E; + color: #2E3F54; font-family: "DM Sans",sans-serif; font-size: 16px; line-height: 24px; @@ -533,7 +533,7 @@ exports[`UsageCard Renders default (Do) UsageCard 1`] = ` } .emotion-16 svg { - fill: #2E2E2E; + fill: #2E3F54; } .emotion-16::before { diff --git a/site/pages/getting-started/code/engineering-overview.tsx b/site/pages/getting-started/code/engineering-overview.tsx index e08ad80623..4937f51790 100644 --- a/site/pages/getting-started/code/engineering-overview.tsx +++ b/site/pages/getting-started/code/engineering-overview.tsx @@ -41,7 +41,7 @@ const PRINCIPLE_CARDS = [ <> NewsKit components folllow{' '} @@ -49,7 +49,7 @@ const PRINCIPLE_CARDS = [ ,{' '} @@ -57,7 +57,7 @@ const PRINCIPLE_CARDS = [ {' '} and @@ -79,7 +79,10 @@ const PRINCIPLE_CARDS = [ description: ( <> NewsKit has an extensive - + theming system {' '} that enables customization of style and layout. Additionally components diff --git a/site/pages/getting-started/design/design-overview.tsx b/site/pages/getting-started/design/design-overview.tsx index 3d26fcaabc..8ba926fe19 100644 --- a/site/pages/getting-started/design/design-overview.tsx +++ b/site/pages/getting-started/design/design-overview.tsx @@ -44,7 +44,7 @@ const PRINCIPLE_CARDS = [ NewsKit is fully customisable, with the flexibility to apply a single brand, or sub-brands style, with an extensive{' '} diff --git a/site/templates/template-sections/__tests__/__snapshots__/accessibility-section.test.tsx.snap b/site/templates/template-sections/__tests__/__snapshots__/accessibility-section.test.tsx.snap index 4bd433093e..932173523c 100644 --- a/site/templates/template-sections/__tests__/__snapshots__/accessibility-section.test.tsx.snap +++ b/site/templates/template-sections/__tests__/__snapshots__/accessibility-section.test.tsx.snap @@ -96,11 +96,11 @@ exports[`AccessibilitySection renders section as expected 1`] = ` display: inline; font: inherit; margin: 0; - color: #0A0A0A; + color: #09111C; } .emotion-5 svg { - fill: #0A0A0A; + fill: #09111C; } @media screen and (max-width: 1023px) { @@ -117,7 +117,7 @@ exports[`AccessibilitySection renders section as expected 1`] = ` .emotion-7 { margin: 0; - color: #2E2E2E; + color: #2E3F54; font-family: "Poppins",sans-serif; font-size: 20px; line-height: 30px; @@ -127,7 +127,7 @@ exports[`AccessibilitySection renders section as expected 1`] = ` } .emotion-7 svg { - fill: #2E2E2E; + fill: #2E3F54; } .emotion-7::before { @@ -160,12 +160,12 @@ exports[`AccessibilitySection renders section as expected 1`] = ` .emotion-10 { margin: 0; - color: #0A0A0A; + color: #09111C; display: inline-block; } .emotion-10 svg { - fill: #0A0A0A; + fill: #09111C; } @media screen and (max-width: 1439px) { @@ -216,11 +216,11 @@ exports[`AccessibilitySection renders section as expected 1`] = ` .emotion-12 { margin: 0; - color: #2E2E2E; + color: #2E3F54; } .emotion-12 svg { - fill: #2E2E2E; + fill: #2E3F54; } @media screen and (max-width: 1439px) { @@ -560,7 +560,7 @@ exports[`AccessibilitySection renders section as expected 1`] = ` .emotion-1 { border-style: solid; - border-color: #E4E4E4; + border-color: #DEE2E5; border-width: 1px; border-width: 0px; margin: 0; diff --git a/site/templates/template-sections/__tests__/__snapshots__/anatomy-section.test.tsx.snap b/site/templates/template-sections/__tests__/__snapshots__/anatomy-section.test.tsx.snap index 4ab354a067..9c112d639c 100644 --- a/site/templates/template-sections/__tests__/__snapshots__/anatomy-section.test.tsx.snap +++ b/site/templates/template-sections/__tests__/__snapshots__/anatomy-section.test.tsx.snap @@ -96,11 +96,11 @@ exports[`AnatomySection renders section as expected 1`] = ` display: inline; font: inherit; margin: 0; - color: #0A0A0A; + color: #09111C; } .emotion-5 svg { - fill: #0A0A0A; + fill: #09111C; } @media screen and (max-width: 1023px) { @@ -117,7 +117,7 @@ exports[`AnatomySection renders section as expected 1`] = ` .emotion-7 { margin: 0; - color: #2E2E2E; + color: #2E3F54; font-family: "Poppins",sans-serif; font-size: 20px; line-height: 30px; @@ -127,7 +127,7 @@ exports[`AnatomySection renders section as expected 1`] = ` } .emotion-7 svg { - fill: #2E2E2E; + fill: #2E3F54; } .emotion-7::before { @@ -306,7 +306,7 @@ exports[`AnatomySection renders section as expected 1`] = ` .emotion-1 { border-style: solid; - border-color: #E4E4E4; + border-color: #DEE2E5; border-width: 1px; border-width: 0px; margin: 0; diff --git a/site/templates/template-sections/__tests__/__snapshots__/behaviors-section.test.tsx.snap b/site/templates/template-sections/__tests__/__snapshots__/behaviors-section.test.tsx.snap index 6eec4530f0..1ffb3dd377 100644 --- a/site/templates/template-sections/__tests__/__snapshots__/behaviors-section.test.tsx.snap +++ b/site/templates/template-sections/__tests__/__snapshots__/behaviors-section.test.tsx.snap @@ -96,11 +96,11 @@ exports[`BehaviorsSection renders section as expected 1`] = ` display: inline; font: inherit; margin: 0; - color: #0A0A0A; + color: #09111C; } .emotion-5 svg { - fill: #0A0A0A; + fill: #09111C; } @media screen and (max-width: 1023px) { @@ -117,7 +117,7 @@ exports[`BehaviorsSection renders section as expected 1`] = ` .emotion-7 { margin: 0; - color: #2E2E2E; + color: #2E3F54; font-family: "Poppins",sans-serif; font-size: 20px; line-height: 30px; @@ -127,7 +127,7 @@ exports[`BehaviorsSection renders section as expected 1`] = ` } .emotion-7 svg { - fill: #2E2E2E; + fill: #2E3F54; } .emotion-7::before { @@ -284,7 +284,7 @@ exports[`BehaviorsSection renders section as expected 1`] = ` .emotion-1 { border-style: solid; - border-color: #E4E4E4; + border-color: #DEE2E5; border-width: 1px; border-width: 0px; margin: 0; diff --git a/site/templates/template-sections/__tests__/__snapshots__/code-examples-section.test.tsx.snap b/site/templates/template-sections/__tests__/__snapshots__/code-examples-section.test.tsx.snap index 80290b5cfe..54dd13914d 100644 --- a/site/templates/template-sections/__tests__/__snapshots__/code-examples-section.test.tsx.snap +++ b/site/templates/template-sections/__tests__/__snapshots__/code-examples-section.test.tsx.snap @@ -224,11 +224,11 @@ exports[`CodeExamplesSection renders section as expected 1`] = ` display: inline; font: inherit; margin: 0; - color: #0A0A0A; + color: #09111C; } .emotion-9 svg { - fill: #0A0A0A; + fill: #09111C; } @media screen and (max-width: 1023px) { @@ -245,7 +245,7 @@ exports[`CodeExamplesSection renders section as expected 1`] = ` .emotion-11 { margin: 0; - color: #2E2E2E; + color: #2E3F54; font-family: "Poppins",sans-serif; font-size: 20px; line-height: 30px; @@ -255,7 +255,7 @@ exports[`CodeExamplesSection renders section as expected 1`] = ` } .emotion-11 svg { - fill: #2E2E2E; + fill: #2E3F54; } .emotion-11::before { @@ -320,11 +320,11 @@ exports[`CodeExamplesSection renders section as expected 1`] = ` .emotion-15 { margin: 0; - color: #0A0A0A; + color: #09111C; } .emotion-15 svg { - fill: #0A0A0A; + fill: #09111C; } @media screen and (max-width: 767px) { @@ -379,11 +379,11 @@ exports[`CodeExamplesSection renders section as expected 1`] = ` .emotion-17 { margin: 0; - color: #2E2E2E; + color: #2E3F54; } .emotion-17 svg { - fill: #2E2E2E; + fill: #2E3F54; } @media screen and (max-width: 1439px) { @@ -446,11 +446,11 @@ exports[`CodeExamplesSection renders section as expected 1`] = ` height: 0; width: 100%; border-radius: 8px; - background-color: #F4F4F4; + background-color: #F0F1F3; } .emotion-19 svg { - fill: #C0C0C0; + fill: #C0C7CC; } .emotion-20 { @@ -490,9 +490,9 @@ exports[`CodeExamplesSection renders section as expected 1`] = ` .emotion-23 { border: solid 1px; - border-color: #E4E4E4; + border-color: #DEE2E5; border-radius: 8px; - background-color: #F4F4F4; + background-color: #F0F1F3; } @media screen and (max-width: 767px) { @@ -509,11 +509,11 @@ exports[`CodeExamplesSection renders section as expected 1`] = ` .emotion-25 { margin: 0; - color: #0A0A0A; + color: #09111C; } .emotion-25 svg { - fill: #0A0A0A; + fill: #09111C; } @media screen and (max-width: 1439px) { @@ -657,12 +657,12 @@ exports[`CodeExamplesSection renders section as expected 1`] = ` > 
                   
                     
                       1
                     
@@ -671,7 +671,7 @@ exports[`CodeExamplesSection renders section as expected 1`] = `
                     
                     
                       1
                     
@@ -720,12 +720,12 @@ exports[`CodeExamplesSection renders section as expected 1`] = `
               >
                 
                   
                     
                       1
                     
@@ -734,7 +734,7 @@ exports[`CodeExamplesSection renders section as expected 1`] = `
                     
                     
                       2
                     
@@ -786,12 +786,12 @@ exports[`CodeExamplesSection renders section as expected 1`] = `
               >
                 
                   
                     
                       1
                     
@@ -800,7 +800,7 @@ exports[`CodeExamplesSection renders section as expected 1`] = `
                     
                     
                       3
                     
@@ -885,7 +885,7 @@ exports[`CodeExamplesSection renders section as expected 1`] = `
 
 .emotion-2 {
   border-style: solid;
-  border-color: #E4E4E4;
+  border-color: #DEE2E5;
   border-width: 1px;
   border-width: 0px;
   margin: 0;
diff --git a/site/templates/template-sections/__tests__/__snapshots__/compliance-section.test.tsx.snap b/site/templates/template-sections/__tests__/__snapshots__/compliance-section.test.tsx.snap
index 75532cd4eb..344eae1ebe 100644
--- a/site/templates/template-sections/__tests__/__snapshots__/compliance-section.test.tsx.snap
+++ b/site/templates/template-sections/__tests__/__snapshots__/compliance-section.test.tsx.snap
@@ -96,11 +96,11 @@ exports[`ComplianceSection renders section as expected 1`] = `
   display: inline;
   font: inherit;
   margin: 0;
-  color: #0A0A0A;
+  color: #09111C;
 }
 
 .emotion-5 svg {
-  fill: #0A0A0A;
+  fill: #09111C;
 }
 
 @media screen and (max-width: 1023px) {
@@ -117,7 +117,7 @@ exports[`ComplianceSection renders section as expected 1`] = `
 
 .emotion-7 {
   margin: 0;
-  color: #2E2E2E;
+  color: #2E3F54;
   font-family: "Poppins",sans-serif;
   font-size: 20px;
   line-height: 30px;
@@ -127,7 +127,7 @@ exports[`ComplianceSection renders section as expected 1`] = `
 }
 
 .emotion-7 svg {
-  fill: #2E2E2E;
+  fill: #2E3F54;
 }
 
 .emotion-7::before {
@@ -312,7 +312,7 @@ exports[`ComplianceSection renders section as expected 1`] = `
 
 .emotion-1 {
   border-style: solid;
-  border-color: #E4E4E4;
+  border-color: #DEE2E5;
   border-width: 1px;
   border-width: 0px;
   margin: 0;
diff --git a/site/templates/template-sections/__tests__/__snapshots__/component-api-section.test.tsx.snap b/site/templates/template-sections/__tests__/__snapshots__/component-api-section.test.tsx.snap
index 7154b1355e..a14fda3f18 100644
--- a/site/templates/template-sections/__tests__/__snapshots__/component-api-section.test.tsx.snap
+++ b/site/templates/template-sections/__tests__/__snapshots__/component-api-section.test.tsx.snap
@@ -96,11 +96,11 @@ exports[`ComponentAPISection renders section as expected 1`] = `
   display: inline;
   font: inherit;
   margin: 0;
-  color: #0A0A0A;
+  color: #09111C;
 }
 
 .emotion-5 svg {
-  fill: #0A0A0A;
+  fill: #09111C;
 }
 
 @media screen and (max-width: 1023px) {
@@ -117,7 +117,7 @@ exports[`ComponentAPISection renders section as expected 1`] = `
 
 .emotion-7 {
   margin: 0;
-  color: #2E2E2E;
+  color: #2E3F54;
   font-family: "Poppins",sans-serif;
   font-size: 20px;
   line-height: 30px;
@@ -127,7 +127,7 @@ exports[`ComponentAPISection renders section as expected 1`] = `
 }
 
 .emotion-7 svg {
-  fill: #2E2E2E;
+  fill: #2E3F54;
 }
 
 .emotion-7::before {
@@ -156,12 +156,12 @@ exports[`ComponentAPISection renders section as expected 1`] = `
 
 .emotion-10 {
   margin: 0;
-  color: #0A0A0A;
+  color: #09111C;
   display: inline-block;
 }
 
 .emotion-10 svg {
-  fill: #0A0A0A;
+  fill: #09111C;
 }
 
 @media screen and (max-width: 1439px) {
@@ -216,11 +216,11 @@ exports[`ComponentAPISection renders section as expected 1`] = `
 
 .emotion-12 {
   margin: 0;
-  color: #2E2E2E;
+  color: #2E3F54;
 }
 
 .emotion-12 svg {
-  fill: #2E2E2E;
+  fill: #2E3F54;
 }
 
 @media screen and (max-width: 1439px) {
@@ -479,7 +479,7 @@ exports[`ComponentAPISection renders section as expected 1`] = `
 
 .emotion-1 {
   border-style: solid;
-  border-color: #E4E4E4;
+  border-color: #DEE2E5;
   border-width: 1px;
   border-width: 0px;
   margin: 0;
diff --git a/site/templates/template-sections/__tests__/__snapshots__/interactive-demo-section.test.tsx.snap b/site/templates/template-sections/__tests__/__snapshots__/interactive-demo-section.test.tsx.snap
index e1070e1d6d..c9487f60c0 100644
--- a/site/templates/template-sections/__tests__/__snapshots__/interactive-demo-section.test.tsx.snap
+++ b/site/templates/template-sections/__tests__/__snapshots__/interactive-demo-section.test.tsx.snap
@@ -96,11 +96,11 @@ exports[`InteractiveDemoSection renders section as expected 1`] = `
   display: inline;
   font: inherit;
   margin: 0;
-  color: #0A0A0A;
+  color: #09111C;
 }
 
 .emotion-5 svg {
-  fill: #0A0A0A;
+  fill: #09111C;
 }
 
 @media screen and (max-width: 1023px) {
@@ -117,7 +117,7 @@ exports[`InteractiveDemoSection renders section as expected 1`] = `
 
 .emotion-7 {
   margin: 0;
-  color: #2E2E2E;
+  color: #2E3F54;
   font-family: "Poppins",sans-serif;
   font-size: 20px;
   line-height: 30px;
@@ -127,7 +127,7 @@ exports[`InteractiveDemoSection renders section as expected 1`] = `
 }
 
 .emotion-7 svg {
-  fill: #2E2E2E;
+  fill: #2E3F54;
 }
 
 .emotion-7::before {
@@ -267,7 +267,7 @@ exports[`InteractiveDemoSection renders section as expected 1`] = `
 
 .emotion-1 {
   border-style: solid;
-  border-color: #E4E4E4;
+  border-color: #DEE2E5;
   border-width: 1px;
   border-width: 0px;
   margin: 0;
diff --git a/site/templates/template-sections/__tests__/__snapshots__/options-section.test.tsx.snap b/site/templates/template-sections/__tests__/__snapshots__/options-section.test.tsx.snap
index 5c8f7c9971..9a46739685 100644
--- a/site/templates/template-sections/__tests__/__snapshots__/options-section.test.tsx.snap
+++ b/site/templates/template-sections/__tests__/__snapshots__/options-section.test.tsx.snap
@@ -96,11 +96,11 @@ exports[`OptionsSection renders section as expected 1`] = `
   display: inline;
   font: inherit;
   margin: 0;
-  color: #0A0A0A;
+  color: #09111C;
 }
 
 .emotion-5 svg {
-  fill: #0A0A0A;
+  fill: #09111C;
 }
 
 @media screen and (max-width: 1023px) {
@@ -117,7 +117,7 @@ exports[`OptionsSection renders section as expected 1`] = `
 
 .emotion-7 {
   margin: 0;
-  color: #2E2E2E;
+  color: #2E3F54;
   font-family: "Poppins",sans-serif;
   font-size: 20px;
   line-height: 30px;
@@ -127,7 +127,7 @@ exports[`OptionsSection renders section as expected 1`] = `
 }
 
 .emotion-7 svg {
-  fill: #2E2E2E;
+  fill: #2E3F54;
 }
 
 .emotion-7::before {
@@ -284,7 +284,7 @@ exports[`OptionsSection renders section as expected 1`] = `
 
 .emotion-1 {
   border-style: solid;
-  border-color: #E4E4E4;
+  border-color: #DEE2E5;
   border-width: 1px;
   border-width: 0px;
   margin: 0;
diff --git a/site/templates/template-sections/__tests__/__snapshots__/related-components-section.test.tsx.snap b/site/templates/template-sections/__tests__/__snapshots__/related-components-section.test.tsx.snap
index 78a958c621..c11ad7a0d6 100644
--- a/site/templates/template-sections/__tests__/__snapshots__/related-components-section.test.tsx.snap
+++ b/site/templates/template-sections/__tests__/__snapshots__/related-components-section.test.tsx.snap
@@ -96,11 +96,11 @@ exports[`RelatedComponentsSection renders a RelatedComp with its data coming fro
   display: inline;
   font: inherit;
   margin: 0;
-  color: #0A0A0A;
+  color: #09111C;
 }
 
 .emotion-5 svg {
-  fill: #0A0A0A;
+  fill: #09111C;
 }
 
 @media screen and (max-width: 1023px) {
@@ -117,7 +117,7 @@ exports[`RelatedComponentsSection renders a RelatedComp with its data coming fro
 
 .emotion-7 {
   margin: 0;
-  color: #2E2E2E;
+  color: #2E3F54;
   font-family: "Poppins",sans-serif;
   font-size: 20px;
   line-height: 30px;
@@ -127,7 +127,7 @@ exports[`RelatedComponentsSection renders a RelatedComp with its data coming fro
 }
 
 .emotion-7 svg {
-  fill: #2E2E2E;
+  fill: #2E3F54;
 }
 
 .emotion-7::before {
@@ -148,7 +148,7 @@ exports[`RelatedComponentsSection renders a RelatedComp with its data coming fro
   border-style: solid;
   border-radius: 12px;
   border-width: 1px;
-  border-color: #E4E4E4;
+  border-color: #DEE2E5;
   position: relative;
   display: -webkit-box;
   display: -webkit-flex;
@@ -203,31 +203,31 @@ exports[`RelatedComponentsSection renders a RelatedComp with its data coming fro
 }
 
 .emotion-14 .nk-headline-kicker {
-  color: #577FFB;
+  color: #3358CC;
 }
 
 .emotion-14:hover:not(:disabled) .nk-headline-kicker {
-  color: #3358CC;
+  color: #254CAC;
   -webkit-text-decoration: underline;
   text-decoration: underline;
 }
 
 .emotion-14:active:not(:disabled) .nk-headline-kicker {
-  color: #213A82;
+  color: #14328D;
   -webkit-text-decoration: underline;
   text-decoration: underline;
 }
 
 .emotion-14:visited:not(:disabled) .nk-headline-kicker {
-  color: #5E44E4;
+  color: #6454E3;
 }
 
 .emotion-14 .nk-headline-heading {
-  color: #0A0A0A;
+  color: #09111C;
 }
 
 .emotion-14 .nk-headline-heading svg {
-  fill: #0A0A0A;
+  fill: #09111C;
 }
 
 .emotion-14:before {
@@ -264,7 +264,7 @@ exports[`RelatedComponentsSection renders a RelatedComp with its data coming fro
 
 .emotion-17 {
   margin: 0;
-  color: #2E2E2E;
+  color: #2E3F54;
   font-family: "DM Sans",sans-serif;
   font-size: 16px;
   line-height: 24px;
@@ -274,7 +274,7 @@ exports[`RelatedComponentsSection renders a RelatedComp with its data coming fro
 }
 
 .emotion-17 svg {
-  fill: #2E2E2E;
+  fill: #2E3F54;
 }
 
 .emotion-17::before {
@@ -466,7 +466,7 @@ exports[`RelatedComponentsSection renders a RelatedComp with its data coming fro
 
 .emotion-1 {
   border-style: solid;
-  border-color: #E4E4E4;
+  border-color: #DEE2E5;
   border-width: 1px;
   border-width: 0px;
   margin: 0;
diff --git a/site/templates/template-sections/__tests__/__snapshots__/seo-section.test.tsx.snap b/site/templates/template-sections/__tests__/__snapshots__/seo-section.test.tsx.snap
index 86cc8a3987..a9970d7d2b 100644
--- a/site/templates/template-sections/__tests__/__snapshots__/seo-section.test.tsx.snap
+++ b/site/templates/template-sections/__tests__/__snapshots__/seo-section.test.tsx.snap
@@ -96,16 +96,16 @@ exports[`SEOSection renders section as expected 1`] = `
   display: inline;
   font: inherit;
   margin: 0;
-  color: #0A0A0A;
+  color: #09111C;
 }
 
 .emotion-5 svg {
-  fill: #0A0A0A;
+  fill: #09111C;
 }
 
 .emotion-7 {
   margin: 0;
-  color: #2E2E2E;
+  color: #2E3F54;
   font-family: "Poppins",sans-serif;
   font-size: 20px;
   line-height: 30px;
@@ -115,7 +115,7 @@ exports[`SEOSection renders section as expected 1`] = `
 }
 
 .emotion-7 svg {
-  fill: #2E2E2E;
+  fill: #2E3F54;
 }
 
 .emotion-7::before {
@@ -231,7 +231,7 @@ exports[`SEOSection renders section as expected 1`] = `
 
 .emotion-1 {
   border-style: solid;
-  border-color: #E4E4E4;
+  border-color: #DEE2E5;
   border-width: 1px;
   border-width: 0px;
   margin: 0;
diff --git a/site/templates/template-sections/__tests__/__snapshots__/states-section.test.tsx.snap b/site/templates/template-sections/__tests__/__snapshots__/states-section.test.tsx.snap
index 050e92168b..3741d0f3d7 100644
--- a/site/templates/template-sections/__tests__/__snapshots__/states-section.test.tsx.snap
+++ b/site/templates/template-sections/__tests__/__snapshots__/states-section.test.tsx.snap
@@ -96,11 +96,11 @@ exports[`StatesSection renders section as expected 1`] = `
   display: inline;
   font: inherit;
   margin: 0;
-  color: #0A0A0A;
+  color: #09111C;
 }
 
 .emotion-5 svg {
-  fill: #0A0A0A;
+  fill: #09111C;
 }
 
 @media screen and (max-width: 1023px) {
@@ -117,7 +117,7 @@ exports[`StatesSection renders section as expected 1`] = `
 
 .emotion-7 {
   margin: 0;
-  color: #2E2E2E;
+  color: #2E3F54;
   font-family: "Poppins",sans-serif;
   font-size: 20px;
   line-height: 30px;
@@ -127,7 +127,7 @@ exports[`StatesSection renders section as expected 1`] = `
 }
 
 .emotion-7 svg {
-  fill: #2E2E2E;
+  fill: #2E3F54;
 }
 
 .emotion-7::before {
@@ -277,7 +277,7 @@ exports[`StatesSection renders section as expected 1`] = `
 
 .emotion-1 {
   border-style: solid;
-  border-color: #E4E4E4;
+  border-color: #DEE2E5;
   border-width: 1px;
   border-width: 0px;
   margin: 0;
diff --git a/site/templates/template-sections/__tests__/__snapshots__/usage-section.test.tsx.snap b/site/templates/template-sections/__tests__/__snapshots__/usage-section.test.tsx.snap
index 1d15023494..75cdf8451d 100644
--- a/site/templates/template-sections/__tests__/__snapshots__/usage-section.test.tsx.snap
+++ b/site/templates/template-sections/__tests__/__snapshots__/usage-section.test.tsx.snap
@@ -96,11 +96,11 @@ exports[`UsageSection renders section as expected 1`] = `
   display: inline;
   font: inherit;
   margin: 0;
-  color: #0A0A0A;
+  color: #09111C;
 }
 
 .emotion-5 svg {
-  fill: #0A0A0A;
+  fill: #09111C;
 }
 
 @media screen and (max-width: 1023px) {
@@ -117,7 +117,7 @@ exports[`UsageSection renders section as expected 1`] = `
 
 .emotion-7 {
   margin: 0;
-  color: #2E2E2E;
+  color: #2E3F54;
   font-family: "Poppins",sans-serif;
   font-size: 20px;
   line-height: 30px;
@@ -127,7 +127,7 @@ exports[`UsageSection renders section as expected 1`] = `
 }
 
 .emotion-7 svg {
-  fill: #2E2E2E;
+  fill: #2E3F54;
 }
 
 .emotion-7::before {
@@ -281,7 +281,7 @@ exports[`UsageSection renders section as expected 1`] = `
 
 .emotion-1 {
   border-style: solid;
-  border-color: #E4E4E4;
+  border-color: #DEE2E5;
   border-width: 1px;
   border-width: 0px;
   margin: 0;
diff --git a/site/theme/__tests__/__snapshots__/doc-theme.test.ts.snap b/site/theme/__tests__/__snapshots__/doc-theme.test.ts.snap
index 5261162159..c544de6dec 100644
--- a/site/theme/__tests__/__snapshots__/doc-theme.test.ts.snap
+++ b/site/theme/__tests__/__snapshots__/doc-theme.test.ts.snap
@@ -26,84 +26,85 @@ Object {
     "xs": 0,
   },
   "colors": Object {
-    "amber010": "#FFEECF",
-    "amber020": "#FFDB9D",
-    "amber030": "#FFC058",
-    "amber040": "#FFAD2C",
-    "amber050": "#FF9900",
-    "amber060": "#FF8F00",
-    "amber070": "#FF8200",
-    "amber080": "#FF7200",
-    "amber090": "#FF6000",
-    "amber100": "#FF4B00",
+    "amber010": "#FFEDE1",
+    "amber020": "#FDDCC6",
+    "amber030": "#FEB788",
+    "amber040": "#F79247",
+    "amber050": "#CD6900",
+    "amber060": "#A75500",
+    "amber070": "#804200",
+    "amber080": "#5D2F00",
+    "amber090": "#3C1F00",
+    "amber100": "#1D0D02",
     "black": "#0A0A0A",
-    "blackTint010": "rgba(10,10,10,0.1)",
-    "blackTint020": "rgba(10,10,10,0.2)",
-    "blackTint030": "rgba(10,10,10,0.3)",
-    "blackTint040": "rgba(10,10,10,0.4)",
-    "blackTint050": "rgba(10,10,10,0.5)",
-    "blackTint060": "rgba(10,10,10,0.6)",
-    "blackTint070": "rgba(10,10,10,0.7)",
-    "blackTint080": "rgba(10,10,10,0.8)",
-    "blackTint090": "rgba(10,10,10,0.9)",
-    "blue005": "#F0F3FF",
-    "blue010": "#E0E7FF",
-    "blue020": "#AEBFFF",
-    "blue030": "#87A4FC",
-    "blue040": "#577FFB",
-    "blue050": "#446BE4",
+    "blackTint010": "rgba(0,0,0,0.1)",
+    "blackTint020": "rgba(0,0,0,0.2)",
+    "blackTint030": "rgba(0,0,0,0.3)",
+    "blackTint040": "rgba(0,0,0,0.4)",
+    "blackTint050": "rgba(0,0,0,0.5)",
+    "blackTint060": "rgba(0,0,0,0.6)",
+    "blackTint070": "rgba(0,0,0,0.7)",
+    "blackTint080": "rgba(0,0,0,0.8)",
+    "blackTint090": "rgba(0,0,0,0.9)",
+    "blue010": "#ECF1FF",
+    "blue020": "#D5E0FC",
+    "blue030": "#AEBFFF",
+    "blue040": "#8BA6F6",
+    "blue050": "#577FFB",
+    "blue055": "#446be4",
     "blue060": "#3358CC",
-    "blue070": "#2B4AAB",
-    "blue080": "#213A82",
-    "blue090": "#213A5F",
-    "blue100": "#192C48",
-    "darkBlue010": "#F4F4F4",
-    "darkBlue020": "#EBEBEB",
-    "darkBlue030": "#E4E4E4",
-    "darkBlue040": "#BBC3C9",
-    "darkBlue050": "#96A29B",
-    "darkBlue060": "#808E99",
-    "darkBlue070": "#6E7D8D",
-    "darkBlue080": "#555E74",
-    "darkBlue090": "#243853",
-    "darkBlue100": "#162740",
+    "blue070": "#254CAC",
+    "blue080": "#14328D",
+    "blue090": "#0C285F",
+    "blue100": "#071E3C",
+    "darkBlue010": "#F0F1F3",
+    "darkBlue020": "#DEE2E5",
+    "darkBlue030": "#C0C7CC",
+    "darkBlue040": "#A1ACB4",
+    "darkBlue050": "#85939C",
+    "darkBlue060": "#5A6A79",
+    "darkBlue070": "#435365",
+    "darkBlue080": "#2E3F54",
+    "darkBlue090": "#15263E",
+    "darkBlue095": "#0F1B2C",
+    "darkBlue100": "#09111C",
     "focus010": "#3768FB",
-    "green010": "#E6FAEB",
-    "green020": "#B8EFC8",
-    "green030": "#8EE1A6",
-    "green040": "#67CF86",
-    "green050": "#42BA67",
-    "green060": "#23A248",
-    "green070": "#148F39",
-    "green080": "#0A782A",
-    "green090": "#005D1C",
-    "green100": "#003E11",
+    "green010": "#E5F4EA",
+    "green020": "#C8E4D0",
+    "green030": "#95CAA3",
+    "green040": "#6DB681",
+    "green050": "#41A05B",
+    "green060": "#007B22",
+    "green070": "#00601A",
+    "green080": "#004914",
+    "green090": "#002D0D",
+    "green100": "#001D08",
     "illustrationAnatomyBorder010": "{{colors.blue080}}",
     "illustrationAnatomyBorder020": "{{colors.blue040}}",
     "illustrationAnatomySubtle": "{{colors.blue040}}",
-    "illustrationBackground010": "{{colors.darkBlue090}}",
-    "illustrationBackground020": "{{colors.darkBlue090}}",
+    "illustrationBackground010": "{{colors.darkBlue095}}",
+    "illustrationBackground020": "{{colors.darkBlue095}}",
     "illustrationBorder010": "{{colors.blue070}}",
     "illustrationBorder020": "{{colors.blue060}}",
     "illustrationDisabled": "{{colors.blue070}}",
     "illustrationGradient010": "linear-gradient(0deg, rgba(255,255,255,0.00) 0%, rgba(255,255,255,1) 100%)",
     "illustrationGradient020": "linear-gradient(0deg, rgba(22,39,64,0.00) 0%, rgba(22,39,64,1) 100%",
     "illustrationHighlight010": "{{colors.white}}",
-    "illustrationInterface010": "{{colors.blue050}}",
+    "illustrationInterface010": "{{colors.blue055}}",
     "illustrationInterface020": "{{colors.blue070}}",
     "illustrationInterface030": "{{colors.blue080}}",
     "illustrationInterface040": "{{colors.blue090}}",
     "illustrationInterface050": "{{colors.blue100}}",
-    "illustrationInterface060": "{{colors.blue020}}",
-    "illustrationInterface070": "{{colors.blue030}}",
-    "illustrationInterface080": "{{colors.blue040}}",
-    "illustrationInterface090": "{{colors.blue050}}",
+    "illustrationInterface060": "{{colors.blue030}}",
+    "illustrationInterface070": "{{colors.blue040}}",
+    "illustrationInterface080": "{{colors.blue050}}",
+    "illustrationInterface090": "{{colors.blue055}}",
     "illustrationInterface100": "{{colors.blue010}}",
     "illustrationPalette010": "{{colors.blue010}}",
-    "illustrationPalette020": "{{colors.blue020}}",
-    "illustrationPalette030": "{{colors.blue030}}",
-    "illustrationPalette040": "{{colors.blue040}}",
-    "illustrationPalette050": "{{colors.blue050}}",
+    "illustrationPalette020": "{{colors.blue030}}",
+    "illustrationPalette030": "{{colors.blue040}}",
+    "illustrationPalette040": "{{colors.blue050}}",
+    "illustrationPalette050": "{{colors.blue055}}",
     "illustrationPalette060": "{{colors.blue060}}",
     "illustrationPalette070": "{{colors.blue070}}",
     "illustrationPalette080": "{{colors.blue080}}",
@@ -111,54 +112,59 @@ Object {
     "illustrationPalette100": "{{colors.blue100}}",
     "illustrationShadow010": "{{colors.blackTint060}}",
     "illustrationSubtle010": "{{colors.blue080}}",
-    "inkBase": "{{colors.darkBlue040}}",
+    "inkBase": "{{colors.darkBlue020}}",
     "inkBrand010": "{{colors.purple050}}",
     "inkBrand020": "{{colors.purple030}}",
-    "inkBrand030": "{{colors.teal050}}",
-    "inkContrast": "{{colors.darkBlue010}}",
-    "inkInformative": "{{colors.teal010}}",
+    "inkBrand030": "{{colors.teal060}}",
+    "inkContrast": "{{colors.white}}",
+    "inkDark010": "{{colors.darkBlue100}}",
+    "inkInformative": "{{colors.teal050}}",
     "inkInverse": "{{colors.darkBlue100}}",
-    "inkNegative": "{{colors.red030}}",
-    "inkNonEssential": "{{colors.darkBlue080}}",
-    "inkNotice": "{{colors.neutral030}}",
-    "inkPositive": "{{colors.green030}}",
-    "inkSubtle": "{{colors.darkBlue070}}",
+    "inkLight010": "{{colors.white}}",
+    "inkNegative": "{{colors.red050}}",
+    "inkNonEssential": "{{colors.darkBlue050}}",
+    "inkNotice": "{{colors.darkBlue030}}",
+    "inkPositive": "{{colors.green050}}",
+    "inkSubtle": "{{colors.darkBlue030}}",
     "inkWhiteContrast": "{{colors.white}}",
     "inkWhiteSubtle": "{{colors.whiteTint080}}",
     "interactiveDisabled010": "{{colors.darkBlue080}}",
-    "interactiveFocus010": "{{colors.white}}",
-    "interactiveInput010": "{{colors.neutral010}}",
-    "interactiveInput020": "{{colors.neutral040}}",
-    "interactiveInput030": "{{colors.blue010}}",
-    "interactiveInput040": "{{colors.blue060}}",
-    "interactiveInput050": "{{colors.blue070}}",
-    "interactiveInverse010": "{{colors.whiteTint010}}",
-    "interactiveInverse020": "{{colors.whiteTint020}}",
-    "interactiveInverse030": "{{colors.white}}",
-    "interactiveInverse040": "{{colors.whiteTint070}}",
-    "interactiveInverse050": "{{colors.whiteTint080}}",
-    "interactiveNegative010": "{{colors.red010}}",
-    "interactiveNegative020": "{{colors.red020}}",
-    "interactiveNegative030": "{{colors.red060}}",
-    "interactiveNegative040": "{{colors.red070}}",
-    "interactiveNegative050": "{{colors.red080}}",
-    "interactivePositive010": "{{colors.green010}}",
-    "interactivePositive020": "{{colors.green020}}",
-    "interactivePositive030": "{{colors.green060}}",
-    "interactivePositive040": "{{colors.green070}}",
-    "interactivePositive050": "{{colors.green080}}",
-    "interactivePrimary010": "{{colors.blue080}}",
-    "interactivePrimary020": "{{colors.blue090}}",
-    "interactivePrimary030": "{{colors.blue040}}",
-    "interactivePrimary040": "{{colors.blue050}}",
-    "interactivePrimary050": "{{colors.blue070}}",
-    "interactiveSecondary010": "{{colors.darkBlue080}}",
-    "interactiveSecondary020": "{{colors.darkBlue070}}",
+    "interactiveFocus010": "{{colors.focus010}}",
+    "interactiveInput010": "{{colors.darkBlue090}}",
+    "interactiveInput020": "{{colors.darkBlue060}}",
+    "interactiveInput030": "{{colors.blue090}}",
+    "interactiveInput040": "{{colors.blue050}}",
+    "interactiveInput050": "{{colors.blue030}}",
+    "interactiveInverse010": "{{colors.blackTint010}}",
+    "interactiveInverse020": "{{colors.blackTint020}}",
+    "interactiveInverse030": "{{colors.blackTint090}}",
+    "interactiveInverse040": "{{colors.blackTint070}}",
+    "interactiveInverse050": "{{colors.blackTint080}}",
+    "interactiveLink010": "{{colors.blue050}}",
+    "interactiveLink020": "{{colors.blue040}}",
+    "interactiveLink030": "{{colors.blue030}}",
+    "interactiveNegative010": "{{colors.red100}}",
+    "interactiveNegative020": "{{colors.red080}}",
+    "interactiveNegative030": "{{colors.red050}}",
+    "interactiveNegative040": "{{colors.red040}}",
+    "interactiveNegative050": "{{colors.red030}}",
+    "interactivePositive010": "{{colors.green090}}",
+    "interactivePositive020": "{{colors.green080}}",
+    "interactivePositive030": "{{colors.green050}}",
+    "interactivePositive040": "{{colors.green040}}",
+    "interactivePositive050": "{{colors.green030}}",
+    "interactivePrimary010": "{{colors.darkBlue090}}",
+    "interactivePrimary020": "{{colors.darkBlue080}}",
+    "interactivePrimary030": "{{colors.blue050}}",
+    "interactivePrimary040": "{{colors.blue040}}",
+    "interactivePrimary050": "{{colors.blue030}}",
+    "interactiveSecondary010": "{{colors.darkBlue090}}",
+    "interactiveSecondary020": "{{colors.darkBlue090}}",
     "interactiveSecondary030": "{{colors.darkBlue050}}",
-    "interactiveSecondary040": "{{colors.darkBlue060}}",
-    "interactiveSecondary050": "{{colors.darkBlue070}}",
+    "interactiveSecondary040": "{{colors.darkBlue030}}",
+    "interactiveSecondary050": "{{colors.darkBlue030}}",
     "interactiveVisited010": "{{colors.purple050}}",
-    "interface010": "{{colors.darkBlue100}}",
+    "interface010": "{{colors.darkBlue095}}",
     "interface020": "{{colors.darkBlue090}}",
     "interface030": "{{colors.darkBlue080}}",
     "interface040": "{{colors.darkBlue070}}",
@@ -170,49 +176,50 @@ Object {
     "interfaceBrand030": "{{colors.purple050}}",
     "interfaceBrand040": "{{colors.purple040}}",
     "interfaceBrand050": "{{colors.purple020}}",
-    "interfaceBrand060": "{{colors.teal050}}",
+    "interfaceBrand060": "{{colors.teal060}}",
     "interfaceInformative010": "{{colors.teal050}}",
-    "interfaceInformative020": "{{colors.teal070}}",
-    "interfaceNegative010": "{{colors.red040}}",
-    "interfaceNegative020": "{{colors.red070}}",
-    "interfaceNeutral010": "{{colors.neutral080}}",
-    "interfaceNeutral020": "{{colors.neutral010}}",
-    "interfaceNotice010": "{{colors.amber040}}",
-    "interfaceNotice020": "{{colors.amber070}}",
-    "interfacePositive010": "{{colors.green040}}",
-    "interfacePositive020": "{{colors.green070}}",
+    "interfaceInformative020": "{{colors.teal090}}",
+    "interfaceNegative010": "{{colors.red050}}",
+    "interfaceNegative020": "{{colors.red090}}",
+    "interfaceNeutral010": "{{colors.darkBlue030}}",
+    "interfaceNeutral020": "{{colors.darkBlue080}}",
+    "interfaceNotice010": "{{colors.darkBlue030}}",
+    "interfaceNotice020": "{{colors.darkBlue080}}",
+    "interfacePositive010": "{{colors.green050}}",
+    "interfacePositive020": "{{colors.green090}}",
     "interfaceSkeleton010": "{{colors.darkBlue090}}",
-    "interfaceSkeleton020": "{{colors.darkBlue080}}",
-    "neutral010": "#FAFAFA",
-    "neutral020": "#F4F4F4",
-    "neutral030": "#DEDEDE",
-    "neutral040": "#CCCCCC",
-    "neutral050": "#C0C0C0",
-    "neutral060": "#9C9C9C",
-    "neutral070": "#777777",
-    "neutral080": "#535353",
-    "neutral090": "#2E2E2E",
-    "neutral100": "#0A0A0A",
-    "purple010": "#E5E0FF",
-    "purple020": "#BBAEFF",
-    "purple030": "#9B87FC",
-    "purple040": "#7264EF",
-    "purple050": "#5E44E4",
-    "purple060": "#4C33CC",
-    "purple070": "#442EB5",
-    "purple080": "#36248C",
-    "purple090": "#332770",
-    "purple100": "#2A205C",
-    "red010": "#FFE6E5",
-    "red020": "#FFB8B8",
-    "red030": "#FF8A8A",
-    "red040": "#FF5C5C",
-    "red050": "#FF362E",
-    "red060": "#EF1703",
-    "red070": "#D20600",
-    "red080": "#A60100",
-    "red090": "#790101",
-    "red100": "#4D0000",
+    "interfaceSkeleton020": "{{colors.darkBlue090}}",
+    "neutral010": "#F1F1F1",
+    "neutral020": "#E2E2E2",
+    "neutral030": "#C6C6C6",
+    "neutral040": "#ABABAB",
+    "neutral050": "#919191",
+    "neutral060": "#6A6A6A",
+    "neutral070": "#525252",
+    "neutral080": "#3B3B3B",
+    "neutral090": "#262626",
+    "neutral100": "#111111",
+    "purple010": "#EFF0FF",
+    "purple020": "#DFE0FE",
+    "purple030": "#C0C2FC",
+    "purple040": "#A3A3FB",
+    "purple050": "#8883F6",
+    "purple055": "#6e61e4",
+    "purple060": "#6454E3",
+    "purple070": "#4C33CC",
+    "purple080": "#37239C",
+    "purple090": "#231668",
+    "purple100": "#0F0936",
+    "red010": "#FEECEC",
+    "red020": "#FED8D8",
+    "red030": "#FEB3B3",
+    "red040": "#FE8888",
+    "red050": "#FB5959",
+    "red060": "#D60000",
+    "red070": "#A90000",
+    "red080": "#820000",
+    "red090": "#550000",
+    "red100": "#3A0000",
     "socialApple": "#000000",
     "socialFacebook": "#1877F2",
     "socialGithub": "#000000",
@@ -225,16 +232,17 @@ Object {
     "socialTwitter": "#1DA1F2",
     "socialWhatsapp": "#25D366",
     "socialYoutube": "#FF0000",
-    "teal010": "#EBF8F9",
-    "teal020": "#A8E0E6",
-    "teal030": "#81D2DA",
-    "teal040": "#65BBC4",
-    "teal050": "#41A0AA",
-    "teal060": "#06808E",
-    "teal070": "#05717D",
-    "teal080": "#0D575E",
-    "teal090": "#093E43",
-    "teal100": "#083136",
+    "teal010": "#E6F4F6",
+    "teal020": "#C7E7EA",
+    "teal030": "#97D0D6",
+    "teal040": "#5EB8C0",
+    "teal050": "#289FAB",
+    "teal055": "#06808e",
+    "teal060": "#017582",
+    "teal070": "#005B65",
+    "teal080": "#004249",
+    "teal090": "#002B30",
+    "teal100": "#001314",
     "transparent": "transparent",
     "white": "#FFFFFF",
     "whiteTint010": "rgba(255,255,255,0.1)",
@@ -1235,6 +1243,8 @@ Object {
       },
       "hover": Object {
         "backgroundColor": "{{colors.interactiveInverse020}}",
+        "color": "{{colors.inkWhiteContrast}}",
+        "iconColor": "{{colors.inkWhiteContrast}}",
       },
       "loading": Object {
         "backgroundColor": "{{colors.interactiveInverse020}}",
@@ -1278,6 +1288,12 @@ Object {
         "color": "{{colors.inkContrast}}",
       },
     },
+    "homepageCard": Object {
+      "base": Object {
+        "backgroundColor": "{{colors.transparent}}",
+        "color": "{{colors.inkBase}}",
+      },
+    },
     "imageDefault": Object {
       "base": Object {
         "borderRadius": "{{borders.borderRadiusRounded020}}",
@@ -1445,6 +1461,8 @@ Object {
       },
       "hover": Object {
         "backgroundColor": "{{colors.interactiveInverse020}}",
+        "color": "{{colors.inkWhiteContrast}}",
+        "iconColor": "{{colors.inkWhiteContrast}}",
       },
       "loading": Object {
         "backgroundColor": "{{colors.interactiveInverse020}}",
@@ -1499,6 +1517,8 @@ Object {
       },
       "hover": Object {
         "backgroundColor": "{{colors.interactiveInverse020}}",
+        "color": "{{colors.inkWhiteContrast}}",
+        "iconColor": "{{colors.inkWhiteContrast}}",
       },
       "loading": Object {
         "backgroundColor": "{{colors.interactiveInverse020}}",
@@ -1607,8 +1627,8 @@ Object {
       "base": Object {
         "backgroundColor": "{{colors.interactiveInverse030}}",
         "borderRadius": "{{borders.borderRadiusDefault}}",
-        "color": "{{colors.interfaceBrand030}}",
-        "iconColor": "{{colors.interfaceBrand030}}",
+        "color": "{{colors.inkBrand010}}",
+        "iconColor": "{{colors.inkBrand010}}",
       },
       "disabled": Object {
         "backgroundColor": "{{colors.interactiveInverse020}}",
@@ -1720,8 +1740,8 @@ Object {
         "textDecoration": "none",
       },
       "hover": Object {
-        "backgroundColor": "{{colors.interactivePrimary010}}",
-        "color": "{{colors.interactivePrimary030}}",
+        "backgroundColor": "{{colors.interactivePrimary020}}",
+        "color": "{{colors.interactivePrimary040}}",
       },
       "selected": Object {
         "borderColor": "{{colors.transparent}} {{colors.transparent}} {{colors.transparent}} {{colors.interactivePrimary030}} ",
@@ -1731,7 +1751,7 @@ Object {
     },
     "sidebar": Object {
       "base": Object {
-        "backgroundColor": "{{colors.interface020}}",
+        "backgroundColor": "{{colors.interface010}}",
         "borderColor": "{{colors.interface040}}",
         "borderStyle": "solid",
         "borderWidth": "{{borders.borderWidth000}} {{borders.borderWidth010}} {{borders.borderWidth000}} {{borders.borderWidth000}}",
@@ -1866,8 +1886,8 @@ Object {
     "whatsnewCardButton": Object {
       "active": Object {
         "backgroundColor": "{{colors.interactiveInverse050}}",
-        "color": "{{colors.inkBrand020}}",
-        "iconColor": "{{colors.inkBrand020}}",
+        "color": "{{colors.inkBrand030}}",
+        "iconColor": "{{colors.inkBrand030}}",
       },
       "base": Object {
         "backgroundColor": "{{colors.interactiveInverse030}}",
@@ -2606,109 +2626,112 @@ Object {
     "xs": 0,
   },
   "colors": Object {
-    "amber010": "#FFEECF",
-    "amber020": "#FFDB9D",
-    "amber030": "#FFC058",
-    "amber040": "#FFAD2C",
-    "amber050": "#FF9900",
-    "amber060": "#FF8F00",
-    "amber070": "#FF8200",
-    "amber080": "#FF7200",
-    "amber090": "#FF6000",
-    "amber100": "#FF4B00",
+    "amber010": "#FFEDE1",
+    "amber020": "#FDDCC6",
+    "amber030": "#FEB788",
+    "amber040": "#F79247",
+    "amber050": "#CD6900",
+    "amber060": "#A75500",
+    "amber070": "#804200",
+    "amber080": "#5D2F00",
+    "amber090": "#3C1F00",
+    "amber100": "#1D0D02",
     "black": "#0A0A0A",
-    "blackTint010": "rgba(10,10,10,0.1)",
-    "blackTint020": "rgba(10,10,10,0.2)",
-    "blackTint030": "rgba(10,10,10,0.3)",
-    "blackTint040": "rgba(10,10,10,0.4)",
-    "blackTint050": "rgba(10,10,10,0.5)",
-    "blackTint060": "rgba(10,10,10,0.6)",
-    "blackTint070": "rgba(10,10,10,0.7)",
-    "blackTint080": "rgba(10,10,10,0.8)",
-    "blackTint090": "rgba(10,10,10,0.9)",
-    "blue005": "#F0F3FF",
-    "blue010": "#E0E7FF",
-    "blue020": "#AEBFFF",
-    "blue030": "#87A4FC",
-    "blue040": "#577FFB",
-    "blue050": "#446BE4",
+    "blackTint010": "rgba(0,0,0,0.1)",
+    "blackTint020": "rgba(0,0,0,0.2)",
+    "blackTint030": "rgba(0,0,0,0.3)",
+    "blackTint040": "rgba(0,0,0,0.4)",
+    "blackTint050": "rgba(0,0,0,0.5)",
+    "blackTint060": "rgba(0,0,0,0.6)",
+    "blackTint070": "rgba(0,0,0,0.7)",
+    "blackTint080": "rgba(0,0,0,0.8)",
+    "blackTint090": "rgba(0,0,0,0.9)",
+    "blue010": "#ECF1FF",
+    "blue020": "#D5E0FC",
+    "blue030": "#AEBFFF",
+    "blue040": "#8BA6F6",
+    "blue050": "#577FFB",
+    "blue055": "#446be4",
     "blue060": "#3358CC",
-    "blue070": "#2B4AAB",
-    "blue080": "#213A82",
-    "blue090": "#213A5F",
-    "blue100": "#192C48",
-    "darkBlue010": "#F4F4F4",
-    "darkBlue020": "#EBEBEB",
-    "darkBlue030": "#E4E4E4",
-    "darkBlue040": "#BBC3C9",
-    "darkBlue050": "#96A29B",
-    "darkBlue060": "#808E99",
-    "darkBlue070": "#6E7D8D",
-    "darkBlue080": "#555E74",
-    "darkBlue090": "#243853",
-    "darkBlue100": "#162740",
+    "blue070": "#254CAC",
+    "blue080": "#14328D",
+    "blue090": "#0C285F",
+    "blue100": "#071E3C",
+    "darkBlue010": "#F0F1F3",
+    "darkBlue020": "#DEE2E5",
+    "darkBlue030": "#C0C7CC",
+    "darkBlue040": "#A1ACB4",
+    "darkBlue050": "#85939C",
+    "darkBlue060": "#5A6A79",
+    "darkBlue070": "#435365",
+    "darkBlue080": "#2E3F54",
+    "darkBlue090": "#15263E",
+    "darkBlue095": "#0F1B2C",
+    "darkBlue100": "#09111C",
     "focus010": "#3768FB",
-    "green010": "#E6FAEB",
-    "green020": "#B8EFC8",
-    "green030": "#8EE1A6",
-    "green040": "#67CF86",
-    "green050": "#42BA67",
-    "green060": "#23A248",
-    "green070": "#148F39",
-    "green080": "#0A782A",
-    "green090": "#005D1C",
-    "green100": "#003E11",
-    "illustrationAnatomyBorder010": "{{colors.blue020}}",
+    "green010": "#E5F4EA",
+    "green020": "#C8E4D0",
+    "green030": "#95CAA3",
+    "green040": "#6DB681",
+    "green050": "#41A05B",
+    "green060": "#007B22",
+    "green070": "#00601A",
+    "green080": "#004914",
+    "green090": "#002D0D",
+    "green100": "#001D08",
+    "illustrationAnatomyBorder010": "{{colors.blue030}}",
     "illustrationAnatomyBorder020": "{{colors.blue070}}",
-    "illustrationAnatomySubtle": "{{colors.blue020}}",
-    "illustrationBackground010": "{{colors.blue005}}",
+    "illustrationAnatomySubtle": "{{colors.blue030}}",
+    "illustrationBackground010": "{{colors.blue010}}",
     "illustrationBackground020": "{{colors.darkBlue010}}",
     "illustrationBorder010": "{{colors.darkBlue020}}",
-    "illustrationBorder020": "{{colors.darkBlue040}}",
+    "illustrationBorder020": "{{colors.darkBlue030}}",
     "illustrationDisabled": "{{colors.darkBlue020}}",
     "illustrationGradient010": "linear-gradient(0deg, rgba(10,10,10,0.00) 0%, rgba(10,10,10,1) 100%)",
     "illustrationGradient020": "linear-gradient(0deg, rgba(255,255,255,0.00) 0%, rgba(255,255,255,1) 100%)",
-    "illustrationHighlight010": "{{colors.blue040}}",
+    "illustrationHighlight010": "{{colors.blue050}}",
     "illustrationInterface010": "{{colors.white}}",
-    "illustrationInterface020": "{{colors.blue010}}",
-    "illustrationInterface030": "{{colors.blue020}}",
-    "illustrationInterface040": "{{colors.blue030}}",
-    "illustrationInterface050": "{{colors.blue040}}",
-    "illustrationInterface060": "{{colors.blue050}}",
+    "illustrationInterface020": "{{colors.blue020}}",
+    "illustrationInterface030": "{{colors.blue030}}",
+    "illustrationInterface040": "{{colors.blue040}}",
+    "illustrationInterface050": "{{colors.blue050}}",
+    "illustrationInterface060": "{{colors.blue055}}",
     "illustrationInterface070": "{{colors.blue060}}",
     "illustrationInterface080": "{{colors.blue070}}",
     "illustrationInterface090": "{{colors.blue080}}",
     "illustrationInterface100": "{{colors.blue090}}",
     "illustrationPalette010": "{{colors.blue010}}",
-    "illustrationPalette020": "{{colors.blue020}}",
-    "illustrationPalette030": "{{colors.blue030}}",
-    "illustrationPalette040": "{{colors.blue040}}",
-    "illustrationPalette050": "{{colors.blue050}}",
+    "illustrationPalette020": "{{colors.blue030}}",
+    "illustrationPalette030": "{{colors.blue040}}",
+    "illustrationPalette040": "{{colors.blue050}}",
+    "illustrationPalette050": "{{colors.blue055}}",
     "illustrationPalette060": "{{colors.blue060}}",
     "illustrationPalette070": "{{colors.blue070}}",
     "illustrationPalette080": "{{colors.blue080}}",
     "illustrationPalette090": "{{colors.blue090}}",
     "illustrationPalette100": "{{colors.blue100}}",
     "illustrationShadow010": "{{colors.blackTint030}}",
-    "illustrationSubtle010": "{{colors.darkBlue060}}",
-    "inkBase": "{{colors.neutral090}}",
+    "illustrationSubtle010": "{{colors.darkBlue050}}",
+    "inkBase": "{{colors.darkBlue080}}",
     "inkBrand010": "{{colors.purple050}}",
     "inkBrand020": "{{colors.purple080}}",
-    "inkBrand030": "{{colors.teal050}}",
-    "inkContrast": "{{colors.neutral100}}",
-    "inkInformative": "{{colors.teal070}}",
+    "inkBrand030": "{{colors.teal060}}",
+    "inkContrast": "{{colors.darkBlue100}}",
+    "inkDark010": "{{colors.darkBlue100}}",
+    "inkInformative": "{{colors.teal060}}",
     "inkInverse": "{{colors.white}}",
-    "inkNegative": "{{colors.red070}}",
-    "inkNonEssential": "{{colors.neutral050}}",
-    "inkNotice": "{{colors.neutral080}}",
-    "inkPositive": "{{colors.green080}}",
-    "inkSubtle": "{{colors.neutral080}}",
+    "inkLight010": "{{colors.white}}",
+    "inkNegative": "{{colors.red060}}",
+    "inkNonEssential": "{{colors.darkBlue030}}",
+    "inkNotice": "{{colors.darkBlue070}}",
+    "inkPositive": "{{colors.green060}}",
+    "inkSubtle": "{{colors.darkBlue060}}",
     "inkWhiteContrast": "{{colors.white}}",
     "inkWhiteSubtle": "{{colors.whiteTint080}}",
-    "interactiveDisabled010": "{{colors.neutral020}}",
+    "interactiveDisabled010": "{{colors.darkBlue020}}",
     "interactiveFocus010": "{{colors.focus010}}",
-    "interactiveInput010": "{{colors.neutral010}}",
-    "interactiveInput020": "{{colors.neutral040}}",
+    "interactiveInput010": "{{colors.darkBlue010}}",
+    "interactiveInput020": "{{colors.darkBlue050}}",
     "interactiveInput030": "{{colors.blue010}}",
     "interactiveInput040": "{{colors.blue060}}",
     "interactiveInput050": "{{colors.blue070}}",
@@ -2717,6 +2740,9 @@ Object {
     "interactiveInverse030": "{{colors.white}}",
     "interactiveInverse040": "{{colors.whiteTint070}}",
     "interactiveInverse050": "{{colors.whiteTint080}}",
+    "interactiveLink010": "{{colors.blue060}}",
+    "interactiveLink020": "{{colors.blue070}}",
+    "interactiveLink030": "{{colors.blue080}}",
     "interactiveNegative010": "{{colors.red010}}",
     "interactiveNegative020": "{{colors.red020}}",
     "interactiveNegative030": "{{colors.red060}}",
@@ -2729,20 +2755,20 @@ Object {
     "interactivePositive050": "{{colors.green080}}",
     "interactivePrimary010": "{{colors.blue010}}",
     "interactivePrimary020": "{{colors.blue020}}",
-    "interactivePrimary030": "{{colors.blue040}}",
-    "interactivePrimary040": "{{colors.blue060}}",
+    "interactivePrimary030": "{{colors.blue060}}",
+    "interactivePrimary040": "{{colors.blue070}}",
     "interactivePrimary050": "{{colors.blue080}}",
-    "interactiveSecondary010": "{{colors.neutral020}}",
-    "interactiveSecondary020": "{{colors.neutral040}}",
-    "interactiveSecondary030": "{{colors.neutral080}}",
-    "interactiveSecondary040": "{{colors.neutral090}}",
-    "interactiveSecondary050": "{{colors.neutral100}}",
-    "interactiveVisited010": "{{colors.purple050}}",
-    "interface010": "{{colors.white}}",
+    "interactiveSecondary010": "{{colors.darkBlue010}}",
+    "interactiveSecondary020": "{{colors.darkBlue020}}",
+    "interactiveSecondary030": "{{colors.darkBlue080}}",
+    "interactiveSecondary040": "{{colors.darkBlue090}}",
+    "interactiveSecondary050": "{{colors.darkBlue100}}",
+    "interactiveVisited010": "{{colors.purple060}}",
+    "interface010": "{{colors.darkBlue010}}",
     "interface020": "{{colors.darkBlue010}}",
     "interface030": "{{colors.darkBlue020}}",
-    "interface040": "{{colors.darkBlue030}}",
-    "interface050": "{{colors.darkBlue040}}",
+    "interface040": "{{colors.darkBlue020}}",
+    "interface050": "{{colors.darkBlue030}}",
     "interface060": "{{colors.darkBlue100}}",
     "interfaceBackground": "{{colors.white}}",
     "interfaceBrand010": "{{colors.purple020}}",
@@ -2750,49 +2776,50 @@ Object {
     "interfaceBrand030": "{{colors.purple050}}",
     "interfaceBrand040": "{{colors.purple070}}",
     "interfaceBrand050": "{{colors.purple080}}",
-    "interfaceBrand060": "{{colors.teal050}}",
-    "interfaceInformative010": "{{colors.teal070}}",
+    "interfaceBrand060": "{{colors.teal060}}",
+    "interfaceInformative010": "{{colors.teal060}}",
     "interfaceInformative020": "{{colors.teal010}}",
-    "interfaceNegative010": "{{colors.red070}}",
+    "interfaceNegative010": "{{colors.red060}}",
     "interfaceNegative020": "{{colors.red010}}",
-    "interfaceNeutral010": "{{colors.neutral080}}",
-    "interfaceNeutral020": "{{colors.neutral010}}",
-    "interfaceNotice010": "{{colors.neutral080}}",
-    "interfaceNotice020": "{{colors.neutral020}}",
-    "interfacePositive010": "{{colors.green080}}",
+    "interfaceNeutral010": "{{colors.darkBlue080}}",
+    "interfaceNeutral020": "{{colors.darkBlue010}}",
+    "interfaceNotice010": "{{colors.darkBlue080}}",
+    "interfaceNotice020": "{{colors.darkBlue010}}",
+    "interfacePositive010": "{{colors.green060}}",
     "interfacePositive020": "{{colors.green010}}",
     "interfaceSkeleton010": "{{colors.darkBlue010}}",
     "interfaceSkeleton020": "{{colors.darkBlue020}}",
-    "neutral010": "#FAFAFA",
-    "neutral020": "#F4F4F4",
-    "neutral030": "#DEDEDE",
-    "neutral040": "#CCCCCC",
-    "neutral050": "#C0C0C0",
-    "neutral060": "#9C9C9C",
-    "neutral070": "#777777",
-    "neutral080": "#535353",
-    "neutral090": "#2E2E2E",
-    "neutral100": "#0A0A0A",
-    "purple010": "#E5E0FF",
-    "purple020": "#BBAEFF",
-    "purple030": "#9B87FC",
-    "purple040": "#7264EF",
-    "purple050": "#5E44E4",
-    "purple060": "#4C33CC",
-    "purple070": "#442EB5",
-    "purple080": "#36248C",
-    "purple090": "#332770",
-    "purple100": "#2A205C",
-    "red010": "#FFE6E5",
-    "red020": "#FFB8B8",
-    "red030": "#FF8A8A",
-    "red040": "#FF5C5C",
-    "red050": "#FF362E",
-    "red060": "#EF1703",
-    "red070": "#D20600",
-    "red080": "#A60100",
-    "red090": "#790101",
-    "red100": "#4D0000",
+    "neutral010": "#F1F1F1",
+    "neutral020": "#E2E2E2",
+    "neutral030": "#C6C6C6",
+    "neutral040": "#ABABAB",
+    "neutral050": "#919191",
+    "neutral060": "#6A6A6A",
+    "neutral070": "#525252",
+    "neutral080": "#3B3B3B",
+    "neutral090": "#262626",
+    "neutral100": "#111111",
+    "purple010": "#EFF0FF",
+    "purple020": "#DFE0FE",
+    "purple030": "#C0C2FC",
+    "purple040": "#A3A3FB",
+    "purple050": "#8883F6",
+    "purple055": "#6e61e4",
+    "purple060": "#6454E3",
+    "purple070": "#4C33CC",
+    "purple080": "#37239C",
+    "purple090": "#231668",
+    "purple100": "#0F0936",
+    "red010": "#FEECEC",
+    "red020": "#FED8D8",
+    "red030": "#FEB3B3",
+    "red040": "#FE8888",
+    "red050": "#FB5959",
+    "red060": "#D60000",
+    "red070": "#A90000",
+    "red080": "#820000",
+    "red090": "#550000",
+    "red100": "#3A0000",
     "socialApple": "#000000",
     "socialFacebook": "#1877F2",
     "socialGithub": "#000000",
@@ -2805,16 +2832,17 @@ Object {
     "socialTwitter": "#1DA1F2",
     "socialWhatsapp": "#25D366",
     "socialYoutube": "#FF0000",
-    "teal010": "#EBF8F9",
-    "teal020": "#A8E0E6",
-    "teal030": "#81D2DA",
-    "teal040": "#65BBC4",
-    "teal050": "#41A0AA",
-    "teal060": "#06808E",
-    "teal070": "#05717D",
-    "teal080": "#0D575E",
-    "teal090": "#093E43",
-    "teal100": "#083136",
+    "teal010": "#E6F4F6",
+    "teal020": "#C7E7EA",
+    "teal030": "#97D0D6",
+    "teal040": "#5EB8C0",
+    "teal050": "#289FAB",
+    "teal055": "#06808e",
+    "teal060": "#017582",
+    "teal070": "#005B65",
+    "teal080": "#004249",
+    "teal090": "#002B30",
+    "teal100": "#001314",
     "transparent": "transparent",
     "white": "#FFFFFF",
     "whiteTint010": "rgba(255,255,255,0.1)",
@@ -3812,6 +3840,8 @@ Object {
       },
       "hover": Object {
         "backgroundColor": "{{colors.interactiveInverse020}}",
+        "color": "{{colors.inkWhiteContrast}}",
+        "iconColor": "{{colors.inkWhiteContrast}}",
       },
       "loading": Object {
         "backgroundColor": "{{colors.interactiveInverse020}}",
@@ -3855,6 +3885,12 @@ Object {
         "color": "{{colors.inkContrast}}",
       },
     },
+    "homepageCard": Object {
+      "base": Object {
+        "backgroundColor": "{{colors.transparent}}",
+        "color": "{{colors.inkBase}}",
+      },
+    },
     "imageDefault": Object {
       "base": Object {
         "borderRadius": "{{borders.borderRadiusRounded020}}",
@@ -4022,6 +4058,8 @@ Object {
       },
       "hover": Object {
         "backgroundColor": "{{colors.interactiveInverse020}}",
+        "color": "{{colors.inkWhiteContrast}}",
+        "iconColor": "{{colors.inkWhiteContrast}}",
       },
       "loading": Object {
         "backgroundColor": "{{colors.interactiveInverse020}}",
@@ -4076,6 +4114,8 @@ Object {
       },
       "hover": Object {
         "backgroundColor": "{{colors.interactiveInverse020}}",
+        "color": "{{colors.inkWhiteContrast}}",
+        "iconColor": "{{colors.inkWhiteContrast}}",
       },
       "loading": Object {
         "backgroundColor": "{{colors.interactiveInverse020}}",
@@ -4184,8 +4224,8 @@ Object {
       "base": Object {
         "backgroundColor": "{{colors.interactiveInverse030}}",
         "borderRadius": "{{borders.borderRadiusDefault}}",
-        "color": "{{colors.interfaceBrand030}}",
-        "iconColor": "{{colors.interfaceBrand030}}",
+        "color": "{{colors.inkBrand010}}",
+        "iconColor": "{{colors.inkBrand010}}",
       },
       "disabled": Object {
         "backgroundColor": "{{colors.interactiveInverse020}}",
@@ -4297,8 +4337,8 @@ Object {
         "textDecoration": "none",
       },
       "hover": Object {
-        "backgroundColor": "{{colors.interactivePrimary010}}",
-        "color": "{{colors.interactivePrimary030}}",
+        "backgroundColor": "{{colors.interactivePrimary020}}",
+        "color": "{{colors.interactivePrimary040}}",
       },
       "selected": Object {
         "borderColor": "{{colors.transparent}} {{colors.transparent}} {{colors.transparent}} {{colors.interactivePrimary030}} ",
@@ -4308,7 +4348,7 @@ Object {
     },
     "sidebar": Object {
       "base": Object {
-        "backgroundColor": "{{colors.interface020}}",
+        "backgroundColor": "{{colors.interface010}}",
         "borderColor": "{{colors.interface040}}",
         "borderStyle": "solid",
         "borderWidth": "{{borders.borderWidth000}} {{borders.borderWidth010}} {{borders.borderWidth000}} {{borders.borderWidth000}}",
@@ -4443,8 +4483,8 @@ Object {
     "whatsnewCardButton": Object {
       "active": Object {
         "backgroundColor": "{{colors.interactiveInverse050}}",
-        "color": "{{colors.inkBrand020}}",
-        "iconColor": "{{colors.inkBrand020}}",
+        "color": "{{colors.inkBrand030}}",
+        "iconColor": "{{colors.inkBrand030}}",
       },
       "base": Object {
         "backgroundColor": "{{colors.interactiveInverse030}}",
@@ -5183,84 +5223,85 @@ Object {
     "xs": 0,
   },
   "colors": Object {
-    "amber010": "#FFEECF",
-    "amber020": "#FFDB9D",
-    "amber030": "#FFC058",
-    "amber040": "#FFAD2C",
-    "amber050": "#FF9900",
-    "amber060": "#FF8F00",
-    "amber070": "#FF8200",
-    "amber080": "#FF7200",
-    "amber090": "#FF6000",
-    "amber100": "#FF4B00",
+    "amber010": "#FFEDE1",
+    "amber020": "#FDDCC6",
+    "amber030": "#FEB788",
+    "amber040": "#F79247",
+    "amber050": "#CD6900",
+    "amber060": "#A75500",
+    "amber070": "#804200",
+    "amber080": "#5D2F00",
+    "amber090": "#3C1F00",
+    "amber100": "#1D0D02",
     "black": "#0A0A0A",
-    "blackTint010": "rgba(10,10,10,0.1)",
-    "blackTint020": "rgba(10,10,10,0.2)",
-    "blackTint030": "rgba(10,10,10,0.3)",
-    "blackTint040": "rgba(10,10,10,0.4)",
-    "blackTint050": "rgba(10,10,10,0.5)",
-    "blackTint060": "rgba(10,10,10,0.6)",
-    "blackTint070": "rgba(10,10,10,0.7)",
-    "blackTint080": "rgba(10,10,10,0.8)",
-    "blackTint090": "rgba(10,10,10,0.9)",
-    "blue005": "#F0F3FF",
-    "blue010": "#E0E7FF",
-    "blue020": "#AEBFFF",
-    "blue030": "#87A4FC",
-    "blue040": "#577FFB",
-    "blue050": "#446BE4",
+    "blackTint010": "rgba(0,0,0,0.1)",
+    "blackTint020": "rgba(0,0,0,0.2)",
+    "blackTint030": "rgba(0,0,0,0.3)",
+    "blackTint040": "rgba(0,0,0,0.4)",
+    "blackTint050": "rgba(0,0,0,0.5)",
+    "blackTint060": "rgba(0,0,0,0.6)",
+    "blackTint070": "rgba(0,0,0,0.7)",
+    "blackTint080": "rgba(0,0,0,0.8)",
+    "blackTint090": "rgba(0,0,0,0.9)",
+    "blue010": "#ECF1FF",
+    "blue020": "#D5E0FC",
+    "blue030": "#AEBFFF",
+    "blue040": "#8BA6F6",
+    "blue050": "#577FFB",
+    "blue055": "#446be4",
     "blue060": "#3358CC",
-    "blue070": "#2B4AAB",
-    "blue080": "#213A82",
-    "blue090": "#213A5F",
-    "blue100": "#192C48",
-    "darkBlue010": "#F4F4F4",
-    "darkBlue020": "#EBEBEB",
-    "darkBlue030": "#E4E4E4",
-    "darkBlue040": "#BBC3C9",
-    "darkBlue050": "#96A29B",
-    "darkBlue060": "#808E99",
-    "darkBlue070": "#6E7D8D",
-    "darkBlue080": "#555E74",
-    "darkBlue090": "#243853",
-    "darkBlue100": "#162740",
+    "blue070": "#254CAC",
+    "blue080": "#14328D",
+    "blue090": "#0C285F",
+    "blue100": "#071E3C",
+    "darkBlue010": "#F0F1F3",
+    "darkBlue020": "#DEE2E5",
+    "darkBlue030": "#C0C7CC",
+    "darkBlue040": "#A1ACB4",
+    "darkBlue050": "#85939C",
+    "darkBlue060": "#5A6A79",
+    "darkBlue070": "#435365",
+    "darkBlue080": "#2E3F54",
+    "darkBlue090": "#15263E",
+    "darkBlue095": "#0F1B2C",
+    "darkBlue100": "#09111C",
     "focus010": "#3768FB",
-    "green010": "#E6FAEB",
-    "green020": "#B8EFC8",
-    "green030": "#8EE1A6",
-    "green040": "#67CF86",
-    "green050": "#42BA67",
-    "green060": "#23A248",
-    "green070": "#148F39",
-    "green080": "#0A782A",
-    "green090": "#005D1C",
-    "green100": "#003E11",
+    "green010": "#E5F4EA",
+    "green020": "#C8E4D0",
+    "green030": "#95CAA3",
+    "green040": "#6DB681",
+    "green050": "#41A05B",
+    "green060": "#007B22",
+    "green070": "#00601A",
+    "green080": "#004914",
+    "green090": "#002D0D",
+    "green100": "#001D08",
     "illustrationAnatomyBorder010": "{{colors.blue080}}",
     "illustrationAnatomyBorder020": "{{colors.blue040}}",
     "illustrationAnatomySubtle": "{{colors.blue040}}",
-    "illustrationBackground010": "{{colors.darkBlue090}}",
-    "illustrationBackground020": "{{colors.darkBlue090}}",
+    "illustrationBackground010": "{{colors.darkBlue095}}",
+    "illustrationBackground020": "{{colors.darkBlue095}}",
     "illustrationBorder010": "{{colors.blue070}}",
     "illustrationBorder020": "{{colors.blue060}}",
     "illustrationDisabled": "{{colors.blue070}}",
     "illustrationGradient010": "linear-gradient(0deg, rgba(255,255,255,0.00) 0%, rgba(255,255,255,1) 100%)",
     "illustrationGradient020": "linear-gradient(0deg, rgba(22,39,64,0.00) 0%, rgba(22,39,64,1) 100%",
     "illustrationHighlight010": "{{colors.white}}",
-    "illustrationInterface010": "{{colors.blue050}}",
+    "illustrationInterface010": "{{colors.blue055}}",
     "illustrationInterface020": "{{colors.blue070}}",
     "illustrationInterface030": "{{colors.blue080}}",
     "illustrationInterface040": "{{colors.blue090}}",
     "illustrationInterface050": "{{colors.blue100}}",
-    "illustrationInterface060": "{{colors.blue020}}",
-    "illustrationInterface070": "{{colors.blue030}}",
-    "illustrationInterface080": "{{colors.blue040}}",
-    "illustrationInterface090": "{{colors.blue050}}",
+    "illustrationInterface060": "{{colors.blue030}}",
+    "illustrationInterface070": "{{colors.blue040}}",
+    "illustrationInterface080": "{{colors.blue050}}",
+    "illustrationInterface090": "{{colors.blue055}}",
     "illustrationInterface100": "{{colors.blue010}}",
     "illustrationPalette010": "{{colors.blue010}}",
-    "illustrationPalette020": "{{colors.blue020}}",
-    "illustrationPalette030": "{{colors.blue030}}",
-    "illustrationPalette040": "{{colors.blue040}}",
-    "illustrationPalette050": "{{colors.blue050}}",
+    "illustrationPalette020": "{{colors.blue030}}",
+    "illustrationPalette030": "{{colors.blue040}}",
+    "illustrationPalette040": "{{colors.blue050}}",
+    "illustrationPalette050": "{{colors.blue055}}",
     "illustrationPalette060": "{{colors.blue060}}",
     "illustrationPalette070": "{{colors.blue070}}",
     "illustrationPalette080": "{{colors.blue080}}",
@@ -5268,108 +5309,114 @@ Object {
     "illustrationPalette100": "{{colors.blue100}}",
     "illustrationShadow010": "{{colors.blackTint060}}",
     "illustrationSubtle010": "{{colors.blue080}}",
-    "inkBase": "{{colors.darkBlue040}}",
-    "inkBrand010": "{{colors.blue040}}",
-    "inkBrand020": "{{colors.blue080}}",
-    "inkBrand030": "{{colors.teal050}}",
-    "inkContrast": "{{colors.darkBlue010}}",
-    "inkInformative": "{{colors.teal010}}",
+    "inkBase": "{{colors.darkBlue020}}",
+    "inkBrand010": "{{colors.blue030}}",
+    "inkBrand020": "{{colors.blue050}}",
+    "inkBrand030": "{{colors.teal060}}",
+    "inkContrast": "{{colors.white}}",
+    "inkDark010": "{{colors.darkBlue100}}",
+    "inkInformative": "{{colors.teal050}}",
     "inkInverse": "{{colors.darkBlue100}}",
-    "inkNegative": "{{colors.red030}}",
-    "inkNonEssential": "{{colors.darkBlue080}}",
-    "inkNotice": "{{colors.neutral030}}",
-    "inkPositive": "{{colors.green030}}",
-    "inkSubtle": "{{colors.darkBlue070}}",
+    "inkLight010": "{{colors.white}}",
+    "inkNegative": "{{colors.red050}}",
+    "inkNonEssential": "{{colors.darkBlue050}}",
+    "inkNotice": "{{colors.darkBlue030}}",
+    "inkPositive": "{{colors.green050}}",
+    "inkSubtle": "{{colors.darkBlue030}}",
     "inkWhiteContrast": "{{colors.white}}",
     "inkWhiteSubtle": "{{colors.whiteTint080}}",
     "interactiveDisabled010": "{{colors.darkBlue080}}",
-    "interactiveFocus010": "{{colors.white}}",
-    "interactiveInput010": "{{colors.neutral010}}",
-    "interactiveInput020": "{{colors.neutral040}}",
-    "interactiveInput030": "{{colors.blue010}}",
-    "interactiveInput040": "{{colors.blue060}}",
-    "interactiveInput050": "{{colors.blue070}}",
-    "interactiveInverse010": "{{colors.whiteTint010}}",
-    "interactiveInverse020": "{{colors.whiteTint020}}",
-    "interactiveInverse030": "{{colors.white}}",
-    "interactiveInverse040": "{{colors.whiteTint070}}",
-    "interactiveInverse050": "{{colors.whiteTint080}}",
-    "interactiveNegative010": "{{colors.red010}}",
-    "interactiveNegative020": "{{colors.red020}}",
-    "interactiveNegative030": "{{colors.red060}}",
-    "interactiveNegative040": "{{colors.red070}}",
-    "interactiveNegative050": "{{colors.red080}}",
-    "interactivePositive010": "{{colors.green010}}",
-    "interactivePositive020": "{{colors.green020}}",
-    "interactivePositive030": "{{colors.green060}}",
-    "interactivePositive040": "{{colors.green070}}",
-    "interactivePositive050": "{{colors.green080}}",
-    "interactivePrimary010": "{{colors.blue080}}",
-    "interactivePrimary020": "{{colors.blue090}}",
-    "interactivePrimary030": "{{colors.blue040}}",
-    "interactivePrimary040": "{{colors.blue050}}",
-    "interactivePrimary050": "{{colors.blue070}}",
-    "interactiveSecondary010": "{{colors.darkBlue080}}",
-    "interactiveSecondary020": "{{colors.darkBlue070}}",
+    "interactiveFocus010": "{{colors.focus010}}",
+    "interactiveInput010": "{{colors.darkBlue090}}",
+    "interactiveInput020": "{{colors.darkBlue060}}",
+    "interactiveInput030": "{{colors.blue090}}",
+    "interactiveInput040": "{{colors.blue050}}",
+    "interactiveInput050": "{{colors.blue030}}",
+    "interactiveInverse010": "{{colors.blackTint010}}",
+    "interactiveInverse020": "{{colors.blackTint020}}",
+    "interactiveInverse030": "{{colors.blackTint090}}",
+    "interactiveInverse040": "{{colors.blackTint070}}",
+    "interactiveInverse050": "{{colors.blackTint080}}",
+    "interactiveLink010": "{{colors.blue050}}",
+    "interactiveLink020": "{{colors.blue040}}",
+    "interactiveLink030": "{{colors.blue030}}",
+    "interactiveNegative010": "{{colors.red100}}",
+    "interactiveNegative020": "{{colors.red080}}",
+    "interactiveNegative030": "{{colors.red050}}",
+    "interactiveNegative040": "{{colors.red040}}",
+    "interactiveNegative050": "{{colors.red030}}",
+    "interactivePositive010": "{{colors.green090}}",
+    "interactivePositive020": "{{colors.green080}}",
+    "interactivePositive030": "{{colors.green050}}",
+    "interactivePositive040": "{{colors.green040}}",
+    "interactivePositive050": "{{colors.green030}}",
+    "interactivePrimary010": "{{colors.darkBlue090}}",
+    "interactivePrimary020": "{{colors.darkBlue080}}",
+    "interactivePrimary030": "{{colors.blue050}}",
+    "interactivePrimary040": "{{colors.blue040}}",
+    "interactivePrimary050": "{{colors.blue030}}",
+    "interactiveSecondary010": "{{colors.darkBlue090}}",
+    "interactiveSecondary020": "{{colors.darkBlue090}}",
     "interactiveSecondary030": "{{colors.darkBlue050}}",
-    "interactiveSecondary040": "{{colors.darkBlue060}}",
-    "interactiveSecondary050": "{{colors.darkBlue070}}",
+    "interactiveSecondary040": "{{colors.darkBlue030}}",
+    "interactiveSecondary050": "{{colors.darkBlue030}}",
     "interactiveVisited010": "{{colors.purple050}}",
-    "interface010": "{{colors.darkBlue100}}",
+    "interface010": "{{colors.darkBlue095}}",
     "interface020": "{{colors.darkBlue090}}",
     "interface030": "{{colors.darkBlue080}}",
     "interface040": "{{colors.darkBlue070}}",
     "interface050": "{{colors.darkBlue060}}",
     "interface060": "{{colors.darkBlue010}}",
     "interfaceBackground": "{{colors.darkBlue100}}",
-    "interfaceBrand010": "{{colors.blue020}}",
-    "interfaceBrand020": "{{colors.blue030}}",
-    "interfaceBrand030": "{{colors.blue040}}",
+    "interfaceBrand010": "{{colors.blue060}}",
+    "interfaceBrand020": "{{colors.blue080}}",
+    "interfaceBrand030": "{{colors.blue060}}",
     "interfaceBrand040": "{{colors.blue060}}",
     "interfaceBrand050": "{{colors.blue080}}",
-    "interfaceBrand060": "{{colors.teal050}}",
+    "interfaceBrand060": "{{colors.teal060}}",
     "interfaceInformative010": "{{colors.teal050}}",
-    "interfaceInformative020": "{{colors.teal070}}",
-    "interfaceNegative010": "{{colors.red040}}",
-    "interfaceNegative020": "{{colors.red070}}",
-    "interfaceNeutral010": "{{colors.neutral080}}",
-    "interfaceNeutral020": "{{colors.neutral010}}",
-    "interfaceNotice010": "{{colors.amber040}}",
-    "interfaceNotice020": "{{colors.amber070}}",
-    "interfacePositive010": "{{colors.green040}}",
-    "interfacePositive020": "{{colors.green070}}",
+    "interfaceInformative020": "{{colors.teal090}}",
+    "interfaceNegative010": "{{colors.red050}}",
+    "interfaceNegative020": "{{colors.red090}}",
+    "interfaceNeutral010": "{{colors.darkBlue030}}",
+    "interfaceNeutral020": "{{colors.darkBlue080}}",
+    "interfaceNotice010": "{{colors.darkBlue030}}",
+    "interfaceNotice020": "{{colors.darkBlue080}}",
+    "interfacePositive010": "{{colors.green050}}",
+    "interfacePositive020": "{{colors.green090}}",
     "interfaceSkeleton010": "{{colors.darkBlue090}}",
-    "interfaceSkeleton020": "{{colors.darkBlue080}}",
-    "neutral010": "#FAFAFA",
-    "neutral020": "#F4F4F4",
-    "neutral030": "#DEDEDE",
-    "neutral040": "#CCCCCC",
-    "neutral050": "#C0C0C0",
-    "neutral060": "#9C9C9C",
-    "neutral070": "#777777",
-    "neutral080": "#535353",
-    "neutral090": "#2E2E2E",
-    "neutral100": "#0A0A0A",
-    "purple010": "#E5E0FF",
-    "purple020": "#BBAEFF",
-    "purple030": "#9B87FC",
-    "purple040": "#7264EF",
-    "purple050": "#5E44E4",
-    "purple060": "#4C33CC",
-    "purple070": "#442EB5",
-    "purple080": "#36248C",
-    "purple090": "#332770",
-    "purple100": "#2A205C",
-    "red010": "#FFE6E5",
-    "red020": "#FFB8B8",
-    "red030": "#FF8A8A",
-    "red040": "#FF5C5C",
-    "red050": "#FF362E",
-    "red060": "#EF1703",
-    "red070": "#D20600",
-    "red080": "#A60100",
-    "red090": "#790101",
-    "red100": "#4D0000",
+    "interfaceSkeleton020": "{{colors.darkBlue090}}",
+    "neutral010": "#F1F1F1",
+    "neutral020": "#E2E2E2",
+    "neutral030": "#C6C6C6",
+    "neutral040": "#ABABAB",
+    "neutral050": "#919191",
+    "neutral060": "#6A6A6A",
+    "neutral070": "#525252",
+    "neutral080": "#3B3B3B",
+    "neutral090": "#262626",
+    "neutral100": "#111111",
+    "purple010": "#EFF0FF",
+    "purple020": "#DFE0FE",
+    "purple030": "#C0C2FC",
+    "purple040": "#A3A3FB",
+    "purple050": "#8883F6",
+    "purple055": "#6e61e4",
+    "purple060": "#6454E3",
+    "purple070": "#4C33CC",
+    "purple080": "#37239C",
+    "purple090": "#231668",
+    "purple100": "#0F0936",
+    "red010": "#FEECEC",
+    "red020": "#FED8D8",
+    "red030": "#FEB3B3",
+    "red040": "#FE8888",
+    "red050": "#FB5959",
+    "red060": "#D60000",
+    "red070": "#A90000",
+    "red080": "#820000",
+    "red090": "#550000",
+    "red100": "#3A0000",
     "socialApple": "#000000",
     "socialFacebook": "#1877F2",
     "socialGithub": "#000000",
@@ -5382,16 +5429,17 @@ Object {
     "socialTwitter": "#1DA1F2",
     "socialWhatsapp": "#25D366",
     "socialYoutube": "#FF0000",
-    "teal010": "#EBF8F9",
-    "teal020": "#A8E0E6",
-    "teal030": "#81D2DA",
-    "teal040": "#65BBC4",
-    "teal050": "#41A0AA",
-    "teal060": "#06808E",
-    "teal070": "#05717D",
-    "teal080": "#0D575E",
-    "teal090": "#093E43",
-    "teal100": "#083136",
+    "teal010": "#E6F4F6",
+    "teal020": "#C7E7EA",
+    "teal030": "#97D0D6",
+    "teal040": "#5EB8C0",
+    "teal050": "#289FAB",
+    "teal055": "#06808e",
+    "teal060": "#017582",
+    "teal070": "#005B65",
+    "teal080": "#004249",
+    "teal090": "#002B30",
+    "teal100": "#001314",
     "transparent": "transparent",
     "white": "#FFFFFF",
     "whiteTint010": "rgba(255,255,255,0.1)",
@@ -6392,6 +6440,8 @@ Object {
       },
       "hover": Object {
         "backgroundColor": "{{colors.interactiveInverse020}}",
+        "color": "{{colors.inkWhiteContrast}}",
+        "iconColor": "{{colors.inkWhiteContrast}}",
       },
       "loading": Object {
         "backgroundColor": "{{colors.interactiveInverse020}}",
@@ -6435,6 +6485,12 @@ Object {
         "color": "{{colors.inkContrast}}",
       },
     },
+    "homepageCard": Object {
+      "base": Object {
+        "backgroundColor": "{{colors.transparent}}",
+        "color": "{{colors.inkBase}}",
+      },
+    },
     "imageDefault": Object {
       "base": Object {
         "borderRadius": "{{borders.borderRadiusRounded020}}",
@@ -6602,6 +6658,8 @@ Object {
       },
       "hover": Object {
         "backgroundColor": "{{colors.interactiveInverse020}}",
+        "color": "{{colors.inkWhiteContrast}}",
+        "iconColor": "{{colors.inkWhiteContrast}}",
       },
       "loading": Object {
         "backgroundColor": "{{colors.interactiveInverse020}}",
@@ -6656,6 +6714,8 @@ Object {
       },
       "hover": Object {
         "backgroundColor": "{{colors.interactiveInverse020}}",
+        "color": "{{colors.inkWhiteContrast}}",
+        "iconColor": "{{colors.inkWhiteContrast}}",
       },
       "loading": Object {
         "backgroundColor": "{{colors.interactiveInverse020}}",
@@ -6764,8 +6824,8 @@ Object {
       "base": Object {
         "backgroundColor": "{{colors.interactiveInverse030}}",
         "borderRadius": "{{borders.borderRadiusDefault}}",
-        "color": "{{colors.interfaceBrand030}}",
-        "iconColor": "{{colors.interfaceBrand030}}",
+        "color": "{{colors.inkBrand010}}",
+        "iconColor": "{{colors.inkBrand010}}",
       },
       "disabled": Object {
         "backgroundColor": "{{colors.interactiveInverse020}}",
@@ -6877,8 +6937,8 @@ Object {
         "textDecoration": "none",
       },
       "hover": Object {
-        "backgroundColor": "{{colors.interactivePrimary010}}",
-        "color": "{{colors.interactivePrimary030}}",
+        "backgroundColor": "{{colors.interactivePrimary020}}",
+        "color": "{{colors.interactivePrimary040}}",
       },
       "selected": Object {
         "borderColor": "{{colors.transparent}} {{colors.transparent}} {{colors.transparent}} {{colors.interactivePrimary030}} ",
@@ -6888,7 +6948,7 @@ Object {
     },
     "sidebar": Object {
       "base": Object {
-        "backgroundColor": "{{colors.interface020}}",
+        "backgroundColor": "{{colors.interface010}}",
         "borderColor": "{{colors.interface040}}",
         "borderStyle": "solid",
         "borderWidth": "{{borders.borderWidth000}} {{borders.borderWidth010}} {{borders.borderWidth000}} {{borders.borderWidth000}}",
@@ -7023,8 +7083,8 @@ Object {
     "whatsnewCardButton": Object {
       "active": Object {
         "backgroundColor": "{{colors.interactiveInverse050}}",
-        "color": "{{colors.inkBrand020}}",
-        "iconColor": "{{colors.inkBrand020}}",
+        "color": "{{colors.inkBrand030}}",
+        "iconColor": "{{colors.inkBrand030}}",
       },
       "base": Object {
         "backgroundColor": "{{colors.interactiveInverse030}}",
@@ -7763,109 +7823,112 @@ Object {
     "xs": 0,
   },
   "colors": Object {
-    "amber010": "#FFEECF",
-    "amber020": "#FFDB9D",
-    "amber030": "#FFC058",
-    "amber040": "#FFAD2C",
-    "amber050": "#FF9900",
-    "amber060": "#FF8F00",
-    "amber070": "#FF8200",
-    "amber080": "#FF7200",
-    "amber090": "#FF6000",
-    "amber100": "#FF4B00",
+    "amber010": "#FFEDE1",
+    "amber020": "#FDDCC6",
+    "amber030": "#FEB788",
+    "amber040": "#F79247",
+    "amber050": "#CD6900",
+    "amber060": "#A75500",
+    "amber070": "#804200",
+    "amber080": "#5D2F00",
+    "amber090": "#3C1F00",
+    "amber100": "#1D0D02",
     "black": "#0A0A0A",
-    "blackTint010": "rgba(10,10,10,0.1)",
-    "blackTint020": "rgba(10,10,10,0.2)",
-    "blackTint030": "rgba(10,10,10,0.3)",
-    "blackTint040": "rgba(10,10,10,0.4)",
-    "blackTint050": "rgba(10,10,10,0.5)",
-    "blackTint060": "rgba(10,10,10,0.6)",
-    "blackTint070": "rgba(10,10,10,0.7)",
-    "blackTint080": "rgba(10,10,10,0.8)",
-    "blackTint090": "rgba(10,10,10,0.9)",
-    "blue005": "#F0F3FF",
-    "blue010": "#E0E7FF",
-    "blue020": "#AEBFFF",
-    "blue030": "#87A4FC",
-    "blue040": "#577FFB",
-    "blue050": "#446BE4",
+    "blackTint010": "rgba(0,0,0,0.1)",
+    "blackTint020": "rgba(0,0,0,0.2)",
+    "blackTint030": "rgba(0,0,0,0.3)",
+    "blackTint040": "rgba(0,0,0,0.4)",
+    "blackTint050": "rgba(0,0,0,0.5)",
+    "blackTint060": "rgba(0,0,0,0.6)",
+    "blackTint070": "rgba(0,0,0,0.7)",
+    "blackTint080": "rgba(0,0,0,0.8)",
+    "blackTint090": "rgba(0,0,0,0.9)",
+    "blue010": "#ECF1FF",
+    "blue020": "#D5E0FC",
+    "blue030": "#AEBFFF",
+    "blue040": "#8BA6F6",
+    "blue050": "#577FFB",
+    "blue055": "#446be4",
     "blue060": "#3358CC",
-    "blue070": "#2B4AAB",
-    "blue080": "#213A82",
-    "blue090": "#213A5F",
-    "blue100": "#192C48",
-    "darkBlue010": "#F4F4F4",
-    "darkBlue020": "#EBEBEB",
-    "darkBlue030": "#E4E4E4",
-    "darkBlue040": "#BBC3C9",
-    "darkBlue050": "#96A29B",
-    "darkBlue060": "#808E99",
-    "darkBlue070": "#6E7D8D",
-    "darkBlue080": "#555E74",
-    "darkBlue090": "#243853",
-    "darkBlue100": "#162740",
+    "blue070": "#254CAC",
+    "blue080": "#14328D",
+    "blue090": "#0C285F",
+    "blue100": "#071E3C",
+    "darkBlue010": "#F0F1F3",
+    "darkBlue020": "#DEE2E5",
+    "darkBlue030": "#C0C7CC",
+    "darkBlue040": "#A1ACB4",
+    "darkBlue050": "#85939C",
+    "darkBlue060": "#5A6A79",
+    "darkBlue070": "#435365",
+    "darkBlue080": "#2E3F54",
+    "darkBlue090": "#15263E",
+    "darkBlue095": "#0F1B2C",
+    "darkBlue100": "#09111C",
     "focus010": "#3768FB",
-    "green010": "#E6FAEB",
-    "green020": "#B8EFC8",
-    "green030": "#8EE1A6",
-    "green040": "#67CF86",
-    "green050": "#42BA67",
-    "green060": "#23A248",
-    "green070": "#148F39",
-    "green080": "#0A782A",
-    "green090": "#005D1C",
-    "green100": "#003E11",
-    "illustrationAnatomyBorder010": "{{colors.blue020}}",
+    "green010": "#E5F4EA",
+    "green020": "#C8E4D0",
+    "green030": "#95CAA3",
+    "green040": "#6DB681",
+    "green050": "#41A05B",
+    "green060": "#007B22",
+    "green070": "#00601A",
+    "green080": "#004914",
+    "green090": "#002D0D",
+    "green100": "#001D08",
+    "illustrationAnatomyBorder010": "{{colors.blue030}}",
     "illustrationAnatomyBorder020": "{{colors.blue070}}",
-    "illustrationAnatomySubtle": "{{colors.blue020}}",
-    "illustrationBackground010": "{{colors.blue005}}",
+    "illustrationAnatomySubtle": "{{colors.blue030}}",
+    "illustrationBackground010": "{{colors.blue010}}",
     "illustrationBackground020": "{{colors.darkBlue010}}",
     "illustrationBorder010": "{{colors.darkBlue020}}",
-    "illustrationBorder020": "{{colors.darkBlue040}}",
+    "illustrationBorder020": "{{colors.darkBlue030}}",
     "illustrationDisabled": "{{colors.darkBlue020}}",
     "illustrationGradient010": "linear-gradient(0deg, rgba(10,10,10,0.00) 0%, rgba(10,10,10,1) 100%)",
     "illustrationGradient020": "linear-gradient(0deg, rgba(255,255,255,0.00) 0%, rgba(255,255,255,1) 100%)",
-    "illustrationHighlight010": "{{colors.blue040}}",
+    "illustrationHighlight010": "{{colors.blue050}}",
     "illustrationInterface010": "{{colors.white}}",
-    "illustrationInterface020": "{{colors.blue010}}",
-    "illustrationInterface030": "{{colors.blue020}}",
-    "illustrationInterface040": "{{colors.blue030}}",
-    "illustrationInterface050": "{{colors.blue040}}",
-    "illustrationInterface060": "{{colors.blue050}}",
+    "illustrationInterface020": "{{colors.blue020}}",
+    "illustrationInterface030": "{{colors.blue030}}",
+    "illustrationInterface040": "{{colors.blue040}}",
+    "illustrationInterface050": "{{colors.blue050}}",
+    "illustrationInterface060": "{{colors.blue055}}",
     "illustrationInterface070": "{{colors.blue060}}",
     "illustrationInterface080": "{{colors.blue070}}",
     "illustrationInterface090": "{{colors.blue080}}",
     "illustrationInterface100": "{{colors.blue090}}",
     "illustrationPalette010": "{{colors.blue010}}",
-    "illustrationPalette020": "{{colors.blue020}}",
-    "illustrationPalette030": "{{colors.blue030}}",
-    "illustrationPalette040": "{{colors.blue040}}",
-    "illustrationPalette050": "{{colors.blue050}}",
+    "illustrationPalette020": "{{colors.blue030}}",
+    "illustrationPalette030": "{{colors.blue040}}",
+    "illustrationPalette040": "{{colors.blue050}}",
+    "illustrationPalette050": "{{colors.blue055}}",
     "illustrationPalette060": "{{colors.blue060}}",
     "illustrationPalette070": "{{colors.blue070}}",
     "illustrationPalette080": "{{colors.blue080}}",
     "illustrationPalette090": "{{colors.blue090}}",
     "illustrationPalette100": "{{colors.blue100}}",
     "illustrationShadow010": "{{colors.blackTint030}}",
-    "illustrationSubtle010": "{{colors.darkBlue060}}",
-    "inkBase": "{{colors.neutral090}}",
-    "inkBrand010": "{{colors.blue040}}",
+    "illustrationSubtle010": "{{colors.darkBlue050}}",
+    "inkBase": "{{colors.darkBlue080}}",
+    "inkBrand010": "{{colors.blue060}}",
     "inkBrand020": "{{colors.blue080}}",
-    "inkBrand030": "{{colors.teal050}}",
-    "inkContrast": "{{colors.neutral100}}",
-    "inkInformative": "{{colors.teal070}}",
+    "inkBrand030": "{{colors.teal060}}",
+    "inkContrast": "{{colors.darkBlue100}}",
+    "inkDark010": "{{colors.darkBlue100}}",
+    "inkInformative": "{{colors.teal060}}",
     "inkInverse": "{{colors.white}}",
-    "inkNegative": "{{colors.red070}}",
-    "inkNonEssential": "{{colors.neutral050}}",
-    "inkNotice": "{{colors.neutral080}}",
-    "inkPositive": "{{colors.green080}}",
-    "inkSubtle": "{{colors.neutral080}}",
+    "inkLight010": "{{colors.white}}",
+    "inkNegative": "{{colors.red060}}",
+    "inkNonEssential": "{{colors.darkBlue030}}",
+    "inkNotice": "{{colors.darkBlue070}}",
+    "inkPositive": "{{colors.green060}}",
+    "inkSubtle": "{{colors.darkBlue060}}",
     "inkWhiteContrast": "{{colors.white}}",
     "inkWhiteSubtle": "{{colors.whiteTint080}}",
-    "interactiveDisabled010": "{{colors.neutral020}}",
+    "interactiveDisabled010": "{{colors.darkBlue020}}",
     "interactiveFocus010": "{{colors.focus010}}",
-    "interactiveInput010": "{{colors.neutral010}}",
-    "interactiveInput020": "{{colors.neutral040}}",
+    "interactiveInput010": "{{colors.darkBlue010}}",
+    "interactiveInput020": "{{colors.darkBlue050}}",
     "interactiveInput030": "{{colors.blue010}}",
     "interactiveInput040": "{{colors.blue060}}",
     "interactiveInput050": "{{colors.blue070}}",
@@ -7874,6 +7937,9 @@ Object {
     "interactiveInverse030": "{{colors.white}}",
     "interactiveInverse040": "{{colors.whiteTint070}}",
     "interactiveInverse050": "{{colors.whiteTint080}}",
+    "interactiveLink010": "{{colors.blue060}}",
+    "interactiveLink020": "{{colors.blue070}}",
+    "interactiveLink030": "{{colors.blue080}}",
     "interactiveNegative010": "{{colors.red010}}",
     "interactiveNegative020": "{{colors.red020}}",
     "interactiveNegative030": "{{colors.red060}}",
@@ -7886,70 +7952,71 @@ Object {
     "interactivePositive050": "{{colors.green080}}",
     "interactivePrimary010": "{{colors.blue010}}",
     "interactivePrimary020": "{{colors.blue020}}",
-    "interactivePrimary030": "{{colors.blue040}}",
-    "interactivePrimary040": "{{colors.blue060}}",
+    "interactivePrimary030": "{{colors.blue060}}",
+    "interactivePrimary040": "{{colors.blue070}}",
     "interactivePrimary050": "{{colors.blue080}}",
-    "interactiveSecondary010": "{{colors.neutral020}}",
-    "interactiveSecondary020": "{{colors.neutral040}}",
-    "interactiveSecondary030": "{{colors.neutral080}}",
-    "interactiveSecondary040": "{{colors.neutral090}}",
-    "interactiveSecondary050": "{{colors.neutral100}}",
-    "interactiveVisited010": "{{colors.purple050}}",
-    "interface010": "{{colors.white}}",
+    "interactiveSecondary010": "{{colors.darkBlue010}}",
+    "interactiveSecondary020": "{{colors.darkBlue020}}",
+    "interactiveSecondary030": "{{colors.darkBlue080}}",
+    "interactiveSecondary040": "{{colors.darkBlue090}}",
+    "interactiveSecondary050": "{{colors.darkBlue100}}",
+    "interactiveVisited010": "{{colors.purple060}}",
+    "interface010": "{{colors.darkBlue010}}",
     "interface020": "{{colors.darkBlue010}}",
     "interface030": "{{colors.darkBlue020}}",
-    "interface040": "{{colors.darkBlue030}}",
-    "interface050": "{{colors.darkBlue040}}",
+    "interface040": "{{colors.darkBlue020}}",
+    "interface050": "{{colors.darkBlue030}}",
     "interface060": "{{colors.darkBlue100}}",
     "interfaceBackground": "{{colors.white}}",
-    "interfaceBrand010": "{{colors.blue020}}",
-    "interfaceBrand020": "{{colors.blue030}}",
-    "interfaceBrand030": "{{colors.blue040}}",
+    "interfaceBrand010": "{{colors.blue060}}",
+    "interfaceBrand020": "{{colors.blue080}}",
+    "interfaceBrand030": "{{colors.blue060}}",
     "interfaceBrand040": "{{colors.blue060}}",
     "interfaceBrand050": "{{colors.blue080}}",
-    "interfaceBrand060": "{{colors.teal050}}",
-    "interfaceInformative010": "{{colors.teal070}}",
+    "interfaceBrand060": "{{colors.teal060}}",
+    "interfaceInformative010": "{{colors.teal060}}",
     "interfaceInformative020": "{{colors.teal010}}",
-    "interfaceNegative010": "{{colors.red070}}",
+    "interfaceNegative010": "{{colors.red060}}",
     "interfaceNegative020": "{{colors.red010}}",
-    "interfaceNeutral010": "{{colors.neutral080}}",
-    "interfaceNeutral020": "{{colors.neutral010}}",
-    "interfaceNotice010": "{{colors.neutral080}}",
-    "interfaceNotice020": "{{colors.neutral020}}",
-    "interfacePositive010": "{{colors.green080}}",
+    "interfaceNeutral010": "{{colors.darkBlue080}}",
+    "interfaceNeutral020": "{{colors.darkBlue010}}",
+    "interfaceNotice010": "{{colors.darkBlue080}}",
+    "interfaceNotice020": "{{colors.darkBlue010}}",
+    "interfacePositive010": "{{colors.green060}}",
     "interfacePositive020": "{{colors.green010}}",
     "interfaceSkeleton010": "{{colors.darkBlue010}}",
     "interfaceSkeleton020": "{{colors.darkBlue020}}",
-    "neutral010": "#FAFAFA",
-    "neutral020": "#F4F4F4",
-    "neutral030": "#DEDEDE",
-    "neutral040": "#CCCCCC",
-    "neutral050": "#C0C0C0",
-    "neutral060": "#9C9C9C",
-    "neutral070": "#777777",
-    "neutral080": "#535353",
-    "neutral090": "#2E2E2E",
-    "neutral100": "#0A0A0A",
-    "purple010": "#E5E0FF",
-    "purple020": "#BBAEFF",
-    "purple030": "#9B87FC",
-    "purple040": "#7264EF",
-    "purple050": "#5E44E4",
-    "purple060": "#4C33CC",
-    "purple070": "#442EB5",
-    "purple080": "#36248C",
-    "purple090": "#332770",
-    "purple100": "#2A205C",
-    "red010": "#FFE6E5",
-    "red020": "#FFB8B8",
-    "red030": "#FF8A8A",
-    "red040": "#FF5C5C",
-    "red050": "#FF362E",
-    "red060": "#EF1703",
-    "red070": "#D20600",
-    "red080": "#A60100",
-    "red090": "#790101",
-    "red100": "#4D0000",
+    "neutral010": "#F1F1F1",
+    "neutral020": "#E2E2E2",
+    "neutral030": "#C6C6C6",
+    "neutral040": "#ABABAB",
+    "neutral050": "#919191",
+    "neutral060": "#6A6A6A",
+    "neutral070": "#525252",
+    "neutral080": "#3B3B3B",
+    "neutral090": "#262626",
+    "neutral100": "#111111",
+    "purple010": "#EFF0FF",
+    "purple020": "#DFE0FE",
+    "purple030": "#C0C2FC",
+    "purple040": "#A3A3FB",
+    "purple050": "#8883F6",
+    "purple055": "#6e61e4",
+    "purple060": "#6454E3",
+    "purple070": "#4C33CC",
+    "purple080": "#37239C",
+    "purple090": "#231668",
+    "purple100": "#0F0936",
+    "red010": "#FEECEC",
+    "red020": "#FED8D8",
+    "red030": "#FEB3B3",
+    "red040": "#FE8888",
+    "red050": "#FB5959",
+    "red060": "#D60000",
+    "red070": "#A90000",
+    "red080": "#820000",
+    "red090": "#550000",
+    "red100": "#3A0000",
     "socialApple": "#000000",
     "socialFacebook": "#1877F2",
     "socialGithub": "#000000",
@@ -7962,16 +8029,17 @@ Object {
     "socialTwitter": "#1DA1F2",
     "socialWhatsapp": "#25D366",
     "socialYoutube": "#FF0000",
-    "teal010": "#EBF8F9",
-    "teal020": "#A8E0E6",
-    "teal030": "#81D2DA",
-    "teal040": "#65BBC4",
-    "teal050": "#41A0AA",
-    "teal060": "#06808E",
-    "teal070": "#05717D",
-    "teal080": "#0D575E",
-    "teal090": "#093E43",
-    "teal100": "#083136",
+    "teal010": "#E6F4F6",
+    "teal020": "#C7E7EA",
+    "teal030": "#97D0D6",
+    "teal040": "#5EB8C0",
+    "teal050": "#289FAB",
+    "teal055": "#06808e",
+    "teal060": "#017582",
+    "teal070": "#005B65",
+    "teal080": "#004249",
+    "teal090": "#002B30",
+    "teal100": "#001314",
     "transparent": "transparent",
     "white": "#FFFFFF",
     "whiteTint010": "rgba(255,255,255,0.1)",
@@ -8969,6 +9037,8 @@ Object {
       },
       "hover": Object {
         "backgroundColor": "{{colors.interactiveInverse020}}",
+        "color": "{{colors.inkWhiteContrast}}",
+        "iconColor": "{{colors.inkWhiteContrast}}",
       },
       "loading": Object {
         "backgroundColor": "{{colors.interactiveInverse020}}",
@@ -9012,6 +9082,12 @@ Object {
         "color": "{{colors.inkContrast}}",
       },
     },
+    "homepageCard": Object {
+      "base": Object {
+        "backgroundColor": "{{colors.transparent}}",
+        "color": "{{colors.inkBase}}",
+      },
+    },
     "imageDefault": Object {
       "base": Object {
         "borderRadius": "{{borders.borderRadiusRounded020}}",
@@ -9179,6 +9255,8 @@ Object {
       },
       "hover": Object {
         "backgroundColor": "{{colors.interactiveInverse020}}",
+        "color": "{{colors.inkWhiteContrast}}",
+        "iconColor": "{{colors.inkWhiteContrast}}",
       },
       "loading": Object {
         "backgroundColor": "{{colors.interactiveInverse020}}",
@@ -9233,6 +9311,8 @@ Object {
       },
       "hover": Object {
         "backgroundColor": "{{colors.interactiveInverse020}}",
+        "color": "{{colors.inkWhiteContrast}}",
+        "iconColor": "{{colors.inkWhiteContrast}}",
       },
       "loading": Object {
         "backgroundColor": "{{colors.interactiveInverse020}}",
@@ -9341,8 +9421,8 @@ Object {
       "base": Object {
         "backgroundColor": "{{colors.interactiveInverse030}}",
         "borderRadius": "{{borders.borderRadiusDefault}}",
-        "color": "{{colors.interfaceBrand030}}",
-        "iconColor": "{{colors.interfaceBrand030}}",
+        "color": "{{colors.inkBrand010}}",
+        "iconColor": "{{colors.inkBrand010}}",
       },
       "disabled": Object {
         "backgroundColor": "{{colors.interactiveInverse020}}",
@@ -9454,8 +9534,8 @@ Object {
         "textDecoration": "none",
       },
       "hover": Object {
-        "backgroundColor": "{{colors.interactivePrimary010}}",
-        "color": "{{colors.interactivePrimary030}}",
+        "backgroundColor": "{{colors.interactivePrimary020}}",
+        "color": "{{colors.interactivePrimary040}}",
       },
       "selected": Object {
         "borderColor": "{{colors.transparent}} {{colors.transparent}} {{colors.transparent}} {{colors.interactivePrimary030}} ",
@@ -9465,7 +9545,7 @@ Object {
     },
     "sidebar": Object {
       "base": Object {
-        "backgroundColor": "{{colors.interface020}}",
+        "backgroundColor": "{{colors.interface010}}",
         "borderColor": "{{colors.interface040}}",
         "borderStyle": "solid",
         "borderWidth": "{{borders.borderWidth000}} {{borders.borderWidth010}} {{borders.borderWidth000}} {{borders.borderWidth000}}",
@@ -9600,8 +9680,8 @@ Object {
     "whatsnewCardButton": Object {
       "active": Object {
         "backgroundColor": "{{colors.interactiveInverse050}}",
-        "color": "{{colors.inkBrand020}}",
-        "iconColor": "{{colors.inkBrand020}}",
+        "color": "{{colors.inkBrand030}}",
+        "iconColor": "{{colors.inkBrand030}}",
       },
       "base": Object {
         "backgroundColor": "{{colors.interactiveInverse030}}",
@@ -10340,193 +10420,200 @@ Object {
     "xs": 0,
   },
   "colors": Object {
-    "amber010": "#FFEECF",
-    "amber020": "#FFDB9D",
-    "amber030": "#FFC058",
-    "amber040": "#FFAD2C",
-    "amber050": "#FF9900",
-    "amber060": "#FF8F00",
-    "amber070": "#FF8200",
-    "amber080": "#FF7200",
-    "amber090": "#FF6000",
-    "amber100": "#FF4B00",
+    "amber010": "#FFEDE1",
+    "amber020": "#FDDCC6",
+    "amber030": "#FEB788",
+    "amber040": "#F79247",
+    "amber050": "#CD6900",
+    "amber060": "#A75500",
+    "amber070": "#804200",
+    "amber080": "#5D2F00",
+    "amber090": "#3C1F00",
+    "amber100": "#1D0D02",
     "black": "#0A0A0A",
-    "blackTint010": "rgba(10,10,10,0.1)",
-    "blackTint020": "rgba(10,10,10,0.2)",
-    "blackTint030": "rgba(10,10,10,0.3)",
-    "blackTint040": "rgba(10,10,10,0.4)",
-    "blackTint050": "rgba(10,10,10,0.5)",
-    "blackTint060": "rgba(10,10,10,0.6)",
-    "blackTint070": "rgba(10,10,10,0.7)",
-    "blackTint080": "rgba(10,10,10,0.8)",
-    "blackTint090": "rgba(10,10,10,0.9)",
-    "blue005": "#F0F3FF",
-    "blue010": "#E0E7FF",
-    "blue020": "#AEBFFF",
-    "blue030": "#87A4FC",
-    "blue040": "#577FFB",
-    "blue050": "#446BE4",
+    "blackTint010": "rgba(0,0,0,0.1)",
+    "blackTint020": "rgba(0,0,0,0.2)",
+    "blackTint030": "rgba(0,0,0,0.3)",
+    "blackTint040": "rgba(0,0,0,0.4)",
+    "blackTint050": "rgba(0,0,0,0.5)",
+    "blackTint060": "rgba(0,0,0,0.6)",
+    "blackTint070": "rgba(0,0,0,0.7)",
+    "blackTint080": "rgba(0,0,0,0.8)",
+    "blackTint090": "rgba(0,0,0,0.9)",
+    "blue010": "#ECF1FF",
+    "blue020": "#D5E0FC",
+    "blue030": "#AEBFFF",
+    "blue040": "#8BA6F6",
+    "blue050": "#577FFB",
+    "blue055": "#446be4",
     "blue060": "#3358CC",
-    "blue070": "#2B4AAB",
-    "blue080": "#213A82",
-    "blue090": "#213A5F",
-    "blue100": "#192C48",
-    "darkBlue010": "#F4F4F4",
-    "darkBlue020": "#EBEBEB",
-    "darkBlue030": "#E4E4E4",
-    "darkBlue040": "#BBC3C9",
-    "darkBlue050": "#96A29B",
-    "darkBlue060": "#808E99",
-    "darkBlue070": "#6E7D8D",
-    "darkBlue080": "#555E74",
-    "darkBlue090": "#243853",
-    "darkBlue100": "#162740",
+    "blue070": "#254CAC",
+    "blue080": "#14328D",
+    "blue090": "#0C285F",
+    "blue100": "#071E3C",
+    "darkBlue010": "#F0F1F3",
+    "darkBlue020": "#DEE2E5",
+    "darkBlue030": "#C0C7CC",
+    "darkBlue040": "#A1ACB4",
+    "darkBlue050": "#85939C",
+    "darkBlue060": "#5A6A79",
+    "darkBlue070": "#435365",
+    "darkBlue080": "#2E3F54",
+    "darkBlue090": "#15263E",
+    "darkBlue095": "#0F1B2C",
+    "darkBlue100": "#09111C",
     "focus010": "#3768FB",
-    "green010": "#E6FAEB",
-    "green020": "#B8EFC8",
-    "green030": "#8EE1A6",
-    "green040": "#67CF86",
-    "green050": "#42BA67",
-    "green060": "#23A248",
-    "green070": "#148F39",
-    "green080": "#0A782A",
-    "green090": "#005D1C",
-    "green100": "#003E11",
+    "green010": "#E5F4EA",
+    "green020": "#C8E4D0",
+    "green030": "#95CAA3",
+    "green040": "#6DB681",
+    "green050": "#41A05B",
+    "green060": "#007B22",
+    "green070": "#00601A",
+    "green080": "#004914",
+    "green090": "#002D0D",
+    "green100": "#001D08",
     "illustrationAnatomyBorder010": "{{colors.purple080}}",
     "illustrationAnatomyBorder020": "{{colors.purple040}}",
     "illustrationAnatomySubtle": "{{colors.purple040}}",
-    "illustrationBackground010": "{{colors.darkBlue090}}",
-    "illustrationBackground020": "{{colors.darkBlue090}}",
+    "illustrationBackground010": "{{colors.darkBlue095}}",
+    "illustrationBackground020": "{{colors.darkBlue095}}",
     "illustrationBorder010": "{{colors.purple070}}",
     "illustrationBorder020": "{{colors.purple060}}",
-    "illustrationDisabled": "{{colors.purple080}}",
+    "illustrationDisabled": "{{colors.purple070}}",
     "illustrationGradient010": "linear-gradient(0deg, rgba(255,255,255,0.00) 0%, rgba(255,255,255,1) 100%)",
     "illustrationGradient020": "linear-gradient(0deg, rgba(22,39,64,0.00) 0%, rgba(22,39,64,1) 100%",
     "illustrationHighlight010": "{{colors.white}}",
-    "illustrationInterface010": "{{colors.purple050}}",
-    "illustrationInterface020": "{{colors.purple060}}",
-    "illustrationInterface030": "{{colors.purple070}}",
-    "illustrationInterface040": "{{colors.purple080}}",
-    "illustrationInterface050": "{{colors.purple090}}",
-    "illustrationInterface060": "{{colors.purple010}}",
-    "illustrationInterface070": "{{colors.purple020}}",
-    "illustrationInterface080": "{{colors.purple030}}",
+    "illustrationInterface010": "{{colors.purple055}}",
+    "illustrationInterface020": "{{colors.purple070}}",
+    "illustrationInterface030": "{{colors.purple080}}",
+    "illustrationInterface040": "{{colors.purple090}}",
+    "illustrationInterface050": "{{colors.purple100}}",
+    "illustrationInterface060": "{{colors.purple030}}",
+    "illustrationInterface070": "{{colors.purple040}}",
+    "illustrationInterface080": "{{colors.purple055}}",
     "illustrationInterface090": "{{colors.purple040}}",
     "illustrationInterface100": "{{colors.purple010}}",
     "illustrationPalette010": "{{colors.purple010}}",
-    "illustrationPalette020": "{{colors.purple020}}",
-    "illustrationPalette030": "{{colors.purple030}}",
-    "illustrationPalette040": "{{colors.purple040}}",
-    "illustrationPalette050": "{{colors.purple050}}",
+    "illustrationPalette020": "{{colors.purple030}}",
+    "illustrationPalette030": "{{colors.purple040}}",
+    "illustrationPalette040": "{{colors.purple050}}",
+    "illustrationPalette050": "{{colors.purple055}}",
     "illustrationPalette060": "{{colors.purple060}}",
     "illustrationPalette070": "{{colors.purple070}}",
     "illustrationPalette080": "{{colors.purple080}}",
     "illustrationPalette090": "{{colors.purple090}}",
     "illustrationPalette100": "{{colors.purple100}}",
     "illustrationShadow010": "{{colors.blackTint060}}",
-    "illustrationSubtle010": "{{colors.purple070}}",
-    "inkBase": "{{colors.darkBlue040}}",
-    "inkBrand010": "{{colors.purple040}}",
-    "inkBrand020": "{{colors.purple020}}",
-    "inkBrand030": "{{colors.teal050}}",
-    "inkContrast": "{{colors.darkBlue010}}",
-    "inkInformative": "{{colors.teal010}}",
+    "illustrationSubtle010": "{{colors.purple080}}",
+    "inkBase": "{{colors.darkBlue020}}",
+    "inkBrand010": "{{colors.purple050}}",
+    "inkBrand020": "{{colors.purple030}}",
+    "inkBrand030": "{{colors.teal060}}",
+    "inkContrast": "{{colors.white}}",
+    "inkDark010": "{{colors.darkBlue100}}",
+    "inkInformative": "{{colors.teal050}}",
     "inkInverse": "{{colors.darkBlue100}}",
-    "inkNegative": "{{colors.red030}}",
-    "inkNonEssential": "{{colors.darkBlue080}}",
-    "inkNotice": "{{colors.neutral030}}",
-    "inkPositive": "{{colors.green030}}",
-    "inkSubtle": "{{colors.darkBlue070}}",
+    "inkLight010": "{{colors.white}}",
+    "inkNegative": "{{colors.red050}}",
+    "inkNonEssential": "{{colors.darkBlue050}}",
+    "inkNotice": "{{colors.darkBlue030}}",
+    "inkPositive": "{{colors.green050}}",
+    "inkSubtle": "{{colors.darkBlue030}}",
     "inkWhiteContrast": "{{colors.white}}",
     "inkWhiteSubtle": "{{colors.whiteTint080}}",
     "interactiveDisabled010": "{{colors.darkBlue080}}",
-    "interactiveFocus010": "{{colors.white}}",
-    "interactiveInput010": "{{colors.neutral010}}",
-    "interactiveInput020": "{{colors.neutral040}}",
-    "interactiveInput030": "{{colors.blue010}}",
-    "interactiveInput040": "{{colors.blue060}}",
-    "interactiveInput050": "{{colors.blue070}}",
-    "interactiveInverse010": "{{colors.whiteTint010}}",
-    "interactiveInverse020": "{{colors.whiteTint020}}",
-    "interactiveInverse030": "{{colors.white}}",
-    "interactiveInverse040": "{{colors.whiteTint070}}",
-    "interactiveInverse050": "{{colors.whiteTint080}}",
-    "interactiveNegative010": "{{colors.red010}}",
-    "interactiveNegative020": "{{colors.red020}}",
-    "interactiveNegative030": "{{colors.red060}}",
-    "interactiveNegative040": "{{colors.red070}}",
-    "interactiveNegative050": "{{colors.red080}}",
-    "interactivePositive010": "{{colors.green010}}",
-    "interactivePositive020": "{{colors.green020}}",
-    "interactivePositive030": "{{colors.green060}}",
-    "interactivePositive040": "{{colors.green070}}",
-    "interactivePositive050": "{{colors.green080}}",
-    "interactivePrimary010": "{{colors.blue080}}",
-    "interactivePrimary020": "{{colors.blue090}}",
-    "interactivePrimary030": "{{colors.blue040}}",
-    "interactivePrimary040": "{{colors.blue050}}",
-    "interactivePrimary050": "{{colors.blue070}}",
-    "interactiveSecondary010": "{{colors.darkBlue080}}",
-    "interactiveSecondary020": "{{colors.darkBlue070}}",
+    "interactiveFocus010": "{{colors.focus010}}",
+    "interactiveInput010": "{{colors.darkBlue090}}",
+    "interactiveInput020": "{{colors.darkBlue060}}",
+    "interactiveInput030": "{{colors.blue090}}",
+    "interactiveInput040": "{{colors.blue050}}",
+    "interactiveInput050": "{{colors.blue030}}",
+    "interactiveInverse010": "{{colors.blackTint010}}",
+    "interactiveInverse020": "{{colors.blackTint020}}",
+    "interactiveInverse030": "{{colors.blackTint090}}",
+    "interactiveInverse040": "{{colors.blackTint070}}",
+    "interactiveInverse050": "{{colors.blackTint080}}",
+    "interactiveLink010": "{{colors.blue050}}",
+    "interactiveLink020": "{{colors.blue040}}",
+    "interactiveLink030": "{{colors.blue030}}",
+    "interactiveNegative010": "{{colors.red100}}",
+    "interactiveNegative020": "{{colors.red080}}",
+    "interactiveNegative030": "{{colors.red050}}",
+    "interactiveNegative040": "{{colors.red040}}",
+    "interactiveNegative050": "{{colors.red030}}",
+    "interactivePositive010": "{{colors.green090}}",
+    "interactivePositive020": "{{colors.green080}}",
+    "interactivePositive030": "{{colors.green050}}",
+    "interactivePositive040": "{{colors.green040}}",
+    "interactivePositive050": "{{colors.green030}}",
+    "interactivePrimary010": "{{colors.darkBlue090}}",
+    "interactivePrimary020": "{{colors.darkBlue080}}",
+    "interactivePrimary030": "{{colors.blue050}}",
+    "interactivePrimary040": "{{colors.blue040}}",
+    "interactivePrimary050": "{{colors.blue030}}",
+    "interactiveSecondary010": "{{colors.darkBlue090}}",
+    "interactiveSecondary020": "{{colors.darkBlue090}}",
     "interactiveSecondary030": "{{colors.darkBlue050}}",
-    "interactiveSecondary040": "{{colors.darkBlue060}}",
-    "interactiveSecondary050": "{{colors.darkBlue070}}",
+    "interactiveSecondary040": "{{colors.darkBlue030}}",
+    "interactiveSecondary050": "{{colors.darkBlue030}}",
     "interactiveVisited010": "{{colors.purple050}}",
-    "interface010": "{{colors.darkBlue100}}",
+    "interface010": "{{colors.darkBlue095}}",
     "interface020": "{{colors.darkBlue090}}",
     "interface030": "{{colors.darkBlue080}}",
     "interface040": "{{colors.darkBlue070}}",
     "interface050": "{{colors.darkBlue060}}",
     "interface060": "{{colors.darkBlue010}}",
     "interfaceBackground": "{{colors.darkBlue100}}",
-    "interfaceBrand010": "{{colors.purple090}}",
+    "interfaceBrand010": "{{colors.purple060}}",
     "interfaceBrand020": "{{colors.purple080}}",
-    "interfaceBrand030": "{{colors.purple050}}",
-    "interfaceBrand040": "{{colors.purple040}}",
-    "interfaceBrand050": "{{colors.purple020}}",
-    "interfaceBrand060": "{{colors.teal050}}",
+    "interfaceBrand030": "{{colors.purple060}}",
+    "interfaceBrand040": "{{colors.purple060}}",
+    "interfaceBrand050": "{{colors.purple080}}",
+    "interfaceBrand060": "{{colors.teal060}}",
     "interfaceInformative010": "{{colors.teal050}}",
-    "interfaceInformative020": "{{colors.teal070}}",
-    "interfaceNegative010": "{{colors.red040}}",
-    "interfaceNegative020": "{{colors.red070}}",
-    "interfaceNeutral010": "{{colors.neutral080}}",
-    "interfaceNeutral020": "{{colors.neutral010}}",
-    "interfaceNotice010": "{{colors.amber040}}",
-    "interfaceNotice020": "{{colors.amber070}}",
-    "interfacePositive010": "{{colors.green040}}",
-    "interfacePositive020": "{{colors.green070}}",
+    "interfaceInformative020": "{{colors.teal090}}",
+    "interfaceNegative010": "{{colors.red050}}",
+    "interfaceNegative020": "{{colors.red090}}",
+    "interfaceNeutral010": "{{colors.darkBlue030}}",
+    "interfaceNeutral020": "{{colors.darkBlue080}}",
+    "interfaceNotice010": "{{colors.darkBlue030}}",
+    "interfaceNotice020": "{{colors.darkBlue080}}",
+    "interfacePositive010": "{{colors.green050}}",
+    "interfacePositive020": "{{colors.green090}}",
     "interfaceSkeleton010": "{{colors.darkBlue090}}",
-    "interfaceSkeleton020": "{{colors.darkBlue080}}",
-    "neutral010": "#FAFAFA",
-    "neutral020": "#F4F4F4",
-    "neutral030": "#DEDEDE",
-    "neutral040": "#CCCCCC",
-    "neutral050": "#C0C0C0",
-    "neutral060": "#9C9C9C",
-    "neutral070": "#777777",
-    "neutral080": "#535353",
-    "neutral090": "#2E2E2E",
-    "neutral100": "#0A0A0A",
-    "purple010": "#E5E0FF",
-    "purple020": "#BBAEFF",
-    "purple030": "#9B87FC",
-    "purple040": "#7264EF",
-    "purple050": "#5E44E4",
-    "purple060": "#4C33CC",
-    "purple070": "#442EB5",
-    "purple080": "#36248C",
-    "purple090": "#332770",
-    "purple100": "#2A205C",
-    "red010": "#FFE6E5",
-    "red020": "#FFB8B8",
-    "red030": "#FF8A8A",
-    "red040": "#FF5C5C",
-    "red050": "#FF362E",
-    "red060": "#EF1703",
-    "red070": "#D20600",
-    "red080": "#A60100",
-    "red090": "#790101",
-    "red100": "#4D0000",
+    "interfaceSkeleton020": "{{colors.darkBlue090}}",
+    "neutral010": "#F1F1F1",
+    "neutral020": "#E2E2E2",
+    "neutral030": "#C6C6C6",
+    "neutral040": "#ABABAB",
+    "neutral050": "#919191",
+    "neutral060": "#6A6A6A",
+    "neutral070": "#525252",
+    "neutral080": "#3B3B3B",
+    "neutral090": "#262626",
+    "neutral100": "#111111",
+    "purple010": "#EFF0FF",
+    "purple020": "#DFE0FE",
+    "purple030": "#C0C2FC",
+    "purple040": "#A3A3FB",
+    "purple050": "#8883F6",
+    "purple055": "#6e61e4",
+    "purple060": "#6454E3",
+    "purple070": "#4C33CC",
+    "purple080": "#37239C",
+    "purple090": "#231668",
+    "purple100": "#0F0936",
+    "red010": "#FEECEC",
+    "red020": "#FED8D8",
+    "red030": "#FEB3B3",
+    "red040": "#FE8888",
+    "red050": "#FB5959",
+    "red060": "#D60000",
+    "red070": "#A90000",
+    "red080": "#820000",
+    "red090": "#550000",
+    "red100": "#3A0000",
     "socialApple": "#000000",
     "socialFacebook": "#1877F2",
     "socialGithub": "#000000",
@@ -10539,16 +10626,17 @@ Object {
     "socialTwitter": "#1DA1F2",
     "socialWhatsapp": "#25D366",
     "socialYoutube": "#FF0000",
-    "teal010": "#EBF8F9",
-    "teal020": "#A8E0E6",
-    "teal030": "#81D2DA",
-    "teal040": "#65BBC4",
-    "teal050": "#41A0AA",
-    "teal060": "#06808E",
-    "teal070": "#05717D",
-    "teal080": "#0D575E",
-    "teal090": "#093E43",
-    "teal100": "#083136",
+    "teal010": "#E6F4F6",
+    "teal020": "#C7E7EA",
+    "teal030": "#97D0D6",
+    "teal040": "#5EB8C0",
+    "teal050": "#289FAB",
+    "teal055": "#06808e",
+    "teal060": "#017582",
+    "teal070": "#005B65",
+    "teal080": "#004249",
+    "teal090": "#002B30",
+    "teal100": "#001314",
     "transparent": "transparent",
     "white": "#FFFFFF",
     "whiteTint010": "rgba(255,255,255,0.1)",
@@ -11549,6 +11637,8 @@ Object {
       },
       "hover": Object {
         "backgroundColor": "{{colors.interactiveInverse020}}",
+        "color": "{{colors.inkWhiteContrast}}",
+        "iconColor": "{{colors.inkWhiteContrast}}",
       },
       "loading": Object {
         "backgroundColor": "{{colors.interactiveInverse020}}",
@@ -11592,6 +11682,12 @@ Object {
         "color": "{{colors.inkContrast}}",
       },
     },
+    "homepageCard": Object {
+      "base": Object {
+        "backgroundColor": "{{colors.transparent}}",
+        "color": "{{colors.inkBase}}",
+      },
+    },
     "imageDefault": Object {
       "base": Object {
         "borderRadius": "{{borders.borderRadiusRounded020}}",
@@ -11759,6 +11855,8 @@ Object {
       },
       "hover": Object {
         "backgroundColor": "{{colors.interactiveInverse020}}",
+        "color": "{{colors.inkWhiteContrast}}",
+        "iconColor": "{{colors.inkWhiteContrast}}",
       },
       "loading": Object {
         "backgroundColor": "{{colors.interactiveInverse020}}",
@@ -11813,6 +11911,8 @@ Object {
       },
       "hover": Object {
         "backgroundColor": "{{colors.interactiveInverse020}}",
+        "color": "{{colors.inkWhiteContrast}}",
+        "iconColor": "{{colors.inkWhiteContrast}}",
       },
       "loading": Object {
         "backgroundColor": "{{colors.interactiveInverse020}}",
@@ -11921,8 +12021,8 @@ Object {
       "base": Object {
         "backgroundColor": "{{colors.interactiveInverse030}}",
         "borderRadius": "{{borders.borderRadiusDefault}}",
-        "color": "{{colors.interfaceBrand030}}",
-        "iconColor": "{{colors.interfaceBrand030}}",
+        "color": "{{colors.inkBrand010}}",
+        "iconColor": "{{colors.inkBrand010}}",
       },
       "disabled": Object {
         "backgroundColor": "{{colors.interactiveInverse020}}",
@@ -12034,8 +12134,8 @@ Object {
         "textDecoration": "none",
       },
       "hover": Object {
-        "backgroundColor": "{{colors.interactivePrimary010}}",
-        "color": "{{colors.interactivePrimary030}}",
+        "backgroundColor": "{{colors.interactivePrimary020}}",
+        "color": "{{colors.interactivePrimary040}}",
       },
       "selected": Object {
         "borderColor": "{{colors.transparent}} {{colors.transparent}} {{colors.transparent}} {{colors.interactivePrimary030}} ",
@@ -12045,7 +12145,7 @@ Object {
     },
     "sidebar": Object {
       "base": Object {
-        "backgroundColor": "{{colors.interface020}}",
+        "backgroundColor": "{{colors.interface010}}",
         "borderColor": "{{colors.interface040}}",
         "borderStyle": "solid",
         "borderWidth": "{{borders.borderWidth000}} {{borders.borderWidth010}} {{borders.borderWidth000}} {{borders.borderWidth000}}",
@@ -12180,8 +12280,8 @@ Object {
     "whatsnewCardButton": Object {
       "active": Object {
         "backgroundColor": "{{colors.interactiveInverse050}}",
-        "color": "{{colors.inkBrand020}}",
-        "iconColor": "{{colors.inkBrand020}}",
+        "color": "{{colors.inkBrand030}}",
+        "iconColor": "{{colors.inkBrand030}}",
       },
       "base": Object {
         "backgroundColor": "{{colors.interactiveInverse030}}",
@@ -12920,109 +13020,112 @@ Object {
     "xs": 0,
   },
   "colors": Object {
-    "amber010": "#FFEECF",
-    "amber020": "#FFDB9D",
-    "amber030": "#FFC058",
-    "amber040": "#FFAD2C",
-    "amber050": "#FF9900",
-    "amber060": "#FF8F00",
-    "amber070": "#FF8200",
-    "amber080": "#FF7200",
-    "amber090": "#FF6000",
-    "amber100": "#FF4B00",
+    "amber010": "#FFEDE1",
+    "amber020": "#FDDCC6",
+    "amber030": "#FEB788",
+    "amber040": "#F79247",
+    "amber050": "#CD6900",
+    "amber060": "#A75500",
+    "amber070": "#804200",
+    "amber080": "#5D2F00",
+    "amber090": "#3C1F00",
+    "amber100": "#1D0D02",
     "black": "#0A0A0A",
-    "blackTint010": "rgba(10,10,10,0.1)",
-    "blackTint020": "rgba(10,10,10,0.2)",
-    "blackTint030": "rgba(10,10,10,0.3)",
-    "blackTint040": "rgba(10,10,10,0.4)",
-    "blackTint050": "rgba(10,10,10,0.5)",
-    "blackTint060": "rgba(10,10,10,0.6)",
-    "blackTint070": "rgba(10,10,10,0.7)",
-    "blackTint080": "rgba(10,10,10,0.8)",
-    "blackTint090": "rgba(10,10,10,0.9)",
-    "blue005": "#F0F3FF",
-    "blue010": "#E0E7FF",
-    "blue020": "#AEBFFF",
-    "blue030": "#87A4FC",
-    "blue040": "#577FFB",
-    "blue050": "#446BE4",
+    "blackTint010": "rgba(0,0,0,0.1)",
+    "blackTint020": "rgba(0,0,0,0.2)",
+    "blackTint030": "rgba(0,0,0,0.3)",
+    "blackTint040": "rgba(0,0,0,0.4)",
+    "blackTint050": "rgba(0,0,0,0.5)",
+    "blackTint060": "rgba(0,0,0,0.6)",
+    "blackTint070": "rgba(0,0,0,0.7)",
+    "blackTint080": "rgba(0,0,0,0.8)",
+    "blackTint090": "rgba(0,0,0,0.9)",
+    "blue010": "#ECF1FF",
+    "blue020": "#D5E0FC",
+    "blue030": "#AEBFFF",
+    "blue040": "#8BA6F6",
+    "blue050": "#577FFB",
+    "blue055": "#446be4",
     "blue060": "#3358CC",
-    "blue070": "#2B4AAB",
-    "blue080": "#213A82",
-    "blue090": "#213A5F",
-    "blue100": "#192C48",
-    "darkBlue010": "#F4F4F4",
-    "darkBlue020": "#EBEBEB",
-    "darkBlue030": "#E4E4E4",
-    "darkBlue040": "#BBC3C9",
-    "darkBlue050": "#96A29B",
-    "darkBlue060": "#808E99",
-    "darkBlue070": "#6E7D8D",
-    "darkBlue080": "#555E74",
-    "darkBlue090": "#243853",
-    "darkBlue100": "#162740",
+    "blue070": "#254CAC",
+    "blue080": "#14328D",
+    "blue090": "#0C285F",
+    "blue100": "#071E3C",
+    "darkBlue010": "#F0F1F3",
+    "darkBlue020": "#DEE2E5",
+    "darkBlue030": "#C0C7CC",
+    "darkBlue040": "#A1ACB4",
+    "darkBlue050": "#85939C",
+    "darkBlue060": "#5A6A79",
+    "darkBlue070": "#435365",
+    "darkBlue080": "#2E3F54",
+    "darkBlue090": "#15263E",
+    "darkBlue095": "#0F1B2C",
+    "darkBlue100": "#09111C",
     "focus010": "#3768FB",
-    "green010": "#E6FAEB",
-    "green020": "#B8EFC8",
-    "green030": "#8EE1A6",
-    "green040": "#67CF86",
-    "green050": "#42BA67",
-    "green060": "#23A248",
-    "green070": "#148F39",
-    "green080": "#0A782A",
-    "green090": "#005D1C",
-    "green100": "#003E11",
-    "illustrationAnatomyBorder010": "{{colors.purple020}}",
-    "illustrationAnatomyBorder020": "{{colors.purple040}}",
-    "illustrationAnatomySubtle": "{{colors.purple020}}",
-    "illustrationBackground010": "{{colors.blue005}}",
+    "green010": "#E5F4EA",
+    "green020": "#C8E4D0",
+    "green030": "#95CAA3",
+    "green040": "#6DB681",
+    "green050": "#41A05B",
+    "green060": "#007B22",
+    "green070": "#00601A",
+    "green080": "#004914",
+    "green090": "#002D0D",
+    "green100": "#001D08",
+    "illustrationAnatomyBorder010": "{{colors.purple030}}",
+    "illustrationAnatomyBorder020": "{{colors.purple070}}",
+    "illustrationAnatomySubtle": "{{colors.purple030}}",
+    "illustrationBackground010": "{{colors.blue010}}",
     "illustrationBackground020": "{{colors.darkBlue010}}",
     "illustrationBorder010": "{{colors.darkBlue020}}",
-    "illustrationBorder020": "{{colors.darkBlue040}}",
+    "illustrationBorder020": "{{colors.darkBlue030}}",
     "illustrationDisabled": "{{colors.darkBlue020}}",
     "illustrationGradient010": "linear-gradient(0deg, rgba(10,10,10,0.00) 0%, rgba(10,10,10,1) 100%)",
     "illustrationGradient020": "linear-gradient(0deg, rgba(255,255,255,0.00) 0%, rgba(255,255,255,1) 100%)",
-    "illustrationHighlight010": "{{colors.purple040}}",
+    "illustrationHighlight010": "{{colors.purple050}}",
     "illustrationInterface010": "{{colors.white}}",
-    "illustrationInterface020": "{{colors.purple010}}",
-    "illustrationInterface030": "{{colors.purple020}}",
-    "illustrationInterface040": "{{colors.purple030}}",
-    "illustrationInterface050": "{{colors.purple040}}",
-    "illustrationInterface060": "{{colors.purple050}}",
+    "illustrationInterface020": "{{colors.purple020}}",
+    "illustrationInterface030": "{{colors.purple030}}",
+    "illustrationInterface040": "{{colors.purple040}}",
+    "illustrationInterface050": "{{colors.purple050}}",
+    "illustrationInterface060": "{{colors.purple055}}",
     "illustrationInterface070": "{{colors.purple060}}",
     "illustrationInterface080": "{{colors.purple070}}",
     "illustrationInterface090": "{{colors.purple080}}",
     "illustrationInterface100": "{{colors.purple090}}",
     "illustrationPalette010": "{{colors.purple010}}",
-    "illustrationPalette020": "{{colors.purple020}}",
-    "illustrationPalette030": "{{colors.purple030}}",
-    "illustrationPalette040": "{{colors.purple040}}",
-    "illustrationPalette050": "{{colors.purple050}}",
+    "illustrationPalette020": "{{colors.purple030}}",
+    "illustrationPalette030": "{{colors.purple040}}",
+    "illustrationPalette040": "{{colors.purple050}}",
+    "illustrationPalette050": "{{colors.purple055}}",
     "illustrationPalette060": "{{colors.purple060}}",
     "illustrationPalette070": "{{colors.purple070}}",
     "illustrationPalette080": "{{colors.purple080}}",
     "illustrationPalette090": "{{colors.purple090}}",
     "illustrationPalette100": "{{colors.purple100}}",
     "illustrationShadow010": "{{colors.blackTint030}}",
-    "illustrationSubtle010": "{{colors.darkBlue060}}",
-    "inkBase": "{{colors.neutral090}}",
-    "inkBrand010": "{{colors.purple050}}",
+    "illustrationSubtle010": "{{colors.darkBlue050}}",
+    "inkBase": "{{colors.darkBlue080}}",
+    "inkBrand010": "{{colors.purple060}}",
     "inkBrand020": "{{colors.purple080}}",
-    "inkBrand030": "{{colors.teal050}}",
-    "inkContrast": "{{colors.neutral100}}",
-    "inkInformative": "{{colors.teal070}}",
+    "inkBrand030": "{{colors.teal060}}",
+    "inkContrast": "{{colors.darkBlue100}}",
+    "inkDark010": "{{colors.darkBlue100}}",
+    "inkInformative": "{{colors.teal060}}",
     "inkInverse": "{{colors.white}}",
-    "inkNegative": "{{colors.red070}}",
-    "inkNonEssential": "{{colors.neutral050}}",
-    "inkNotice": "{{colors.neutral080}}",
-    "inkPositive": "{{colors.green080}}",
-    "inkSubtle": "{{colors.neutral080}}",
+    "inkLight010": "{{colors.white}}",
+    "inkNegative": "{{colors.red060}}",
+    "inkNonEssential": "{{colors.darkBlue030}}",
+    "inkNotice": "{{colors.darkBlue070}}",
+    "inkPositive": "{{colors.green060}}",
+    "inkSubtle": "{{colors.darkBlue060}}",
     "inkWhiteContrast": "{{colors.white}}",
     "inkWhiteSubtle": "{{colors.whiteTint080}}",
-    "interactiveDisabled010": "{{colors.neutral020}}",
+    "interactiveDisabled010": "{{colors.darkBlue020}}",
     "interactiveFocus010": "{{colors.focus010}}",
-    "interactiveInput010": "{{colors.neutral010}}",
-    "interactiveInput020": "{{colors.neutral040}}",
+    "interactiveInput010": "{{colors.darkBlue010}}",
+    "interactiveInput020": "{{colors.darkBlue050}}",
     "interactiveInput030": "{{colors.blue010}}",
     "interactiveInput040": "{{colors.blue060}}",
     "interactiveInput050": "{{colors.blue070}}",
@@ -13031,6 +13134,9 @@ Object {
     "interactiveInverse030": "{{colors.white}}",
     "interactiveInverse040": "{{colors.whiteTint070}}",
     "interactiveInverse050": "{{colors.whiteTint080}}",
+    "interactiveLink010": "{{colors.blue060}}",
+    "interactiveLink020": "{{colors.blue070}}",
+    "interactiveLink030": "{{colors.blue080}}",
     "interactiveNegative010": "{{colors.red010}}",
     "interactiveNegative020": "{{colors.red020}}",
     "interactiveNegative030": "{{colors.red060}}",
@@ -13043,70 +13149,71 @@ Object {
     "interactivePositive050": "{{colors.green080}}",
     "interactivePrimary010": "{{colors.blue010}}",
     "interactivePrimary020": "{{colors.blue020}}",
-    "interactivePrimary030": "{{colors.blue040}}",
-    "interactivePrimary040": "{{colors.blue060}}",
+    "interactivePrimary030": "{{colors.blue060}}",
+    "interactivePrimary040": "{{colors.blue070}}",
     "interactivePrimary050": "{{colors.blue080}}",
-    "interactiveSecondary010": "{{colors.neutral020}}",
-    "interactiveSecondary020": "{{colors.neutral040}}",
-    "interactiveSecondary030": "{{colors.neutral080}}",
-    "interactiveSecondary040": "{{colors.neutral090}}",
-    "interactiveSecondary050": "{{colors.neutral100}}",
-    "interactiveVisited010": "{{colors.purple050}}",
-    "interface010": "{{colors.white}}",
+    "interactiveSecondary010": "{{colors.darkBlue010}}",
+    "interactiveSecondary020": "{{colors.darkBlue020}}",
+    "interactiveSecondary030": "{{colors.darkBlue080}}",
+    "interactiveSecondary040": "{{colors.darkBlue090}}",
+    "interactiveSecondary050": "{{colors.darkBlue100}}",
+    "interactiveVisited010": "{{colors.purple060}}",
+    "interface010": "{{colors.darkBlue010}}",
     "interface020": "{{colors.darkBlue010}}",
     "interface030": "{{colors.darkBlue020}}",
-    "interface040": "{{colors.darkBlue030}}",
-    "interface050": "{{colors.darkBlue040}}",
+    "interface040": "{{colors.darkBlue020}}",
+    "interface050": "{{colors.darkBlue030}}",
     "interface060": "{{colors.darkBlue100}}",
     "interfaceBackground": "{{colors.white}}",
-    "interfaceBrand010": "{{colors.purple020}}",
-    "interfaceBrand020": "{{colors.purple030}}",
-    "interfaceBrand030": "{{colors.purple050}}",
+    "interfaceBrand010": "{{colors.purple060}}",
+    "interfaceBrand020": "{{colors.purple080}}",
+    "interfaceBrand030": "{{colors.purple060}}",
     "interfaceBrand040": "{{colors.purple060}}",
     "interfaceBrand050": "{{colors.purple080}}",
-    "interfaceBrand060": "{{colors.teal050}}",
-    "interfaceInformative010": "{{colors.teal070}}",
+    "interfaceBrand060": "{{colors.teal060}}",
+    "interfaceInformative010": "{{colors.teal060}}",
     "interfaceInformative020": "{{colors.teal010}}",
-    "interfaceNegative010": "{{colors.red070}}",
+    "interfaceNegative010": "{{colors.red060}}",
     "interfaceNegative020": "{{colors.red010}}",
-    "interfaceNeutral010": "{{colors.neutral080}}",
-    "interfaceNeutral020": "{{colors.neutral010}}",
-    "interfaceNotice010": "{{colors.neutral080}}",
-    "interfaceNotice020": "{{colors.neutral020}}",
-    "interfacePositive010": "{{colors.green080}}",
+    "interfaceNeutral010": "{{colors.darkBlue080}}",
+    "interfaceNeutral020": "{{colors.darkBlue010}}",
+    "interfaceNotice010": "{{colors.darkBlue080}}",
+    "interfaceNotice020": "{{colors.darkBlue010}}",
+    "interfacePositive010": "{{colors.green060}}",
     "interfacePositive020": "{{colors.green010}}",
     "interfaceSkeleton010": "{{colors.darkBlue010}}",
     "interfaceSkeleton020": "{{colors.darkBlue020}}",
-    "neutral010": "#FAFAFA",
-    "neutral020": "#F4F4F4",
-    "neutral030": "#DEDEDE",
-    "neutral040": "#CCCCCC",
-    "neutral050": "#C0C0C0",
-    "neutral060": "#9C9C9C",
-    "neutral070": "#777777",
-    "neutral080": "#535353",
-    "neutral090": "#2E2E2E",
-    "neutral100": "#0A0A0A",
-    "purple010": "#E5E0FF",
-    "purple020": "#BBAEFF",
-    "purple030": "#9B87FC",
-    "purple040": "#7264EF",
-    "purple050": "#5E44E4",
-    "purple060": "#4C33CC",
-    "purple070": "#442EB5",
-    "purple080": "#36248C",
-    "purple090": "#332770",
-    "purple100": "#2A205C",
-    "red010": "#FFE6E5",
-    "red020": "#FFB8B8",
-    "red030": "#FF8A8A",
-    "red040": "#FF5C5C",
-    "red050": "#FF362E",
-    "red060": "#EF1703",
-    "red070": "#D20600",
-    "red080": "#A60100",
-    "red090": "#790101",
-    "red100": "#4D0000",
+    "neutral010": "#F1F1F1",
+    "neutral020": "#E2E2E2",
+    "neutral030": "#C6C6C6",
+    "neutral040": "#ABABAB",
+    "neutral050": "#919191",
+    "neutral060": "#6A6A6A",
+    "neutral070": "#525252",
+    "neutral080": "#3B3B3B",
+    "neutral090": "#262626",
+    "neutral100": "#111111",
+    "purple010": "#EFF0FF",
+    "purple020": "#DFE0FE",
+    "purple030": "#C0C2FC",
+    "purple040": "#A3A3FB",
+    "purple050": "#8883F6",
+    "purple055": "#6e61e4",
+    "purple060": "#6454E3",
+    "purple070": "#4C33CC",
+    "purple080": "#37239C",
+    "purple090": "#231668",
+    "purple100": "#0F0936",
+    "red010": "#FEECEC",
+    "red020": "#FED8D8",
+    "red030": "#FEB3B3",
+    "red040": "#FE8888",
+    "red050": "#FB5959",
+    "red060": "#D60000",
+    "red070": "#A90000",
+    "red080": "#820000",
+    "red090": "#550000",
+    "red100": "#3A0000",
     "socialApple": "#000000",
     "socialFacebook": "#1877F2",
     "socialGithub": "#000000",
@@ -13119,16 +13226,17 @@ Object {
     "socialTwitter": "#1DA1F2",
     "socialWhatsapp": "#25D366",
     "socialYoutube": "#FF0000",
-    "teal010": "#EBF8F9",
-    "teal020": "#A8E0E6",
-    "teal030": "#81D2DA",
-    "teal040": "#65BBC4",
-    "teal050": "#41A0AA",
-    "teal060": "#06808E",
-    "teal070": "#05717D",
-    "teal080": "#0D575E",
-    "teal090": "#093E43",
-    "teal100": "#083136",
+    "teal010": "#E6F4F6",
+    "teal020": "#C7E7EA",
+    "teal030": "#97D0D6",
+    "teal040": "#5EB8C0",
+    "teal050": "#289FAB",
+    "teal055": "#06808e",
+    "teal060": "#017582",
+    "teal070": "#005B65",
+    "teal080": "#004249",
+    "teal090": "#002B30",
+    "teal100": "#001314",
     "transparent": "transparent",
     "white": "#FFFFFF",
     "whiteTint010": "rgba(255,255,255,0.1)",
@@ -14126,6 +14234,8 @@ Object {
       },
       "hover": Object {
         "backgroundColor": "{{colors.interactiveInverse020}}",
+        "color": "{{colors.inkWhiteContrast}}",
+        "iconColor": "{{colors.inkWhiteContrast}}",
       },
       "loading": Object {
         "backgroundColor": "{{colors.interactiveInverse020}}",
@@ -14169,6 +14279,12 @@ Object {
         "color": "{{colors.inkContrast}}",
       },
     },
+    "homepageCard": Object {
+      "base": Object {
+        "backgroundColor": "{{colors.transparent}}",
+        "color": "{{colors.inkBase}}",
+      },
+    },
     "imageDefault": Object {
       "base": Object {
         "borderRadius": "{{borders.borderRadiusRounded020}}",
@@ -14336,6 +14452,8 @@ Object {
       },
       "hover": Object {
         "backgroundColor": "{{colors.interactiveInverse020}}",
+        "color": "{{colors.inkWhiteContrast}}",
+        "iconColor": "{{colors.inkWhiteContrast}}",
       },
       "loading": Object {
         "backgroundColor": "{{colors.interactiveInverse020}}",
@@ -14390,6 +14508,8 @@ Object {
       },
       "hover": Object {
         "backgroundColor": "{{colors.interactiveInverse020}}",
+        "color": "{{colors.inkWhiteContrast}}",
+        "iconColor": "{{colors.inkWhiteContrast}}",
       },
       "loading": Object {
         "backgroundColor": "{{colors.interactiveInverse020}}",
@@ -14498,8 +14618,8 @@ Object {
       "base": Object {
         "backgroundColor": "{{colors.interactiveInverse030}}",
         "borderRadius": "{{borders.borderRadiusDefault}}",
-        "color": "{{colors.interfaceBrand030}}",
-        "iconColor": "{{colors.interfaceBrand030}}",
+        "color": "{{colors.inkBrand010}}",
+        "iconColor": "{{colors.inkBrand010}}",
       },
       "disabled": Object {
         "backgroundColor": "{{colors.interactiveInverse020}}",
@@ -14611,8 +14731,8 @@ Object {
         "textDecoration": "none",
       },
       "hover": Object {
-        "backgroundColor": "{{colors.interactivePrimary010}}",
-        "color": "{{colors.interactivePrimary030}}",
+        "backgroundColor": "{{colors.interactivePrimary020}}",
+        "color": "{{colors.interactivePrimary040}}",
       },
       "selected": Object {
         "borderColor": "{{colors.transparent}} {{colors.transparent}} {{colors.transparent}} {{colors.interactivePrimary030}} ",
@@ -14622,7 +14742,7 @@ Object {
     },
     "sidebar": Object {
       "base": Object {
-        "backgroundColor": "{{colors.interface020}}",
+        "backgroundColor": "{{colors.interface010}}",
         "borderColor": "{{colors.interface040}}",
         "borderStyle": "solid",
         "borderWidth": "{{borders.borderWidth000}} {{borders.borderWidth010}} {{borders.borderWidth000}} {{borders.borderWidth000}}",
@@ -14757,8 +14877,8 @@ Object {
     "whatsnewCardButton": Object {
       "active": Object {
         "backgroundColor": "{{colors.interactiveInverse050}}",
-        "color": "{{colors.inkBrand020}}",
-        "iconColor": "{{colors.inkBrand020}}",
+        "color": "{{colors.inkBrand030}}",
+        "iconColor": "{{colors.inkBrand030}}",
       },
       "base": Object {
         "backgroundColor": "{{colors.interactiveInverse030}}",
@@ -15497,77 +15617,78 @@ Object {
     "xs": 0,
   },
   "colors": Object {
-    "amber010": "#FFEECF",
-    "amber020": "#FFDB9D",
-    "amber030": "#FFC058",
-    "amber040": "#FFAD2C",
-    "amber050": "#FF9900",
-    "amber060": "#FF8F00",
-    "amber070": "#FF8200",
-    "amber080": "#FF7200",
-    "amber090": "#FF6000",
-    "amber100": "#FF4B00",
+    "amber010": "#FFEDE1",
+    "amber020": "#FDDCC6",
+    "amber030": "#FEB788",
+    "amber040": "#F79247",
+    "amber050": "#CD6900",
+    "amber060": "#A75500",
+    "amber070": "#804200",
+    "amber080": "#5D2F00",
+    "amber090": "#3C1F00",
+    "amber100": "#1D0D02",
     "black": "#0A0A0A",
-    "blackTint010": "rgba(10,10,10,0.1)",
-    "blackTint020": "rgba(10,10,10,0.2)",
-    "blackTint030": "rgba(10,10,10,0.3)",
-    "blackTint040": "rgba(10,10,10,0.4)",
-    "blackTint050": "rgba(10,10,10,0.5)",
-    "blackTint060": "rgba(10,10,10,0.6)",
-    "blackTint070": "rgba(10,10,10,0.7)",
-    "blackTint080": "rgba(10,10,10,0.8)",
-    "blackTint090": "rgba(10,10,10,0.9)",
-    "blue005": "#F0F3FF",
-    "blue010": "#E0E7FF",
-    "blue020": "#AEBFFF",
-    "blue030": "#87A4FC",
-    "blue040": "#577FFB",
-    "blue050": "#446BE4",
+    "blackTint010": "rgba(0,0,0,0.1)",
+    "blackTint020": "rgba(0,0,0,0.2)",
+    "blackTint030": "rgba(0,0,0,0.3)",
+    "blackTint040": "rgba(0,0,0,0.4)",
+    "blackTint050": "rgba(0,0,0,0.5)",
+    "blackTint060": "rgba(0,0,0,0.6)",
+    "blackTint070": "rgba(0,0,0,0.7)",
+    "blackTint080": "rgba(0,0,0,0.8)",
+    "blackTint090": "rgba(0,0,0,0.9)",
+    "blue010": "#ECF1FF",
+    "blue020": "#D5E0FC",
+    "blue030": "#AEBFFF",
+    "blue040": "#8BA6F6",
+    "blue050": "#577FFB",
+    "blue055": "#446be4",
     "blue060": "#3358CC",
-    "blue070": "#2B4AAB",
-    "blue080": "#213A82",
-    "blue090": "#213A5F",
-    "blue100": "#192C48",
-    "darkBlue010": "#F4F4F4",
-    "darkBlue020": "#EBEBEB",
-    "darkBlue030": "#E4E4E4",
-    "darkBlue040": "#BBC3C9",
-    "darkBlue050": "#96A29B",
-    "darkBlue060": "#808E99",
-    "darkBlue070": "#6E7D8D",
-    "darkBlue080": "#555E74",
-    "darkBlue090": "#243853",
-    "darkBlue100": "#162740",
+    "blue070": "#254CAC",
+    "blue080": "#14328D",
+    "blue090": "#0C285F",
+    "blue100": "#071E3C",
+    "darkBlue010": "#F0F1F3",
+    "darkBlue020": "#DEE2E5",
+    "darkBlue030": "#C0C7CC",
+    "darkBlue040": "#A1ACB4",
+    "darkBlue050": "#85939C",
+    "darkBlue060": "#5A6A79",
+    "darkBlue070": "#435365",
+    "darkBlue080": "#2E3F54",
+    "darkBlue090": "#15263E",
+    "darkBlue095": "#0F1B2C",
+    "darkBlue100": "#09111C",
     "focus010": "#3768FB",
-    "green010": "#E6FAEB",
-    "green020": "#B8EFC8",
-    "green030": "#8EE1A6",
-    "green040": "#67CF86",
-    "green050": "#42BA67",
-    "green060": "#23A248",
-    "green070": "#148F39",
-    "green080": "#0A782A",
-    "green090": "#005D1C",
-    "green100": "#003E11",
+    "green010": "#E5F4EA",
+    "green020": "#C8E4D0",
+    "green030": "#95CAA3",
+    "green040": "#6DB681",
+    "green050": "#41A05B",
+    "green060": "#007B22",
+    "green070": "#00601A",
+    "green080": "#004914",
+    "green090": "#002D0D",
+    "green100": "#001D08",
     "illustrationAnatomyBorder010": "{{colors.teal080}}",
     "illustrationAnatomyBorder020": "{{colors.teal040}}",
     "illustrationAnatomySubtle": "{{colors.teal040}}",
-    "illustrationBackground010": "{{colors.darkBlue090}}",
-    "illustrationBackground020": "{{colors.darkBlue090}}",
-    "illustrationBorder010": "{{colors.teal070}}",
-    "illustrationBorder020": "{{colors.teal060}}",
-    "illustrationDisabled": "{{colors.teal080}}",
+    "illustrationBackground010": "{{colors.darkBlue095}}",
+    "illustrationBackground020": "{{colors.darkBlue095}}",
+    "illustrationBorder010": "{{colors.teal060}}",
+    "illustrationBorder020": "{{colors.teal055}}",
+    "illustrationDisabled": "{{colors.teal070}}",
     "illustrationGradient010": "linear-gradient(0deg, rgba(255,255,255,0.00) 0%, rgba(255,255,255,1) 100%)",
     "illustrationGradient020": "linear-gradient(0deg, rgba(22,39,64,0.00) 0%, rgba(22,39,64,1) 100%",
     "illustrationHighlight010": "{{colors.white}}",
     "illustrationInterface010": "{{colors.teal050}}",
-    "illustrationInterface020": "{{colors.teal060}}",
-    "illustrationInterface030": "{{colors.teal070}}",
-    "illustrationInterface040": "{{colors.teal080}}",
-    "illustrationInterface050": "{{colors.teal090}}",
+    "illustrationInterface020": "{{colors.teal070}}",
+    "illustrationInterface030": "{{colors.teal060}}",
+    "illustrationInterface040": "{{colors.teal070}}",
+    "illustrationInterface050": "{{colors.teal080}}",
     "illustrationInterface060": "{{colors.teal020}}",
     "illustrationInterface070": "{{colors.teal030}}",
-    "illustrationInterface080": "{{colors.teal050}}",
+    "illustrationInterface080": "{{colors.teal040}}",
     "illustrationInterface090": "{{colors.teal050}}",
     "illustrationInterface100": "{{colors.teal010}}",
     "illustrationPalette010": "{{colors.teal010}}",
@@ -15575,115 +15696,121 @@ Object {
     "illustrationPalette030": "{{colors.teal030}}",
     "illustrationPalette040": "{{colors.teal040}}",
     "illustrationPalette050": "{{colors.teal050}}",
-    "illustrationPalette060": "{{colors.teal060}}",
-    "illustrationPalette070": "{{colors.teal070}}",
-    "illustrationPalette080": "{{colors.teal080}}",
-    "illustrationPalette090": "{{colors.teal090}}",
-    "illustrationPalette100": "{{colors.teal100}}",
+    "illustrationPalette060": "{{colors.teal055}}",
+    "illustrationPalette070": "{{colors.teal060}}",
+    "illustrationPalette080": "{{colors.teal070}}",
+    "illustrationPalette090": "{{colors.teal080}}",
+    "illustrationPalette100": "{{colors.teal090}}",
     "illustrationShadow010": "{{colors.blackTint060}}",
-    "illustrationSubtle010": "{{colors.teal070}}",
-    "inkBase": "{{colors.darkBlue040}}",
-    "inkBrand010": "{{colors.teal040}}",
-    "inkBrand020": "{{colors.teal020}}",
-    "inkBrand030": "{{colors.teal050}}",
-    "inkContrast": "{{colors.darkBlue010}}",
-    "inkInformative": "{{colors.teal010}}",
+    "illustrationSubtle010": "{{colors.teal060}}",
+    "inkBase": "{{colors.darkBlue020}}",
+    "inkBrand010": "{{colors.teal050}}",
+    "inkBrand020": "{{colors.teal030}}",
+    "inkBrand030": "{{colors.teal060}}",
+    "inkContrast": "{{colors.white}}",
+    "inkDark010": "{{colors.darkBlue100}}",
+    "inkInformative": "{{colors.teal050}}",
     "inkInverse": "{{colors.darkBlue100}}",
-    "inkNegative": "{{colors.red030}}",
-    "inkNonEssential": "{{colors.darkBlue080}}",
-    "inkNotice": "{{colors.neutral030}}",
-    "inkPositive": "{{colors.green030}}",
-    "inkSubtle": "{{colors.darkBlue070}}",
+    "inkLight010": "{{colors.white}}",
+    "inkNegative": "{{colors.red050}}",
+    "inkNonEssential": "{{colors.darkBlue050}}",
+    "inkNotice": "{{colors.darkBlue030}}",
+    "inkPositive": "{{colors.green050}}",
+    "inkSubtle": "{{colors.darkBlue030}}",
     "inkWhiteContrast": "{{colors.white}}",
     "inkWhiteSubtle": "{{colors.whiteTint080}}",
     "interactiveDisabled010": "{{colors.darkBlue080}}",
-    "interactiveFocus010": "{{colors.white}}",
-    "interactiveInput010": "{{colors.neutral010}}",
-    "interactiveInput020": "{{colors.neutral040}}",
-    "interactiveInput030": "{{colors.blue010}}",
-    "interactiveInput040": "{{colors.blue060}}",
-    "interactiveInput050": "{{colors.blue070}}",
-    "interactiveInverse010": "{{colors.whiteTint010}}",
-    "interactiveInverse020": "{{colors.whiteTint020}}",
-    "interactiveInverse030": "{{colors.white}}",
-    "interactiveInverse040": "{{colors.whiteTint070}}",
-    "interactiveInverse050": "{{colors.whiteTint080}}",
-    "interactiveNegative010": "{{colors.red010}}",
-    "interactiveNegative020": "{{colors.red020}}",
-    "interactiveNegative030": "{{colors.red060}}",
-    "interactiveNegative040": "{{colors.red070}}",
-    "interactiveNegative050": "{{colors.red080}}",
-    "interactivePositive010": "{{colors.green010}}",
-    "interactivePositive020": "{{colors.green020}}",
-    "interactivePositive030": "{{colors.green060}}",
-    "interactivePositive040": "{{colors.green070}}",
-    "interactivePositive050": "{{colors.green080}}",
-    "interactivePrimary010": "{{colors.blue080}}",
-    "interactivePrimary020": "{{colors.blue090}}",
-    "interactivePrimary030": "{{colors.blue040}}",
-    "interactivePrimary040": "{{colors.blue050}}",
-    "interactivePrimary050": "{{colors.blue070}}",
-    "interactiveSecondary010": "{{colors.darkBlue080}}",
-    "interactiveSecondary020": "{{colors.darkBlue070}}",
+    "interactiveFocus010": "{{colors.focus010}}",
+    "interactiveInput010": "{{colors.darkBlue090}}",
+    "interactiveInput020": "{{colors.darkBlue060}}",
+    "interactiveInput030": "{{colors.blue090}}",
+    "interactiveInput040": "{{colors.blue050}}",
+    "interactiveInput050": "{{colors.blue030}}",
+    "interactiveInverse010": "{{colors.blackTint010}}",
+    "interactiveInverse020": "{{colors.blackTint020}}",
+    "interactiveInverse030": "{{colors.blackTint090}}",
+    "interactiveInverse040": "{{colors.blackTint070}}",
+    "interactiveInverse050": "{{colors.blackTint080}}",
+    "interactiveLink010": "{{colors.blue050}}",
+    "interactiveLink020": "{{colors.blue040}}",
+    "interactiveLink030": "{{colors.blue030}}",
+    "interactiveNegative010": "{{colors.red100}}",
+    "interactiveNegative020": "{{colors.red080}}",
+    "interactiveNegative030": "{{colors.red050}}",
+    "interactiveNegative040": "{{colors.red040}}",
+    "interactiveNegative050": "{{colors.red030}}",
+    "interactivePositive010": "{{colors.green090}}",
+    "interactivePositive020": "{{colors.green080}}",
+    "interactivePositive030": "{{colors.green050}}",
+    "interactivePositive040": "{{colors.green040}}",
+    "interactivePositive050": "{{colors.green030}}",
+    "interactivePrimary010": "{{colors.darkBlue090}}",
+    "interactivePrimary020": "{{colors.darkBlue080}}",
+    "interactivePrimary030": "{{colors.blue050}}",
+    "interactivePrimary040": "{{colors.blue040}}",
+    "interactivePrimary050": "{{colors.blue030}}",
+    "interactiveSecondary010": "{{colors.darkBlue090}}",
+    "interactiveSecondary020": "{{colors.darkBlue090}}",
     "interactiveSecondary030": "{{colors.darkBlue050}}",
-    "interactiveSecondary040": "{{colors.darkBlue060}}",
-    "interactiveSecondary050": "{{colors.darkBlue070}}",
+    "interactiveSecondary040": "{{colors.darkBlue030}}",
+    "interactiveSecondary050": "{{colors.darkBlue030}}",
     "interactiveVisited010": "{{colors.purple050}}",
-    "interface010": "{{colors.darkBlue100}}",
+    "interface010": "{{colors.darkBlue095}}",
     "interface020": "{{colors.darkBlue090}}",
     "interface030": "{{colors.darkBlue080}}",
     "interface040": "{{colors.darkBlue070}}",
     "interface050": "{{colors.darkBlue060}}",
     "interface060": "{{colors.darkBlue010}}",
     "interfaceBackground": "{{colors.darkBlue100}}",
-    "interfaceBrand010": "{{colors.teal090}}",
-    "interfaceBrand020": "{{colors.teal080}}",
-    "interfaceBrand030": "{{colors.teal050}}",
-    "interfaceBrand040": "{{colors.teal040}}",
-    "interfaceBrand050": "{{colors.teal020}}",
-    "interfaceBrand060": "{{colors.teal050}}",
+    "interfaceBrand010": "{{colors.teal080}}",
+    "interfaceBrand020": "{{colors.teal060}}",
+    "interfaceBrand030": "{{colors.teal060}}",
+    "interfaceBrand040": "{{colors.teal080}}",
+    "interfaceBrand050": "{{colors.teal080}}",
+    "interfaceBrand060": "{{colors.teal060}}",
     "interfaceInformative010": "{{colors.teal050}}",
-    "interfaceInformative020": "{{colors.teal070}}",
-    "interfaceNegative010": "{{colors.red040}}",
-    "interfaceNegative020": "{{colors.red070}}",
-    "interfaceNeutral010": "{{colors.neutral080}}",
-    "interfaceNeutral020": "{{colors.neutral010}}",
-    "interfaceNotice010": "{{colors.amber040}}",
-    "interfaceNotice020": "{{colors.amber070}}",
-    "interfacePositive010": "{{colors.green040}}",
-    "interfacePositive020": "{{colors.green070}}",
+    "interfaceInformative020": "{{colors.teal090}}",
+    "interfaceNegative010": "{{colors.red050}}",
+    "interfaceNegative020": "{{colors.red090}}",
+    "interfaceNeutral010": "{{colors.darkBlue030}}",
+    "interfaceNeutral020": "{{colors.darkBlue080}}",
+    "interfaceNotice010": "{{colors.darkBlue030}}",
+    "interfaceNotice020": "{{colors.darkBlue080}}",
+    "interfacePositive010": "{{colors.green050}}",
+    "interfacePositive020": "{{colors.green090}}",
     "interfaceSkeleton010": "{{colors.darkBlue090}}",
-    "interfaceSkeleton020": "{{colors.darkBlue080}}",
-    "neutral010": "#FAFAFA",
-    "neutral020": "#F4F4F4",
-    "neutral030": "#DEDEDE",
-    "neutral040": "#CCCCCC",
-    "neutral050": "#C0C0C0",
-    "neutral060": "#9C9C9C",
-    "neutral070": "#777777",
-    "neutral080": "#535353",
-    "neutral090": "#2E2E2E",
-    "neutral100": "#0A0A0A",
-    "purple010": "#E5E0FF",
-    "purple020": "#BBAEFF",
-    "purple030": "#9B87FC",
-    "purple040": "#7264EF",
-    "purple050": "#5E44E4",
-    "purple060": "#4C33CC",
-    "purple070": "#442EB5",
-    "purple080": "#36248C",
-    "purple090": "#332770",
-    "purple100": "#2A205C",
-    "red010": "#FFE6E5",
-    "red020": "#FFB8B8",
-    "red030": "#FF8A8A",
-    "red040": "#FF5C5C",
-    "red050": "#FF362E",
-    "red060": "#EF1703",
-    "red070": "#D20600",
-    "red080": "#A60100",
-    "red090": "#790101",
-    "red100": "#4D0000",
+    "interfaceSkeleton020": "{{colors.darkBlue090}}",
+    "neutral010": "#F1F1F1",
+    "neutral020": "#E2E2E2",
+    "neutral030": "#C6C6C6",
+    "neutral040": "#ABABAB",
+    "neutral050": "#919191",
+    "neutral060": "#6A6A6A",
+    "neutral070": "#525252",
+    "neutral080": "#3B3B3B",
+    "neutral090": "#262626",
+    "neutral100": "#111111",
+    "purple010": "#EFF0FF",
+    "purple020": "#DFE0FE",
+    "purple030": "#C0C2FC",
+    "purple040": "#A3A3FB",
+    "purple050": "#8883F6",
+    "purple055": "#6e61e4",
+    "purple060": "#6454E3",
+    "purple070": "#4C33CC",
+    "purple080": "#37239C",
+    "purple090": "#231668",
+    "purple100": "#0F0936",
+    "red010": "#FEECEC",
+    "red020": "#FED8D8",
+    "red030": "#FEB3B3",
+    "red040": "#FE8888",
+    "red050": "#FB5959",
+    "red060": "#D60000",
+    "red070": "#A90000",
+    "red080": "#820000",
+    "red090": "#550000",
+    "red100": "#3A0000",
     "socialApple": "#000000",
     "socialFacebook": "#1877F2",
     "socialGithub": "#000000",
@@ -15696,16 +15823,17 @@ Object {
     "socialTwitter": "#1DA1F2",
     "socialWhatsapp": "#25D366",
     "socialYoutube": "#FF0000",
-    "teal010": "#EBF8F9",
-    "teal020": "#A8E0E6",
-    "teal030": "#81D2DA",
-    "teal040": "#65BBC4",
-    "teal050": "#41A0AA",
-    "teal060": "#06808E",
-    "teal070": "#05717D",
-    "teal080": "#0D575E",
-    "teal090": "#093E43",
-    "teal100": "#083136",
+    "teal010": "#E6F4F6",
+    "teal020": "#C7E7EA",
+    "teal030": "#97D0D6",
+    "teal040": "#5EB8C0",
+    "teal050": "#289FAB",
+    "teal055": "#06808e",
+    "teal060": "#017582",
+    "teal070": "#005B65",
+    "teal080": "#004249",
+    "teal090": "#002B30",
+    "teal100": "#001314",
     "transparent": "transparent",
     "white": "#FFFFFF",
     "whiteTint010": "rgba(255,255,255,0.1)",
@@ -16706,6 +16834,8 @@ Object {
       },
       "hover": Object {
         "backgroundColor": "{{colors.interactiveInverse020}}",
+        "color": "{{colors.inkWhiteContrast}}",
+        "iconColor": "{{colors.inkWhiteContrast}}",
       },
       "loading": Object {
         "backgroundColor": "{{colors.interactiveInverse020}}",
@@ -16749,6 +16879,12 @@ Object {
         "color": "{{colors.inkContrast}}",
       },
     },
+    "homepageCard": Object {
+      "base": Object {
+        "backgroundColor": "{{colors.transparent}}",
+        "color": "{{colors.inkBase}}",
+      },
+    },
     "imageDefault": Object {
       "base": Object {
         "borderRadius": "{{borders.borderRadiusRounded020}}",
@@ -16916,6 +17052,8 @@ Object {
       },
       "hover": Object {
         "backgroundColor": "{{colors.interactiveInverse020}}",
+        "color": "{{colors.inkWhiteContrast}}",
+        "iconColor": "{{colors.inkWhiteContrast}}",
       },
       "loading": Object {
         "backgroundColor": "{{colors.interactiveInverse020}}",
@@ -16970,6 +17108,8 @@ Object {
       },
       "hover": Object {
         "backgroundColor": "{{colors.interactiveInverse020}}",
+        "color": "{{colors.inkWhiteContrast}}",
+        "iconColor": "{{colors.inkWhiteContrast}}",
       },
       "loading": Object {
         "backgroundColor": "{{colors.interactiveInverse020}}",
@@ -17078,8 +17218,8 @@ Object {
       "base": Object {
         "backgroundColor": "{{colors.interactiveInverse030}}",
         "borderRadius": "{{borders.borderRadiusDefault}}",
-        "color": "{{colors.interfaceBrand030}}",
-        "iconColor": "{{colors.interfaceBrand030}}",
+        "color": "{{colors.inkBrand010}}",
+        "iconColor": "{{colors.inkBrand010}}",
       },
       "disabled": Object {
         "backgroundColor": "{{colors.interactiveInverse020}}",
@@ -17191,8 +17331,8 @@ Object {
         "textDecoration": "none",
       },
       "hover": Object {
-        "backgroundColor": "{{colors.interactivePrimary010}}",
-        "color": "{{colors.interactivePrimary030}}",
+        "backgroundColor": "{{colors.interactivePrimary020}}",
+        "color": "{{colors.interactivePrimary040}}",
       },
       "selected": Object {
         "borderColor": "{{colors.transparent}} {{colors.transparent}} {{colors.transparent}} {{colors.interactivePrimary030}} ",
@@ -17202,7 +17342,7 @@ Object {
     },
     "sidebar": Object {
       "base": Object {
-        "backgroundColor": "{{colors.interface020}}",
+        "backgroundColor": "{{colors.interface010}}",
         "borderColor": "{{colors.interface040}}",
         "borderStyle": "solid",
         "borderWidth": "{{borders.borderWidth000}} {{borders.borderWidth010}} {{borders.borderWidth000}} {{borders.borderWidth000}}",
@@ -17337,8 +17477,8 @@ Object {
     "whatsnewCardButton": Object {
       "active": Object {
         "backgroundColor": "{{colors.interactiveInverse050}}",
-        "color": "{{colors.inkBrand020}}",
-        "iconColor": "{{colors.inkBrand020}}",
+        "color": "{{colors.inkBrand030}}",
+        "iconColor": "{{colors.inkBrand030}}",
       },
       "base": Object {
         "backgroundColor": "{{colors.interactiveInverse030}}",
@@ -18077,109 +18217,112 @@ Object {
     "xs": 0,
   },
   "colors": Object {
-    "amber010": "#FFEECF",
-    "amber020": "#FFDB9D",
-    "amber030": "#FFC058",
-    "amber040": "#FFAD2C",
-    "amber050": "#FF9900",
-    "amber060": "#FF8F00",
-    "amber070": "#FF8200",
-    "amber080": "#FF7200",
-    "amber090": "#FF6000",
-    "amber100": "#FF4B00",
+    "amber010": "#FFEDE1",
+    "amber020": "#FDDCC6",
+    "amber030": "#FEB788",
+    "amber040": "#F79247",
+    "amber050": "#CD6900",
+    "amber060": "#A75500",
+    "amber070": "#804200",
+    "amber080": "#5D2F00",
+    "amber090": "#3C1F00",
+    "amber100": "#1D0D02",
     "black": "#0A0A0A",
-    "blackTint010": "rgba(10,10,10,0.1)",
-    "blackTint020": "rgba(10,10,10,0.2)",
-    "blackTint030": "rgba(10,10,10,0.3)",
-    "blackTint040": "rgba(10,10,10,0.4)",
-    "blackTint050": "rgba(10,10,10,0.5)",
-    "blackTint060": "rgba(10,10,10,0.6)",
-    "blackTint070": "rgba(10,10,10,0.7)",
-    "blackTint080": "rgba(10,10,10,0.8)",
-    "blackTint090": "rgba(10,10,10,0.9)",
-    "blue005": "#F0F3FF",
-    "blue010": "#E0E7FF",
-    "blue020": "#AEBFFF",
-    "blue030": "#87A4FC",
-    "blue040": "#577FFB",
-    "blue050": "#446BE4",
+    "blackTint010": "rgba(0,0,0,0.1)",
+    "blackTint020": "rgba(0,0,0,0.2)",
+    "blackTint030": "rgba(0,0,0,0.3)",
+    "blackTint040": "rgba(0,0,0,0.4)",
+    "blackTint050": "rgba(0,0,0,0.5)",
+    "blackTint060": "rgba(0,0,0,0.6)",
+    "blackTint070": "rgba(0,0,0,0.7)",
+    "blackTint080": "rgba(0,0,0,0.8)",
+    "blackTint090": "rgba(0,0,0,0.9)",
+    "blue010": "#ECF1FF",
+    "blue020": "#D5E0FC",
+    "blue030": "#AEBFFF",
+    "blue040": "#8BA6F6",
+    "blue050": "#577FFB",
+    "blue055": "#446be4",
     "blue060": "#3358CC",
-    "blue070": "#2B4AAB",
-    "blue080": "#213A82",
-    "blue090": "#213A5F",
-    "blue100": "#192C48",
-    "darkBlue010": "#F4F4F4",
-    "darkBlue020": "#EBEBEB",
-    "darkBlue030": "#E4E4E4",
-    "darkBlue040": "#BBC3C9",
-    "darkBlue050": "#96A29B",
-    "darkBlue060": "#808E99",
-    "darkBlue070": "#6E7D8D",
-    "darkBlue080": "#555E74",
-    "darkBlue090": "#243853",
-    "darkBlue100": "#162740",
+    "blue070": "#254CAC",
+    "blue080": "#14328D",
+    "blue090": "#0C285F",
+    "blue100": "#071E3C",
+    "darkBlue010": "#F0F1F3",
+    "darkBlue020": "#DEE2E5",
+    "darkBlue030": "#C0C7CC",
+    "darkBlue040": "#A1ACB4",
+    "darkBlue050": "#85939C",
+    "darkBlue060": "#5A6A79",
+    "darkBlue070": "#435365",
+    "darkBlue080": "#2E3F54",
+    "darkBlue090": "#15263E",
+    "darkBlue095": "#0F1B2C",
+    "darkBlue100": "#09111C",
     "focus010": "#3768FB",
-    "green010": "#E6FAEB",
-    "green020": "#B8EFC8",
-    "green030": "#8EE1A6",
-    "green040": "#67CF86",
-    "green050": "#42BA67",
-    "green060": "#23A248",
-    "green070": "#148F39",
-    "green080": "#0A782A",
-    "green090": "#005D1C",
-    "green100": "#003E11",
-    "illustrationAnatomyBorder010": "{{colors.teal020}}",
-    "illustrationAnatomyBorder020": "{{colors.teal040}}",
-    "illustrationAnatomySubtle": "{{colors.teal020}}",
-    "illustrationBackground010": "{{colors.blue005}}",
+    "green010": "#E5F4EA",
+    "green020": "#C8E4D0",
+    "green030": "#95CAA3",
+    "green040": "#6DB681",
+    "green050": "#41A05B",
+    "green060": "#007B22",
+    "green070": "#00601A",
+    "green080": "#004914",
+    "green090": "#002D0D",
+    "green100": "#001D08",
+    "illustrationAnatomyBorder010": "{{colors.teal030}}",
+    "illustrationAnatomyBorder020": "{{colors.teal070}}",
+    "illustrationAnatomySubtle": "{{colors.teal030}}",
+    "illustrationBackground010": "{{colors.blue010}}",
     "illustrationBackground020": "{{colors.darkBlue010}}",
     "illustrationBorder010": "{{colors.darkBlue020}}",
-    "illustrationBorder020": "{{colors.darkBlue040}}",
+    "illustrationBorder020": "{{colors.darkBlue030}}",
     "illustrationDisabled": "{{colors.darkBlue020}}",
     "illustrationGradient010": "linear-gradient(0deg, rgba(10,10,10,0.00) 0%, rgba(10,10,10,1) 100%)",
     "illustrationGradient020": "linear-gradient(0deg, rgba(255,255,255,0.00) 0%, rgba(255,255,255,1) 100%)",
-    "illustrationHighlight010": "{{colors.teal040}}",
+    "illustrationHighlight010": "{{colors.teal050}}",
     "illustrationInterface010": "{{colors.white}}",
     "illustrationInterface020": "{{colors.teal010}}",
     "illustrationInterface030": "{{colors.teal020}}",
     "illustrationInterface040": "{{colors.teal030}}",
     "illustrationInterface050": "{{colors.teal040}}",
     "illustrationInterface060": "{{colors.teal050}}",
-    "illustrationInterface070": "{{colors.teal060}}",
-    "illustrationInterface080": "{{colors.teal070}}",
-    "illustrationInterface090": "{{colors.teal080}}",
-    "illustrationInterface100": "{{colors.teal090}}",
+    "illustrationInterface070": "{{colors.teal055}}",
+    "illustrationInterface080": "{{colors.teal060}}",
+    "illustrationInterface090": "{{colors.teal070}}",
+    "illustrationInterface100": "{{colors.teal080}}",
     "illustrationPalette010": "{{colors.teal010}}",
     "illustrationPalette020": "{{colors.teal020}}",
     "illustrationPalette030": "{{colors.teal030}}",
     "illustrationPalette040": "{{colors.teal040}}",
     "illustrationPalette050": "{{colors.teal050}}",
-    "illustrationPalette060": "{{colors.teal060}}",
-    "illustrationPalette070": "{{colors.teal070}}",
-    "illustrationPalette080": "{{colors.teal080}}",
-    "illustrationPalette090": "{{colors.teal090}}",
-    "illustrationPalette100": "{{colors.teal100}}",
+    "illustrationPalette060": "{{colors.teal055}}",
+    "illustrationPalette070": "{{colors.teal060}}",
+    "illustrationPalette080": "{{colors.teal070}}",
+    "illustrationPalette090": "{{colors.teal080}}",
+    "illustrationPalette100": "{{colors.teal090}}",
     "illustrationShadow010": "{{colors.blackTint030}}",
-    "illustrationSubtle010": "{{colors.darkBlue060}}",
-    "inkBase": "{{colors.neutral090}}",
-    "inkBrand010": "{{colors.teal050}}",
+    "illustrationSubtle010": "{{colors.darkBlue050}}",
+    "inkBase": "{{colors.darkBlue080}}",
+    "inkBrand010": "{{colors.teal060}}",
     "inkBrand020": "{{colors.teal080}}",
-    "inkBrand030": "{{colors.teal050}}",
-    "inkContrast": "{{colors.neutral100}}",
-    "inkInformative": "{{colors.teal070}}",
+    "inkBrand030": "{{colors.teal060}}",
+    "inkContrast": "{{colors.darkBlue100}}",
+    "inkDark010": "{{colors.darkBlue100}}",
+    "inkInformative": "{{colors.teal060}}",
     "inkInverse": "{{colors.white}}",
-    "inkNegative": "{{colors.red070}}",
-    "inkNonEssential": "{{colors.neutral050}}",
-    "inkNotice": "{{colors.neutral080}}",
-    "inkPositive": "{{colors.green080}}",
-    "inkSubtle": "{{colors.neutral080}}",
+    "inkLight010": "{{colors.white}}",
+    "inkNegative": "{{colors.red060}}",
+    "inkNonEssential": "{{colors.darkBlue030}}",
+    "inkNotice": "{{colors.darkBlue070}}",
+    "inkPositive": "{{colors.green060}}",
+    "inkSubtle": "{{colors.darkBlue060}}",
     "inkWhiteContrast": "{{colors.white}}",
     "inkWhiteSubtle": "{{colors.whiteTint080}}",
-    "interactiveDisabled010": "{{colors.neutral020}}",
+    "interactiveDisabled010": "{{colors.darkBlue020}}",
     "interactiveFocus010": "{{colors.focus010}}",
-    "interactiveInput010": "{{colors.neutral010}}",
-    "interactiveInput020": "{{colors.neutral040}}",
+    "interactiveInput010": "{{colors.darkBlue010}}",
+    "interactiveInput020": "{{colors.darkBlue050}}",
     "interactiveInput030": "{{colors.blue010}}",
     "interactiveInput040": "{{colors.blue060}}",
     "interactiveInput050": "{{colors.blue070}}",
@@ -18188,6 +18331,9 @@ Object {
     "interactiveInverse030": "{{colors.white}}",
     "interactiveInverse040": "{{colors.whiteTint070}}",
     "interactiveInverse050": "{{colors.whiteTint080}}",
+    "interactiveLink010": "{{colors.blue060}}",
+    "interactiveLink020": "{{colors.blue070}}",
+    "interactiveLink030": "{{colors.blue080}}",
     "interactiveNegative010": "{{colors.red010}}",
     "interactiveNegative020": "{{colors.red020}}",
     "interactiveNegative030": "{{colors.red060}}",
@@ -18200,70 +18346,71 @@ Object {
     "interactivePositive050": "{{colors.green080}}",
     "interactivePrimary010": "{{colors.blue010}}",
     "interactivePrimary020": "{{colors.blue020}}",
-    "interactivePrimary030": "{{colors.blue040}}",
-    "interactivePrimary040": "{{colors.blue060}}",
+    "interactivePrimary030": "{{colors.blue060}}",
+    "interactivePrimary040": "{{colors.blue070}}",
     "interactivePrimary050": "{{colors.blue080}}",
-    "interactiveSecondary010": "{{colors.neutral020}}",
-    "interactiveSecondary020": "{{colors.neutral040}}",
-    "interactiveSecondary030": "{{colors.neutral080}}",
-    "interactiveSecondary040": "{{colors.neutral090}}",
-    "interactiveSecondary050": "{{colors.neutral100}}",
-    "interactiveVisited010": "{{colors.purple050}}",
-    "interface010": "{{colors.white}}",
+    "interactiveSecondary010": "{{colors.darkBlue010}}",
+    "interactiveSecondary020": "{{colors.darkBlue020}}",
+    "interactiveSecondary030": "{{colors.darkBlue080}}",
+    "interactiveSecondary040": "{{colors.darkBlue090}}",
+    "interactiveSecondary050": "{{colors.darkBlue100}}",
+    "interactiveVisited010": "{{colors.purple060}}",
+    "interface010": "{{colors.darkBlue010}}",
     "interface020": "{{colors.darkBlue010}}",
     "interface030": "{{colors.darkBlue020}}",
-    "interface040": "{{colors.darkBlue030}}",
-    "interface050": "{{colors.darkBlue040}}",
+    "interface040": "{{colors.darkBlue020}}",
+    "interface050": "{{colors.darkBlue030}}",
     "interface060": "{{colors.darkBlue100}}",
     "interfaceBackground": "{{colors.white}}",
     "interfaceBrand010": "{{colors.teal020}}",
     "interfaceBrand020": "{{colors.teal030}}",
-    "interfaceBrand030": "{{colors.teal050}}",
+    "interfaceBrand030": "{{colors.teal060}}",
     "interfaceBrand040": "{{colors.teal070}}",
     "interfaceBrand050": "{{colors.teal080}}",
-    "interfaceBrand060": "{{colors.teal050}}",
-    "interfaceInformative010": "{{colors.teal070}}",
+    "interfaceBrand060": "{{colors.teal060}}",
+    "interfaceInformative010": "{{colors.teal060}}",
     "interfaceInformative020": "{{colors.teal010}}",
-    "interfaceNegative010": "{{colors.red070}}",
+    "interfaceNegative010": "{{colors.red060}}",
     "interfaceNegative020": "{{colors.red010}}",
-    "interfaceNeutral010": "{{colors.neutral080}}",
-    "interfaceNeutral020": "{{colors.neutral010}}",
-    "interfaceNotice010": "{{colors.neutral080}}",
-    "interfaceNotice020": "{{colors.neutral020}}",
-    "interfacePositive010": "{{colors.green080}}",
+    "interfaceNeutral010": "{{colors.darkBlue080}}",
+    "interfaceNeutral020": "{{colors.darkBlue010}}",
+    "interfaceNotice010": "{{colors.darkBlue080}}",
+    "interfaceNotice020": "{{colors.darkBlue010}}",
+    "interfacePositive010": "{{colors.green060}}",
     "interfacePositive020": "{{colors.green010}}",
     "interfaceSkeleton010": "{{colors.darkBlue010}}",
     "interfaceSkeleton020": "{{colors.darkBlue020}}",
-    "neutral010": "#FAFAFA",
-    "neutral020": "#F4F4F4",
-    "neutral030": "#DEDEDE",
-    "neutral040": "#CCCCCC",
-    "neutral050": "#C0C0C0",
-    "neutral060": "#9C9C9C",
-    "neutral070": "#777777",
-    "neutral080": "#535353",
-    "neutral090": "#2E2E2E",
-    "neutral100": "#0A0A0A",
-    "purple010": "#E5E0FF",
-    "purple020": "#BBAEFF",
-    "purple030": "#9B87FC",
-    "purple040": "#7264EF",
-    "purple050": "#5E44E4",
-    "purple060": "#4C33CC",
-    "purple070": "#442EB5",
-    "purple080": "#36248C",
-    "purple090": "#332770",
-    "purple100": "#2A205C",
-    "red010": "#FFE6E5",
-    "red020": "#FFB8B8",
-    "red030": "#FF8A8A",
-    "red040": "#FF5C5C",
-    "red050": "#FF362E",
-    "red060": "#EF1703",
-    "red070": "#D20600",
-    "red080": "#A60100",
-    "red090": "#790101",
-    "red100": "#4D0000",
+    "neutral010": "#F1F1F1",
+    "neutral020": "#E2E2E2",
+    "neutral030": "#C6C6C6",
+    "neutral040": "#ABABAB",
+    "neutral050": "#919191",
+    "neutral060": "#6A6A6A",
+    "neutral070": "#525252",
+    "neutral080": "#3B3B3B",
+    "neutral090": "#262626",
+    "neutral100": "#111111",
+    "purple010": "#EFF0FF",
+    "purple020": "#DFE0FE",
+    "purple030": "#C0C2FC",
+    "purple040": "#A3A3FB",
+    "purple050": "#8883F6",
+    "purple055": "#6e61e4",
+    "purple060": "#6454E3",
+    "purple070": "#4C33CC",
+    "purple080": "#37239C",
+    "purple090": "#231668",
+    "purple100": "#0F0936",
+    "red010": "#FEECEC",
+    "red020": "#FED8D8",
+    "red030": "#FEB3B3",
+    "red040": "#FE8888",
+    "red050": "#FB5959",
+    "red060": "#D60000",
+    "red070": "#A90000",
+    "red080": "#820000",
+    "red090": "#550000",
+    "red100": "#3A0000",
     "socialApple": "#000000",
     "socialFacebook": "#1877F2",
     "socialGithub": "#000000",
@@ -18276,16 +18423,17 @@ Object {
     "socialTwitter": "#1DA1F2",
     "socialWhatsapp": "#25D366",
     "socialYoutube": "#FF0000",
-    "teal010": "#EBF8F9",
-    "teal020": "#A8E0E6",
-    "teal030": "#81D2DA",
-    "teal040": "#65BBC4",
-    "teal050": "#41A0AA",
-    "teal060": "#06808E",
-    "teal070": "#05717D",
-    "teal080": "#0D575E",
-    "teal090": "#093E43",
-    "teal100": "#083136",
+    "teal010": "#E6F4F6",
+    "teal020": "#C7E7EA",
+    "teal030": "#97D0D6",
+    "teal040": "#5EB8C0",
+    "teal050": "#289FAB",
+    "teal055": "#06808e",
+    "teal060": "#017582",
+    "teal070": "#005B65",
+    "teal080": "#004249",
+    "teal090": "#002B30",
+    "teal100": "#001314",
     "transparent": "transparent",
     "white": "#FFFFFF",
     "whiteTint010": "rgba(255,255,255,0.1)",
@@ -19283,6 +19431,8 @@ Object {
       },
       "hover": Object {
         "backgroundColor": "{{colors.interactiveInverse020}}",
+        "color": "{{colors.inkWhiteContrast}}",
+        "iconColor": "{{colors.inkWhiteContrast}}",
       },
       "loading": Object {
         "backgroundColor": "{{colors.interactiveInverse020}}",
@@ -19326,6 +19476,12 @@ Object {
         "color": "{{colors.inkContrast}}",
       },
     },
+    "homepageCard": Object {
+      "base": Object {
+        "backgroundColor": "{{colors.transparent}}",
+        "color": "{{colors.inkBase}}",
+      },
+    },
     "imageDefault": Object {
       "base": Object {
         "borderRadius": "{{borders.borderRadiusRounded020}}",
@@ -19493,6 +19649,8 @@ Object {
       },
       "hover": Object {
         "backgroundColor": "{{colors.interactiveInverse020}}",
+        "color": "{{colors.inkWhiteContrast}}",
+        "iconColor": "{{colors.inkWhiteContrast}}",
       },
       "loading": Object {
         "backgroundColor": "{{colors.interactiveInverse020}}",
@@ -19547,6 +19705,8 @@ Object {
       },
       "hover": Object {
         "backgroundColor": "{{colors.interactiveInverse020}}",
+        "color": "{{colors.inkWhiteContrast}}",
+        "iconColor": "{{colors.inkWhiteContrast}}",
       },
       "loading": Object {
         "backgroundColor": "{{colors.interactiveInverse020}}",
@@ -19655,8 +19815,8 @@ Object {
       "base": Object {
         "backgroundColor": "{{colors.interactiveInverse030}}",
         "borderRadius": "{{borders.borderRadiusDefault}}",
-        "color": "{{colors.interfaceBrand030}}",
-        "iconColor": "{{colors.interfaceBrand030}}",
+        "color": "{{colors.inkBrand010}}",
+        "iconColor": "{{colors.inkBrand010}}",
       },
       "disabled": Object {
         "backgroundColor": "{{colors.interactiveInverse020}}",
@@ -19768,8 +19928,8 @@ Object {
         "textDecoration": "none",
       },
       "hover": Object {
-        "backgroundColor": "{{colors.interactivePrimary010}}",
-        "color": "{{colors.interactivePrimary030}}",
+        "backgroundColor": "{{colors.interactivePrimary020}}",
+        "color": "{{colors.interactivePrimary040}}",
       },
       "selected": Object {
         "borderColor": "{{colors.transparent}} {{colors.transparent}} {{colors.transparent}} {{colors.interactivePrimary030}} ",
@@ -19779,7 +19939,7 @@ Object {
     },
     "sidebar": Object {
       "base": Object {
-        "backgroundColor": "{{colors.interface020}}",
+        "backgroundColor": "{{colors.interface010}}",
         "borderColor": "{{colors.interface040}}",
         "borderStyle": "solid",
         "borderWidth": "{{borders.borderWidth000}} {{borders.borderWidth010}} {{borders.borderWidth000}} {{borders.borderWidth000}}",
@@ -19914,8 +20074,8 @@ Object {
     "whatsnewCardButton": Object {
       "active": Object {
         "backgroundColor": "{{colors.interactiveInverse050}}",
-        "color": "{{colors.inkBrand020}}",
-        "iconColor": "{{colors.inkBrand020}}",
+        "color": "{{colors.inkBrand030}}",
+        "iconColor": "{{colors.inkBrand030}}",
       },
       "base": Object {
         "backgroundColor": "{{colors.interactiveInverse030}}",
diff --git a/site/theme/colors-dark.json b/site/theme/colors-dark.json
index 78f6f6da6b..766cd09271 100644
--- a/site/theme/colors-dark.json
+++ b/site/theme/colors-dark.json
@@ -1,74 +1,98 @@
 {
   "colors": {
-    "inkBase": "{{colors.darkBlue040}}",
-    "inkSubtle": "{{colors.darkBlue070}}",
-    "inkContrast": "{{colors.darkBlue010}}",
-    "inkNonEssential": "{{colors.darkBlue080}}",
+    "inkBase": "{{colors.darkBlue020}}",
+    "inkContrast": "{{colors.white}}",
+    "inkSubtle": "{{colors.darkBlue030}}",
+    "inkNonEssential": "{{colors.darkBlue050}}",
     "inkInverse": "{{colors.darkBlue100}}",
-
-    "inkPositive": "{{colors.green030}}",
-    "inkNegative": "{{colors.red030}}",
-    "inkNotice": "{{colors.neutral030}}",
-    "inkInformative": "{{colors.teal010}}",
-
+    "inkDark010": "{{colors.darkBlue100}}",
+    "inkWhiteSubtle": "{{colors.whiteTint080}}",
+    "inkWhiteContrast": "{{colors.white}}",
+    "inkPositive": "{{colors.green050}}",
+    "inkNegative": "{{colors.red050}}",
+    "inkNotice": "{{colors.darkBlue030}}",
+    "inkInformative": "{{colors.teal050}}",
+    "inkBrand010": "{{colors.blue030}}",
+    "inkBrand020": "{{colors.blue050}}",
     "interfaceBackground": "{{colors.darkBlue100}}",
-    "interface010": "{{colors.darkBlue100}}",
+    "interface010": "{{colors.darkBlue095}}",
     "interface020": "{{colors.darkBlue090}}",
     "interface030": "{{colors.darkBlue080}}",
     "interface040": "{{colors.darkBlue070}}",
     "interface050": "{{colors.darkBlue060}}",
     "interface060": "{{colors.darkBlue010}}",
-
-    "interfacePositive010": "{{colors.green040}}",
-    "interfacePositive020": "{{colors.green070}}",
-    "interfaceNegative010": "{{colors.red040}}",
-    "interfaceNegative020": "{{colors.red070}}",
-    "interfaceNotice010": "{{colors.amber040}}",
-    "interfaceNotice020": "{{colors.amber070}}",
+    "interfaceBrand020": "{{colors.blue080}}",
+    "interfacePositive010": "{{colors.green050}}",
+    "interfacePositive020": "{{colors.green090}}",
+    "interfaceNegative010": "{{colors.red050}}",
+    "interfaceNegative020": "{{colors.red090}}",
+    "interfaceNotice010": "{{colors.darkBlue030}}",
+    "interfaceNotice020": "{{colors.darkBlue080}}",
     "interfaceInformative010": "{{colors.teal050}}",
-    "interfaceInformative020": "{{colors.teal070}}",
-
+    "interfaceInformative020": "{{colors.teal090}}",
+    "interfaceNeutral010": "{{colors.darkBlue030}}",
+    "interfaceNeutral020": "{{colors.darkBlue080}}",
     "interfaceSkeleton010": "{{colors.darkBlue090}}",
-    "interfaceSkeleton020": "{{colors.darkBlue080}}",
-
-    "interactiveDisabled010": "{{colors.darkBlue080}}",
-
-    "interactivePrimary010": "{{colors.blue080}}",
-    "interactivePrimary020": "{{colors.blue090}}",
-    "interactivePrimary040": "{{colors.blue050}}",
-    "interactivePrimary050": "{{colors.blue070}}",
-
-    "interactiveSecondary010": "{{colors.darkBlue080}}",
-    "interactiveSecondary020": "{{colors.darkBlue070}}",
+    "interfaceSkeleton020": "{{colors.darkBlue090}}",
+    "interactivePrimary010": "{{colors.darkBlue090}}",
+    "interactivePrimary020": "{{colors.darkBlue080}}",
+    "interactivePrimary030": "{{colors.blue050}}",
+    "interactivePrimary040": "{{colors.blue040}}",
+    "interactivePrimary050": "{{colors.blue030}}",
+    "interactiveSecondary010": "{{colors.darkBlue090}}",
+    "interactiveSecondary020": "{{colors.darkBlue090}}",
     "interactiveSecondary030": "{{colors.darkBlue050}}",
-    "interactiveSecondary040": "{{colors.darkBlue060}}",
-    "interactiveSecondary050": "{{colors.darkBlue070}}",
-    
+    "interactiveSecondary040": "{{colors.darkBlue030}}",
+    "interactiveSecondary050": "{{colors.darkBlue030}}",
+    "interactivePositive010": "{{colors.green090}}",
+    "interactivePositive020": "{{colors.green080}}",
+    "interactivePositive030": "{{colors.green050}}",
+    "interactivePositive040": "{{colors.green040}}",
+    "interactivePositive050": "{{colors.green030}}",
+    "interactiveNegative010": "{{colors.red100}}",
+    "interactiveNegative020": "{{colors.red080}}",
+    "interactiveNegative030": "{{colors.red050}}",
+    "interactiveNegative040": "{{colors.red040}}",
+    "interactiveNegative050": "{{colors.red030}}",
+    "interactiveInverse010": "{{colors.blackTint010}}",
+    "interactiveInverse020": "{{colors.blackTint020}}",
+    "interactiveInverse030": "{{colors.blackTint090}}",
+    "interactiveInverse040": "{{colors.blackTint070}}",
+    "interactiveInverse050": "{{colors.blackTint080}}",
+    "interactiveInput010": "{{colors.darkBlue090}}",
+    "interactiveInput020": "{{colors.darkBlue060}}",
+    "interactiveInput030": "{{colors.blue090}}",
+    "interactiveInput040": "{{colors.blue050}}",
+    "interactiveInput050": "{{colors.blue030}}",
+    "interactiveLink010": "{{colors.blue050}}",
+    "interactiveLink020": "{{colors.blue040}}",
+    "interactiveLink030": "{{colors.blue030}}",
+    "interactiveDisabled010": "{{colors.darkBlue080}}",
+    "interactiveVisited010": "{{colors.purple050}}",
 
     "illustrationHighlight010": "{{colors.white}}",
     "illustrationSubtle010": "{{colors.blue080}}",
     "illustrationShadow010": "{{colors.blackTint060}}",
     "illustrationGradient010": "linear-gradient(0deg, rgba(255,255,255,0.00) 0%, rgba(255,255,255,1) 100%)",
     "illustrationGradient020": "linear-gradient(0deg, rgba(22,39,64,0.00) 0%, rgba(22,39,64,1) 100%",
-    "illustrationBackground010": "{{colors.darkBlue090}}",
-    "illustrationBackground020": "{{colors.darkBlue090}}",
+    "illustrationBackground010": "{{colors.darkBlue095}}",
+    "illustrationBackground020": "{{colors.darkBlue095}}",
     "illustrationBorder010": "{{colors.blue070}}",
     "illustrationBorder020": "{{colors.blue060}}",
     "illustrationDisabled": "{{colors.blue070}}",
-    "illustrationInterface010": "{{colors.blue050}}",
+    "illustrationInterface010": "{{colors.blue055}}",
     "illustrationInterface020": "{{colors.blue070}}",
     "illustrationInterface030": "{{colors.blue080}}",
     "illustrationInterface040": "{{colors.blue090}}",
     "illustrationInterface050": "{{colors.blue100}}",
-    "illustrationInterface060": "{{colors.blue020}}",
-    "illustrationInterface070": "{{colors.blue030}}",
-    "illustrationInterface080": "{{colors.blue040}}",
-    "illustrationInterface090": "{{colors.blue050}}",
+    "illustrationInterface060": "{{colors.blue030}}",
+    "illustrationInterface070": "{{colors.blue040}}",
+    "illustrationInterface080": "{{colors.blue050}}",
+    "illustrationInterface090": "{{colors.blue055}}",
     "illustrationInterface100": "{{colors.blue010}}",
     "illustrationAnatomySubtle": "{{colors.blue040}}",
     "illustrationAnatomyBorder010": "{{colors.blue080}}",
-    "illustrationAnatomyBorder020": "{{colors.blue040}}",
-    "interactiveFocus010": "{{colors.white}}"
+    "illustrationAnatomyBorder020": "{{colors.blue040}}"
   },
   "shadows": {
     "shadow010": "0 0 2px 0 rgba(10,10,10,0.28)",
@@ -78,4 +102,4 @@
     "shadow050": "0 16px 24px 0 rgba(10,10,10,0.28)",
     "shadow060": "0 20px 32px 0 rgba(10,10,10,0.28)"
   }
-}
\ No newline at end of file
+}
diff --git a/site/theme/colors-light.json b/site/theme/colors-light.json
index 5d32012059..ae651e1f5f 100644
--- a/site/theme/colors-light.json
+++ b/site/theme/colors-light.json
@@ -1,85 +1,131 @@
 {
   "colors": {
-    "darkBlue100": "#162740",
-    "darkBlue090": "#243853",
-    "darkBlue080": "#555E74",
-    "darkBlue070": "#6E7D8D",
-    "darkBlue060": "#808E99",
-    "darkBlue050": "#96A29B",
-    "darkBlue040": "#BBC3C9",
-    "darkBlue030": "#E4E4E4",
-    "darkBlue020": "#EBEBEB",
-    "darkBlue010": "#F4F4F4",
+    "blue055": "#446be4",
+    "purple055": "#6e61e4",
+    "teal055": "#06808e",
 
-    "blue005": "#F0F3FF",
+    "darkBlue100": "#09111C",
+    "darkBlue095": "#0F1B2C",
+    "darkBlue090": "#15263E",
+    "darkBlue080": "#2E3F54",
+    "darkBlue070": "#435365",
+    "darkBlue060": "#5A6A79",
+    "darkBlue050": "#85939C",
+    "darkBlue040": "#A1ACB4",
+    "darkBlue030": "#C0C7CC",
+    "darkBlue020": "#DEE2E5",
+    "darkBlue010": "#F0F1F3",
 
-    "inkBrand010": "{{colors.blue040}}",
-    "inkBrand020": "{{colors.blue080}}",
-    "inkBrand030": "{{colors.teal050}}",
+    "inkBase": "{{colors.darkBlue080}}",
+    "inkContrast": "{{colors.darkBlue100}}",
+    "inkSubtle": "{{colors.darkBlue060}}",
     "inkWhiteSubtle": "{{colors.whiteTint080}}",
     "inkWhiteContrast": "{{colors.white}}",
-
+    "inkNonEssential": "{{colors.darkBlue030}}",
+    "inkInverse": "{{colors.white}}",
+    "inkLight010": "{{colors.white}}",
+    "inkDark010": "{{colors.darkBlue100}}",
+    "inkPositive": "{{colors.green060}}",
+    "inkNegative": "{{colors.red060}}",
+    "inkNotice": "{{colors.darkBlue070}}",
+    "inkInformative": "{{colors.teal060}}",
+    "inkBrand010": "{{colors.blue060}}",
+    "inkBrand020": "{{colors.blue080}}",
+    "inkBrand030": "{{colors.teal060}}",
+    "interfaceBackground": "{{colors.white}}",
+    "interface010": "{{colors.darkBlue010}}",
     "interface020": "{{colors.darkBlue010}}",
     "interface030": "{{colors.darkBlue020}}",
-    "interface040": "{{colors.darkBlue030}}",
-    "interface050": "{{colors.darkBlue040}}",
+    "interface040": "{{colors.darkBlue020}}",
+    "interface050": "{{colors.darkBlue030}}",
     "interface060": "{{colors.darkBlue100}}",
-
-    "interactivePrimary010": "{{colors.blue010}}",
-    "interactivePrimary020": "{{colors.blue020}}",
-    "interactivePrimary030": "{{colors.blue040}}",
-    "interactivePrimary040": "{{colors.blue060}}",
-    "interactivePrimary050": "{{colors.blue080}}",
-
-    "interactiveSecondary010": "{{colors.neutral020}}",
-    "interactiveSecondary020": "{{colors.neutral040}}",
-    "interactiveSecondary030": "{{colors.neutral080}}",
-    "interactiveSecondary040": "{{colors.neutral090}}",
-    "interactiveSecondary050": "{{colors.neutral100}}",
-    
-
-    "interfaceBrand010": "{{colors.blue020}}",
-    "interfaceBrand020": "{{colors.blue030}}",
-    "interfaceBrand030": "{{colors.blue040}}",
+    "interfaceBrand010": "{{colors.blue060}}",
+    "interfaceBrand020": "{{colors.blue080}}",
+    "interfaceBrand030": "{{colors.blue060}}",
     "interfaceBrand040": "{{colors.blue060}}",
     "interfaceBrand050": "{{colors.blue080}}",
-    "interfaceBrand060": "{{colors.teal050}}",
-
+    "interfaceBrand060": "{{colors.teal060}}",
+    "interfacePositive010": "{{colors.green060}}",
+    "interfacePositive020": "{{colors.green010}}",
+    "interfaceNegative010": "{{colors.red060}}",
+    "interfaceNegative020": "{{colors.red010}}",
+    "interfaceNotice010": "{{colors.darkBlue080}}",
+    "interfaceNotice020": "{{colors.darkBlue010}}",
+    "interfaceInformative010": "{{colors.teal060}}",
+    "interfaceInformative020": "{{colors.teal010}}",
+    "interfaceNeutral010": "{{colors.darkBlue080}}",
+    "interfaceNeutral020": "{{colors.darkBlue010}}",
     "interfaceSkeleton010": "{{colors.darkBlue010}}",
     "interfaceSkeleton020": "{{colors.darkBlue020}}",
+    "interactivePrimary010": "{{colors.blue010}}",
+    "interactivePrimary020": "{{colors.blue020}}",
+    "interactivePrimary030": "{{colors.blue060}}",
+    "interactivePrimary040": "{{colors.blue070}}",
+    "interactivePrimary050": "{{colors.blue080}}",
+    "interactiveSecondary010": "{{colors.darkBlue010}}",
+    "interactiveSecondary020": "{{colors.darkBlue020}}",
+    "interactiveSecondary030": "{{colors.darkBlue080}}",
+    "interactiveSecondary040": "{{colors.darkBlue090}}",
+    "interactiveSecondary050": "{{colors.darkBlue100}}",
+    "interactivePositive010": "{{colors.green010}}",
+    "interactivePositive020": "{{colors.green020}}",
+    "interactivePositive030": "{{colors.green060}}",
+    "interactivePositive040": "{{colors.green070}}",
+    "interactivePositive050": "{{colors.green080}}",
+    "interactiveNegative010": "{{colors.red010}}",
+    "interactiveNegative020": "{{colors.red020}}",
+    "interactiveNegative030": "{{colors.red060}}",
+    "interactiveNegative040": "{{colors.red070}}",
+    "interactiveNegative050": "{{colors.red080}}",
+    "interactiveInverse010": "{{colors.whiteTint010}}",
+    "interactiveInverse020": "{{colors.whiteTint020}}",
+    "interactiveInverse030": "{{colors.white}}",
+    "interactiveInverse040": "{{colors.whiteTint070}}",
+    "interactiveInverse050": "{{colors.whiteTint080}}",
+    "interactiveInput010": "{{colors.darkBlue010}}",
+    "interactiveInput020": "{{colors.darkBlue050}}",
+    "interactiveInput030": "{{colors.blue010}}",
+    "interactiveInput040": "{{colors.blue060}}",
+    "interactiveInput050": "{{colors.blue070}}",
+    "interactiveLink010": "{{colors.blue060}}",
+    "interactiveLink020": "{{colors.blue070}}",
+    "interactiveLink030": "{{colors.blue080}}",
+    "interactiveDisabled010": "{{colors.darkBlue020}}",
+    "interactiveVisited010": "{{colors.purple060}}",
+    "interactiveFocus010": "{{colors.focus010}}",
 
     "illustrationPalette010": "{{colors.blue010}}",
-    "illustrationPalette020": "{{colors.blue020}}",
-    "illustrationPalette030": "{{colors.blue030}}",
-    "illustrationPalette040": "{{colors.blue040}}",
-    "illustrationPalette050": "{{colors.blue050}}",
+    "illustrationPalette020": "{{colors.blue030}}",
+    "illustrationPalette030": "{{colors.blue040}}",
+    "illustrationPalette040": "{{colors.blue050}}",
+    "illustrationPalette050": "{{colors.blue055}}",
     "illustrationPalette060": "{{colors.blue060}}",
     "illustrationPalette070": "{{colors.blue070}}",
     "illustrationPalette080": "{{colors.blue080}}",
     "illustrationPalette090": "{{colors.blue090}}",
     "illustrationPalette100": "{{colors.blue100}}",
-    "illustrationHighlight010": "{{colors.blue040}}",
-    "illustrationSubtle010": "{{colors.darkBlue060}}",
+    "illustrationHighlight010": "{{colors.blue050}}",
+    "illustrationSubtle010": "{{colors.darkBlue050}}",
     "illustrationShadow010": "{{colors.blackTint030}}",
     "illustrationGradient010": "linear-gradient(0deg, rgba(10,10,10,0.00) 0%, rgba(10,10,10,1) 100%)",
     "illustrationGradient020": "linear-gradient(0deg, rgba(255,255,255,0.00) 0%, rgba(255,255,255,1) 100%)",
-    "illustrationBackground010": "{{colors.blue005}}",
+    "illustrationBackground010": "{{colors.blue010}}",
     "illustrationBackground020": "{{colors.darkBlue010}}",
     "illustrationBorder010": "{{colors.darkBlue020}}",
-    "illustrationBorder020": "{{colors.darkBlue040}}",
+    "illustrationBorder020": "{{colors.darkBlue030}}",
     "illustrationDisabled": "{{colors.darkBlue020}}",
     "illustrationInterface010": "{{colors.white}}",
-    "illustrationInterface020": "{{colors.blue010}}",
-    "illustrationInterface030": "{{colors.blue020}}",
-    "illustrationInterface040": "{{colors.blue030}}",
-    "illustrationInterface050": "{{colors.blue040}}",
-    "illustrationInterface060": "{{colors.blue050}}",
+    "illustrationInterface020": "{{colors.blue020}}",
+    "illustrationInterface030": "{{colors.blue030}}",
+    "illustrationInterface040": "{{colors.blue040}}",
+    "illustrationInterface050": "{{colors.blue050}}",
+    "illustrationInterface060": "{{colors.blue055}}",
     "illustrationInterface070": "{{colors.blue060}}",
     "illustrationInterface080": "{{colors.blue070}}",
     "illustrationInterface090": "{{colors.blue080}}",
     "illustrationInterface100": "{{colors.blue090}}",
-    "illustrationAnatomySubtle": "{{colors.blue020}}",
-    "illustrationAnatomyBorder010": "{{colors.blue020}}",
+    "illustrationAnatomySubtle": "{{colors.blue030}}",
+    "illustrationAnatomyBorder010": "{{colors.blue030}}",
     "illustrationAnatomyBorder020": "{{colors.blue070}}"
   }
-}
\ No newline at end of file
+}
diff --git a/site/theme/doc-theme.ts b/site/theme/doc-theme.ts
index cb57039c41..8ad6b2cd3b 100644
--- a/site/theme/doc-theme.ts
+++ b/site/theme/doc-theme.ts
@@ -10,82 +10,82 @@ import {componentDefaults} from './component-defaults';
 
 export const foundationsLightOverrides = {
   colors: {
-    inkBrand010: '{{colors.purple050}}',
+    inkBrand010: '{{colors.purple060}}',
     inkBrand020: '{{colors.purple080}}',
-    interfaceBrand010: '{{colors.purple020}}',
-    interfaceBrand020: '{{colors.purple030}}',
-    interfaceBrand030: '{{colors.purple050}}',
+    interfaceBrand010: '{{colors.purple060}}',
+    interfaceBrand020: '{{colors.purple080}}',
+    interfaceBrand030: '{{colors.purple060}}',
     interfaceBrand040: '{{colors.purple060}}',
     interfaceBrand050: '{{colors.purple080}}',
 
     illustrationPalette010: '{{colors.purple010}}',
-    illustrationPalette020: '{{colors.purple020}}',
-    illustrationPalette030: '{{colors.purple030}}',
-    illustrationPalette040: '{{colors.purple040}}',
-    illustrationPalette050: '{{colors.purple050}}',
+    illustrationPalette020: '{{colors.purple030}}',
+    illustrationPalette030: '{{colors.purple040}}',
+    illustrationPalette040: '{{colors.purple050}}',
+    illustrationPalette050: '{{colors.purple055}}',
     illustrationPalette060: '{{colors.purple060}}',
     illustrationPalette070: '{{colors.purple070}}',
     illustrationPalette080: '{{colors.purple080}}',
     illustrationPalette090: '{{colors.purple090}}',
     illustrationPalette100: '{{colors.purple100}}',
-    illustrationHighlight010: '{{colors.purple040}}',
-    illustrationSubtle010: '{{colors.darkBlue060}}',
-    illustrationBackground010: '{{colors.blue005}}',
+    illustrationHighlight010: '{{colors.purple050}}',
+    illustrationSubtle010: '{{colors.darkBlue050}}',
+    illustrationBackground010: '{{colors.blue010}}',
     illustrationBackground020: '{{colors.darkBlue010}}',
     illustrationBorder010: '{{colors.darkBlue020}}',
-    illustrationBorder020: '{{colors.darkBlue040}}',
+    illustrationBorder020: '{{colors.darkBlue030}}',
     illustrationDisabled: '{{colors.darkBlue020}}',
     illustrationInterface010: '{{colors.white}}',
-    illustrationInterface020: '{{colors.purple010}}',
-    illustrationInterface030: '{{colors.purple020}}',
-    illustrationInterface040: '{{colors.purple030}}',
-    illustrationInterface050: '{{colors.purple040}}',
-    illustrationInterface060: '{{colors.purple050}}',
+    illustrationInterface020: '{{colors.purple020}}',
+    illustrationInterface030: '{{colors.purple030}}',
+    illustrationInterface040: '{{colors.purple040}}',
+    illustrationInterface050: '{{colors.purple050}}',
+    illustrationInterface060: '{{colors.purple055}}',
     illustrationInterface070: '{{colors.purple060}}',
     illustrationInterface080: '{{colors.purple070}}',
     illustrationInterface090: '{{colors.purple080}}',
     illustrationInterface100: '{{colors.purple090}}',
-    illustrationAnatomySubtle: '{{colors.purple020}}',
-    illustrationAnatomyBorder010: '{{colors.purple020}}',
-    illustrationAnatomyBorder020: '{{colors.purple040}}',
+    illustrationAnatomySubtle: '{{colors.purple030}}',
+    illustrationAnatomyBorder010: '{{colors.purple030}}',
+    illustrationAnatomyBorder020: '{{colors.purple070}}',
   },
 };
 
 export const foundationsDarkOverrides = {
   colors: {
-    inkBrand010: '{{colors.purple040}}',
-    inkBrand020: '{{colors.purple020}}',
-    interfaceBrand010: '{{colors.purple090}}',
+    inkBrand010: '{{colors.purple050}}',
+    inkBrand020: '{{colors.purple030}}',
+    interfaceBrand010: '{{colors.purple060}}',
     interfaceBrand020: '{{colors.purple080}}',
-    interfaceBrand030: '{{colors.purple050}}',
-    interfaceBrand040: '{{colors.purple040}}',
-    interfaceBrand050: '{{colors.purple020}}',
+    interfaceBrand030: '{{colors.purple060}}',
+    interfaceBrand040: '{{colors.purple060}}',
+    interfaceBrand050: '{{colors.purple080}}',
 
     illustrationPalette010: '{{colors.purple010}}',
-    illustrationPalette020: '{{colors.purple020}}',
-    illustrationPalette030: '{{colors.purple030}}',
-    illustrationPalette040: '{{colors.purple040}}',
-    illustrationPalette050: '{{colors.purple050}}',
+    illustrationPalette020: '{{colors.purple030}}',
+    illustrationPalette030: '{{colors.purple040}}',
+    illustrationPalette040: '{{colors.purple050}}',
+    illustrationPalette050: '{{colors.purple055}}',
     illustrationPalette060: '{{colors.purple060}}',
     illustrationPalette070: '{{colors.purple070}}',
     illustrationPalette080: '{{colors.purple080}}',
     illustrationPalette090: '{{colors.purple090}}',
     illustrationPalette100: '{{colors.purple100}}',
     illustrationHighlight010: '{{colors.white}}',
-    illustrationSubtle010: '{{colors.purple070}}',
-    illustrationBackground010: '{{colors.darkBlue090}}',
-    illustrationBackground020: '{{colors.darkBlue090}}',
+    illustrationSubtle010: '{{colors.purple080}}',
+    illustrationBackground010: '{{colors.darkBlue095}}',
+    illustrationBackground020: '{{colors.darkBlue095}}',
     illustrationBorder010: '{{colors.purple070}}',
     illustrationBorder020: '{{colors.purple060}}',
-    illustrationDisabled: '{{colors.purple080}}',
-    illustrationInterface010: '{{colors.purple050}}',
-    illustrationInterface020: '{{colors.purple060}}',
-    illustrationInterface030: '{{colors.purple070}}',
-    illustrationInterface040: '{{colors.purple080}}',
-    illustrationInterface050: '{{colors.purple090}}',
-    illustrationInterface060: '{{colors.purple010}}',
-    illustrationInterface070: '{{colors.purple020}}',
-    illustrationInterface080: '{{colors.purple030}}',
+    illustrationDisabled: '{{colors.purple070}}',
+    illustrationInterface010: '{{colors.purple055}}',
+    illustrationInterface020: '{{colors.purple070}}',
+    illustrationInterface030: '{{colors.purple080}}',
+    illustrationInterface040: '{{colors.purple090}}',
+    illustrationInterface050: '{{colors.purple100}}',
+    illustrationInterface060: '{{colors.purple030}}',
+    illustrationInterface070: '{{colors.purple040}}',
+    illustrationInterface080: '{{colors.purple055}}',
     illustrationInterface090: '{{colors.purple040}}',
     illustrationInterface100: '{{colors.purple010}}',
     illustrationAnatomySubtle: '{{colors.purple040}}',
@@ -96,83 +96,83 @@ export const foundationsDarkOverrides = {
 
 export const guidesLightOverrides = {
   colors: {
-    inkBrand010: '{{colors.blue050}}',
+    inkBrand010: '{{colors.blue060}}',
     inkBrand020: '{{colors.blue080}}',
-    interfaceBrand010: '{{colors.blue020}}',
-    interfaceBrand020: '{{colors.blue030}}',
-    interfaceBrand030: '{{colors.blue050}}',
+    interfaceBrand010: '{{colors.blue060}}',
+    interfaceBrand020: '{{colors.blue080}}',
+    interfaceBrand030: '{{colors.blue060}}',
     interfaceBrand040: '{{colors.blue060}}',
     interfaceBrand050: '{{colors.blue080}}',
 
     illustrationPalette010: '{{colors.blue010}}',
-    illustrationPalette020: '{{colors.blue020}}',
-    illustrationPalette030: '{{colors.blue030}}',
-    illustrationPalette040: '{{colors.blue040}}',
-    illustrationPalette050: '{{colors.blue050}}',
+    illustrationPalette020: '{{colors.blue030}}',
+    illustrationPalette030: '{{colors.blue040}}',
+    illustrationPalette040: '{{colors.blue050}}',
+    illustrationPalette050: '{{colors.blue055}}',
     illustrationPalette060: '{{colors.blue060}}',
     illustrationPalette070: '{{colors.blue070}}',
     illustrationPalette080: '{{colors.blue080}}',
     illustrationPalette090: '{{colors.blue090}}',
     illustrationPalette100: '{{colors.blue100}}',
-    illustrationHighlight010: '{{colors.blue040}}',
-    illustrationSubtle010: '{{colors.darkBlue060}}',
-    illustrationBackground010: '{{colors.blue005}}',
+    illustrationHighlight010: '{{colors.blue050}}',
+    illustrationSubtle010: '{{colors.darkBlue050}}',
+    illustrationBackground010: '{{colors.blue010}}',
     illustrationBackground020: '{{colors.darkBlue010}}',
     illustrationBorder010: '{{colors.darkBlue020}}',
-    illustrationBorder020: '{{colors.darkBlue040}}',
+    illustrationBorder020: '{{colors.darkBlue030}}',
     illustrationDisabled: '{{colors.darkBlue020}}',
     illustrationInterface010: '{{colors.white}}',
-    illustrationInterface020: '{{colors.blue010}}',
-    illustrationInterface030: '{{colors.blue020}}',
-    illustrationInterface040: '{{colors.blue030}}',
-    illustrationInterface050: '{{colors.blue040}}',
-    illustrationInterface060: '{{colors.blue050}}',
+    illustrationInterface020: '{{colors.blue020}}',
+    illustrationInterface030: '{{colors.blue030}}',
+    illustrationInterface040: '{{colors.blue040}}',
+    illustrationInterface050: '{{colors.blue050}}',
+    illustrationInterface060: '{{colors.blue055}}',
     illustrationInterface070: '{{colors.blue060}}',
     illustrationInterface080: '{{colors.blue070}}',
     illustrationInterface090: '{{colors.blue080}}',
     illustrationInterface100: '{{colors.blue090}}',
-    illustrationAnatomySubtle: '{{colors.blue020}}',
-    illustrationAnatomyBorder010: '{{colors.blue020}}',
-    illustrationAnatomyBorder020: '{{colors.blue040}}',
+    illustrationAnatomySubtle: '{{colors.blue030}}',
+    illustrationAnatomyBorder010: '{{colors.blue030}}',
+    illustrationAnatomyBorder020: '{{colors.blue070}}',
   },
 };
 
 export const guidesDarkOverrides = {
   colors: {
-    inkBrand010: '{{colors.blue040}}',
-    inkBrand020: '{{colors.blue020}}',
-    interfaceBrand010: '{{colors.blue090}}',
+    inkBrand010: '{{colors.blue050}}',
+    inkBrand020: '{{colors.blue030}}',
+    interfaceBrand010: '{{colors.blue060}}',
     interfaceBrand020: '{{colors.blue080}}',
-    interfaceBrand030: '{{colors.blue050}}',
-    interfaceBrand040: '{{colors.blue040}}',
-    interfaceBrand050: '{{colors.blue020}}',
+    interfaceBrand030: '{{colors.blue060}}',
+    interfaceBrand040: '{{colors.blue060}}',
+    interfaceBrand050: '{{colors.blue080}}',
 
     illustrationPalette010: '{{colors.blue010}}',
-    illustrationPalette020: '{{colors.blue020}}',
-    illustrationPalette030: '{{colors.blue030}}',
-    illustrationPalette040: '{{colors.blue040}}',
-    illustrationPalette050: '{{colors.blue050}}',
+    illustrationPalette020: '{{colors.blue030}}',
+    illustrationPalette030: '{{colors.blue040}}',
+    illustrationPalette040: '{{colors.blue050}}',
+    illustrationPalette050: '{{colors.blue055}}',
     illustrationPalette060: '{{colors.blue060}}',
     illustrationPalette070: '{{colors.blue070}}',
     illustrationPalette080: '{{colors.blue080}}',
     illustrationPalette090: '{{colors.blue090}}',
     illustrationPalette100: '{{colors.blue100}}',
     illustrationHighlight010: '{{colors.white}}',
-    illustrationSubtle010: '{{colors.blue070}}',
-    illustrationBackground010: '{{colors.darkBlue090}}',
-    illustrationBackground020: '{{colors.darkBlue090}}',
+    illustrationSubtle010: '{{colors.blue080}}',
+    illustrationBackground010: '{{colors.darkBlue095}}',
+    illustrationBackground020: '{{colors.darkBlue095}}',
     illustrationBorder010: '{{colors.blue070}}',
     illustrationBorder020: '{{colors.blue060}}',
     illustrationDisabled: '{{colors.blue080}}',
-    illustrationInterface010: '{{colors.blue050}}',
-    illustrationInterface020: '{{colors.blue060}}',
-    illustrationInterface030: '{{colors.blue070}}',
-    illustrationInterface040: '{{colors.blue080}}',
-    illustrationInterface050: '{{colors.blue090}}',
-    illustrationInterface060: '{{colors.blue010}}',
-    illustrationInterface070: '{{colors.blue020}}',
-    illustrationInterface080: '{{colors.blue030}}',
-    illustrationInterface090: '{{colors.blue040}}',
+    illustrationInterface010: '{{colors.blue055}}',
+    illustrationInterface020: '{{colors.blue070}}',
+    illustrationInterface030: '{{colors.blue080}}',
+    illustrationInterface040: '{{colors.blue090}}',
+    illustrationInterface050: '{{colors.blue100}}',
+    illustrationInterface060: '{{colors.blue030}}',
+    illustrationInterface070: '{{colors.blue040}}',
+    illustrationInterface080: '{{colors.blue050}}',
+    illustrationInterface090: '{{colors.blue055}}',
     illustrationInterface100: '{{colors.blue010}}',
     illustrationAnatomySubtle: '{{colors.blue040}}',
     illustrationAnatomyBorder010: '{{colors.blue080}}',
@@ -182,11 +182,11 @@ export const guidesDarkOverrides = {
 
 export const patternsLightOverrides = {
   colors: {
-    inkBrand010: '{{colors.teal050}}',
+    inkBrand010: '{{colors.teal060}}',
     inkBrand020: '{{colors.teal080}}',
     interfaceBrand010: '{{colors.teal020}}',
     interfaceBrand020: '{{colors.teal030}}',
-    interfaceBrand030: '{{colors.teal050}}',
+    interfaceBrand030: '{{colors.teal060}}',
     interfaceBrand040: '{{colors.teal070}}',
     interfaceBrand050: '{{colors.teal080}}',
 
@@ -195,17 +195,17 @@ export const patternsLightOverrides = {
     illustrationPalette030: '{{colors.teal030}}',
     illustrationPalette040: '{{colors.teal040}}',
     illustrationPalette050: '{{colors.teal050}}',
-    illustrationPalette060: '{{colors.teal060}}',
-    illustrationPalette070: '{{colors.teal070}}',
-    illustrationPalette080: '{{colors.teal080}}',
-    illustrationPalette090: '{{colors.teal090}}',
-    illustrationPalette100: '{{colors.teal100}}',
-    illustrationHighlight010: '{{colors.teal040}}',
-    illustrationSubtle010: '{{colors.darkBlue060}}',
-    illustrationBackground010: '{{colors.blue005}}',
+    illustrationPalette060: '{{colors.teal055}}',
+    illustrationPalette070: '{{colors.teal060}}',
+    illustrationPalette080: '{{colors.teal070}}',
+    illustrationPalette090: '{{colors.teal080}}',
+    illustrationPalette100: '{{colors.teal090}}',
+    illustrationHighlight010: '{{colors.teal050}}',
+    illustrationSubtle010: '{{colors.darkBlue050}}',
+    illustrationBackground010: '{{colors.blue010}}',
     illustrationBackground020: '{{colors.darkBlue010}}',
     illustrationBorder010: '{{colors.darkBlue020}}',
-    illustrationBorder020: '{{colors.darkBlue040}}',
+    illustrationBorder020: '{{colors.darkBlue030}}',
     illustrationDisabled: '{{colors.darkBlue020}}',
     illustrationInterface010: '{{colors.white}}',
     illustrationInterface020: '{{colors.teal010}}',
@@ -213,51 +213,51 @@ export const patternsLightOverrides = {
     illustrationInterface040: '{{colors.teal030}}',
     illustrationInterface050: '{{colors.teal040}}',
     illustrationInterface060: '{{colors.teal050}}',
-    illustrationInterface070: '{{colors.teal060}}',
-    illustrationInterface080: '{{colors.teal070}}',
-    illustrationInterface090: '{{colors.teal080}}',
-    illustrationInterface100: '{{colors.teal090}}',
-    illustrationAnatomySubtle: '{{colors.teal020}}',
-    illustrationAnatomyBorder010: '{{colors.teal020}}',
-    illustrationAnatomyBorder020: '{{colors.teal040}}',
+    illustrationInterface070: '{{colors.teal055}}',
+    illustrationInterface080: '{{colors.teal060}}',
+    illustrationInterface090: '{{colors.teal070}}',
+    illustrationInterface100: '{{colors.teal080}}',
+    illustrationAnatomySubtle: '{{colors.teal030}}',
+    illustrationAnatomyBorder010: '{{colors.teal030}}',
+    illustrationAnatomyBorder020: '{{colors.teal070}}',
   },
 };
 
 export const patternsDarkOverrides = {
   colors: {
-    inkBrand010: '{{colors.teal040}}',
-    inkBrand020: '{{colors.teal020}}',
-    interfaceBrand010: '{{colors.teal090}}',
-    interfaceBrand020: '{{colors.teal080}}',
-    interfaceBrand030: '{{colors.teal050}}',
-    interfaceBrand040: '{{colors.teal040}}',
-    interfaceBrand050: '{{colors.teal020}}',
+    inkBrand010: '{{colors.teal050}}',
+    inkBrand020: '{{colors.teal030}}',
+    interfaceBrand010: '{{colors.teal080}}',
+    interfaceBrand020: '{{colors.teal060}}',
+    interfaceBrand030: '{{colors.teal060}}',
+    interfaceBrand040: '{{colors.teal080}}',
+    interfaceBrand050: '{{colors.teal080}}',
 
     illustrationPalette010: '{{colors.teal010}}',
     illustrationPalette020: '{{colors.teal020}}',
     illustrationPalette030: '{{colors.teal030}}',
     illustrationPalette040: '{{colors.teal040}}',
     illustrationPalette050: '{{colors.teal050}}',
-    illustrationPalette060: '{{colors.teal060}}',
-    illustrationPalette070: '{{colors.teal070}}',
-    illustrationPalette080: '{{colors.teal080}}',
-    illustrationPalette090: '{{colors.teal090}}',
-    illustrationPalette100: '{{colors.teal100}}',
+    illustrationPalette060: '{{colors.teal055}}',
+    illustrationPalette070: '{{colors.teal060}}',
+    illustrationPalette080: '{{colors.teal070}}',
+    illustrationPalette090: '{{colors.teal080}}',
+    illustrationPalette100: '{{colors.teal090}}',
     illustrationHighlight010: '{{colors.white}}',
-    illustrationSubtle010: '{{colors.teal070}}',
-    illustrationBackground010: '{{colors.darkBlue090}}',
-    illustrationBackground020: '{{colors.darkBlue090}}',
-    illustrationBorder010: '{{colors.teal070}}',
-    illustrationBorder020: '{{colors.teal060}}',
-    illustrationDisabled: '{{colors.teal080}}',
+    illustrationSubtle010: '{{colors.teal060}}',
+    illustrationBackground010: '{{colors.darkBlue095}}',
+    illustrationBackground020: '{{colors.darkBlue095}}',
+    illustrationBorder010: '{{colors.teal060}}',
+    illustrationBorder020: '{{colors.teal055}}',
+    illustrationDisabled: '{{colors.teal070}}',
     illustrationInterface010: '{{colors.teal050}}',
-    illustrationInterface020: '{{colors.teal060}}',
-    illustrationInterface030: '{{colors.teal070}}',
-    illustrationInterface040: '{{colors.teal080}}',
-    illustrationInterface050: '{{colors.teal090}}',
+    illustrationInterface020: '{{colors.teal070}}',
+    illustrationInterface030: '{{colors.teal060}}',
+    illustrationInterface040: '{{colors.teal070}}',
+    illustrationInterface050: '{{colors.teal080}}',
     illustrationInterface060: '{{colors.teal020}}',
     illustrationInterface070: '{{colors.teal030}}',
-    illustrationInterface080: '{{colors.teal050}}',
+    illustrationInterface080: '{{colors.teal040}}',
     illustrationInterface090: '{{colors.teal050}}',
     illustrationInterface100: '{{colors.teal010}}',
     illustrationAnatomySubtle: '{{colors.teal040}}',
diff --git a/site/theme/style-presets.ts b/site/theme/style-presets.ts
index 23233308cc..ec6c84c108 100644
--- a/site/theme/style-presets.ts
+++ b/site/theme/style-presets.ts
@@ -78,8 +78,8 @@ export const stylePresets = {
       color: '{{colors.inkSubtle}}', // TODO write color
     },
     hover: {
-      color: '{{colors.interactivePrimary030}}',
-      backgroundColor: '{{colors.interactivePrimary010}}',
+      color: '{{colors.interactivePrimary040}}',
+      backgroundColor: '{{colors.interactivePrimary020}}',
     },
     active: {
       color: '{{colors.interactivePrimary050}}',
@@ -544,8 +544,8 @@ export const stylePresets = {
     base: {
       backgroundColor: '{{colors.interactiveInverse030}}',
       borderRadius: '{{borders.borderRadiusDefault}}',
-      color: '{{colors.interfaceBrand030}}',
-      iconColor: '{{colors.interfaceBrand030}}',
+      color: '{{colors.inkBrand010}}',
+      iconColor: '{{colors.inkBrand010}}',
     },
     hover: {
       backgroundColor: '{{colors.interactiveInverse020}}',
@@ -688,8 +688,8 @@ export const stylePresets = {
     },
     active: {
       backgroundColor: '{{colors.interactiveInverse050}}',
-      color: '{{colors.inkBrand020}}',
-      iconColor: '{{colors.inkBrand020}}',
+      color: '{{colors.inkBrand030}}',
+      iconColor: '{{colors.inkBrand030}}',
     },
   },
 
@@ -756,6 +756,8 @@ export const stylePresets = {
     },
     hover: {
       backgroundColor: '{{colors.interactiveInverse020}}',
+      color: '{{colors.inkWhiteContrast}}',
+      iconColor: '{{colors.inkWhiteContrast}}',
     },
     active: {
       backgroundColor: '{{colors.interactiveInverse050}}',
@@ -806,6 +808,8 @@ export const stylePresets = {
     },
     hover: {
       backgroundColor: '{{colors.interactiveInverse020}}',
+      color: '{{colors.inkWhiteContrast}}',
+      iconColor: '{{colors.inkWhiteContrast}}',
     },
     active: {
       backgroundColor: '{{colors.interactiveInverse050}}',
@@ -892,7 +896,7 @@ export const stylePresets = {
   },
   sidebar: {
     base: {
-      backgroundColor: '{{colors.interface020}}',
+      backgroundColor: '{{colors.interface010}}',
       borderStyle: 'solid',
       borderColor: '{{colors.interface040}}',
       borderWidth:
@@ -1037,6 +1041,8 @@ export const stylePresets = {
     },
     hover: {
       backgroundColor: '{{colors.interactiveInverse020}}',
+      color: '{{colors.inkWhiteContrast}}',
+      iconColor: '{{colors.inkWhiteContrast}}',
     },
     active: {
       backgroundColor: '{{colors.interactiveInverse050}}',
@@ -1087,6 +1093,12 @@ export const stylePresets = {
       textDecoration: 'underline',
     },
   },
+  homepageCard: {
+    base: {
+      backgroundColor: '{{colors.transparent}}',
+      color: '{{colors.inkBase}}',
+    },
+  },
   exploreCardHeadline: {
     base: {
       color: '{{colors.inkContrast}}',
diff --git a/src/accordion/__tests__/__snapshots__/accordion.test.tsx.snap b/src/accordion/__tests__/__snapshots__/accordion.test.tsx.snap
index 33c73218f6..97e2029e40 100644
--- a/src/accordion/__tests__/__snapshots__/accordion.test.tsx.snap
+++ b/src/accordion/__tests__/__snapshots__/accordion.test.tsx.snap
@@ -19,9 +19,9 @@ exports[`Accordion renders as a h4 1`] = `
   width: 100%;
   cursor: pointer;
   background-color: #FFFFFF;
-  color: #2E2E2E;
+  color: #3B3B3B;
   border-style: none none solid none;
-  border-color: #CCCCCC;
+  border-color: #ABABAB;
   border-width: 1px;
   font-family: "Poppins",sans-serif;
   font-size: 16px;
@@ -37,13 +37,13 @@ exports[`Accordion renders as a h4 1`] = `
 }
 
 .emotion-1:hover:not(:disabled) {
-  background-color: #FAFAFA;
+  background-color: #F1F1F1;
   color: #3358CC;
 }
 
 .emotion-1:disabled {
-  background-color: #F4F4F4;
-  color: #C0C0C0;
+  background-color: #E2E2E2;
+  color: #ABABAB;
 }
 
 .emotion-1:focus-visible:not(:disabled) {
@@ -84,7 +84,7 @@ exports[`Accordion renders as a h4 1`] = `
   display: inline-block;
   vertical-align: middle;
   overflow: hidden;
-  fill: #2E2E2E;
+  fill: #3B3B3B;
   vertical-align: unset;
   display: inline-block;
   -webkit-padding-end: 8px;
@@ -134,7 +134,7 @@ exports[`Accordion renders as a h4 1`] = `
   display: inline-block;
   vertical-align: middle;
   overflow: hidden;
-  fill: #2E2E2E;
+  fill: #3B3B3B;
   vertical-align: unset;
   display: inline-block;
 }
@@ -163,7 +163,7 @@ exports[`Accordion renders as a h4 1`] = `
 .emotion-10 {
   display: block;
   border-style: none none solid none;
-  border-color: #CCCCCC;
+  border-color: #ABABAB;
   border-width: 1px;
   padding-inline: 12px;
   padding-block: 12px;
@@ -293,9 +293,9 @@ exports[`Accordion renders with collapsed state and icon 1`] = `
   width: 100%;
   cursor: pointer;
   background-color: #FFFFFF;
-  color: #2E2E2E;
+  color: #3B3B3B;
   border-style: none none solid none;
-  border-color: #CCCCCC;
+  border-color: #ABABAB;
   border-width: 1px;
   font-family: "Poppins",sans-serif;
   font-size: 16px;
@@ -311,13 +311,13 @@ exports[`Accordion renders with collapsed state and icon 1`] = `
 }
 
 .emotion-1:hover:not(:disabled) {
-  background-color: #FAFAFA;
+  background-color: #F1F1F1;
   color: #3358CC;
 }
 
 .emotion-1:disabled {
-  background-color: #F4F4F4;
-  color: #C0C0C0;
+  background-color: #E2E2E2;
+  color: #ABABAB;
 }
 
 .emotion-1:focus-visible:not(:disabled) {
@@ -358,7 +358,7 @@ exports[`Accordion renders with collapsed state and icon 1`] = `
   display: inline-block;
   vertical-align: middle;
   overflow: hidden;
-  fill: #2E2E2E;
+  fill: #3B3B3B;
   vertical-align: unset;
   display: inline-block;
   -webkit-padding-end: 8px;
@@ -408,7 +408,7 @@ exports[`Accordion renders with collapsed state and icon 1`] = `
   display: inline-block;
   vertical-align: middle;
   overflow: hidden;
-  fill: #2E2E2E;
+  fill: #3B3B3B;
   vertical-align: unset;
   display: inline-block;
 }
@@ -437,7 +437,7 @@ exports[`Accordion renders with collapsed state and icon 1`] = `
 .emotion-10 {
   display: none;
   border-style: none none solid none;
-  border-color: #CCCCCC;
+  border-color: #ABABAB;
   border-width: 1px;
   padding-inline: 12px;
   padding-block: 12px;
@@ -567,9 +567,9 @@ exports[`Accordion renders with default props 1`] = `
   width: 100%;
   cursor: pointer;
   background-color: #FFFFFF;
-  color: #2E2E2E;
+  color: #3B3B3B;
   border-style: none none solid none;
-  border-color: #CCCCCC;
+  border-color: #ABABAB;
   border-width: 1px;
   font-family: "Poppins",sans-serif;
   font-size: 16px;
@@ -585,13 +585,13 @@ exports[`Accordion renders with default props 1`] = `
 }
 
 .emotion-1:hover:not(:disabled) {
-  background-color: #FAFAFA;
+  background-color: #F1F1F1;
   color: #3358CC;
 }
 
 .emotion-1:disabled {
-  background-color: #F4F4F4;
-  color: #C0C0C0;
+  background-color: #E2E2E2;
+  color: #ABABAB;
 }
 
 .emotion-1:focus-visible:not(:disabled) {
@@ -632,7 +632,7 @@ exports[`Accordion renders with default props 1`] = `
   display: inline-block;
   vertical-align: middle;
   overflow: hidden;
-  fill: #2E2E2E;
+  fill: #3B3B3B;
   vertical-align: unset;
   display: inline-block;
   -webkit-padding-end: 8px;
@@ -682,7 +682,7 @@ exports[`Accordion renders with default props 1`] = `
   display: inline-block;
   vertical-align: middle;
   overflow: hidden;
-  fill: #2E2E2E;
+  fill: #3B3B3B;
   vertical-align: unset;
   display: inline-block;
 }
@@ -711,7 +711,7 @@ exports[`Accordion renders with default props 1`] = `
 .emotion-10 {
   display: none;
   border-style: none none solid none;
-  border-color: #CCCCCC;
+  border-color: #ABABAB;
   border-width: 1px;
   padding-inline: 12px;
   padding-block: 12px;
@@ -839,10 +839,10 @@ exports[`Accordion renders with disabled state 1`] = `
   align-items: center;
   width: 100%;
   cursor: not-allowed;
-  background-color: #F4F4F4;
-  color: #C0C0C0;
+  background-color: #E2E2E2;
+  color: #ABABAB;
   border-style: none none solid none;
-  border-color: #CCCCCC;
+  border-color: #ABABAB;
   border-width: 1px;
   font-family: "Poppins",sans-serif;
   font-size: 16px;
@@ -881,7 +881,7 @@ exports[`Accordion renders with disabled state 1`] = `
   display: inline-block;
   vertical-align: middle;
   overflow: hidden;
-  fill: #2E2E2E;
+  fill: #3B3B3B;
   vertical-align: unset;
   display: inline-block;
   -webkit-padding-end: 8px;
@@ -931,7 +931,7 @@ exports[`Accordion renders with disabled state 1`] = `
   display: inline-block;
   vertical-align: middle;
   overflow: hidden;
-  fill: #2E2E2E;
+  fill: #3B3B3B;
   vertical-align: unset;
   display: inline-block;
 }
@@ -960,7 +960,7 @@ exports[`Accordion renders with disabled state 1`] = `
 .emotion-10 {
   display: none;
   border-style: none none solid none;
-  border-color: #CCCCCC;
+  border-color: #ABABAB;
   border-width: 1px;
   padding-inline: 12px;
   padding-block: 12px;
@@ -1090,9 +1090,9 @@ exports[`Accordion renders with expanded state and icon 1`] = `
   width: 100%;
   cursor: pointer;
   background-color: #FFFFFF;
-  color: #2E2E2E;
+  color: #3B3B3B;
   border-style: none none solid none;
-  border-color: #CCCCCC;
+  border-color: #ABABAB;
   border-width: 1px;
   font-family: "Poppins",sans-serif;
   font-size: 16px;
@@ -1108,13 +1108,13 @@ exports[`Accordion renders with expanded state and icon 1`] = `
 }
 
 .emotion-1:hover:not(:disabled) {
-  background-color: #FAFAFA;
+  background-color: #F1F1F1;
   color: #3358CC;
 }
 
 .emotion-1:disabled {
-  background-color: #F4F4F4;
-  color: #C0C0C0;
+  background-color: #E2E2E2;
+  color: #ABABAB;
 }
 
 .emotion-1:focus-visible:not(:disabled) {
@@ -1155,7 +1155,7 @@ exports[`Accordion renders with expanded state and icon 1`] = `
   display: inline-block;
   vertical-align: middle;
   overflow: hidden;
-  fill: #2E2E2E;
+  fill: #3B3B3B;
   vertical-align: unset;
   display: inline-block;
   -webkit-padding-end: 8px;
@@ -1205,7 +1205,7 @@ exports[`Accordion renders with expanded state and icon 1`] = `
   display: inline-block;
   vertical-align: middle;
   overflow: hidden;
-  fill: #2E2E2E;
+  fill: #3B3B3B;
   vertical-align: unset;
   display: inline-block;
 }
@@ -1234,7 +1234,7 @@ exports[`Accordion renders with expanded state and icon 1`] = `
 .emotion-10 {
   display: block;
   border-style: none none solid none;
-  border-color: #CCCCCC;
+  border-color: #ABABAB;
   border-width: 1px;
   padding-inline: 12px;
   padding-block: 12px;
@@ -1364,9 +1364,9 @@ exports[`Accordion renders with indicatorIcon component overrides 1`] = `
   width: 100%;
   cursor: pointer;
   background-color: #FFFFFF;
-  color: #2E2E2E;
+  color: #3B3B3B;
   border-style: none none solid none;
-  border-color: #CCCCCC;
+  border-color: #ABABAB;
   border-width: 1px;
   font-family: "Poppins",sans-serif;
   font-size: 16px;
@@ -1382,13 +1382,13 @@ exports[`Accordion renders with indicatorIcon component overrides 1`] = `
 }
 
 .emotion-1:hover:not(:disabled) {
-  background-color: #FAFAFA;
+  background-color: #F1F1F1;
   color: #3358CC;
 }
 
 .emotion-1:disabled {
-  background-color: #F4F4F4;
-  color: #C0C0C0;
+  background-color: #E2E2E2;
+  color: #ABABAB;
 }
 
 .emotion-1:focus-visible:not(:disabled) {
@@ -1429,7 +1429,7 @@ exports[`Accordion renders with indicatorIcon component overrides 1`] = `
   display: inline-block;
   vertical-align: middle;
   overflow: hidden;
-  fill: #2E2E2E;
+  fill: #3B3B3B;
   vertical-align: unset;
   display: inline-block;
   -webkit-padding-end: 8px;
@@ -1479,7 +1479,7 @@ exports[`Accordion renders with indicatorIcon component overrides 1`] = `
   display: inline-block;
   vertical-align: middle;
   overflow: hidden;
-  fill: #2E2E2E;
+  fill: #3B3B3B;
   vertical-align: unset;
   display: inline-block;
 }
@@ -1508,7 +1508,7 @@ exports[`Accordion renders with indicatorIcon component overrides 1`] = `
 .emotion-10 {
   display: block;
   border-style: none none solid none;
-  border-color: #CCCCCC;
+  border-color: #ABABAB;
   border-width: 1px;
   padding-inline: 12px;
   padding-block: 12px;
@@ -1634,9 +1634,9 @@ exports[`Accordion renders with indicatorIcon prop overrides 1`] = `
   width: 100%;
   cursor: pointer;
   background-color: #FFFFFF;
-  color: #2E2E2E;
+  color: #3B3B3B;
   border-style: none none solid none;
-  border-color: #CCCCCC;
+  border-color: #ABABAB;
   border-width: 1px;
   font-family: "Poppins",sans-serif;
   font-size: 16px;
@@ -1652,13 +1652,13 @@ exports[`Accordion renders with indicatorIcon prop overrides 1`] = `
 }
 
 .emotion-1:hover:not(:disabled) {
-  background-color: #FAFAFA;
+  background-color: #F1F1F1;
   color: #3358CC;
 }
 
 .emotion-1:disabled {
-  background-color: #F4F4F4;
-  color: #C0C0C0;
+  background-color: #E2E2E2;
+  color: #ABABAB;
 }
 
 .emotion-1:focus-visible:not(:disabled) {
@@ -1699,7 +1699,7 @@ exports[`Accordion renders with indicatorIcon prop overrides 1`] = `
   display: inline-block;
   vertical-align: middle;
   overflow: hidden;
-  fill: #2E2E2E;
+  fill: #3B3B3B;
   vertical-align: unset;
   display: inline-block;
   -webkit-padding-end: 8px;
@@ -1749,8 +1749,8 @@ exports[`Accordion renders with indicatorIcon prop overrides 1`] = `
   display: inline-block;
   vertical-align: middle;
   overflow: hidden;
-  color: #D20600;
-  fill: #D20600;
+  color: #D60000;
+  fill: #D60000;
   vertical-align: unset;
   display: inline-block;
 }
@@ -1774,8 +1774,8 @@ exports[`Accordion renders with indicatorIcon prop overrides 1`] = `
 .emotion-8.emotion-8 {
   width: 16px;
   height: 16px;
-  color: #D20600;
-  fill: #D20600;
+  color: #D60000;
+  fill: #D60000;
 }
 
 @media screen and (prefers-reduced-motion: no-preference) {
@@ -1797,7 +1797,7 @@ exports[`Accordion renders with indicatorIcon prop overrides 1`] = `
 .emotion-10 {
   display: block;
   border-style: none none solid none;
-  border-color: #CCCCCC;
+  border-color: #ABABAB;
   border-width: 1px;
   padding-inline: 12px;
   padding-block: 12px;
@@ -1927,9 +1927,9 @@ exports[`Accordion renders with no header 1`] = `
   width: 100%;
   cursor: pointer;
   background-color: #FFFFFF;
-  color: #2E2E2E;
+  color: #3B3B3B;
   border-style: none none solid none;
-  border-color: #CCCCCC;
+  border-color: #ABABAB;
   border-width: 1px;
   font-family: "Poppins",sans-serif;
   font-size: 16px;
@@ -1945,13 +1945,13 @@ exports[`Accordion renders with no header 1`] = `
 }
 
 .emotion-1:hover:not(:disabled) {
-  background-color: #FAFAFA;
+  background-color: #F1F1F1;
   color: #3358CC;
 }
 
 .emotion-1:disabled {
-  background-color: #F4F4F4;
-  color: #C0C0C0;
+  background-color: #E2E2E2;
+  color: #ABABAB;
 }
 
 .emotion-1:focus-visible:not(:disabled) {
@@ -1997,7 +1997,7 @@ exports[`Accordion renders with no header 1`] = `
   display: inline-block;
   vertical-align: middle;
   overflow: hidden;
-  fill: #2E2E2E;
+  fill: #3B3B3B;
   vertical-align: unset;
   display: inline-block;
 }
@@ -2026,7 +2026,7 @@ exports[`Accordion renders with no header 1`] = `
 .emotion-7 {
   display: none;
   border-style: none none solid none;
-  border-color: #CCCCCC;
+  border-color: #ABABAB;
   border-width: 1px;
   padding-inline: 12px;
   padding-block: 12px;
@@ -2108,9 +2108,9 @@ exports[`Accordion renders with no label 1`] = `
   width: 100%;
   cursor: pointer;
   background-color: #FFFFFF;
-  color: #2E2E2E;
+  color: #3B3B3B;
   border-style: none none solid none;
-  border-color: #CCCCCC;
+  border-color: #ABABAB;
   border-width: 1px;
   font-family: "Poppins",sans-serif;
   font-size: 16px;
@@ -2126,13 +2126,13 @@ exports[`Accordion renders with no label 1`] = `
 }
 
 .emotion-1:hover:not(:disabled) {
-  background-color: #FAFAFA;
+  background-color: #F1F1F1;
   color: #3358CC;
 }
 
 .emotion-1:disabled {
-  background-color: #F4F4F4;
-  color: #C0C0C0;
+  background-color: #E2E2E2;
+  color: #ABABAB;
 }
 
 .emotion-1:focus-visible:not(:disabled) {
@@ -2173,7 +2173,7 @@ exports[`Accordion renders with no label 1`] = `
   display: inline-block;
   vertical-align: middle;
   overflow: hidden;
-  fill: #2E2E2E;
+  fill: #3B3B3B;
   vertical-align: unset;
   display: inline-block;
   -webkit-padding-end: 8px;
@@ -2215,7 +2215,7 @@ exports[`Accordion renders with no label 1`] = `
   display: inline-block;
   vertical-align: middle;
   overflow: hidden;
-  fill: #2E2E2E;
+  fill: #3B3B3B;
   vertical-align: unset;
   display: inline-block;
 }
@@ -2244,7 +2244,7 @@ exports[`Accordion renders with no label 1`] = `
 .emotion-9 {
   display: none;
   border-style: none none solid none;
-  border-color: #CCCCCC;
+  border-color: #ABABAB;
   border-width: 1px;
   padding-inline: 12px;
   padding-block: 12px;
@@ -2421,7 +2421,7 @@ exports[`Accordion renders with style overrides 1`] = `
   display: inline-block;
   vertical-align: middle;
   overflow: hidden;
-  fill: #2E2E2E;
+  fill: #3B3B3B;
   vertical-align: unset;
   display: inline-block;
   -webkit-padding-end: 8px;
@@ -2471,8 +2471,8 @@ exports[`Accordion renders with style overrides 1`] = `
   display: inline-block;
   vertical-align: middle;
   overflow: hidden;
-  color: #0A782A;
-  fill: #0A782A;
+  color: #007B22;
+  fill: #007B22;
   vertical-align: unset;
   display: inline-block;
 }
@@ -2496,8 +2496,8 @@ exports[`Accordion renders with style overrides 1`] = `
 .emotion-8.emotion-8 {
   width: 32px;
   height: 32px;
-  color: #0A782A;
-  fill: #0A782A;
+  color: #007B22;
+  fill: #007B22;
 }
 
 @media screen and (prefers-reduced-motion: no-preference) {
@@ -2649,9 +2649,9 @@ exports[`Accordion renders without leading icon 1`] = `
   width: 100%;
   cursor: pointer;
   background-color: #FFFFFF;
-  color: #2E2E2E;
+  color: #3B3B3B;
   border-style: none none solid none;
-  border-color: #CCCCCC;
+  border-color: #ABABAB;
   border-width: 1px;
   font-family: "Poppins",sans-serif;
   font-size: 16px;
@@ -2667,13 +2667,13 @@ exports[`Accordion renders without leading icon 1`] = `
 }
 
 .emotion-1:hover:not(:disabled) {
-  background-color: #FAFAFA;
+  background-color: #F1F1F1;
   color: #3358CC;
 }
 
 .emotion-1:disabled {
-  background-color: #F4F4F4;
-  color: #C0C0C0;
+  background-color: #E2E2E2;
+  color: #ABABAB;
 }
 
 .emotion-1:focus-visible:not(:disabled) {
@@ -2719,7 +2719,7 @@ exports[`Accordion renders without leading icon 1`] = `
   display: inline-block;
   vertical-align: middle;
   overflow: hidden;
-  fill: #2E2E2E;
+  fill: #3B3B3B;
   vertical-align: unset;
   display: inline-block;
 }
@@ -2748,7 +2748,7 @@ exports[`Accordion renders without leading icon 1`] = `
 .emotion-7 {
   display: none;
   border-style: none none solid none;
-  border-color: #CCCCCC;
+  border-color: #ABABAB;
   border-width: 1px;
   padding-inline: 12px;
   padding-block: 12px;
@@ -2832,9 +2832,9 @@ exports[`Accordion should render with custom ariaControls and id 1`] = `
   width: 100%;
   cursor: pointer;
   background-color: #FFFFFF;
-  color: #2E2E2E;
+  color: #3B3B3B;
   border-style: none none solid none;
-  border-color: #CCCCCC;
+  border-color: #ABABAB;
   border-width: 1px;
   font-family: "Poppins",sans-serif;
   font-size: 16px;
@@ -2850,13 +2850,13 @@ exports[`Accordion should render with custom ariaControls and id 1`] = `
 }
 
 .emotion-1:hover:not(:disabled) {
-  background-color: #FAFAFA;
+  background-color: #F1F1F1;
   color: #3358CC;
 }
 
 .emotion-1:disabled {
-  background-color: #F4F4F4;
-  color: #C0C0C0;
+  background-color: #E2E2E2;
+  color: #ABABAB;
 }
 
 .emotion-1:focus-visible:not(:disabled) {
@@ -2897,7 +2897,7 @@ exports[`Accordion should render with custom ariaControls and id 1`] = `
   display: inline-block;
   vertical-align: middle;
   overflow: hidden;
-  fill: #2E2E2E;
+  fill: #3B3B3B;
   vertical-align: unset;
   display: inline-block;
   -webkit-padding-end: 8px;
@@ -2947,7 +2947,7 @@ exports[`Accordion should render with custom ariaControls and id 1`] = `
   display: inline-block;
   vertical-align: middle;
   overflow: hidden;
-  fill: #2E2E2E;
+  fill: #3B3B3B;
   vertical-align: unset;
   display: inline-block;
 }
@@ -2976,7 +2976,7 @@ exports[`Accordion should render with custom ariaControls and id 1`] = `
 .emotion-10 {
   display: none;
   border-style: none none solid none;
-  border-color: #CCCCCC;
+  border-color: #ABABAB;
   border-width: 1px;
   padding-inline: 12px;
   padding-block: 12px;
@@ -3105,9 +3105,9 @@ exports[`AccordionGroup different type of children 1`] = `
   width: 100%;
   cursor: pointer;
   background-color: #FFFFFF;
-  color: #2E2E2E;
+  color: #3B3B3B;
   border-style: none none solid none;
-  border-color: #CCCCCC;
+  border-color: #ABABAB;
   border-width: 1px;
   font-family: "Poppins",sans-serif;
   font-size: 16px;
@@ -3123,13 +3123,13 @@ exports[`AccordionGroup different type of children 1`] = `
 }
 
 .emotion-1:hover:not(:disabled) {
-  background-color: #FAFAFA;
+  background-color: #F1F1F1;
   color: #3358CC;
 }
 
 .emotion-1:disabled {
-  background-color: #F4F4F4;
-  color: #C0C0C0;
+  background-color: #E2E2E2;
+  color: #ABABAB;
 }
 
 .emotion-1:focus-visible:not(:disabled) {
@@ -3167,7 +3167,7 @@ exports[`AccordionGroup different type of children 1`] = `
   display: inline-block;
   vertical-align: middle;
   overflow: hidden;
-  fill: #2E2E2E;
+  fill: #3B3B3B;
   vertical-align: unset;
   display: inline-block;
 }
@@ -3196,7 +3196,7 @@ exports[`AccordionGroup different type of children 1`] = `
 .emotion-6 {
   display: block;
   border-style: none none solid none;
-  border-color: #CCCCCC;
+  border-color: #ABABAB;
   border-width: 1px;
   padding-inline: 12px;
   padding-block: 12px;
diff --git a/src/assistive-text/__tests__/__snapshots__/assistive-text.test.tsx.snap b/src/assistive-text/__tests__/__snapshots__/assistive-text.test.tsx.snap
index c719e580d7..047d2f0447 100644
--- a/src/assistive-text/__tests__/__snapshots__/assistive-text.test.tsx.snap
+++ b/src/assistive-text/__tests__/__snapshots__/assistive-text.test.tsx.snap
@@ -17,11 +17,11 @@ exports[`Assistive Text renders large AssistiveText 1`] = `
   -ms-flex-align: center;
   align-items: center;
   min-height: 12px;
-  color: #535353;
+  color: #6A6A6A;
 }
 
 .emotion-0:disabled {
-  color: #C0C0C0;
+  color: #ABABAB;
 }
 
 .emotion-1 {
@@ -29,7 +29,7 @@ exports[`Assistive Text renders large AssistiveText 1`] = `
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
-  color: #535353;
+  color: #6A6A6A;
   font-family: "DM Sans",sans-serif;
   font-size: 16px;
   line-height: 24px;
@@ -39,7 +39,7 @@ exports[`Assistive Text renders large AssistiveText 1`] = `
 }
 
 .emotion-1:disabled {
-  color: #C0C0C0;
+  color: #ABABAB;
 }
 
 .emotion-1::before {
@@ -83,11 +83,11 @@ exports[`Assistive Text renders medium AssistiveText 1`] = `
   -ms-flex-align: center;
   align-items: center;
   min-height: 12px;
-  color: #535353;
+  color: #6A6A6A;
 }
 
 .emotion-0:disabled {
-  color: #C0C0C0;
+  color: #ABABAB;
 }
 
 .emotion-1 {
@@ -95,7 +95,7 @@ exports[`Assistive Text renders medium AssistiveText 1`] = `
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
-  color: #535353;
+  color: #6A6A6A;
   font-family: "DM Sans",sans-serif;
   font-size: 14px;
   line-height: 21px;
@@ -105,7 +105,7 @@ exports[`Assistive Text renders medium AssistiveText 1`] = `
 }
 
 .emotion-1:disabled {
-  color: #C0C0C0;
+  color: #ABABAB;
 }
 
 .emotion-1::before {
@@ -149,11 +149,11 @@ exports[`Assistive Text renders small AssistiveText 1`] = `
   -ms-flex-align: center;
   align-items: center;
   min-height: 12px;
-  color: #535353;
+  color: #6A6A6A;
 }
 
 .emotion-0:disabled {
-  color: #C0C0C0;
+  color: #ABABAB;
 }
 
 .emotion-1 {
@@ -161,7 +161,7 @@ exports[`Assistive Text renders small AssistiveText 1`] = `
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
-  color: #535353;
+  color: #6A6A6A;
   font-family: "DM Sans",sans-serif;
   font-size: 12px;
   line-height: 18px;
@@ -171,7 +171,7 @@ exports[`Assistive Text renders small AssistiveText 1`] = `
 }
 
 .emotion-1:disabled {
-  color: #C0C0C0;
+  color: #ABABAB;
 }
 
 .emotion-1::before {
@@ -215,7 +215,7 @@ exports[`Assistive Text should render disabled Assistive Text 1`] = `
   -ms-flex-align: center;
   align-items: center;
   min-height: 12px;
-  color: #C0C0C0;
+  color: #ABABAB;
 }
 
 .emotion-1 {
@@ -223,7 +223,7 @@ exports[`Assistive Text should render disabled Assistive Text 1`] = `
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
-  color: #C0C0C0;
+  color: #ABABAB;
   font-family: "DM Sans",sans-serif;
   font-size: 14px;
   line-height: 21px;
@@ -274,7 +274,7 @@ exports[`Assistive Text should render invalid Assistive Text 1`] = `
   -ms-flex-align: center;
   align-items: center;
   min-height: 12px;
-  color: #D20600;
+  color: #D60000;
 }
 
 .emotion-1 {
@@ -282,7 +282,7 @@ exports[`Assistive Text should render invalid Assistive Text 1`] = `
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
-  color: #D20600;
+  color: #D60000;
   font-family: "DM Sans",sans-serif;
   font-size: 14px;
   line-height: 21px;
@@ -334,13 +334,13 @@ exports[`Assistive Text should render logical props overrides 1`] = `
   -ms-flex-align: center;
   align-items: center;
   min-height: 12px;
-  color: #535353;
+  color: #6A6A6A;
   margin-block: 30px;
   padding-block: 30px;
 }
 
 .emotion-0:disabled {
-  color: #C0C0C0;
+  color: #ABABAB;
 }
 
 .emotion-1 {
@@ -348,7 +348,7 @@ exports[`Assistive Text should render logical props overrides 1`] = `
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
-  color: #535353;
+  color: #6A6A6A;
   font-family: "DM Sans",sans-serif;
   font-size: 14px;
   line-height: 21px;
@@ -358,7 +358,7 @@ exports[`Assistive Text should render logical props overrides 1`] = `
 }
 
 .emotion-1:disabled {
-  color: #C0C0C0;
+  color: #ABABAB;
 }
 
 .emotion-1::before {
@@ -402,11 +402,11 @@ exports[`Assistive Text should render with enhancer 1`] = `
   -ms-flex-align: center;
   align-items: center;
   min-height: 12px;
-  color: #535353;
+  color: #6A6A6A;
 }
 
 .emotion-0:disabled {
-  color: #C0C0C0;
+  color: #ABABAB;
 }
 
 .emotion-1 {
@@ -432,7 +432,7 @@ exports[`Assistive Text should render with enhancer 1`] = `
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
-  color: #535353;
+  color: #6A6A6A;
   font-family: "DM Sans",sans-serif;
   font-size: 14px;
   line-height: 21px;
@@ -442,7 +442,7 @@ exports[`Assistive Text should render with enhancer 1`] = `
 }
 
 .emotion-2:disabled {
-  color: #C0C0C0;
+  color: #ABABAB;
 }
 
 .emotion-2::before {
diff --git a/src/audio-player-composable/__tests__/__snapshots__/audio-player-composable.test.tsx.snap b/src/audio-player-composable/__tests__/__snapshots__/audio-player-composable.test.tsx.snap
index 8853c56e0e..88b09aa021 100644
--- a/src/audio-player-composable/__tests__/__snapshots__/audio-player-composable.test.tsx.snap
+++ b/src/audio-player-composable/__tests__/__snapshots__/audio-player-composable.test.tsx.snap
@@ -45,20 +45,20 @@ exports[`Audio Player Composable Playback Speed should close modal on X click 1`
 }
 
 .emotion-0:hover:not(:disabled) {
-  background-color: #E0E7FF;
+  background-color: #ECF1FF;
 }
 
 .emotion-0:active:not(:disabled) {
-  background-color: #AEBFFF;
+  background-color: #D5E0FC;
 }
 
 .emotion-0:disabled {
   background-color: transparent;
-  color: #C0C0C0;
+  color: #ABABAB;
 }
 
 .emotion-0:disabled svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-0:focus-visible:not(:disabled) {
@@ -126,7 +126,7 @@ exports[`Audio Player Composable Playback Speed should close modal on X click 1`
   display: inline-block;
   vertical-align: middle;
   overflow: hidden;
-  fill: #2E2E2E;
+  fill: #3B3B3B;
   vertical-align: unset;
   display: inline-block;
 }
@@ -270,20 +270,20 @@ exports[`Audio Player Composable Playback Speed should render correctly in modal
 }
 
 .emotion-0:hover:not(:disabled) {
-  background-color: #E0E7FF;
+  background-color: #ECF1FF;
 }
 
 .emotion-0:active:not(:disabled) {
-  background-color: #AEBFFF;
+  background-color: #D5E0FC;
 }
 
 .emotion-0:disabled {
   background-color: transparent;
-  color: #C0C0C0;
+  color: #ABABAB;
 }
 
 .emotion-0:disabled svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-0:focus-visible:not(:disabled) {
@@ -351,7 +351,7 @@ exports[`Audio Player Composable Playback Speed should render correctly in modal
   display: inline-block;
   vertical-align: middle;
   overflow: hidden;
-  fill: #2E2E2E;
+  fill: #3B3B3B;
   vertical-align: unset;
   display: inline-block;
 }
@@ -426,7 +426,7 @@ exports[`Audio Player Composable Playback Speed should render correctly in modal
   bottom: 0;
   left: 0;
   cursor: pointer;
-  background-color: rgba(10,10,10,0.8);
+  background-color: rgba(0,0,0,0.8);
 }
 
 @media screen and (prefers-reduced-motion: no-preference) {
@@ -710,7 +710,7 @@ exports[`Audio Player Composable Playback Speed should render correctly in modal
 }
 
 .emotion-3 {
-  color: #2E2E2E;
+  color: #3B3B3B;
   grid-row-start: 1;
   grid-column-start: 1;
   grid-column-end: 3;
@@ -755,7 +755,7 @@ exports[`Audio Player Composable Playback Speed should render correctly in modal
   -ms-flex-align: center;
   align-items: center;
   background-color: transparent;
-  color: #2E2E2E;
+  color: #3B3B3B;
   text-overflow: ellipsis;
   border-radius: 0;
   border-style: solid;
@@ -774,43 +774,43 @@ exports[`Audio Player Composable Playback Speed should render correctly in modal
 }
 
 .emotion-7:hover:not(:disabled) {
-  background-color: #FAFAFA;
+  background-color: #F1F1F1;
 }
 
 .emotion-7:focus:not(:disabled) {
-  background-color: #FAFAFA;
+  background-color: #F1F1F1;
   border-color: #3358CC;
 }
 
 .emotion-7:active:not(:disabled) {
-  background-color: #E0E7FF;
+  background-color: #ECF1FF;
 }
 
 .emotion-7:disabled {
-  color: #C0C0C0;
+  color: #ABABAB;
 }
 
 .emotion-7:selected:hover:not(:disabled) {
-  background-color: #E0E7FF;
-  color: #0A0A0A;
+  background-color: #ECF1FF;
+  color: #111111;
 }
 
 .emotion-7:selected:focus:not(:disabled) {
-  background-color: #E0E7FF;
+  background-color: #ECF1FF;
   border-color: #3358CC;
 }
 
 .emotion-7:selected:active:not(:disabled) {
-  background-color: #E0E7FF;
+  background-color: #ECF1FF;
 }
 
 .emotion-7:selected:focus:active:not(:disabled) {
-  background-color: #E0E7FF;
+  background-color: #ECF1FF;
 }
 
 .emotion-7:selected:focus:hover:not(:disabled) {
-  background-color: #E0E7FF;
-  color: #0A0A0A;
+  background-color: #ECF1FF;
+  color: #111111;
 }
 
 .emotion-9 {
@@ -827,8 +827,8 @@ exports[`Audio Player Composable Playback Speed should render correctly in modal
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  background-color: #E0E7FF;
-  color: #2E2E2E;
+  background-color: #ECF1FF;
+  color: #3B3B3B;
   text-overflow: ellipsis;
   border-radius: 0;
   border-style: solid;
@@ -847,17 +847,17 @@ exports[`Audio Player Composable Playback Speed should render correctly in modal
 }
 
 .emotion-9:hover:not(:disabled) {
-  background-color: #E0E7FF;
-  color: #0A0A0A;
+  background-color: #ECF1FF;
+  color: #111111;
 }
 
 .emotion-9:focus:not(:disabled) {
-  background-color: #E0E7FF;
+  background-color: #ECF1FF;
   border-color: #3358CC;
 }
 
 .emotion-9:active:not(:disabled) {
-  background-color: #E0E7FF;
+  background-color: #ECF1FF;
 }
 
 .emotion-10 {
@@ -969,7 +969,7 @@ exports[`Audio Player Composable Playback Speed should render correctly in modal
   appearance: none;
   background-color: transparent;
   border-radius: 50%;
-  color: #2E2E2E;
+  color: #3B3B3B;
   margin: 0;
   cursor: pointer;
 }
@@ -980,24 +980,24 @@ exports[`Audio Player Composable Playback Speed should render correctly in modal
 }
 
 .emotion-16 svg {
-  fill: #2E2E2E;
+  fill: #3B3B3B;
 }
 
 .emotion-16:hover:not(:disabled) {
-  background-color: #FAFAFA;
+  background-color: #F1F1F1;
 }
 
 .emotion-16:active:not(:disabled) {
-  background-color: #F4F4F4;
+  background-color: #E2E2E2;
 }
 
 .emotion-16:disabled {
   background-color: transparent;
-  color: #C0C0C0;
+  color: #ABABAB;
 }
 
 .emotion-16:disabled svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-16:focus-visible:not(:disabled) {
@@ -1065,7 +1065,7 @@ exports[`Audio Player Composable Playback Speed should render correctly in modal
   display: inline-block;
   vertical-align: middle;
   overflow: hidden;
-  fill: #2E2E2E;
+  fill: #3B3B3B;
   vertical-align: unset;
   display: inline-block;
 }
@@ -1298,20 +1298,20 @@ exports[`Audio Player Composable Playback Speed should render correctly in popov
 }
 
 .emotion-0:hover:not(:disabled) {
-  background-color: #E0E7FF;
+  background-color: #ECF1FF;
 }
 
 .emotion-0:active:not(:disabled) {
-  background-color: #AEBFFF;
+  background-color: #D5E0FC;
 }
 
 .emotion-0:disabled {
   background-color: transparent;
-  color: #C0C0C0;
+  color: #ABABAB;
 }
 
 .emotion-0:disabled svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-0:focus-visible:not(:disabled) {
@@ -1379,7 +1379,7 @@ exports[`Audio Player Composable Playback Speed should render correctly in popov
   display: inline-block;
   vertical-align: middle;
   overflow: hidden;
-  fill: #2E2E2E;
+  fill: #3B3B3B;
   vertical-align: unset;
   display: inline-block;
 }
@@ -1478,7 +1478,7 @@ exports[`Audio Player Composable Playback Speed should render correctly in popov
 
 .emotion-6 {
   margin: 0;
-  color: #2E2E2E;
+  color: #262626;
   border-radius: 8px;
   background-color: #FFFFFF;
   overflow: hidden;
@@ -1534,7 +1534,7 @@ exports[`Audio Player Composable Playback Speed should render correctly in popov
   -ms-flex-align: center;
   align-items: center;
   background-color: transparent;
-  color: #2E2E2E;
+  color: #3B3B3B;
   text-overflow: ellipsis;
   border-radius: 0;
   border-style: solid;
@@ -1553,43 +1553,43 @@ exports[`Audio Player Composable Playback Speed should render correctly in popov
 }
 
 .emotion-11:hover:not(:disabled) {
-  background-color: #FAFAFA;
+  background-color: #F1F1F1;
 }
 
 .emotion-11:focus:not(:disabled) {
-  background-color: #FAFAFA;
+  background-color: #F1F1F1;
   border-color: #3358CC;
 }
 
 .emotion-11:active:not(:disabled) {
-  background-color: #E0E7FF;
+  background-color: #ECF1FF;
 }
 
 .emotion-11:disabled {
-  color: #C0C0C0;
+  color: #ABABAB;
 }
 
 .emotion-11:selected:hover:not(:disabled) {
-  background-color: #E0E7FF;
-  color: #0A0A0A;
+  background-color: #ECF1FF;
+  color: #111111;
 }
 
 .emotion-11:selected:focus:not(:disabled) {
-  background-color: #E0E7FF;
+  background-color: #ECF1FF;
   border-color: #3358CC;
 }
 
 .emotion-11:selected:active:not(:disabled) {
-  background-color: #E0E7FF;
+  background-color: #ECF1FF;
 }
 
 .emotion-11:selected:focus:active:not(:disabled) {
-  background-color: #E0E7FF;
+  background-color: #ECF1FF;
 }
 
 .emotion-11:selected:focus:hover:not(:disabled) {
-  background-color: #E0E7FF;
-  color: #0A0A0A;
+  background-color: #ECF1FF;
+  color: #111111;
 }
 
 .emotion-13 {
@@ -1606,8 +1606,8 @@ exports[`Audio Player Composable Playback Speed should render correctly in popov
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  background-color: #E0E7FF;
-  color: #2E2E2E;
+  background-color: #ECF1FF;
+  color: #3B3B3B;
   text-overflow: ellipsis;
   border-radius: 0;
   border-style: solid;
@@ -1626,17 +1626,17 @@ exports[`Audio Player Composable Playback Speed should render correctly in popov
 }
 
 .emotion-13:hover:not(:disabled) {
-  background-color: #E0E7FF;
-  color: #0A0A0A;
+  background-color: #ECF1FF;
+  color: #111111;
 }
 
 .emotion-13:focus:not(:disabled) {
-  background-color: #E0E7FF;
+  background-color: #ECF1FF;
   border-color: #3358CC;
 }
 
 .emotion-13:active:not(:disabled) {
-  background-color: #E0E7FF;
+  background-color: #ECF1FF;
 }
 
 .emotion-14 {
@@ -1957,7 +1957,7 @@ exports[`Audio Player Composable Playback Speed should render correctly with cus
 
 .emotion-1 {
   margin: 0;
-  color: #2E2E2E;
+  color: #262626;
   border-radius: 8px;
   background-color: #FFFFFF;
   overflow: hidden;
@@ -2013,7 +2013,7 @@ exports[`Audio Player Composable Playback Speed should render correctly with cus
   -ms-flex-align: center;
   align-items: center;
   background-color: transparent;
-  color: #2E2E2E;
+  color: #3B3B3B;
   text-overflow: ellipsis;
   border-radius: 0;
   border-style: solid;
@@ -2032,43 +2032,43 @@ exports[`Audio Player Composable Playback Speed should render correctly with cus
 }
 
 .emotion-6:hover:not(:disabled) {
-  background-color: #FAFAFA;
+  background-color: #F1F1F1;
 }
 
 .emotion-6:focus:not(:disabled) {
-  background-color: #FAFAFA;
+  background-color: #F1F1F1;
   border-color: #3358CC;
 }
 
 .emotion-6:active:not(:disabled) {
-  background-color: #E0E7FF;
+  background-color: #ECF1FF;
 }
 
 .emotion-6:disabled {
-  color: #C0C0C0;
+  color: #ABABAB;
 }
 
 .emotion-6:selected:hover:not(:disabled) {
-  background-color: #E0E7FF;
-  color: #0A0A0A;
+  background-color: #ECF1FF;
+  color: #111111;
 }
 
 .emotion-6:selected:focus:not(:disabled) {
-  background-color: #E0E7FF;
+  background-color: #ECF1FF;
   border-color: #3358CC;
 }
 
 .emotion-6:selected:active:not(:disabled) {
-  background-color: #E0E7FF;
+  background-color: #ECF1FF;
 }
 
 .emotion-6:selected:focus:active:not(:disabled) {
-  background-color: #E0E7FF;
+  background-color: #ECF1FF;
 }
 
 .emotion-6:selected:focus:hover:not(:disabled) {
-  background-color: #E0E7FF;
-  color: #0A0A0A;
+  background-color: #ECF1FF;
+  color: #111111;
 }
 
 .emotion-8 {
@@ -2085,8 +2085,8 @@ exports[`Audio Player Composable Playback Speed should render correctly with cus
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  background-color: #E0E7FF;
-  color: #2E2E2E;
+  background-color: #ECF1FF;
+  color: #3B3B3B;
   text-overflow: ellipsis;
   border-radius: 0;
   border-style: solid;
@@ -2105,17 +2105,17 @@ exports[`Audio Player Composable Playback Speed should render correctly with cus
 }
 
 .emotion-8:hover:not(:disabled) {
-  background-color: #E0E7FF;
-  color: #0A0A0A;
+  background-color: #ECF1FF;
+  color: #111111;
 }
 
 .emotion-8:focus:not(:disabled) {
-  background-color: #E0E7FF;
+  background-color: #ECF1FF;
   border-color: #3358CC;
 }
 
 .emotion-8:active:not(:disabled) {
-  background-color: #E0E7FF;
+  background-color: #ECF1FF;
 }
 
 .emotion-9 {
@@ -2418,7 +2418,7 @@ exports[`Audio Player Composable Playback Speed should render correctly with ove
   display: inline-block;
   vertical-align: middle;
   overflow: hidden;
-  fill: #2E2E2E;
+  fill: #3B3B3B;
   vertical-align: unset;
   display: inline-block;
 }
@@ -2517,7 +2517,7 @@ exports[`Audio Player Composable Playback Speed should render correctly with ove
 
 .emotion-6 {
   margin: 0;
-  color: #2E2E2E;
+  color: #262626;
   border-radius: 8px;
   background-color: #FFFFFF;
   overflow: hidden;
@@ -2573,7 +2573,7 @@ exports[`Audio Player Composable Playback Speed should render correctly with ove
   -ms-flex-align: center;
   align-items: center;
   background-color: transparent;
-  color: #2E2E2E;
+  color: #3B3B3B;
   text-overflow: ellipsis;
   border-radius: 0;
   border-style: solid;
@@ -2592,43 +2592,43 @@ exports[`Audio Player Composable Playback Speed should render correctly with ove
 }
 
 .emotion-11:hover:not(:disabled) {
-  background-color: #FAFAFA;
+  background-color: #F1F1F1;
 }
 
 .emotion-11:focus:not(:disabled) {
-  background-color: #FAFAFA;
+  background-color: #F1F1F1;
   border-color: #3358CC;
 }
 
 .emotion-11:active:not(:disabled) {
-  background-color: #E0E7FF;
+  background-color: #ECF1FF;
 }
 
 .emotion-11:disabled {
-  color: #C0C0C0;
+  color: #ABABAB;
 }
 
 .emotion-11:selected:hover:not(:disabled) {
-  background-color: #E0E7FF;
-  color: #0A0A0A;
+  background-color: #ECF1FF;
+  color: #111111;
 }
 
 .emotion-11:selected:focus:not(:disabled) {
-  background-color: #E0E7FF;
+  background-color: #ECF1FF;
   border-color: #3358CC;
 }
 
 .emotion-11:selected:active:not(:disabled) {
-  background-color: #E0E7FF;
+  background-color: #ECF1FF;
 }
 
 .emotion-11:selected:focus:active:not(:disabled) {
-  background-color: #E0E7FF;
+  background-color: #ECF1FF;
 }
 
 .emotion-11:selected:focus:hover:not(:disabled) {
-  background-color: #E0E7FF;
-  color: #0A0A0A;
+  background-color: #ECF1FF;
+  color: #111111;
 }
 
 .emotion-13 {
@@ -2645,8 +2645,8 @@ exports[`Audio Player Composable Playback Speed should render correctly with ove
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  background-color: #E0E7FF;
-  color: #2E2E2E;
+  background-color: #ECF1FF;
+  color: #3B3B3B;
   text-overflow: ellipsis;
   border-radius: 0;
   border-style: solid;
@@ -2665,17 +2665,17 @@ exports[`Audio Player Composable Playback Speed should render correctly with ove
 }
 
 .emotion-13:hover:not(:disabled) {
-  background-color: #E0E7FF;
-  color: #0A0A0A;
+  background-color: #ECF1FF;
+  color: #111111;
 }
 
 .emotion-13:focus:not(:disabled) {
-  background-color: #E0E7FF;
+  background-color: #ECF1FF;
   border-color: #3358CC;
 }
 
 .emotion-13:active:not(:disabled) {
-  background-color: #E0E7FF;
+  background-color: #ECF1FF;
 }
 
 .emotion-14 {
@@ -2978,20 +2978,20 @@ exports[`Audio Player Composable VolumeControl renders horizontal expanded by de
 }
 
 .emotion-2:hover:not(:disabled) {
-  background-color: #E0E7FF;
+  background-color: #ECF1FF;
 }
 
 .emotion-2:active:not(:disabled) {
-  background-color: #AEBFFF;
+  background-color: #D5E0FC;
 }
 
 .emotion-2:disabled {
   background-color: transparent;
-  color: #C0C0C0;
+  color: #ABABAB;
 }
 
 .emotion-2:disabled svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-2:focus-visible:not(:disabled) {
@@ -3059,7 +3059,7 @@ exports[`Audio Player Composable VolumeControl renders horizontal expanded by de
   display: inline-block;
   vertical-align: middle;
   overflow: hidden;
-  fill: #2E2E2E;
+  fill: #3B3B3B;
   vertical-align: unset;
   display: inline-block;
 }
@@ -3124,7 +3124,7 @@ exports[`Audio Player Composable VolumeControl renders horizontal expanded by de
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  background-color: #F4F4F4;
+  background-color: #E2E2E2;
   border-radius: 20rem;
   margin: calc(16px/2 - 4px/2) calc(16px/2);
   height: 4px;
@@ -3135,7 +3135,7 @@ exports[`Audio Player Composable VolumeControl renders horizontal expanded by de
   box-shadow: 0 0 2px 0 rgba(10,10,10,0.08);
   background-color: #3358CC;
   border-style: solid;
-  border-color: #E0E7FF;
+  border-color: #ECF1FF;
   border-width: 1px;
   border-radius: 50%;
   height: 16px;
@@ -3153,23 +3153,23 @@ exports[`Audio Player Composable VolumeControl renders horizontal expanded by de
 }
 
 .emotion-11 svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-11:hover:not(:disabled) {
-  background-color: #2B4AAB;
+  background-color: #254CAC;
 }
 
 .emotion-11:hover:not(:disabled) svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-11:active:not(:disabled) {
-  background-color: #213A82;
+  background-color: #14328D;
 }
 
 .emotion-11:active:not(:disabled) svg {
-  fill: #535353;
+  fill: #6A6A6A;
 }
 
 .emotion-11:focus-visible:not(:disabled) {
@@ -3216,22 +3216,22 @@ exports[`Audio Player Composable VolumeControl renders horizontal expanded by de
 }
 
 .emotion-12:valid:hover:not(:disabled) {
-  background-color: #148F39;
+  background-color: #00601A;
   opacity: 0.2;
 }
 
 .emotion-12:valid:hover:active:not(:disabled) {
-  background-color: #148F39;
+  background-color: #00601A;
   opacity: 0.4;
 }
 
 .emotion-12:invalid:hover:not(:disabled) {
-  background-color: #D20600;
+  background-color: #A90000;
   opacity: 0.2;
 }
 
 .emotion-12:invalid:hover:active:not(:disabled) {
-  background-color: #D20600;
+  background-color: #A90000;
   opacity: 0.4;
 }
 
@@ -3423,20 +3423,20 @@ exports[`Audio Player Composable VolumeControl renders horizontally with layout
 }
 
 .emotion-2:hover:not(:disabled) {
-  background-color: #E0E7FF;
+  background-color: #ECF1FF;
 }
 
 .emotion-2:active:not(:disabled) {
-  background-color: #AEBFFF;
+  background-color: #D5E0FC;
 }
 
 .emotion-2:disabled {
   background-color: transparent;
-  color: #C0C0C0;
+  color: #ABABAB;
 }
 
 .emotion-2:disabled svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-2:focus-visible:not(:disabled) {
@@ -3504,7 +3504,7 @@ exports[`Audio Player Composable VolumeControl renders horizontally with layout
   display: inline-block;
   vertical-align: middle;
   overflow: hidden;
-  fill: #2E2E2E;
+  fill: #3B3B3B;
   vertical-align: unset;
   display: inline-block;
 }
@@ -3615,7 +3615,7 @@ exports[`Audio Player Composable VolumeControl renders horizontally with layout
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  background-color: #F4F4F4;
+  background-color: #E2E2E2;
   border-radius: 20rem;
   margin: calc(16px/2 - 4px/2) calc(16px/2);
   height: 4px;
@@ -3626,7 +3626,7 @@ exports[`Audio Player Composable VolumeControl renders horizontally with layout
   box-shadow: 0 0 2px 0 rgba(10,10,10,0.08);
   background-color: #3358CC;
   border-style: solid;
-  border-color: #E0E7FF;
+  border-color: #ECF1FF;
   border-width: 1px;
   border-radius: 50%;
   height: 16px;
@@ -3644,23 +3644,23 @@ exports[`Audio Player Composable VolumeControl renders horizontally with layout
 }
 
 .emotion-11 svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-11:hover:not(:disabled) {
-  background-color: #2B4AAB;
+  background-color: #254CAC;
 }
 
 .emotion-11:hover:not(:disabled) svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-11:active:not(:disabled) {
-  background-color: #213A82;
+  background-color: #14328D;
 }
 
 .emotion-11:active:not(:disabled) svg {
-  fill: #535353;
+  fill: #6A6A6A;
 }
 
 .emotion-11:focus-visible:not(:disabled) {
@@ -3707,22 +3707,22 @@ exports[`Audio Player Composable VolumeControl renders horizontally with layout
 }
 
 .emotion-12:valid:hover:not(:disabled) {
-  background-color: #148F39;
+  background-color: #00601A;
   opacity: 0.2;
 }
 
 .emotion-12:valid:hover:active:not(:disabled) {
-  background-color: #148F39;
+  background-color: #00601A;
   opacity: 0.4;
 }
 
 .emotion-12:invalid:hover:not(:disabled) {
-  background-color: #D20600;
+  background-color: #A90000;
   opacity: 0.2;
 }
 
 .emotion-12:invalid:hover:active:not(:disabled) {
-  background-color: #D20600;
+  background-color: #A90000;
   opacity: 0.4;
 }
 
@@ -3914,20 +3914,20 @@ exports[`Audio Player Composable VolumeControl should hover on volume control: w
 }
 
 .emotion-2:hover:not(:disabled) {
-  background-color: #E0E7FF;
+  background-color: #ECF1FF;
 }
 
 .emotion-2:active:not(:disabled) {
-  background-color: #AEBFFF;
+  background-color: #D5E0FC;
 }
 
 .emotion-2:disabled {
   background-color: transparent;
-  color: #C0C0C0;
+  color: #ABABAB;
 }
 
 .emotion-2:disabled svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-2:focus-visible:not(:disabled) {
@@ -3995,7 +3995,7 @@ exports[`Audio Player Composable VolumeControl should hover on volume control: w
   display: inline-block;
   vertical-align: middle;
   overflow: hidden;
-  fill: #2E2E2E;
+  fill: #3B3B3B;
   vertical-align: unset;
   display: inline-block;
 }
@@ -4105,7 +4105,7 @@ exports[`Audio Player Composable VolumeControl should hover on volume control: w
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  background-color: #F4F4F4;
+  background-color: #E2E2E2;
   border-radius: 20rem;
   margin: calc(16px/2 - 4px/2) calc(16px/2);
   height: 4px;
@@ -4116,7 +4116,7 @@ exports[`Audio Player Composable VolumeControl should hover on volume control: w
   box-shadow: 0 0 2px 0 rgba(10,10,10,0.08);
   background-color: #3358CC;
   border-style: solid;
-  border-color: #E0E7FF;
+  border-color: #ECF1FF;
   border-width: 1px;
   border-radius: 50%;
   height: 16px;
@@ -4134,23 +4134,23 @@ exports[`Audio Player Composable VolumeControl should hover on volume control: w
 }
 
 .emotion-11 svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-11:hover:not(:disabled) {
-  background-color: #2B4AAB;
+  background-color: #254CAC;
 }
 
 .emotion-11:hover:not(:disabled) svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-11:active:not(:disabled) {
-  background-color: #213A82;
+  background-color: #14328D;
 }
 
 .emotion-11:active:not(:disabled) svg {
-  fill: #535353;
+  fill: #6A6A6A;
 }
 
 .emotion-11:focus-visible:not(:disabled) {
@@ -4197,22 +4197,22 @@ exports[`Audio Player Composable VolumeControl should hover on volume control: w
 }
 
 .emotion-12:valid:hover:not(:disabled) {
-  background-color: #148F39;
+  background-color: #00601A;
   opacity: 0.2;
 }
 
 .emotion-12:valid:hover:active:not(:disabled) {
-  background-color: #148F39;
+  background-color: #00601A;
   opacity: 0.4;
 }
 
 .emotion-12:invalid:hover:not(:disabled) {
-  background-color: #D20600;
+  background-color: #A90000;
   opacity: 0.2;
 }
 
 .emotion-12:invalid:hover:active:not(:disabled) {
-  background-color: #D20600;
+  background-color: #A90000;
   opacity: 0.4;
 }
 
@@ -4405,20 +4405,20 @@ exports[`Audio Player Composable VolumeControl should hover on volume control: w
 }
 
 .emotion-2:hover:not(:disabled) {
-  background-color: #E0E7FF;
+  background-color: #ECF1FF;
 }
 
 .emotion-2:active:not(:disabled) {
-  background-color: #AEBFFF;
+  background-color: #D5E0FC;
 }
 
 .emotion-2:disabled {
   background-color: transparent;
-  color: #C0C0C0;
+  color: #ABABAB;
 }
 
 .emotion-2:disabled svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-2:focus-visible:not(:disabled) {
@@ -4486,7 +4486,7 @@ exports[`Audio Player Composable VolumeControl should hover on volume control: w
   display: inline-block;
   vertical-align: middle;
   overflow: hidden;
-  fill: #2E2E2E;
+  fill: #3B3B3B;
   vertical-align: unset;
   display: inline-block;
 }
@@ -4597,7 +4597,7 @@ exports[`Audio Player Composable VolumeControl should hover on volume control: w
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  background-color: #F4F4F4;
+  background-color: #E2E2E2;
   border-radius: 20rem;
   margin: calc(16px/2 - 4px/2) calc(16px/2);
   height: 4px;
@@ -4608,7 +4608,7 @@ exports[`Audio Player Composable VolumeControl should hover on volume control: w
   box-shadow: 0 0 2px 0 rgba(10,10,10,0.08);
   background-color: #3358CC;
   border-style: solid;
-  border-color: #E0E7FF;
+  border-color: #ECF1FF;
   border-width: 1px;
   border-radius: 50%;
   height: 16px;
@@ -4626,23 +4626,23 @@ exports[`Audio Player Composable VolumeControl should hover on volume control: w
 }
 
 .emotion-11 svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-11:hover:not(:disabled) {
-  background-color: #2B4AAB;
+  background-color: #254CAC;
 }
 
 .emotion-11:hover:not(:disabled) svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-11:active:not(:disabled) {
-  background-color: #213A82;
+  background-color: #14328D;
 }
 
 .emotion-11:active:not(:disabled) svg {
-  fill: #535353;
+  fill: #6A6A6A;
 }
 
 .emotion-11:focus-visible:not(:disabled) {
@@ -4689,22 +4689,22 @@ exports[`Audio Player Composable VolumeControl should hover on volume control: w
 }
 
 .emotion-12:valid:hover:not(:disabled) {
-  background-color: #148F39;
+  background-color: #00601A;
   opacity: 0.2;
 }
 
 .emotion-12:valid:hover:active:not(:disabled) {
-  background-color: #148F39;
+  background-color: #00601A;
   opacity: 0.4;
 }
 
 .emotion-12:invalid:hover:not(:disabled) {
-  background-color: #D20600;
+  background-color: #A90000;
   opacity: 0.2;
 }
 
 .emotion-12:invalid:hover:active:not(:disabled) {
-  background-color: #D20600;
+  background-color: #A90000;
   opacity: 0.4;
 }
 
@@ -4896,20 +4896,20 @@ exports[`Audio Player Composable VolumeControl should on Focus & onBlur on volum
 }
 
 .emotion-2:hover:not(:disabled) {
-  background-color: #E0E7FF;
+  background-color: #ECF1FF;
 }
 
 .emotion-2:active:not(:disabled) {
-  background-color: #AEBFFF;
+  background-color: #D5E0FC;
 }
 
 .emotion-2:disabled {
   background-color: transparent;
-  color: #C0C0C0;
+  color: #ABABAB;
 }
 
 .emotion-2:disabled svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-2:focus-visible:not(:disabled) {
@@ -4977,7 +4977,7 @@ exports[`Audio Player Composable VolumeControl should on Focus & onBlur on volum
   display: inline-block;
   vertical-align: middle;
   overflow: hidden;
-  fill: #2E2E2E;
+  fill: #3B3B3B;
   vertical-align: unset;
   display: inline-block;
 }
@@ -5088,7 +5088,7 @@ exports[`Audio Player Composable VolumeControl should on Focus & onBlur on volum
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  background-color: #F4F4F4;
+  background-color: #E2E2E2;
   border-radius: 20rem;
   margin: calc(16px/2 - 4px/2) calc(16px/2);
   height: 4px;
@@ -5099,7 +5099,7 @@ exports[`Audio Player Composable VolumeControl should on Focus & onBlur on volum
   box-shadow: 0 0 2px 0 rgba(10,10,10,0.08);
   background-color: #3358CC;
   border-style: solid;
-  border-color: #E0E7FF;
+  border-color: #ECF1FF;
   border-width: 1px;
   border-radius: 50%;
   height: 16px;
@@ -5117,23 +5117,23 @@ exports[`Audio Player Composable VolumeControl should on Focus & onBlur on volum
 }
 
 .emotion-11 svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-11:hover:not(:disabled) {
-  background-color: #2B4AAB;
+  background-color: #254CAC;
 }
 
 .emotion-11:hover:not(:disabled) svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-11:active:not(:disabled) {
-  background-color: #213A82;
+  background-color: #14328D;
 }
 
 .emotion-11:active:not(:disabled) svg {
-  fill: #535353;
+  fill: #6A6A6A;
 }
 
 .emotion-11:focus-visible:not(:disabled) {
@@ -5180,22 +5180,22 @@ exports[`Audio Player Composable VolumeControl should on Focus & onBlur on volum
 }
 
 .emotion-12:valid:hover:not(:disabled) {
-  background-color: #148F39;
+  background-color: #00601A;
   opacity: 0.2;
 }
 
 .emotion-12:valid:hover:active:not(:disabled) {
-  background-color: #148F39;
+  background-color: #00601A;
   opacity: 0.4;
 }
 
 .emotion-12:invalid:hover:not(:disabled) {
-  background-color: #D20600;
+  background-color: #A90000;
   opacity: 0.2;
 }
 
 .emotion-12:invalid:hover:active:not(:disabled) {
-  background-color: #D20600;
+  background-color: #A90000;
   opacity: 0.4;
 }
 
@@ -5387,20 +5387,20 @@ exports[`Audio Player Composable VolumeControl should on Focus & onBlur on volum
 }
 
 .emotion-2:hover:not(:disabled) {
-  background-color: #E0E7FF;
+  background-color: #ECF1FF;
 }
 
 .emotion-2:active:not(:disabled) {
-  background-color: #AEBFFF;
+  background-color: #D5E0FC;
 }
 
 .emotion-2:disabled {
   background-color: transparent;
-  color: #C0C0C0;
+  color: #ABABAB;
 }
 
 .emotion-2:disabled svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-2:focus-visible:not(:disabled) {
@@ -5468,7 +5468,7 @@ exports[`Audio Player Composable VolumeControl should on Focus & onBlur on volum
   display: inline-block;
   vertical-align: middle;
   overflow: hidden;
-  fill: #2E2E2E;
+  fill: #3B3B3B;
   vertical-align: unset;
   display: inline-block;
 }
@@ -5578,7 +5578,7 @@ exports[`Audio Player Composable VolumeControl should on Focus & onBlur on volum
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  background-color: #F4F4F4;
+  background-color: #E2E2E2;
   border-radius: 20rem;
   margin: calc(16px/2 - 4px/2) calc(16px/2);
   height: 4px;
@@ -5589,7 +5589,7 @@ exports[`Audio Player Composable VolumeControl should on Focus & onBlur on volum
   box-shadow: 0 0 2px 0 rgba(10,10,10,0.08);
   background-color: #3358CC;
   border-style: solid;
-  border-color: #E0E7FF;
+  border-color: #ECF1FF;
   border-width: 1px;
   border-radius: 50%;
   height: 16px;
@@ -5607,23 +5607,23 @@ exports[`Audio Player Composable VolumeControl should on Focus & onBlur on volum
 }
 
 .emotion-11 svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-11:hover:not(:disabled) {
-  background-color: #2B4AAB;
+  background-color: #254CAC;
 }
 
 .emotion-11:hover:not(:disabled) svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-11:active:not(:disabled) {
-  background-color: #213A82;
+  background-color: #14328D;
 }
 
 .emotion-11:active:not(:disabled) svg {
-  fill: #535353;
+  fill: #6A6A6A;
 }
 
 .emotion-11:focus-visible:not(:disabled) {
@@ -5670,22 +5670,22 @@ exports[`Audio Player Composable VolumeControl should on Focus & onBlur on volum
 }
 
 .emotion-12:valid:hover:not(:disabled) {
-  background-color: #148F39;
+  background-color: #00601A;
   opacity: 0.2;
 }
 
 .emotion-12:valid:hover:active:not(:disabled) {
-  background-color: #148F39;
+  background-color: #00601A;
   opacity: 0.4;
 }
 
 .emotion-12:invalid:hover:not(:disabled) {
-  background-color: #D20600;
+  background-color: #A90000;
   opacity: 0.2;
 }
 
 .emotion-12:invalid:hover:active:not(:disabled) {
-  background-color: #D20600;
+  background-color: #A90000;
   opacity: 0.4;
 }
 
@@ -5878,20 +5878,20 @@ exports[`Audio Player Composable VolumeControl should render correctly with coll
 }
 
 .emotion-2:hover:not(:disabled) {
-  background-color: #E0E7FF;
+  background-color: #ECF1FF;
 }
 
 .emotion-2:active:not(:disabled) {
-  background-color: #AEBFFF;
+  background-color: #D5E0FC;
 }
 
 .emotion-2:disabled {
   background-color: transparent;
-  color: #C0C0C0;
+  color: #ABABAB;
 }
 
 .emotion-2:disabled svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-2:focus-visible:not(:disabled) {
@@ -5959,7 +5959,7 @@ exports[`Audio Player Composable VolumeControl should render correctly with coll
   display: inline-block;
   vertical-align: middle;
   overflow: hidden;
-  fill: #2E2E2E;
+  fill: #3B3B3B;
   vertical-align: unset;
   display: inline-block;
 }
@@ -6093,20 +6093,20 @@ exports[`Audio Player Composable VolumeControl should render correctly with over
 }
 
 .emotion-2:hover:not(:disabled) {
-  background-color: #E0E7FF;
+  background-color: #ECF1FF;
 }
 
 .emotion-2:active:not(:disabled) {
-  background-color: #AEBFFF;
+  background-color: #D5E0FC;
 }
 
 .emotion-2:disabled {
   background-color: transparent;
-  color: #C0C0C0;
+  color: #ABABAB;
 }
 
 .emotion-2:disabled svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-2:focus-visible:not(:disabled) {
@@ -6174,7 +6174,7 @@ exports[`Audio Player Composable VolumeControl should render correctly with over
   display: inline-block;
   vertical-align: middle;
   overflow: hidden;
-  fill: #2E2E2E;
+  fill: #3B3B3B;
   vertical-align: unset;
   display: inline-block;
 }
@@ -6269,7 +6269,7 @@ exports[`Audio Player Composable VolumeControl should render correctly with over
   position: absolute;
   top: 50%;
   left: 50%;
-  background-color: #EF1703;
+  background-color: #D60000;
   border-radius: 50%;
   opacity: 0;
   width: 40px;
@@ -6468,20 +6468,20 @@ exports[`Audio Player Composable VolumeControl should render correctly with vert
 }
 
 .emotion-2:hover:not(:disabled) {
-  background-color: #E0E7FF;
+  background-color: #ECF1FF;
 }
 
 .emotion-2:active:not(:disabled) {
-  background-color: #AEBFFF;
+  background-color: #D5E0FC;
 }
 
 .emotion-2:disabled {
   background-color: transparent;
-  color: #C0C0C0;
+  color: #ABABAB;
 }
 
 .emotion-2:disabled svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-2:focus-visible:not(:disabled) {
@@ -6549,7 +6549,7 @@ exports[`Audio Player Composable VolumeControl should render correctly with vert
   display: inline-block;
   vertical-align: middle;
   overflow: hidden;
-  fill: #2E2E2E;
+  fill: #3B3B3B;
   vertical-align: unset;
   display: inline-block;
 }
@@ -6648,7 +6648,7 @@ exports[`Audio Player Composable renders with TimeDisplay label overrides 1`] =
   -moz-appearance: none;
   -ms-appearance: none;
   appearance: none;
-  background-color: #AEBFFF;
+  background-color: #D5E0FC;
   border-radius: 50%;
   color: #3358CC;
   margin: 0;
@@ -6829,7 +6829,7 @@ exports[`Audio Player Composable seekBar should renders and behaves as expected
   cursor: -webkit-grabbing;
   cursor: grabbing;
   box-sizing: border-box;
-  background-color: #FAFAFA;
+  background-color: #F1F1F1;
   border-radius: 20rem;
   margin: calc(16px/2 - 8px/2) calc(16px/2);
   height: 8px;
@@ -6859,19 +6859,19 @@ exports[`Audio Player Composable seekBar should renders and behaves as expected
 }
 
 .emotion-2 svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-2:hover:not(:disabled) {
-  background-color: #2B4AAB;
+  background-color: #254CAC;
 }
 
 .emotion-2:active:not(:disabled) {
-  background-color: #213A82;
+  background-color: #14328D;
 }
 
 .emotion-2:active:not(:disabled) svg {
-  fill: #535353;
+  fill: #6A6A6A;
 }
 
 .emotion-2:focus-visible:not(:disabled) {
@@ -6918,22 +6918,22 @@ exports[`Audio Player Composable seekBar should renders and behaves as expected
 }
 
 .emotion-3:valid:hover:not(:disabled) {
-  background-color: #148F39;
+  background-color: #00601A;
   opacity: 0.2;
 }
 
 .emotion-3:valid:hover:active:not(:disabled) {
-  background-color: #148F39;
+  background-color: #00601A;
   opacity: 0.4;
 }
 
 .emotion-3:invalid:hover:not(:disabled) {
-  background-color: #D20600;
+  background-color: #A90000;
   opacity: 0.2;
 }
 
 .emotion-3:invalid:hover:active:not(:disabled) {
-  background-color: #D20600;
+  background-color: #A90000;
   opacity: 0.4;
 }
 
@@ -7008,20 +7008,20 @@ exports[`Audio Player Composable seekBar should renders and behaves as expected
 }
 
 .emotion-5:hover:not(:disabled) {
-  background-color: #2B4AAB;
+  background-color: #254CAC;
 }
 
 .emotion-5:active:not(:disabled) {
-  background-color: #213A82;
+  background-color: #14328D;
 }
 
 .emotion-5:disabled {
-  background-color: #F4F4F4;
-  color: #C0C0C0;
+  background-color: #E2E2E2;
+  color: #ABABAB;
 }
 
 .emotion-5:disabled svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-5:focus-visible:not(:disabled) {
@@ -7089,7 +7089,7 @@ exports[`Audio Player Composable seekBar should renders and behaves as expected
   display: inline-block;
   vertical-align: middle;
   overflow: hidden;
-  fill: #2E2E2E;
+  fill: #3B3B3B;
   vertical-align: unset;
   display: inline-block;
 }
@@ -7115,7 +7115,7 @@ exports[`Audio Player Composable seekBar should renders and behaves as expected
   display: inline-block;
   display: block;
   background-color: transparent;
-  color: #2E2E2E;
+  color: #3B3B3B;
   font-family: "Poppins",sans-serif;
   font-size: 16px;
   line-height: 1.5;
@@ -7166,20 +7166,20 @@ exports[`Audio Player Composable seekBar should renders and behaves as expected
 }
 
 .emotion-11:hover:not(:disabled) {
-  background-color: #2B4AAB;
+  background-color: #254CAC;
 }
 
 .emotion-11:active:not(:disabled) {
-  background-color: #213A82;
+  background-color: #14328D;
 }
 
 .emotion-11:disabled {
-  background-color: #F4F4F4;
-  color: #C0C0C0;
+  background-color: #E2E2E2;
+  color: #ABABAB;
 }
 
 .emotion-11:disabled svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-11:focus-visible:not(:disabled) {
@@ -7296,20 +7296,20 @@ exports[`Audio Player Composable seekBar should renders and behaves as expected
 }
 
 .emotion-17:hover:not(:disabled) {
-  background-color: #E0E7FF;
+  background-color: #ECF1FF;
 }
 
 .emotion-17:active:not(:disabled) {
-  background-color: #AEBFFF;
+  background-color: #D5E0FC;
 }
 
 .emotion-17:disabled {
   background-color: transparent;
-  color: #C0C0C0;
+  color: #ABABAB;
 }
 
 .emotion-17:disabled svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-17:focus-visible:not(:disabled) {
@@ -7362,7 +7362,7 @@ exports[`Audio Player Composable seekBar should renders and behaves as expected
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  background-color: #F4F4F4;
+  background-color: #E2E2E2;
   border-radius: 20rem;
   margin: calc(16px/2 - 4px/2) calc(16px/2);
   height: 4px;
@@ -7373,7 +7373,7 @@ exports[`Audio Player Composable seekBar should renders and behaves as expected
   box-shadow: 0 0 2px 0 rgba(10,10,10,0.08);
   background-color: #3358CC;
   border-style: solid;
-  border-color: #E0E7FF;
+  border-color: #ECF1FF;
   border-width: 1px;
   border-radius: 50%;
   height: 16px;
@@ -7391,23 +7391,23 @@ exports[`Audio Player Composable seekBar should renders and behaves as expected
 }
 
 .emotion-26 svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-26:hover:not(:disabled) {
-  background-color: #2B4AAB;
+  background-color: #254CAC;
 }
 
 .emotion-26:hover:not(:disabled) svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-26:active:not(:disabled) {
-  background-color: #213A82;
+  background-color: #14328D;
 }
 
 .emotion-26:active:not(:disabled) svg {
-  fill: #535353;
+  fill: #6A6A6A;
 }
 
 .emotion-26:focus-visible:not(:disabled) {
@@ -7427,7 +7427,7 @@ exports[`Audio Player Composable seekBar should renders and behaves as expected
 }
 
 .emotion-42 {
-  fill: #2E2E2E;
+  fill: #3B3B3B;
   vertical-align: unset;
   display: inline-block;
 }
@@ -7785,19 +7785,19 @@ exports[`Audio Player Composable seekBar should renders and behaves as expected
 }
 
 .emotion-0 svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-0:hover:not(:disabled) {
-  background-color: #2B4AAB;
+  background-color: #254CAC;
 }
 
 .emotion-0:active:not(:disabled) {
-  background-color: #213A82;
+  background-color: #14328D;
 }
 
 .emotion-0:active:not(:disabled) svg {
-  fill: #535353;
+  fill: #6A6A6A;
 }
 
 .emotion-0:focus-visible:not(:disabled) {
@@ -7844,22 +7844,22 @@ exports[`Audio Player Composable seekBar should renders and behaves as expected
 }
 
 .emotion-1:valid:hover:not(:disabled) {
-  background-color: #148F39;
+  background-color: #00601A;
   opacity: 0.2;
 }
 
 .emotion-1:valid:hover:active:not(:disabled) {
-  background-color: #148F39;
+  background-color: #00601A;
   opacity: 0.4;
 }
 
 .emotion-1:invalid:hover:not(:disabled) {
-  background-color: #D20600;
+  background-color: #A90000;
   opacity: 0.2;
 }
 
 .emotion-1:invalid:hover:active:not(:disabled) {
-  background-color: #D20600;
+  background-color: #A90000;
   opacity: 0.4;
 }
 
@@ -7987,22 +7987,22 @@ exports[`Audio Player Composable seekBar should renders with overrides 1`] = `
 }
 
 .emotion-3:valid:hover:not(:disabled) {
-  background-color: #148F39;
+  background-color: #00601A;
   opacity: 0.2;
 }
 
 .emotion-3:valid:hover:active:not(:disabled) {
-  background-color: #148F39;
+  background-color: #00601A;
   opacity: 0.4;
 }
 
 .emotion-3:invalid:hover:not(:disabled) {
-  background-color: #D20600;
+  background-color: #A90000;
   opacity: 0.2;
 }
 
 .emotion-3:invalid:hover:active:not(:disabled) {
-  background-color: #D20600;
+  background-color: #A90000;
   opacity: 0.4;
 }
 
@@ -8060,7 +8060,7 @@ exports[`Audio Player Composable seekBar should renders with overrides 1`] = `
   -moz-appearance: none;
   -ms-appearance: none;
   appearance: none;
-  background-color: #AEBFFF;
+  background-color: #D5E0FC;
   border-radius: 50%;
   color: #3358CC;
   margin: 0;
@@ -8151,7 +8151,7 @@ exports[`Audio Player Composable seekBar should renders with overrides 1`] = `
   display: inline-block;
   display: block;
   background-color: transparent;
-  color: #2E2E2E;
+  color: #3B3B3B;
   font-family: "Poppins",sans-serif;
   font-size: 16px;
   line-height: 1.5;
@@ -8273,7 +8273,7 @@ exports[`Audio Player Composable should phasing playPause button loading state a
   -moz-appearance: none;
   -ms-appearance: none;
   appearance: none;
-  background-color: #AEBFFF;
+  background-color: #D5E0FC;
   border-radius: 50%;
   color: #3358CC;
   margin: 0;
@@ -8435,20 +8435,20 @@ exports[`Audio Player Composable should phasing playPause button loading state a
 }
 
 .emotion-0:hover:not(:disabled) {
-  background-color: #2B4AAB;
+  background-color: #254CAC;
 }
 
 .emotion-0:active:not(:disabled) {
-  background-color: #213A82;
+  background-color: #14328D;
 }
 
 .emotion-0:disabled {
-  background-color: #F4F4F4;
-  color: #C0C0C0;
+  background-color: #E2E2E2;
+  color: #ABABAB;
 }
 
 .emotion-0:disabled svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-0:focus-visible:not(:disabled) {
@@ -8516,7 +8516,7 @@ exports[`Audio Player Composable should phasing playPause button loading state a
   display: inline-block;
   vertical-align: middle;
   overflow: hidden;
-  fill: #2E2E2E;
+  fill: #3B3B3B;
   vertical-align: unset;
   display: inline-block;
 }
@@ -8598,7 +8598,7 @@ exports[`Audio Player Composable should phasing playPause button loading state a
   -moz-appearance: none;
   -ms-appearance: none;
   appearance: none;
-  background-color: #AEBFFF;
+  background-color: #D5E0FC;
   border-radius: 50%;
   color: #3358CC;
   margin: 0;
@@ -8750,7 +8750,7 @@ exports[`Audio Player Composable should render correctly when in autoplay 1`] =
   display: flex;
   cursor: pointer;
   box-sizing: border-box;
-  background-color: #FAFAFA;
+  background-color: #F1F1F1;
   border-radius: 20rem;
   margin: calc(16px/2 - 8px/2) calc(16px/2);
   height: 8px;
@@ -8779,19 +8779,19 @@ exports[`Audio Player Composable should render correctly when in autoplay 1`] =
 }
 
 .emotion-2 svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-2:hover:not(:disabled) {
-  background-color: #2B4AAB;
+  background-color: #254CAC;
 }
 
 .emotion-2:active:not(:disabled) {
-  background-color: #213A82;
+  background-color: #14328D;
 }
 
 .emotion-2:active:not(:disabled) svg {
-  fill: #535353;
+  fill: #6A6A6A;
 }
 
 .emotion-2:focus-visible:not(:disabled) {
@@ -8838,22 +8838,22 @@ exports[`Audio Player Composable should render correctly when in autoplay 1`] =
 }
 
 .emotion-3:valid:hover:not(:disabled) {
-  background-color: #148F39;
+  background-color: #00601A;
   opacity: 0.2;
 }
 
 .emotion-3:valid:hover:active:not(:disabled) {
-  background-color: #148F39;
+  background-color: #00601A;
   opacity: 0.4;
 }
 
 .emotion-3:invalid:hover:not(:disabled) {
-  background-color: #D20600;
+  background-color: #A90000;
   opacity: 0.2;
 }
 
 .emotion-3:invalid:hover:active:not(:disabled) {
-  background-color: #D20600;
+  background-color: #A90000;
   opacity: 0.4;
 }
 
@@ -8911,7 +8911,7 @@ exports[`Audio Player Composable should render correctly when in autoplay 1`] =
   -moz-appearance: none;
   -ms-appearance: none;
   appearance: none;
-  background-color: #AEBFFF;
+  background-color: #D5E0FC;
   border-radius: 50%;
   color: #3358CC;
   margin: 0;
@@ -9113,7 +9113,7 @@ exports[`Audio Player Composable should render with no errors 1`] = `
   display: flex;
   cursor: pointer;
   box-sizing: border-box;
-  background-color: #FAFAFA;
+  background-color: #F1F1F1;
   border-radius: 20rem;
   margin: calc(16px/2 - 8px/2) calc(16px/2);
   height: 8px;
@@ -9142,19 +9142,19 @@ exports[`Audio Player Composable should render with no errors 1`] = `
 }
 
 .emotion-2 svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-2:hover:not(:disabled) {
-  background-color: #2B4AAB;
+  background-color: #254CAC;
 }
 
 .emotion-2:active:not(:disabled) {
-  background-color: #213A82;
+  background-color: #14328D;
 }
 
 .emotion-2:active:not(:disabled) svg {
-  fill: #535353;
+  fill: #6A6A6A;
 }
 
 .emotion-2:focus-visible:not(:disabled) {
@@ -9201,22 +9201,22 @@ exports[`Audio Player Composable should render with no errors 1`] = `
 }
 
 .emotion-3:valid:hover:not(:disabled) {
-  background-color: #148F39;
+  background-color: #00601A;
   opacity: 0.2;
 }
 
 .emotion-3:valid:hover:active:not(:disabled) {
-  background-color: #148F39;
+  background-color: #00601A;
   opacity: 0.4;
 }
 
 .emotion-3:invalid:hover:not(:disabled) {
-  background-color: #D20600;
+  background-color: #A90000;
   opacity: 0.2;
 }
 
 .emotion-3:invalid:hover:active:not(:disabled) {
-  background-color: #D20600;
+  background-color: #A90000;
   opacity: 0.4;
 }
 
@@ -9274,7 +9274,7 @@ exports[`Audio Player Composable should render with no errors 1`] = `
   -moz-appearance: none;
   -ms-appearance: none;
   appearance: none;
-  background-color: #AEBFFF;
+  background-color: #D5E0FC;
   border-radius: 50%;
   color: #3358CC;
   margin: 0;
@@ -9365,7 +9365,7 @@ exports[`Audio Player Composable should render with no errors 1`] = `
   display: inline-block;
   display: block;
   background-color: transparent;
-  color: #2E2E2E;
+  color: #3B3B3B;
   font-family: "Poppins",sans-serif;
   font-size: 16px;
   line-height: 1.5;
@@ -9416,20 +9416,20 @@ exports[`Audio Player Composable should render with no errors 1`] = `
 }
 
 .emotion-10:hover:not(:disabled) {
-  background-color: #2B4AAB;
+  background-color: #254CAC;
 }
 
 .emotion-10:active:not(:disabled) {
-  background-color: #213A82;
+  background-color: #14328D;
 }
 
 .emotion-10:disabled {
-  background-color: #F4F4F4;
-  color: #C0C0C0;
+  background-color: #E2E2E2;
+  color: #ABABAB;
 }
 
 .emotion-10:disabled svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-10:focus-visible:not(:disabled) {
@@ -9546,20 +9546,20 @@ exports[`Audio Player Composable should render with no errors 1`] = `
 }
 
 .emotion-16:hover:not(:disabled) {
-  background-color: #E0E7FF;
+  background-color: #ECF1FF;
 }
 
 .emotion-16:active:not(:disabled) {
-  background-color: #AEBFFF;
+  background-color: #D5E0FC;
 }
 
 .emotion-16:disabled {
   background-color: transparent;
-  color: #C0C0C0;
+  color: #ABABAB;
 }
 
 .emotion-16:disabled svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-16:focus-visible:not(:disabled) {
@@ -9597,7 +9597,7 @@ exports[`Audio Player Composable should render with no errors 1`] = `
   display: inline-block;
   vertical-align: middle;
   overflow: hidden;
-  fill: #2E2E2E;
+  fill: #3B3B3B;
   vertical-align: unset;
   display: inline-block;
 }
@@ -9637,7 +9637,7 @@ exports[`Audio Player Composable should render with no errors 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  background-color: #F4F4F4;
+  background-color: #E2E2E2;
   border-radius: 20rem;
   margin: calc(16px/2 - 4px/2) calc(16px/2);
   height: 4px;
@@ -9648,7 +9648,7 @@ exports[`Audio Player Composable should render with no errors 1`] = `
   box-shadow: 0 0 2px 0 rgba(10,10,10,0.08);
   background-color: #3358CC;
   border-style: solid;
-  border-color: #E0E7FF;
+  border-color: #ECF1FF;
   border-width: 1px;
   border-radius: 50%;
   height: 16px;
@@ -9666,23 +9666,23 @@ exports[`Audio Player Composable should render with no errors 1`] = `
 }
 
 .emotion-25 svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-25:hover:not(:disabled) {
-  background-color: #2B4AAB;
+  background-color: #254CAC;
 }
 
 .emotion-25:hover:not(:disabled) svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-25:active:not(:disabled) {
-  background-color: #213A82;
+  background-color: #14328D;
 }
 
 .emotion-25:active:not(:disabled) svg {
-  fill: #535353;
+  fill: #6A6A6A;
 }
 
 .emotion-25:focus-visible:not(:disabled) {
@@ -9702,7 +9702,7 @@ exports[`Audio Player Composable should render with no errors 1`] = `
 }
 
 .emotion-41 {
-  fill: #2E2E2E;
+  fill: #3B3B3B;
   vertical-align: unset;
   display: inline-block;
 }
diff --git a/src/audio-player/__tests__/__snapshots__/audio-player.test.tsx.snap b/src/audio-player/__tests__/__snapshots__/audio-player.test.tsx.snap
index 1ecf902449..e8c34da6dc 100644
--- a/src/audio-player/__tests__/__snapshots__/audio-player.test.tsx.snap
+++ b/src/audio-player/__tests__/__snapshots__/audio-player.test.tsx.snap
@@ -210,7 +210,7 @@ exports[`Audio Player hides previousTrack as expected 1`] = `
   -moz-appearance: none;
   -ms-appearance: none;
   appearance: none;
-  background-color: #AEBFFF;
+  background-color: #D5E0FC;
   border-radius: 50%;
   color: #3358CC;
   margin: 0;
@@ -351,20 +351,20 @@ exports[`Audio Player hides previousTrack as expected 1`] = `
 }
 
 .emotion-15:hover:not(:disabled) {
-  background-color: #E0E7FF;
+  background-color: #ECF1FF;
 }
 
 .emotion-15:active:not(:disabled) {
-  background-color: #AEBFFF;
+  background-color: #D5E0FC;
 }
 
 .emotion-15:disabled {
   background-color: transparent;
-  color: #C0C0C0;
+  color: #ABABAB;
 }
 
 .emotion-15:disabled svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-15:focus-visible:not(:disabled) {
@@ -399,7 +399,7 @@ exports[`Audio Player hides previousTrack as expected 1`] = `
 }
 
 .emotion-18 {
-  fill: #2E2E2E;
+  fill: #3B3B3B;
   vertical-align: unset;
   display: inline-block;
 }
@@ -460,7 +460,7 @@ exports[`Audio Player hides previousTrack as expected 1`] = `
   appearance: none;
   background-color: transparent;
   border-radius: 50%;
-  color: #C0C0C0;
+  color: #ABABAB;
   margin: 0;
   opacity: 0;
   pointer-events: none;
@@ -472,7 +472,7 @@ exports[`Audio Player hides previousTrack as expected 1`] = `
 }
 
 .emotion-25 svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 @media screen and (prefers-reduced-motion: no-preference) {
@@ -495,7 +495,7 @@ exports[`Audio Player hides previousTrack as expected 1`] = `
   display: inline-block;
   vertical-align: middle;
   overflow: hidden;
-  fill: #2E2E2E;
+  fill: #3B3B3B;
   vertical-align: unset;
   display: inline-block;
 }
@@ -666,20 +666,20 @@ exports[`Audio Player hides previousTrack as expected 1`] = `
 }
 
 .emotion-40:hover:not(:disabled) {
-  background-color: #E0E7FF;
+  background-color: #ECF1FF;
 }
 
 .emotion-40:active:not(:disabled) {
-  background-color: #AEBFFF;
+  background-color: #D5E0FC;
 }
 
 .emotion-40:disabled {
   background-color: transparent;
-  color: #C0C0C0;
+  color: #ABABAB;
 }
 
 .emotion-40:disabled svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-40:focus-visible:not(:disabled) {
@@ -723,7 +723,7 @@ exports[`Audio Player hides previousTrack as expected 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  background-color: #F4F4F4;
+  background-color: #E2E2E2;
   border-radius: 20rem;
   margin: calc(16px/2 - 4px/2) calc(16px/2);
   height: 4px;
@@ -752,19 +752,19 @@ exports[`Audio Player hides previousTrack as expected 1`] = `
 }
 
 .emotion-46 svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-46:hover:not(:disabled) {
-  background-color: #2B4AAB;
+  background-color: #254CAC;
 }
 
 .emotion-46:active:not(:disabled) {
-  background-color: #213A82;
+  background-color: #14328D;
 }
 
 .emotion-46:active:not(:disabled) svg {
-  fill: #535353;
+  fill: #6A6A6A;
 }
 
 .emotion-47 {
@@ -795,22 +795,22 @@ exports[`Audio Player hides previousTrack as expected 1`] = `
 }
 
 .emotion-47:valid:hover:not(:disabled) {
-  background-color: #148F39;
+  background-color: #00601A;
   opacity: 0.2;
 }
 
 .emotion-47:valid:hover:active:not(:disabled) {
-  background-color: #148F39;
+  background-color: #00601A;
   opacity: 0.4;
 }
 
 .emotion-47:invalid:hover:not(:disabled) {
-  background-color: #D20600;
+  background-color: #A90000;
   opacity: 0.2;
 }
 
 .emotion-47:invalid:hover:active:not(:disabled) {
-  background-color: #D20600;
+  background-color: #A90000;
   opacity: 0.4;
 }
 
@@ -953,7 +953,7 @@ exports[`Audio Player hides previousTrack as expected 1`] = `
   display: flex;
   cursor: pointer;
   box-sizing: border-box;
-  background-color: #FAFAFA;
+  background-color: #F1F1F1;
   border-radius: 20rem;
   margin: calc(16px/2 - 8px/2) calc(16px/2);
   height: 8px;
@@ -995,7 +995,7 @@ exports[`Audio Player hides previousTrack as expected 1`] = `
   font-weight: 500;
   letter-spacing: 0;
   padding: 0.5px 0px;
-  color: #2E2E2E;
+  color: #3B3B3B;
 }
 
 .emotion-65::before {
@@ -1634,7 +1634,7 @@ exports[`Audio Player hides seek buttons as expected 1`] = `
   -moz-appearance: none;
   -ms-appearance: none;
   appearance: none;
-  background-color: #AEBFFF;
+  background-color: #D5E0FC;
   border-radius: 50%;
   color: #3358CC;
   margin: 0;
@@ -1772,7 +1772,7 @@ exports[`Audio Player hides seek buttons as expected 1`] = `
   appearance: none;
   background-color: transparent;
   border-radius: 50%;
-  color: #C0C0C0;
+  color: #ABABAB;
   margin: 0;
 }
 
@@ -1782,7 +1782,7 @@ exports[`Audio Player hides seek buttons as expected 1`] = `
 }
 
 .emotion-17 svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 @media screen and (prefers-reduced-motion: no-preference) {
@@ -1805,7 +1805,7 @@ exports[`Audio Player hides seek buttons as expected 1`] = `
   display: inline-block;
   vertical-align: middle;
   overflow: hidden;
-  fill: #2E2E2E;
+  fill: #3B3B3B;
   vertical-align: unset;
   display: inline-block;
 }
@@ -1854,7 +1854,7 @@ exports[`Audio Player hides seek buttons as expected 1`] = `
   appearance: none;
   background-color: transparent;
   border-radius: 50%;
-  color: #C0C0C0;
+  color: #ABABAB;
   margin: 0;
   opacity: 0;
   pointer-events: none;
@@ -1866,7 +1866,7 @@ exports[`Audio Player hides seek buttons as expected 1`] = `
 }
 
 .emotion-23 svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 @media screen and (prefers-reduced-motion: no-preference) {
@@ -2035,20 +2035,20 @@ exports[`Audio Player hides seek buttons as expected 1`] = `
 }
 
 .emotion-32:hover:not(:disabled) {
-  background-color: #E0E7FF;
+  background-color: #ECF1FF;
 }
 
 .emotion-32:active:not(:disabled) {
-  background-color: #AEBFFF;
+  background-color: #D5E0FC;
 }
 
 .emotion-32:disabled {
   background-color: transparent;
-  color: #C0C0C0;
+  color: #ABABAB;
 }
 
 .emotion-32:disabled svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-32:focus-visible:not(:disabled) {
@@ -2092,7 +2092,7 @@ exports[`Audio Player hides seek buttons as expected 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  background-color: #F4F4F4;
+  background-color: #E2E2E2;
   border-radius: 20rem;
   margin: calc(16px/2 - 4px/2) calc(16px/2);
   height: 4px;
@@ -2121,19 +2121,19 @@ exports[`Audio Player hides seek buttons as expected 1`] = `
 }
 
 .emotion-38 svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-38:hover:not(:disabled) {
-  background-color: #2B4AAB;
+  background-color: #254CAC;
 }
 
 .emotion-38:active:not(:disabled) {
-  background-color: #213A82;
+  background-color: #14328D;
 }
 
 .emotion-38:active:not(:disabled) svg {
-  fill: #535353;
+  fill: #6A6A6A;
 }
 
 .emotion-39 {
@@ -2164,22 +2164,22 @@ exports[`Audio Player hides seek buttons as expected 1`] = `
 }
 
 .emotion-39:valid:hover:not(:disabled) {
-  background-color: #148F39;
+  background-color: #00601A;
   opacity: 0.2;
 }
 
 .emotion-39:valid:hover:active:not(:disabled) {
-  background-color: #148F39;
+  background-color: #00601A;
   opacity: 0.4;
 }
 
 .emotion-39:invalid:hover:not(:disabled) {
-  background-color: #D20600;
+  background-color: #A90000;
   opacity: 0.2;
 }
 
 .emotion-39:invalid:hover:active:not(:disabled) {
-  background-color: #D20600;
+  background-color: #A90000;
   opacity: 0.4;
 }
 
@@ -2322,7 +2322,7 @@ exports[`Audio Player hides seek buttons as expected 1`] = `
   display: flex;
   cursor: pointer;
   box-sizing: border-box;
-  background-color: #FAFAFA;
+  background-color: #F1F1F1;
   border-radius: 20rem;
   margin: calc(16px/2 - 8px/2) calc(16px/2);
   height: 8px;
@@ -2364,7 +2364,7 @@ exports[`Audio Player hides seek buttons as expected 1`] = `
   font-weight: 500;
   letter-spacing: 0;
   padding: 0.5px 0px;
-  color: #2E2E2E;
+  color: #3B3B3B;
 }
 
 .emotion-57::before {
@@ -2945,7 +2945,7 @@ exports[`Audio Player hides volume control as expected 1`] = `
   -moz-appearance: none;
   -ms-appearance: none;
   appearance: none;
-  background-color: #AEBFFF;
+  background-color: #D5E0FC;
   border-radius: 50%;
   color: #3358CC;
   margin: 0;
@@ -3086,20 +3086,20 @@ exports[`Audio Player hides volume control as expected 1`] = `
 }
 
 .emotion-15:hover:not(:disabled) {
-  background-color: #E0E7FF;
+  background-color: #ECF1FF;
 }
 
 .emotion-15:active:not(:disabled) {
-  background-color: #AEBFFF;
+  background-color: #D5E0FC;
 }
 
 .emotion-15:disabled {
   background-color: transparent;
-  color: #C0C0C0;
+  color: #ABABAB;
 }
 
 .emotion-15:disabled svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-15:focus-visible:not(:disabled) {
@@ -3134,7 +3134,7 @@ exports[`Audio Player hides volume control as expected 1`] = `
 }
 
 .emotion-18 {
-  fill: #2E2E2E;
+  fill: #3B3B3B;
   vertical-align: unset;
   display: inline-block;
 }
@@ -3195,7 +3195,7 @@ exports[`Audio Player hides volume control as expected 1`] = `
   appearance: none;
   background-color: transparent;
   border-radius: 50%;
-  color: #C0C0C0;
+  color: #ABABAB;
   margin: 0;
 }
 
@@ -3205,7 +3205,7 @@ exports[`Audio Player hides volume control as expected 1`] = `
 }
 
 .emotion-25 svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 @media screen and (prefers-reduced-motion: no-preference) {
@@ -3228,7 +3228,7 @@ exports[`Audio Player hides volume control as expected 1`] = `
   display: inline-block;
   vertical-align: middle;
   overflow: hidden;
-  fill: #2E2E2E;
+  fill: #3B3B3B;
   vertical-align: unset;
   display: inline-block;
 }
@@ -3277,7 +3277,7 @@ exports[`Audio Player hides volume control as expected 1`] = `
   appearance: none;
   background-color: transparent;
   border-radius: 50%;
-  color: #C0C0C0;
+  color: #ABABAB;
   margin: 0;
   opacity: 0;
   pointer-events: none;
@@ -3289,7 +3289,7 @@ exports[`Audio Player hides volume control as expected 1`] = `
 }
 
 .emotion-31 svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 @media screen and (prefers-reduced-motion: no-preference) {
@@ -3457,7 +3457,7 @@ exports[`Audio Player hides volume control as expected 1`] = `
   display: flex;
   cursor: pointer;
   box-sizing: border-box;
-  background-color: #FAFAFA;
+  background-color: #F1F1F1;
   border-radius: 20rem;
   margin: calc(16px/2 - 8px/2) calc(16px/2);
   height: 8px;
@@ -3486,19 +3486,19 @@ exports[`Audio Player hides volume control as expected 1`] = `
 }
 
 .emotion-44 svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-44:hover:not(:disabled) {
-  background-color: #2B4AAB;
+  background-color: #254CAC;
 }
 
 .emotion-44:active:not(:disabled) {
-  background-color: #213A82;
+  background-color: #14328D;
 }
 
 .emotion-44:active:not(:disabled) svg {
-  fill: #535353;
+  fill: #6A6A6A;
 }
 
 .emotion-45 {
@@ -3529,22 +3529,22 @@ exports[`Audio Player hides volume control as expected 1`] = `
 }
 
 .emotion-45:valid:hover:not(:disabled) {
-  background-color: #148F39;
+  background-color: #00601A;
   opacity: 0.2;
 }
 
 .emotion-45:valid:hover:active:not(:disabled) {
-  background-color: #148F39;
+  background-color: #00601A;
   opacity: 0.4;
 }
 
 .emotion-45:invalid:hover:not(:disabled) {
-  background-color: #D20600;
+  background-color: #A90000;
   opacity: 0.2;
 }
 
 .emotion-45:invalid:hover:active:not(:disabled) {
-  background-color: #D20600;
+  background-color: #A90000;
   opacity: 0.4;
 }
 
@@ -3599,7 +3599,7 @@ exports[`Audio Player hides volume control as expected 1`] = `
   font-weight: 500;
   letter-spacing: 0;
   padding: 0.5px 0px;
-  color: #2E2E2E;
+  color: #3B3B3B;
 }
 
 .emotion-48::before {
@@ -4135,7 +4135,7 @@ exports[`Audio Player live player renders as expected 1`] = `
   -moz-appearance: none;
   -ms-appearance: none;
   appearance: none;
-  background-color: #AEBFFF;
+  background-color: #D5E0FC;
   border-radius: 50%;
   color: #3358CC;
   margin: 0;
@@ -4395,20 +4395,20 @@ exports[`Audio Player live player renders as expected 1`] = `
 }
 
 .emotion-22:hover:not(:disabled) {
-  background-color: #E0E7FF;
+  background-color: #ECF1FF;
 }
 
 .emotion-22:active:not(:disabled) {
-  background-color: #AEBFFF;
+  background-color: #D5E0FC;
 }
 
 .emotion-22:disabled {
   background-color: transparent;
-  color: #C0C0C0;
+  color: #ABABAB;
 }
 
 .emotion-22:disabled svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-22:focus-visible:not(:disabled) {
@@ -4446,7 +4446,7 @@ exports[`Audio Player live player renders as expected 1`] = `
   display: inline-block;
   vertical-align: middle;
   overflow: hidden;
-  fill: #2E2E2E;
+  fill: #3B3B3B;
   vertical-align: unset;
   display: inline-block;
 }
@@ -4477,7 +4477,7 @@ exports[`Audio Player live player renders as expected 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  background-color: #F4F4F4;
+  background-color: #E2E2E2;
   border-radius: 20rem;
   margin: calc(16px/2 - 4px/2) calc(16px/2);
   height: 4px;
@@ -4506,19 +4506,19 @@ exports[`Audio Player live player renders as expected 1`] = `
 }
 
 .emotion-28 svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-28:hover:not(:disabled) {
-  background-color: #2B4AAB;
+  background-color: #254CAC;
 }
 
 .emotion-28:active:not(:disabled) {
-  background-color: #213A82;
+  background-color: #14328D;
 }
 
 .emotion-28:active:not(:disabled) svg {
-  fill: #535353;
+  fill: #6A6A6A;
 }
 
 .emotion-29 {
@@ -4549,22 +4549,22 @@ exports[`Audio Player live player renders as expected 1`] = `
 }
 
 .emotion-29:valid:hover:not(:disabled) {
-  background-color: #148F39;
+  background-color: #00601A;
   opacity: 0.2;
 }
 
 .emotion-29:valid:hover:active:not(:disabled) {
-  background-color: #148F39;
+  background-color: #00601A;
   opacity: 0.4;
 }
 
 .emotion-29:invalid:hover:not(:disabled) {
-  background-color: #D20600;
+  background-color: #A90000;
   opacity: 0.2;
 }
 
 .emotion-29:invalid:hover:active:not(:disabled) {
-  background-color: #D20600;
+  background-color: #A90000;
   opacity: 0.4;
 }
 
@@ -4690,20 +4690,20 @@ exports[`Audio Player live player renders as expected 1`] = `
 }
 
 .emotion-40:hover:not(:disabled) {
-  background-color: #E0E7FF;
+  background-color: #ECF1FF;
 }
 
 .emotion-40:active:not(:disabled) {
-  background-color: #AEBFFF;
+  background-color: #D5E0FC;
 }
 
 .emotion-40:disabled {
   background-color: transparent;
-  color: #C0C0C0;
+  color: #ABABAB;
 }
 
 .emotion-40:disabled svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-40:focus-visible:not(:disabled) {
@@ -4741,7 +4741,7 @@ exports[`Audio Player live player renders as expected 1`] = `
   display: inline-block;
   vertical-align: middle;
   overflow: hidden;
-  fill: #2E2E2E;
+  fill: #3B3B3B;
   vertical-align: unset;
   display: inline-block;
 }
@@ -5058,7 +5058,7 @@ exports[`Audio Player play button loading state is phasing as expected 1`] = `
   -moz-appearance: none;
   -ms-appearance: none;
   appearance: none;
-  background-color: #AEBFFF;
+  background-color: #D5E0FC;
   border-radius: 50%;
   color: #3358CC;
   margin: 0;
@@ -5220,20 +5220,20 @@ exports[`Audio Player play button loading state is phasing as expected 2`] = `
 }
 
 .emotion-0:hover:not(:disabled) {
-  background-color: #2B4AAB;
+  background-color: #254CAC;
 }
 
 .emotion-0:active:not(:disabled) {
-  background-color: #213A82;
+  background-color: #14328D;
 }
 
 .emotion-0:disabled {
-  background-color: #F4F4F4;
-  color: #C0C0C0;
+  background-color: #E2E2E2;
+  color: #ABABAB;
 }
 
 .emotion-0:disabled svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-0:focus-visible:not(:disabled) {
@@ -5301,7 +5301,7 @@ exports[`Audio Player play button loading state is phasing as expected 2`] = `
   display: inline-block;
   vertical-align: middle;
   overflow: hidden;
-  fill: #2E2E2E;
+  fill: #3B3B3B;
   vertical-align: unset;
   display: inline-block;
 }
@@ -5383,7 +5383,7 @@ exports[`Audio Player play button loading state is phasing as expected 3`] = `
   -moz-appearance: none;
   -ms-appearance: none;
   appearance: none;
-  background-color: #AEBFFF;
+  background-color: #D5E0FC;
   border-radius: 50%;
   color: #3358CC;
   margin: 0;
@@ -5728,20 +5728,20 @@ exports[`Audio Player recorded player renders and behaves as expected 1`] = `
 }
 
 .emotion-10:hover:not(:disabled) {
-  background-color: #2B4AAB;
+  background-color: #254CAC;
 }
 
 .emotion-10:active:not(:disabled) {
-  background-color: #213A82;
+  background-color: #14328D;
 }
 
 .emotion-10:disabled {
-  background-color: #F4F4F4;
-  color: #C0C0C0;
+  background-color: #E2E2E2;
+  color: #ABABAB;
 }
 
 .emotion-10:disabled svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-10:focus-visible:not(:disabled) {
@@ -5809,7 +5809,7 @@ exports[`Audio Player recorded player renders and behaves as expected 1`] = `
   display: inline-block;
   vertical-align: middle;
   overflow: hidden;
-  fill: #2E2E2E;
+  fill: #3B3B3B;
   vertical-align: unset;
   display: inline-block;
 }
@@ -5885,20 +5885,20 @@ exports[`Audio Player recorded player renders and behaves as expected 1`] = `
 }
 
 .emotion-16:hover:not(:disabled) {
-  background-color: #E0E7FF;
+  background-color: #ECF1FF;
 }
 
 .emotion-16:active:not(:disabled) {
-  background-color: #AEBFFF;
+  background-color: #D5E0FC;
 }
 
 .emotion-16:disabled {
   background-color: transparent;
-  color: #C0C0C0;
+  color: #ABABAB;
 }
 
 .emotion-16:disabled svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-16:focus-visible:not(:disabled) {
@@ -5933,7 +5933,7 @@ exports[`Audio Player recorded player renders and behaves as expected 1`] = `
 }
 
 .emotion-19 {
-  fill: #2E2E2E;
+  fill: #3B3B3B;
   vertical-align: unset;
   display: inline-block;
 }
@@ -6009,20 +6009,20 @@ exports[`Audio Player recorded player renders and behaves as expected 1`] = `
 }
 
 .emotion-26:hover:not(:disabled) {
-  background-color: #E0E7FF;
+  background-color: #ECF1FF;
 }
 
 .emotion-26:active:not(:disabled) {
-  background-color: #AEBFFF;
+  background-color: #D5E0FC;
 }
 
 .emotion-26:disabled {
   background-color: transparent;
-  color: #C0C0C0;
+  color: #ABABAB;
 }
 
 .emotion-26:disabled svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-26:focus-visible:not(:disabled) {
@@ -6206,20 +6206,20 @@ exports[`Audio Player recorded player renders and behaves as expected 1`] = `
 }
 
 .emotion-41:hover:not(:disabled) {
-  background-color: #E0E7FF;
+  background-color: #ECF1FF;
 }
 
 .emotion-41:active:not(:disabled) {
-  background-color: #AEBFFF;
+  background-color: #D5E0FC;
 }
 
 .emotion-41:disabled {
   background-color: transparent;
-  color: #C0C0C0;
+  color: #ABABAB;
 }
 
 .emotion-41:disabled svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-41:focus-visible:not(:disabled) {
@@ -6264,7 +6264,7 @@ exports[`Audio Player recorded player renders and behaves as expected 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  background-color: #F4F4F4;
+  background-color: #E2E2E2;
   border-radius: 20rem;
   margin: calc(16px/2 - 4px/2) calc(16px/2);
   height: 4px;
@@ -6294,19 +6294,19 @@ exports[`Audio Player recorded player renders and behaves as expected 1`] = `
 }
 
 .emotion-47 svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-47:hover:not(:disabled) {
-  background-color: #2B4AAB;
+  background-color: #254CAC;
 }
 
 .emotion-47:active:not(:disabled) {
-  background-color: #213A82;
+  background-color: #14328D;
 }
 
 .emotion-47:active:not(:disabled) svg {
-  fill: #535353;
+  fill: #6A6A6A;
 }
 
 .emotion-48 {
@@ -6337,22 +6337,22 @@ exports[`Audio Player recorded player renders and behaves as expected 1`] = `
 }
 
 .emotion-48:valid:hover:not(:disabled) {
-  background-color: #148F39;
+  background-color: #00601A;
   opacity: 0.2;
 }
 
 .emotion-48:valid:hover:active:not(:disabled) {
-  background-color: #148F39;
+  background-color: #00601A;
   opacity: 0.4;
 }
 
 .emotion-48:invalid:hover:not(:disabled) {
-  background-color: #D20600;
+  background-color: #A90000;
   opacity: 0.2;
 }
 
 .emotion-48:invalid:hover:active:not(:disabled) {
-  background-color: #D20600;
+  background-color: #A90000;
   opacity: 0.4;
 }
 
@@ -6496,7 +6496,7 @@ exports[`Audio Player recorded player renders and behaves as expected 1`] = `
   cursor: -webkit-grabbing;
   cursor: grabbing;
   box-sizing: border-box;
-  background-color: #FAFAFA;
+  background-color: #F1F1F1;
   border-radius: 20rem;
   margin: calc(16px/2 - 8px/2) calc(16px/2);
   height: 8px;
@@ -6538,7 +6538,7 @@ exports[`Audio Player recorded player renders and behaves as expected 1`] = `
   font-weight: 500;
   letter-spacing: 0;
   padding: 0.5px 0px;
-  color: #2E2E2E;
+  color: #3B3B3B;
 }
 
 .emotion-66::before {
@@ -6997,19 +6997,19 @@ exports[`Audio Player recorded player renders and behaves as expected 2`] = `
 }
 
 .emotion-0 svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-0:hover:not(:disabled) {
-  background-color: #2B4AAB;
+  background-color: #254CAC;
 }
 
 .emotion-0:active:not(:disabled) {
-  background-color: #213A82;
+  background-color: #14328D;
 }
 
 .emotion-0:active:not(:disabled) svg {
-  fill: #535353;
+  fill: #6A6A6A;
 }
 
 .emotion-1 {
@@ -7040,22 +7040,22 @@ exports[`Audio Player recorded player renders and behaves as expected 2`] = `
 }
 
 .emotion-1:valid:hover:not(:disabled) {
-  background-color: #148F39;
+  background-color: #00601A;
   opacity: 0.2;
 }
 
 .emotion-1:valid:hover:active:not(:disabled) {
-  background-color: #148F39;
+  background-color: #00601A;
   opacity: 0.4;
 }
 
 .emotion-1:invalid:hover:not(:disabled) {
-  background-color: #D20600;
+  background-color: #A90000;
   opacity: 0.2;
 }
 
 .emotion-1:invalid:hover:active:not(:disabled) {
-  background-color: #D20600;
+  background-color: #A90000;
   opacity: 0.4;
 }
 
@@ -7308,7 +7308,7 @@ exports[`Audio Player recorded player renders as expected 1`] = `
   -moz-appearance: none;
   -ms-appearance: none;
   appearance: none;
-  background-color: #AEBFFF;
+  background-color: #D5E0FC;
   border-radius: 50%;
   color: #3358CC;
   margin: 0;
@@ -7449,20 +7449,20 @@ exports[`Audio Player recorded player renders as expected 1`] = `
 }
 
 .emotion-15:hover:not(:disabled) {
-  background-color: #E0E7FF;
+  background-color: #ECF1FF;
 }
 
 .emotion-15:active:not(:disabled) {
-  background-color: #AEBFFF;
+  background-color: #D5E0FC;
 }
 
 .emotion-15:disabled {
   background-color: transparent;
-  color: #C0C0C0;
+  color: #ABABAB;
 }
 
 .emotion-15:disabled svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-15:focus-visible:not(:disabled) {
@@ -7497,7 +7497,7 @@ exports[`Audio Player recorded player renders as expected 1`] = `
 }
 
 .emotion-18 {
-  fill: #2E2E2E;
+  fill: #3B3B3B;
   vertical-align: unset;
   display: inline-block;
 }
@@ -7558,7 +7558,7 @@ exports[`Audio Player recorded player renders as expected 1`] = `
   appearance: none;
   background-color: transparent;
   border-radius: 50%;
-  color: #C0C0C0;
+  color: #ABABAB;
   margin: 0;
 }
 
@@ -7568,7 +7568,7 @@ exports[`Audio Player recorded player renders as expected 1`] = `
 }
 
 .emotion-25 svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 @media screen and (prefers-reduced-motion: no-preference) {
@@ -7591,7 +7591,7 @@ exports[`Audio Player recorded player renders as expected 1`] = `
   display: inline-block;
   vertical-align: middle;
   overflow: hidden;
-  fill: #2E2E2E;
+  fill: #3B3B3B;
   vertical-align: unset;
   display: inline-block;
 }
@@ -7640,7 +7640,7 @@ exports[`Audio Player recorded player renders as expected 1`] = `
   appearance: none;
   background-color: transparent;
   border-radius: 50%;
-  color: #C0C0C0;
+  color: #ABABAB;
   margin: 0;
   opacity: 0;
   pointer-events: none;
@@ -7652,7 +7652,7 @@ exports[`Audio Player recorded player renders as expected 1`] = `
 }
 
 .emotion-31 svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 @media screen and (prefers-reduced-motion: no-preference) {
@@ -7821,20 +7821,20 @@ exports[`Audio Player recorded player renders as expected 1`] = `
 }
 
 .emotion-40:hover:not(:disabled) {
-  background-color: #E0E7FF;
+  background-color: #ECF1FF;
 }
 
 .emotion-40:active:not(:disabled) {
-  background-color: #AEBFFF;
+  background-color: #D5E0FC;
 }
 
 .emotion-40:disabled {
   background-color: transparent;
-  color: #C0C0C0;
+  color: #ABABAB;
 }
 
 .emotion-40:disabled svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-40:focus-visible:not(:disabled) {
@@ -7878,7 +7878,7 @@ exports[`Audio Player recorded player renders as expected 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  background-color: #F4F4F4;
+  background-color: #E2E2E2;
   border-radius: 20rem;
   margin: calc(16px/2 - 4px/2) calc(16px/2);
   height: 4px;
@@ -7907,19 +7907,19 @@ exports[`Audio Player recorded player renders as expected 1`] = `
 }
 
 .emotion-46 svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-46:hover:not(:disabled) {
-  background-color: #2B4AAB;
+  background-color: #254CAC;
 }
 
 .emotion-46:active:not(:disabled) {
-  background-color: #213A82;
+  background-color: #14328D;
 }
 
 .emotion-46:active:not(:disabled) svg {
-  fill: #535353;
+  fill: #6A6A6A;
 }
 
 .emotion-47 {
@@ -7950,22 +7950,22 @@ exports[`Audio Player recorded player renders as expected 1`] = `
 }
 
 .emotion-47:valid:hover:not(:disabled) {
-  background-color: #148F39;
+  background-color: #00601A;
   opacity: 0.2;
 }
 
 .emotion-47:valid:hover:active:not(:disabled) {
-  background-color: #148F39;
+  background-color: #00601A;
   opacity: 0.4;
 }
 
 .emotion-47:invalid:hover:not(:disabled) {
-  background-color: #D20600;
+  background-color: #A90000;
   opacity: 0.2;
 }
 
 .emotion-47:invalid:hover:active:not(:disabled) {
-  background-color: #D20600;
+  background-color: #A90000;
   opacity: 0.4;
 }
 
@@ -8108,7 +8108,7 @@ exports[`Audio Player recorded player renders as expected 1`] = `
   display: flex;
   cursor: pointer;
   box-sizing: border-box;
-  background-color: #FAFAFA;
+  background-color: #F1F1F1;
   border-radius: 20rem;
   margin: calc(16px/2 - 8px/2) calc(16px/2);
   height: 8px;
@@ -8150,7 +8150,7 @@ exports[`Audio Player recorded player renders as expected 1`] = `
   font-weight: 500;
   letter-spacing: 0;
   padding: 0.5px 0px;
-  color: #2E2E2E;
+  color: #3B3B3B;
 }
 
 .emotion-65::before {
@@ -8789,7 +8789,7 @@ exports[`Audio Player recorded player renders with custom ariaLandmark 1`] = `
   -moz-appearance: none;
   -ms-appearance: none;
   appearance: none;
-  background-color: #AEBFFF;
+  background-color: #D5E0FC;
   border-radius: 50%;
   color: #3358CC;
   margin: 0;
@@ -8930,20 +8930,20 @@ exports[`Audio Player recorded player renders with custom ariaLandmark 1`] = `
 }
 
 .emotion-15:hover:not(:disabled) {
-  background-color: #E0E7FF;
+  background-color: #ECF1FF;
 }
 
 .emotion-15:active:not(:disabled) {
-  background-color: #AEBFFF;
+  background-color: #D5E0FC;
 }
 
 .emotion-15:disabled {
   background-color: transparent;
-  color: #C0C0C0;
+  color: #ABABAB;
 }
 
 .emotion-15:disabled svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-15:focus-visible:not(:disabled) {
@@ -8978,7 +8978,7 @@ exports[`Audio Player recorded player renders with custom ariaLandmark 1`] = `
 }
 
 .emotion-18 {
-  fill: #2E2E2E;
+  fill: #3B3B3B;
   vertical-align: unset;
   display: inline-block;
 }
@@ -9039,7 +9039,7 @@ exports[`Audio Player recorded player renders with custom ariaLandmark 1`] = `
   appearance: none;
   background-color: transparent;
   border-radius: 50%;
-  color: #C0C0C0;
+  color: #ABABAB;
   margin: 0;
 }
 
@@ -9049,7 +9049,7 @@ exports[`Audio Player recorded player renders with custom ariaLandmark 1`] = `
 }
 
 .emotion-25 svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 @media screen and (prefers-reduced-motion: no-preference) {
@@ -9072,7 +9072,7 @@ exports[`Audio Player recorded player renders with custom ariaLandmark 1`] = `
   display: inline-block;
   vertical-align: middle;
   overflow: hidden;
-  fill: #2E2E2E;
+  fill: #3B3B3B;
   vertical-align: unset;
   display: inline-block;
 }
@@ -9121,7 +9121,7 @@ exports[`Audio Player recorded player renders with custom ariaLandmark 1`] = `
   appearance: none;
   background-color: transparent;
   border-radius: 50%;
-  color: #C0C0C0;
+  color: #ABABAB;
   margin: 0;
   opacity: 0;
   pointer-events: none;
@@ -9133,7 +9133,7 @@ exports[`Audio Player recorded player renders with custom ariaLandmark 1`] = `
 }
 
 .emotion-31 svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 @media screen and (prefers-reduced-motion: no-preference) {
@@ -9302,20 +9302,20 @@ exports[`Audio Player recorded player renders with custom ariaLandmark 1`] = `
 }
 
 .emotion-40:hover:not(:disabled) {
-  background-color: #E0E7FF;
+  background-color: #ECF1FF;
 }
 
 .emotion-40:active:not(:disabled) {
-  background-color: #AEBFFF;
+  background-color: #D5E0FC;
 }
 
 .emotion-40:disabled {
   background-color: transparent;
-  color: #C0C0C0;
+  color: #ABABAB;
 }
 
 .emotion-40:disabled svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-40:focus-visible:not(:disabled) {
@@ -9359,7 +9359,7 @@ exports[`Audio Player recorded player renders with custom ariaLandmark 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  background-color: #F4F4F4;
+  background-color: #E2E2E2;
   border-radius: 20rem;
   margin: calc(16px/2 - 4px/2) calc(16px/2);
   height: 4px;
@@ -9388,19 +9388,19 @@ exports[`Audio Player recorded player renders with custom ariaLandmark 1`] = `
 }
 
 .emotion-46 svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-46:hover:not(:disabled) {
-  background-color: #2B4AAB;
+  background-color: #254CAC;
 }
 
 .emotion-46:active:not(:disabled) {
-  background-color: #213A82;
+  background-color: #14328D;
 }
 
 .emotion-46:active:not(:disabled) svg {
-  fill: #535353;
+  fill: #6A6A6A;
 }
 
 .emotion-47 {
@@ -9431,22 +9431,22 @@ exports[`Audio Player recorded player renders with custom ariaLandmark 1`] = `
 }
 
 .emotion-47:valid:hover:not(:disabled) {
-  background-color: #148F39;
+  background-color: #00601A;
   opacity: 0.2;
 }
 
 .emotion-47:valid:hover:active:not(:disabled) {
-  background-color: #148F39;
+  background-color: #00601A;
   opacity: 0.4;
 }
 
 .emotion-47:invalid:hover:not(:disabled) {
-  background-color: #D20600;
+  background-color: #A90000;
   opacity: 0.2;
 }
 
 .emotion-47:invalid:hover:active:not(:disabled) {
-  background-color: #D20600;
+  background-color: #A90000;
   opacity: 0.4;
 }
 
@@ -9589,7 +9589,7 @@ exports[`Audio Player recorded player renders with custom ariaLandmark 1`] = `
   display: flex;
   cursor: pointer;
   box-sizing: border-box;
-  background-color: #FAFAFA;
+  background-color: #F1F1F1;
   border-radius: 20rem;
   margin: calc(16px/2 - 8px/2) calc(16px/2);
   height: 8px;
@@ -9631,7 +9631,7 @@ exports[`Audio Player recorded player renders with custom ariaLandmark 1`] = `
   font-weight: 500;
   letter-spacing: 0;
   padding: 0.5px 0px;
-  color: #2E2E2E;
+  color: #3B3B3B;
 }
 
 .emotion-65::before {
@@ -10272,7 +10272,7 @@ exports[`Audio Player recorded player renders with logical props overrides 1`] =
   -moz-appearance: none;
   -ms-appearance: none;
   appearance: none;
-  background-color: #AEBFFF;
+  background-color: #D5E0FC;
   border-radius: 50%;
   color: #3358CC;
   margin: 0;
@@ -10413,20 +10413,20 @@ exports[`Audio Player recorded player renders with logical props overrides 1`] =
 }
 
 .emotion-15:hover:not(:disabled) {
-  background-color: #E0E7FF;
+  background-color: #ECF1FF;
 }
 
 .emotion-15:active:not(:disabled) {
-  background-color: #AEBFFF;
+  background-color: #D5E0FC;
 }
 
 .emotion-15:disabled {
   background-color: transparent;
-  color: #C0C0C0;
+  color: #ABABAB;
 }
 
 .emotion-15:disabled svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-15:focus-visible:not(:disabled) {
@@ -10461,7 +10461,7 @@ exports[`Audio Player recorded player renders with logical props overrides 1`] =
 }
 
 .emotion-18 {
-  fill: #2E2E2E;
+  fill: #3B3B3B;
   vertical-align: unset;
   display: inline-block;
 }
@@ -10522,7 +10522,7 @@ exports[`Audio Player recorded player renders with logical props overrides 1`] =
   appearance: none;
   background-color: transparent;
   border-radius: 50%;
-  color: #C0C0C0;
+  color: #ABABAB;
   margin: 0;
 }
 
@@ -10532,7 +10532,7 @@ exports[`Audio Player recorded player renders with logical props overrides 1`] =
 }
 
 .emotion-25 svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 @media screen and (prefers-reduced-motion: no-preference) {
@@ -10555,7 +10555,7 @@ exports[`Audio Player recorded player renders with logical props overrides 1`] =
   display: inline-block;
   vertical-align: middle;
   overflow: hidden;
-  fill: #2E2E2E;
+  fill: #3B3B3B;
   vertical-align: unset;
   display: inline-block;
 }
@@ -10604,7 +10604,7 @@ exports[`Audio Player recorded player renders with logical props overrides 1`] =
   appearance: none;
   background-color: transparent;
   border-radius: 50%;
-  color: #C0C0C0;
+  color: #ABABAB;
   margin: 0;
   opacity: 0;
   pointer-events: none;
@@ -10616,7 +10616,7 @@ exports[`Audio Player recorded player renders with logical props overrides 1`] =
 }
 
 .emotion-31 svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 @media screen and (prefers-reduced-motion: no-preference) {
@@ -10785,20 +10785,20 @@ exports[`Audio Player recorded player renders with logical props overrides 1`] =
 }
 
 .emotion-40:hover:not(:disabled) {
-  background-color: #E0E7FF;
+  background-color: #ECF1FF;
 }
 
 .emotion-40:active:not(:disabled) {
-  background-color: #AEBFFF;
+  background-color: #D5E0FC;
 }
 
 .emotion-40:disabled {
   background-color: transparent;
-  color: #C0C0C0;
+  color: #ABABAB;
 }
 
 .emotion-40:disabled svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-40:focus-visible:not(:disabled) {
@@ -10842,7 +10842,7 @@ exports[`Audio Player recorded player renders with logical props overrides 1`] =
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  background-color: #F4F4F4;
+  background-color: #E2E2E2;
   border-radius: 20rem;
   margin: calc(16px/2 - 4px/2) calc(16px/2);
   height: 4px;
@@ -10871,19 +10871,19 @@ exports[`Audio Player recorded player renders with logical props overrides 1`] =
 }
 
 .emotion-46 svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-46:hover:not(:disabled) {
-  background-color: #2B4AAB;
+  background-color: #254CAC;
 }
 
 .emotion-46:active:not(:disabled) {
-  background-color: #213A82;
+  background-color: #14328D;
 }
 
 .emotion-46:active:not(:disabled) svg {
-  fill: #535353;
+  fill: #6A6A6A;
 }
 
 .emotion-47 {
@@ -10914,22 +10914,22 @@ exports[`Audio Player recorded player renders with logical props overrides 1`] =
 }
 
 .emotion-47:valid:hover:not(:disabled) {
-  background-color: #148F39;
+  background-color: #00601A;
   opacity: 0.2;
 }
 
 .emotion-47:valid:hover:active:not(:disabled) {
-  background-color: #148F39;
+  background-color: #00601A;
   opacity: 0.4;
 }
 
 .emotion-47:invalid:hover:not(:disabled) {
-  background-color: #D20600;
+  background-color: #A90000;
   opacity: 0.2;
 }
 
 .emotion-47:invalid:hover:active:not(:disabled) {
-  background-color: #D20600;
+  background-color: #A90000;
   opacity: 0.4;
 }
 
@@ -11072,7 +11072,7 @@ exports[`Audio Player recorded player renders with logical props overrides 1`] =
   display: flex;
   cursor: pointer;
   box-sizing: border-box;
-  background-color: #FAFAFA;
+  background-color: #F1F1F1;
   border-radius: 20rem;
   margin: calc(16px/2 - 8px/2) calc(16px/2);
   height: 8px;
@@ -11114,7 +11114,7 @@ exports[`Audio Player recorded player renders with logical props overrides 1`] =
   font-weight: 500;
   letter-spacing: 0;
   padding: 0.5px 0px;
-  color: #2E2E2E;
+  color: #3B3B3B;
 }
 
 .emotion-65::before {
@@ -11920,7 +11920,7 @@ exports[`Audio Player recorded player renders with overrides 1`] = `
 }
 
 .emotion-18 {
-  fill: #2E2E2E;
+  fill: #3B3B3B;
   vertical-align: unset;
   display: inline-block;
 }
@@ -12012,7 +12012,7 @@ exports[`Audio Player recorded player renders with overrides 1`] = `
   display: inline-block;
   vertical-align: middle;
   overflow: hidden;
-  fill: #2E2E2E;
+  fill: #3B3B3B;
   vertical-align: unset;
   display: inline-block;
 }
@@ -12314,22 +12314,22 @@ exports[`Audio Player recorded player renders with overrides 1`] = `
 }
 
 .emotion-47:valid:hover:not(:disabled) {
-  background-color: #148F39;
+  background-color: #00601A;
   opacity: 0.2;
 }
 
 .emotion-47:valid:hover:active:not(:disabled) {
-  background-color: #148F39;
+  background-color: #00601A;
   opacity: 0.4;
 }
 
 .emotion-47:invalid:hover:not(:disabled) {
-  background-color: #D20600;
+  background-color: #A90000;
   opacity: 0.2;
 }
 
 .emotion-47:invalid:hover:active:not(:disabled) {
-  background-color: #D20600;
+  background-color: #A90000;
   opacity: 0.4;
 }
 
diff --git a/src/audio-player/__tests__/__snapshots__/popout-button.test.tsx.snap b/src/audio-player/__tests__/__snapshots__/popout-button.test.tsx.snap
index 4db4585489..683bc2fb82 100644
--- a/src/audio-player/__tests__/__snapshots__/popout-button.test.tsx.snap
+++ b/src/audio-player/__tests__/__snapshots__/popout-button.test.tsx.snap
@@ -45,20 +45,20 @@ exports[`PopoutButton renders correctly with default props 1`] = `
 }
 
 .emotion-0:hover:not(:disabled) {
-  background-color: #2B4AAB;
+  background-color: #254CAC;
 }
 
 .emotion-0:active:not(:disabled) {
-  background-color: #213A82;
+  background-color: #14328D;
 }
 
 .emotion-0:disabled {
-  background-color: #F4F4F4;
-  color: #C0C0C0;
+  background-color: #E2E2E2;
+  color: #ABABAB;
 }
 
 .emotion-0:disabled svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-0:focus-visible:not(:disabled) {
@@ -126,7 +126,7 @@ exports[`PopoutButton renders correctly with default props 1`] = `
   display: inline-block;
   vertical-align: middle;
   overflow: hidden;
-  fill: #2E2E2E;
+  fill: #3B3B3B;
   vertical-align: unset;
   display: inline-block;
 }
diff --git a/src/banner/__tests__/__snapshots__/banner.test.tsx.snap b/src/banner/__tests__/__snapshots__/banner.test.tsx.snap
index d6c5615b79..794ee6f74a 100644
--- a/src/banner/__tests__/__snapshots__/banner.test.tsx.snap
+++ b/src/banner/__tests__/__snapshots__/banner.test.tsx.snap
@@ -34,7 +34,7 @@ exports[`Banner renders with content as react element 1`] = `
 
 .emotion-1 {
   box-sizing: border-box;
-  background-color: #05717D;
+  background-color: #017582;
   padding: 20px;
   min-height: 64px;
 }
@@ -299,7 +299,7 @@ exports[`Banner renders with content as react element 1`] = `
 
 .emotion-1 {
   box-sizing: border-box;
-  background-color: #05717D;
+  background-color: #017582;
   padding: 20px;
   min-height: 64px;
 }
@@ -566,7 +566,7 @@ exports[`Banner renders with content as string and link 1`] = `
 
 .emotion-1 {
   box-sizing: border-box;
-  background-color: #05717D;
+  background-color: #017582;
   padding: 20px;
   min-height: 64px;
 }
@@ -780,43 +780,43 @@ exports[`Banner renders with content as string and link 1`] = `
 }
 
 .emotion-9:hover:not(:disabled) {
-  color: #2B4AAB;
+  color: #254CAC;
   -webkit-text-decoration: underline;
   text-decoration: underline;
 }
 
 .emotion-9:hover:not(:disabled) svg {
-  fill: #2B4AAB;
+  fill: #254CAC;
 }
 
 .emotion-9:active:not(:disabled) {
-  color: #213A82;
+  color: #14328D;
   -webkit-text-decoration: underline;
   text-decoration: underline;
 }
 
 .emotion-9:active:not(:disabled) svg {
-  fill: #213A82;
+  fill: #14328D;
 }
 
 .emotion-9:visited:not(:disabled) {
-  color: #5E44E4;
+  color: #6454E3;
   -webkit-text-decoration: underline;
   text-decoration: underline;
 }
 
 .emotion-9:visited:not(:disabled) svg {
-  fill: #5E44E4;
+  fill: #6454E3;
 }
 
 .emotion-9:visited:hover:not(:disabled) {
-  color: #5E44E4;
+  color: #6454E3;
   -webkit-text-decoration: underline;
   text-decoration: underline;
 }
 
 .emotion-9:visited:hover:not(:disabled) svg {
-  fill: #5E44E4;
+  fill: #6454E3;
 }
 
 .emotion-9:focus-visible:not(:disabled) {
@@ -944,7 +944,7 @@ exports[`Banner renders with content as string and link 1`] = `
 
 .emotion-1 {
   box-sizing: border-box;
-  background-color: #05717D;
+  background-color: #017582;
   padding: 20px;
   min-height: 64px;
 }
@@ -1155,43 +1155,43 @@ exports[`Banner renders with content as string and link 1`] = `
 }
 
 .emotion-9:hover:not(:disabled) {
-  color: #2B4AAB;
+  color: #254CAC;
   -webkit-text-decoration: underline;
   text-decoration: underline;
 }
 
 .emotion-9:hover:not(:disabled) svg {
-  fill: #2B4AAB;
+  fill: #254CAC;
 }
 
 .emotion-9:active:not(:disabled) {
-  color: #213A82;
+  color: #14328D;
   -webkit-text-decoration: underline;
   text-decoration: underline;
 }
 
 .emotion-9:active:not(:disabled) svg {
-  fill: #213A82;
+  fill: #14328D;
 }
 
 .emotion-9:visited:not(:disabled) {
-  color: #5E44E4;
+  color: #6454E3;
   -webkit-text-decoration: underline;
   text-decoration: underline;
 }
 
 .emotion-9:visited:not(:disabled) svg {
-  fill: #5E44E4;
+  fill: #6454E3;
 }
 
 .emotion-9:visited:hover:not(:disabled) {
-  color: #5E44E4;
+  color: #6454E3;
   -webkit-text-decoration: underline;
   text-decoration: underline;
 }
 
 .emotion-9:visited:hover:not(:disabled) svg {
-  fill: #5E44E4;
+  fill: #6454E3;
 }
 
 .emotion-9:focus-visible:not(:disabled) {
@@ -1324,7 +1324,7 @@ exports[`Banner renders with default props 1`] = `
 
 .emotion-1 {
   box-sizing: border-box;
-  background-color: #05717D;
+  background-color: #017582;
   padding: 20px;
   min-height: 64px;
 }
@@ -1581,7 +1581,7 @@ exports[`Banner renders with default props 1`] = `
 
 .emotion-1 {
   box-sizing: border-box;
-  background-color: #05717D;
+  background-color: #017582;
   padding: 20px;
   min-height: 64px;
 }
@@ -1840,7 +1840,7 @@ exports[`Banner renders with icon 1`] = `
 
 .emotion-1 {
   box-sizing: border-box;
-  background-color: #05717D;
+  background-color: #017582;
   padding: 20px;
   min-height: 64px;
 }
@@ -2174,7 +2174,7 @@ exports[`Banner renders with icon 1`] = `
 
 .emotion-1 {
   box-sizing: border-box;
-  background-color: #05717D;
+  background-color: #017582;
   padding: 20px;
   min-height: 64px;
 }
@@ -2480,7 +2480,7 @@ exports[`Banner renders with multiple action buttons and overridden spaceInline
 
   .emotion-0 {
   box-sizing: border-box;
-  background-color: #05717D;
+  background-color: #017582;
   padding: 20px;
   min-height: 64px;
 }
@@ -2738,20 +2738,20 @@ exports[`Banner renders with multiple action buttons and overridden spaceInline
 }
 
 .emotion-10:hover:not(:disabled) {
-  background-color: #2B4AAB;
+  background-color: #254CAC;
 }
 
 .emotion-10:active:not(:disabled) {
-  background-color: #213A82;
+  background-color: #14328D;
 }
 
 .emotion-10:disabled {
-  background-color: #F4F4F4;
-  color: #C0C0C0;
+  background-color: #E2E2E2;
+  color: #ABABAB;
 }
 
 .emotion-10:disabled svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-10:focus-visible:not(:disabled) {
@@ -2930,7 +2930,7 @@ exports[`Banner renders with multiple action buttons and overridden spaceInline
 
   .emotion-0 {
   box-sizing: border-box;
-  background-color: #05717D;
+  background-color: #017582;
   padding: 20px;
   min-height: 64px;
 }
@@ -3191,20 +3191,20 @@ exports[`Banner renders with multiple action buttons and overridden spaceInline
 }
 
 .emotion-10:hover:not(:disabled) {
-  background-color: #2B4AAB;
+  background-color: #254CAC;
 }
 
 .emotion-10:active:not(:disabled) {
-  background-color: #213A82;
+  background-color: #14328D;
 }
 
 .emotion-10:disabled {
-  background-color: #F4F4F4;
-  color: #C0C0C0;
+  background-color: #E2E2E2;
+  color: #ABABAB;
 }
 
 .emotion-10:disabled svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-10:focus-visible:not(:disabled) {
@@ -3383,7 +3383,7 @@ exports[`Banner renders with single action button on horizontal layout 1`] = `
 
   .emotion-0 {
   box-sizing: border-box;
-  background-color: #05717D;
+  background-color: #017582;
   padding: 20px;
   min-height: 64px;
 }
@@ -3645,20 +3645,20 @@ exports[`Banner renders with single action button on horizontal layout 1`] = `
 }
 
 .emotion-10:hover:not(:disabled) {
-  background-color: #2B4AAB;
+  background-color: #254CAC;
 }
 
 .emotion-10:active:not(:disabled) {
-  background-color: #213A82;
+  background-color: #14328D;
 }
 
 .emotion-10:disabled {
-  background-color: #F4F4F4;
-  color: #C0C0C0;
+  background-color: #E2E2E2;
+  color: #ABABAB;
 }
 
 .emotion-10:disabled svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-10:focus-visible:not(:disabled) {
@@ -3814,7 +3814,7 @@ exports[`Banner renders with single action button on vertical layout 1`] = `
 
   .emotion-0 {
   box-sizing: border-box;
-  background-color: #05717D;
+  background-color: #017582;
   padding: 20px;
   min-height: 64px;
 }
@@ -4079,20 +4079,20 @@ exports[`Banner renders with single action button on vertical layout 1`] = `
 }
 
 .emotion-10:hover:not(:disabled) {
-  background-color: #2B4AAB;
+  background-color: #254CAC;
 }
 
 .emotion-10:active:not(:disabled) {
-  background-color: #213A82;
+  background-color: #14328D;
 }
 
 .emotion-10:disabled {
-  background-color: #F4F4F4;
-  color: #C0C0C0;
+  background-color: #E2E2E2;
+  color: #ABABAB;
 }
 
 .emotion-10:disabled svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-10:focus-visible:not(:disabled) {
@@ -4278,7 +4278,7 @@ exports[`Banner renders with title 1`] = `
 
 .emotion-1 {
   box-sizing: border-box;
-  background-color: #05717D;
+  background-color: #017582;
   padding: 20px;
   min-height: 64px;
 }
@@ -4569,7 +4569,7 @@ exports[`Banner renders with title 1`] = `
 
 .emotion-1 {
   box-sizing: border-box;
-  background-color: #05717D;
+  background-color: #017582;
   padding: 20px;
   min-height: 64px;
 }
@@ -4832,7 +4832,7 @@ exports[`Banner with action and close buttons renders correctly on horizontal la
 
   .emotion-0 {
   box-sizing: border-box;
-  background-color: #05717D;
+  background-color: #017582;
   padding: 20px;
   min-height: 64px;
 }
@@ -5094,20 +5094,20 @@ exports[`Banner with action and close buttons renders correctly on horizontal la
 }
 
 .emotion-10:hover:not(:disabled) {
-  background-color: #2B4AAB;
+  background-color: #254CAC;
 }
 
 .emotion-10:active:not(:disabled) {
-  background-color: #213A82;
+  background-color: #14328D;
 }
 
 .emotion-10:disabled {
-  background-color: #F4F4F4;
-  color: #C0C0C0;
+  background-color: #E2E2E2;
+  color: #ABABAB;
 }
 
 .emotion-10:disabled svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-10:focus-visible:not(:disabled) {
@@ -5255,11 +5255,11 @@ exports[`Banner with action and close buttons renders correctly on horizontal la
 
 .emotion-15:disabled {
   background-color: transparent;
-  color: #C0C0C0;
+  color: #ABABAB;
 }
 
 .emotion-15:disabled svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-15:focus-visible:not(:disabled) {
@@ -5297,7 +5297,7 @@ exports[`Banner with action and close buttons renders correctly on horizontal la
   display: inline-block;
   vertical-align: middle;
   overflow: hidden;
-  fill: #2E2E2E;
+  fill: #3B3B3B;
   vertical-align: unset;
   display: inline-block;
 }
@@ -5422,7 +5422,7 @@ exports[`Banner with action and close buttons renders correctly on vertical layo
 
   .emotion-0 {
   box-sizing: border-box;
-  background-color: #05717D;
+  background-color: #017582;
   padding: 20px;
   min-height: 64px;
 }
@@ -5700,12 +5700,12 @@ exports[`Banner with action and close buttons renders correctly on vertical layo
 }
 
 .emotion-10:disabled {
-  border-color: #F4F4F4;
-  color: #C0C0C0;
+  border-color: #E2E2E2;
+  color: #ABABAB;
 }
 
 .emotion-10:disabled svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-10:focus-visible:not(:disabled) {
@@ -5835,20 +5835,20 @@ exports[`Banner with action and close buttons renders correctly on vertical layo
 }
 
 .emotion-15:hover:not(:disabled) {
-  background-color: #2B4AAB;
+  background-color: #254CAC;
 }
 
 .emotion-15:active:not(:disabled) {
-  background-color: #213A82;
+  background-color: #14328D;
 }
 
 .emotion-15:disabled {
-  background-color: #F4F4F4;
-  color: #C0C0C0;
+  background-color: #E2E2E2;
+  color: #ABABAB;
 }
 
 .emotion-15:disabled svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-15:focus-visible:not(:disabled) {
@@ -5974,7 +5974,7 @@ exports[`Banner with close button renders correctly on horizontal layout 1`] = `
 
   .emotion-0 {
   box-sizing: border-box;
-  background-color: #05717D;
+  background-color: #017582;
   padding: 20px;
   min-height: 64px;
 }
@@ -6242,11 +6242,11 @@ exports[`Banner with close button renders correctly on horizontal layout 1`] = `
 
 .emotion-10:disabled {
   background-color: transparent;
-  color: #C0C0C0;
+  color: #ABABAB;
 }
 
 .emotion-10:disabled svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-10:focus-visible:not(:disabled) {
@@ -6314,7 +6314,7 @@ exports[`Banner with close button renders correctly on horizontal layout 1`] = `
   display: inline-block;
   vertical-align: middle;
   overflow: hidden;
-  fill: #2E2E2E;
+  fill: #3B3B3B;
   vertical-align: unset;
   display: inline-block;
 }
@@ -6416,7 +6416,7 @@ exports[`Banner with close button renders correctly on vertical layout 1`] = `
 
   .emotion-0 {
   box-sizing: border-box;
-  background-color: #05717D;
+  background-color: #017582;
   padding: 20px;
   min-height: 64px;
 }
@@ -6694,12 +6694,12 @@ exports[`Banner with close button renders correctly on vertical layout 1`] = `
 }
 
 .emotion-10:disabled {
-  border-color: #F4F4F4;
-  color: #C0C0C0;
+  border-color: #E2E2E2;
+  color: #ABABAB;
 }
 
 .emotion-10:disabled svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-10:focus-visible:not(:disabled) {
@@ -6885,7 +6885,7 @@ exports[`renders grid and cell overrides on banner 1`] = `
 
 .emotion-1 {
   box-sizing: border-box;
-  background-color: #05717D;
+  background-color: #017582;
   padding: 20px;
   min-height: 64px;
 }
@@ -7160,20 +7160,20 @@ exports[`renders grid and cell overrides on banner 1`] = `
 }
 
 .emotion-11:hover:not(:disabled) {
-  background-color: #2B4AAB;
+  background-color: #254CAC;
 }
 
 .emotion-11:active:not(:disabled) {
-  background-color: #213A82;
+  background-color: #14328D;
 }
 
 .emotion-11:disabled {
-  background-color: #F4F4F4;
-  color: #C0C0C0;
+  background-color: #E2E2E2;
+  color: #ABABAB;
 }
 
 .emotion-11:disabled svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-11:focus-visible:not(:disabled) {
@@ -7381,7 +7381,7 @@ exports[`renders grid and cell overrides on banner 1`] = `
 
 .emotion-1 {
   box-sizing: border-box;
-  background-color: #05717D;
+  background-color: #017582;
   padding: 20px;
   min-height: 64px;
 }
@@ -7653,20 +7653,20 @@ exports[`renders grid and cell overrides on banner 1`] = `
 }
 
 .emotion-11:hover:not(:disabled) {
-  background-color: #2B4AAB;
+  background-color: #254CAC;
 }
 
 .emotion-11:active:not(:disabled) {
-  background-color: #213A82;
+  background-color: #14328D;
 }
 
 .emotion-11:disabled {
-  background-color: #F4F4F4;
-  color: #C0C0C0;
+  background-color: #E2E2E2;
+  color: #ABABAB;
 }
 
 .emotion-11:disabled svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-11:focus-visible:not(:disabled) {
@@ -7879,7 +7879,7 @@ exports[`renders with logical props overrides 1`] = `
 
 .emotion-1 {
   box-sizing: border-box;
-  background-color: #05717D;
+  background-color: #017582;
   padding: 20px;
   min-height: 64px;
   margin-block: 30px;
@@ -8138,7 +8138,7 @@ exports[`renders with logical props overrides 1`] = `
 
 .emotion-1 {
   box-sizing: border-box;
-  background-color: #05717D;
+  background-color: #017582;
   padding: 20px;
   min-height: 64px;
   margin-block: 30px;
diff --git a/src/block/__tests__/__snapshots__/block.test.tsx.snap b/src/block/__tests__/__snapshots__/block.test.tsx.snap
index 3fd75becea..d5106fbb56 100644
--- a/src/block/__tests__/__snapshots__/block.test.tsx.snap
+++ b/src/block/__tests__/__snapshots__/block.test.tsx.snap
@@ -19,7 +19,7 @@ exports[`Block with props renders as span 1`] = `
 exports[`Block with props renders with customBlock style preset 1`] = `
 
   .emotion-0 {
-  background-color: #05717D;
+  background-color: #017582;
   color: #FFFFFF;
 }
 
diff --git a/src/button/__tests__/__snapshots__/button.test.tsx.snap b/src/button/__tests__/__snapshots__/button.test.tsx.snap
index fe4a2c2c1d..3277ac1446 100644
--- a/src/button/__tests__/__snapshots__/button.test.tsx.snap
+++ b/src/button/__tests__/__snapshots__/button.test.tsx.snap
@@ -28,7 +28,7 @@ exports[`Button Loading Button renders Large Button 1`] = `
   -moz-appearance: none;
   -ms-appearance: none;
   appearance: none;
-  background-color: #AEBFFF;
+  background-color: #D5E0FC;
   border-radius: 8px;
   color: #3358CC;
   margin: 0;
@@ -173,7 +173,7 @@ exports[`Button Loading Button renders Small Button 1`] = `
   -moz-appearance: none;
   -ms-appearance: none;
   appearance: none;
-  background-color: #AEBFFF;
+  background-color: #D5E0FC;
   border-radius: 8px;
   color: #3358CC;
   margin: 0;
@@ -335,20 +335,20 @@ exports[`Button Loading Button renders a button with fixed for minWidth and minH
 }
 
 .emotion-0:hover:not(:disabled) {
-  background-color: #2B4AAB;
+  background-color: #254CAC;
 }
 
 .emotion-0:active:not(:disabled) {
-  background-color: #213A82;
+  background-color: #14328D;
 }
 
 .emotion-0:disabled {
-  background-color: #F4F4F4;
-  color: #C0C0C0;
+  background-color: #E2E2E2;
+  color: #ABABAB;
 }
 
 .emotion-0:disabled svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-0:focus-visible:not(:disabled) {
@@ -502,20 +502,20 @@ exports[`Button Loading Button renders a button with fixed for width and height
 }
 
 .emotion-0:hover:not(:disabled) {
-  background-color: #2B4AAB;
+  background-color: #254CAC;
 }
 
 .emotion-0:active:not(:disabled) {
-  background-color: #213A82;
+  background-color: #14328D;
 }
 
 .emotion-0:disabled {
-  background-color: #F4F4F4;
-  color: #C0C0C0;
+  background-color: #E2E2E2;
+  color: #ABABAB;
 }
 
 .emotion-0:disabled svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-0:focus-visible:not(:disabled) {
@@ -669,20 +669,20 @@ exports[`Button Loading Button renders a button with percentage for minWidth and
 }
 
 .emotion-0:hover:not(:disabled) {
-  background-color: #2B4AAB;
+  background-color: #254CAC;
 }
 
 .emotion-0:active:not(:disabled) {
-  background-color: #213A82;
+  background-color: #14328D;
 }
 
 .emotion-0:disabled {
-  background-color: #F4F4F4;
-  color: #C0C0C0;
+  background-color: #E2E2E2;
+  color: #ABABAB;
 }
 
 .emotion-0:disabled svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-0:focus-visible:not(:disabled) {
@@ -836,20 +836,20 @@ exports[`Button Loading Button renders a button with percentage for width and he
 }
 
 .emotion-0:hover:not(:disabled) {
-  background-color: #2B4AAB;
+  background-color: #254CAC;
 }
 
 .emotion-0:active:not(:disabled) {
-  background-color: #213A82;
+  background-color: #14328D;
 }
 
 .emotion-0:disabled {
-  background-color: #F4F4F4;
-  color: #C0C0C0;
+  background-color: #E2E2E2;
+  color: #ABABAB;
 }
 
 .emotion-0:disabled svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-0:focus-visible:not(:disabled) {
@@ -1003,20 +1003,20 @@ exports[`Button Loading Button renders a button with token set for minWidth and
 }
 
 .emotion-0:hover:not(:disabled) {
-  background-color: #2B4AAB;
+  background-color: #254CAC;
 }
 
 .emotion-0:active:not(:disabled) {
-  background-color: #213A82;
+  background-color: #14328D;
 }
 
 .emotion-0:disabled {
-  background-color: #F4F4F4;
-  color: #C0C0C0;
+  background-color: #E2E2E2;
+  color: #ABABAB;
 }
 
 .emotion-0:disabled svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-0:focus-visible:not(:disabled) {
@@ -1170,20 +1170,20 @@ exports[`Button Loading Button renders a button with token set for width and hei
 }
 
 .emotion-0:hover:not(:disabled) {
-  background-color: #2B4AAB;
+  background-color: #254CAC;
 }
 
 .emotion-0:active:not(:disabled) {
-  background-color: #213A82;
+  background-color: #14328D;
 }
 
 .emotion-0:disabled {
-  background-color: #F4F4F4;
-  color: #C0C0C0;
+  background-color: #E2E2E2;
+  color: #ABABAB;
 }
 
 .emotion-0:disabled svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-0:focus-visible:not(:disabled) {
@@ -1337,20 +1337,20 @@ exports[`Button renders Large Button 1`] = `
 }
 
 .emotion-0:hover:not(:disabled) {
-  background-color: #2B4AAB;
+  background-color: #254CAC;
 }
 
 .emotion-0:active:not(:disabled) {
-  background-color: #213A82;
+  background-color: #14328D;
 }
 
 .emotion-0:disabled {
-  background-color: #F4F4F4;
-  color: #C0C0C0;
+  background-color: #E2E2E2;
+  color: #ABABAB;
 }
 
 .emotion-0:disabled svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-0:focus-visible:not(:disabled) {
@@ -1504,20 +1504,20 @@ exports[`Button renders Small Button 1`] = `
 }
 
 .emotion-0:hover:not(:disabled) {
-  background-color: #2B4AAB;
+  background-color: #254CAC;
 }
 
 .emotion-0:active:not(:disabled) {
-  background-color: #213A82;
+  background-color: #14328D;
 }
 
 .emotion-0:disabled {
-  background-color: #F4F4F4;
-  color: #C0C0C0;
+  background-color: #E2E2E2;
+  color: #ABABAB;
 }
 
 .emotion-0:disabled svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-0:focus-visible:not(:disabled) {
@@ -1671,20 +1671,20 @@ exports[`Button renders button link when href passed 1`] = `
 }
 
 .emotion-0:hover:not(:disabled) {
-  background-color: #2B4AAB;
+  background-color: #254CAC;
 }
 
 .emotion-0:active:not(:disabled) {
-  background-color: #213A82;
+  background-color: #14328D;
 }
 
 .emotion-0:disabled {
-  background-color: #F4F4F4;
-  color: #C0C0C0;
+  background-color: #E2E2E2;
+  color: #ABABAB;
 }
 
 .emotion-0:disabled svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-0:focus-visible:not(:disabled) {
@@ -1821,9 +1821,9 @@ exports[`Button renders button link with disabled link 1`] = `
   -moz-appearance: none;
   -ms-appearance: none;
   appearance: none;
-  background-color: #F4F4F4;
+  background-color: #E2E2E2;
   border-radius: 8px;
-  color: #C0C0C0;
+  color: #ABABAB;
   margin: 0;
 }
 
@@ -1833,7 +1833,7 @@ exports[`Button renders button link with disabled link 1`] = `
 }
 
 .emotion-0 svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 @media screen and (prefers-reduced-motion: no-preference) {
@@ -1973,20 +1973,20 @@ exports[`Button renders fixed-width Button 1`] = `
 }
 
 .emotion-0:hover:not(:disabled) {
-  background-color: #2B4AAB;
+  background-color: #254CAC;
 }
 
 .emotion-0:active:not(:disabled) {
-  background-color: #213A82;
+  background-color: #14328D;
 }
 
 .emotion-0:disabled {
-  background-color: #F4F4F4;
-  color: #C0C0C0;
+  background-color: #E2E2E2;
+  color: #ABABAB;
 }
 
 .emotion-0:disabled svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-0:focus-visible:not(:disabled) {
@@ -2140,20 +2140,20 @@ exports[`Button renders full-width Button 1`] = `
 }
 
 .emotion-0:hover:not(:disabled) {
-  background-color: #2B4AAB;
+  background-color: #254CAC;
 }
 
 .emotion-0:active:not(:disabled) {
-  background-color: #213A82;
+  background-color: #14328D;
 }
 
 .emotion-0:disabled {
-  background-color: #F4F4F4;
-  color: #C0C0C0;
+  background-color: #E2E2E2;
+  color: #ABABAB;
 }
 
 .emotion-0:disabled svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-0:focus-visible:not(:disabled) {
@@ -2307,20 +2307,20 @@ exports[`Button renders text and icon button with fallback formatting 1`] = `
 }
 
 .emotion-0:hover:not(:disabled) {
-  background-color: #2B4AAB;
+  background-color: #254CAC;
 }
 
 .emotion-0:active:not(:disabled) {
-  background-color: #213A82;
+  background-color: #14328D;
 }
 
 .emotion-0:disabled {
-  background-color: #F4F4F4;
-  color: #C0C0C0;
+  background-color: #E2E2E2;
+  color: #ABABAB;
 }
 
 .emotion-0:disabled svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-0:focus-visible:not(:disabled) {
@@ -2411,7 +2411,7 @@ exports[`Button renders text and icon button with fallback formatting 1`] = `
   display: inline-block;
   vertical-align: middle;
   overflow: hidden;
-  fill: #2E2E2E;
+  fill: #3B3B3B;
   vertical-align: unset;
   display: inline-block;
 }
@@ -2519,20 +2519,20 @@ exports[`Button renders with different spaceInset preset 1`] = `
 }
 
 .emotion-0:hover:not(:disabled) {
-  background-color: #2B4AAB;
+  background-color: #254CAC;
 }
 
 .emotion-0:active:not(:disabled) {
-  background-color: #213A82;
+  background-color: #14328D;
 }
 
 .emotion-0:disabled {
-  background-color: #F4F4F4;
-  color: #C0C0C0;
+  background-color: #E2E2E2;
+  color: #ABABAB;
 }
 
 .emotion-0:disabled svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-0:focus-visible:not(:disabled) {
@@ -2689,22 +2689,22 @@ exports[`Button renders with different style preset 1`] = `
 }
 
 .emotion-0:hover:not(:disabled) {
-  background-color: #E0E7FF;
-  border-color: #2B4AAB;
+  background-color: #ECF1FF;
+  border-color: #254CAC;
 }
 
 .emotion-0:active:not(:disabled) {
-  background-color: #AEBFFF;
-  border-color: #213A82;
+  background-color: #D5E0FC;
+  border-color: #14328D;
 }
 
 .emotion-0:disabled {
-  border-color: #F4F4F4;
-  color: #C0C0C0;
+  border-color: #E2E2E2;
+  color: #ABABAB;
 }
 
 .emotion-0:disabled svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-0:focus-visible:not(:disabled) {
@@ -2858,20 +2858,20 @@ exports[`Button renders with different typography preset 1`] = `
 }
 
 .emotion-0:hover:not(:disabled) {
-  background-color: #2B4AAB;
+  background-color: #254CAC;
 }
 
 .emotion-0:active:not(:disabled) {
-  background-color: #213A82;
+  background-color: #14328D;
 }
 
 .emotion-0:disabled {
-  background-color: #F4F4F4;
-  color: #C0C0C0;
+  background-color: #E2E2E2;
+  color: #ABABAB;
 }
 
 .emotion-0:disabled svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-0:focus-visible:not(:disabled) {
@@ -3025,20 +3025,20 @@ exports[`Button renders with fallback formatting 1`] = `
 }
 
 .emotion-0:hover:not(:disabled) {
-  background-color: #2B4AAB;
+  background-color: #254CAC;
 }
 
 .emotion-0:active:not(:disabled) {
-  background-color: #213A82;
+  background-color: #14328D;
 }
 
 .emotion-0:disabled {
-  background-color: #F4F4F4;
-  color: #C0C0C0;
+  background-color: #E2E2E2;
+  color: #ABABAB;
 }
 
 .emotion-0:disabled svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-0:focus-visible:not(:disabled) {
@@ -3196,20 +3196,20 @@ exports[`Button renders with logical props overrides 1`] = `
 }
 
 .emotion-0:hover:not(:disabled) {
-  background-color: #2B4AAB;
+  background-color: #254CAC;
 }
 
 .emotion-0:active:not(:disabled) {
-  background-color: #213A82;
+  background-color: #14328D;
 }
 
 .emotion-0:disabled {
-  background-color: #F4F4F4;
-  color: #C0C0C0;
+  background-color: #E2E2E2;
+  color: #ABABAB;
 }
 
 .emotion-0:disabled svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-0:focus-visible:not(:disabled) {
diff --git a/src/byline/__tests__/__snapshots__/byline.test.tsx.snap b/src/byline/__tests__/__snapshots__/byline.test.tsx.snap
index 26bce91a9b..93ff54d116 100644
--- a/src/byline/__tests__/__snapshots__/byline.test.tsx.snap
+++ b/src/byline/__tests__/__snapshots__/byline.test.tsx.snap
@@ -49,7 +49,7 @@ exports[`Byline renders correctly multiple authors with link only 1`] = `
 
 .emotion-3 {
   margin: 0;
-  color: #535353;
+  color: #6A6A6A;
   font-family: "DM Sans",sans-serif;
   font-size: 14px;
   line-height: 21px;
@@ -60,7 +60,7 @@ exports[`Byline renders correctly multiple authors with link only 1`] = `
 }
 
 .emotion-3 svg {
-  fill: #535353;
+  fill: #6A6A6A;
 }
 
 .emotion-3::before {
@@ -103,43 +103,43 @@ exports[`Byline renders correctly multiple authors with link only 1`] = `
 }
 
 .emotion-4:hover:not(:disabled) {
-  color: #2B4AAB;
+  color: #254CAC;
   -webkit-text-decoration: underline;
   text-decoration: underline;
 }
 
 .emotion-4:hover:not(:disabled) svg {
-  fill: #2B4AAB;
+  fill: #254CAC;
 }
 
 .emotion-4:active:not(:disabled) {
-  color: #213A82;
+  color: #14328D;
   -webkit-text-decoration: underline;
   text-decoration: underline;
 }
 
 .emotion-4:active:not(:disabled) svg {
-  fill: #213A82;
+  fill: #14328D;
 }
 
 .emotion-4:visited:not(:disabled) {
-  color: #5E44E4;
+  color: #6454E3;
   -webkit-text-decoration: underline;
   text-decoration: underline;
 }
 
 .emotion-4:visited:not(:disabled) svg {
-  fill: #5E44E4;
+  fill: #6454E3;
 }
 
 .emotion-4:visited:hover:not(:disabled) {
-  color: #5E44E4;
+  color: #6454E3;
   -webkit-text-decoration: underline;
   text-decoration: underline;
 }
 
 .emotion-4:visited:hover:not(:disabled) svg {
-  fill: #5E44E4;
+  fill: #6454E3;
 }
 
 .emotion-4:focus-visible:not(:disabled) {
@@ -188,7 +188,7 @@ exports[`Byline renders correctly multiple authors with link only 1`] = `
 
 .emotion-7 {
   margin-left: 8px;
-  color: #C0C0C0;
+  color: #ABABAB;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -196,7 +196,7 @@ exports[`Byline renders correctly multiple authors with link only 1`] = `
 }
 
 .emotion-7 svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 

   .emotion-1 {
   margin: 0;
-  color: #2E2E2E;
+  color: #3B3B3B;
   font-family: "DM Sans",sans-serif;
   font-size: 14px;
   line-height: 21px;
@@ -15,7 +15,7 @@ exports[`Caption renders correctly with default props and caption and credit tex
 }
 
 .emotion-1 svg {
-  fill: #2E2E2E;
+  fill: #3B3B3B;
 }
 
 .emotion-1::before {
@@ -32,7 +32,7 @@ exports[`Caption renders correctly with default props and caption and credit tex
 
 .emotion-2 {
   margin: 0;
-  color: #535353;
+  color: #6A6A6A;
   text-transform: uppercase;
   font-family: "DM Sans",sans-serif;
   font-size: 12px;
@@ -43,7 +43,7 @@ exports[`Caption renders correctly with default props and caption and credit tex
 }
 
 .emotion-2 svg {
-  fill: #535353;
+  fill: #6A6A6A;
 }
 
 .emotion-2::before {
@@ -91,7 +91,7 @@ exports[`CaptionInset renders correctly with default props and caption and credi
 
 .emotion-1 {
   margin: 0;
-  color: #2E2E2E;
+  color: #3B3B3B;
   font-family: "DM Sans",sans-serif;
   font-size: 14px;
   line-height: 21px;
@@ -102,7 +102,7 @@ exports[`CaptionInset renders correctly with default props and caption and credi
 }
 
 .emotion-1 svg {
-  fill: #2E2E2E;
+  fill: #3B3B3B;
 }
 
 .emotion-1::before {
@@ -119,7 +119,7 @@ exports[`CaptionInset renders correctly with default props and caption and credi
 
 .emotion-2 {
   margin: 0;
-  color: #535353;
+  color: #6A6A6A;
   text-transform: uppercase;
   font-family: "DM Sans",sans-serif;
   font-size: 12px;
@@ -130,7 +130,7 @@ exports[`CaptionInset renders correctly with default props and caption and credi
 }
 
 .emotion-2 svg {
-  fill: #535353;
+  fill: #6A6A6A;
 }
 
 .emotion-2::before {
@@ -178,7 +178,7 @@ exports[`CaptionInset renders correctly with default props and only caption text
 
 .emotion-1 {
   margin: 0;
-  color: #2E2E2E;
+  color: #3B3B3B;
   font-family: "DM Sans",sans-serif;
   font-size: 14px;
   line-height: 21px;
@@ -188,7 +188,7 @@ exports[`CaptionInset renders correctly with default props and only caption text
 }
 
 .emotion-1 svg {
-  fill: #2E2E2E;
+  fill: #3B3B3B;
 }
 
 .emotion-1::before {
@@ -236,7 +236,7 @@ exports[`CaptionInset renders correctly with logical props overrides  1`] = `
 
 .emotion-1 {
   margin: 0;
-  color: #2E2E2E;
+  color: #3B3B3B;
   font-family: "DM Sans",sans-serif;
   font-size: 14px;
   line-height: 21px;
@@ -247,7 +247,7 @@ exports[`CaptionInset renders correctly with logical props overrides  1`] = `
 }
 
 .emotion-1 svg {
-  fill: #2E2E2E;
+  fill: #3B3B3B;
 }
 
 .emotion-1::before {
@@ -264,7 +264,7 @@ exports[`CaptionInset renders correctly with logical props overrides  1`] = `
 
 .emotion-2 {
   margin: 0;
-  color: #535353;
+  color: #6A6A6A;
   text-transform: uppercase;
   font-family: "DM Sans",sans-serif;
   font-size: 12px;
@@ -275,7 +275,7 @@ exports[`CaptionInset renders correctly with logical props overrides  1`] = `
 }
 
 .emotion-2 svg {
-  fill: #535353;
+  fill: #6A6A6A;
 }
 
 .emotion-2::before {
@@ -323,7 +323,7 @@ exports[`CaptionInset renders correctly with overriden props and caption and cre
 
 .emotion-1 {
   margin: 0;
-  color: #0A0A0A;
+  color: #111111;
   font-family: "Poppins",sans-serif;
   font-size: 22px;
   line-height: 24.75px;
@@ -334,7 +334,7 @@ exports[`CaptionInset renders correctly with overriden props and caption and cre
 }
 
 .emotion-1 svg {
-  fill: #0A0A0A;
+  fill: #111111;
 }
 
 .emotion-1::before {
@@ -351,7 +351,7 @@ exports[`CaptionInset renders correctly with overriden props and caption and cre
 
 .emotion-2 {
   margin: 0;
-  color: #0A0A0A;
+  color: #111111;
   text-transform: uppercase;
   font-family: "DM Sans",sans-serif;
   font-size: 12px;
@@ -362,7 +362,7 @@ exports[`CaptionInset renders correctly with overriden props and caption and cre
 }
 
 .emotion-2 svg {
-  fill: #0A0A0A;
+  fill: #111111;
 }
 
 .emotion-2::before {
@@ -398,7 +398,7 @@ exports[`renders correctly with default props and only caption text 1`] = `
 
   .emotion-1 {
   margin: 0;
-  color: #2E2E2E;
+  color: #3B3B3B;
   font-family: "DM Sans",sans-serif;
   font-size: 14px;
   line-height: 21px;
@@ -408,7 +408,7 @@ exports[`renders correctly with default props and only caption text 1`] = `
 }
 
 .emotion-1 svg {
-  fill: #2E2E2E;
+  fill: #3B3B3B;
 }
 
 .emotion-1::before {
@@ -439,7 +439,7 @@ exports[`renders correctly with overriden props and caption and credit text 1`]
 
   .emotion-1 {
   margin: 0;
-  color: #0A0A0A;
+  color: #111111;
   font-family: "Poppins",sans-serif;
   font-size: 22px;
   line-height: 24.75px;
@@ -450,7 +450,7 @@ exports[`renders correctly with overriden props and caption and credit text 1`]
 }
 
 .emotion-1 svg {
-  fill: #0A0A0A;
+  fill: #111111;
 }
 
 .emotion-1::before {
@@ -467,7 +467,7 @@ exports[`renders correctly with overriden props and caption and credit text 1`]
 
 .emotion-2 {
   margin: 0;
-  color: #0A0A0A;
+  color: #111111;
   text-transform: uppercase;
   font-family: "DM Sans",sans-serif;
   font-size: 12px;
@@ -478,7 +478,7 @@ exports[`renders correctly with overriden props and caption and credit text 1`]
 }
 
 .emotion-2 svg {
-  fill: #0A0A0A;
+  fill: #111111;
 }
 
 .emotion-2::before {
diff --git a/src/card/__tests__/__snapshots__/card.test.tsx.snap b/src/card/__tests__/__snapshots__/card.test.tsx.snap
index 7d22f485c0..6e89a22301 100644
--- a/src/card/__tests__/__snapshots__/card.test.tsx.snap
+++ b/src/card/__tests__/__snapshots__/card.test.tsx.snap
@@ -5,7 +5,7 @@ exports[`Card renders MQ layout 1`] = `
   .emotion-0 {
   box-sizing: border-box;
   overflow: hidden;
-  color: #2E2E2E;
+  color: #3B3B3B;
   background-color: #FFFFFF;
   position: relative;
   display: -webkit-box;
@@ -122,7 +122,7 @@ exports[`Card renders actions section with given component 1`] = `
   .emotion-0 {
   box-sizing: border-box;
   overflow: hidden;
-  color: #2E2E2E;
+  color: #3B3B3B;
   background-color: #FFFFFF;
   position: relative;
   display: -webkit-box;
@@ -252,9 +252,9 @@ exports[`Card renders actions section with given component 1`] = `
   appearance: none;
   background-color: transparent;
   border-style: solid;
-  border-color: #535353;
+  border-color: #3B3B3B;
   border-width: 1px;
-  color: #2E2E2E;
+  color: #3B3B3B;
   border-radius: 0;
 }
 
@@ -264,11 +264,11 @@ exports[`Card renders actions section with given component 1`] = `
 }
 
 .emotion-7 svg {
-  fill: #2E2E2E;
+  fill: #3B3B3B;
 }
 
 .emotion-7:hover:not(:disabled) {
-  background-color: #F4F4F4;
+  background-color: #E2E2E2;
 }
 
 .emotion-7:active:not(:disabled) {
@@ -402,20 +402,20 @@ exports[`Card renders actions section with given component 1`] = `
 }
 
 .emotion-11:hover:not(:disabled) {
-  background-color: #2B4AAB;
+  background-color: #254CAC;
 }
 
 .emotion-11:active:not(:disabled) {
-  background-color: #213A82;
+  background-color: #14328D;
 }
 
 .emotion-11:disabled {
-  background-color: #F4F4F4;
-  color: #C0C0C0;
+  background-color: #E2E2E2;
+  color: #ABABAB;
 }
 
 .emotion-11:disabled svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-11:focus-visible:not(:disabled) {
@@ -553,7 +553,7 @@ exports[`Card renders actions section with overrides for minHeight 1`] = `
   .emotion-0 {
   box-sizing: border-box;
   overflow: hidden;
-  color: #2E2E2E;
+  color: #3B3B3B;
   background-color: #FFFFFF;
   position: relative;
   display: -webkit-box;
@@ -683,9 +683,9 @@ exports[`Card renders actions section with overrides for minHeight 1`] = `
   appearance: none;
   background-color: transparent;
   border-style: solid;
-  border-color: #535353;
+  border-color: #3B3B3B;
   border-width: 1px;
-  color: #2E2E2E;
+  color: #3B3B3B;
   border-radius: 0;
 }
 
@@ -695,11 +695,11 @@ exports[`Card renders actions section with overrides for minHeight 1`] = `
 }
 
 .emotion-7 svg {
-  fill: #2E2E2E;
+  fill: #3B3B3B;
 }
 
 .emotion-7:hover:not(:disabled) {
-  background-color: #F4F4F4;
+  background-color: #E2E2E2;
 }
 
 .emotion-7:active:not(:disabled) {
@@ -833,20 +833,20 @@ exports[`Card renders actions section with overrides for minHeight 1`] = `
 }
 
 .emotion-11:hover:not(:disabled) {
-  background-color: #2B4AAB;
+  background-color: #254CAC;
 }
 
 .emotion-11:active:not(:disabled) {
-  background-color: #213A82;
+  background-color: #14328D;
 }
 
 .emotion-11:disabled {
-  background-color: #F4F4F4;
-  color: #C0C0C0;
+  background-color: #E2E2E2;
+  color: #ABABAB;
 }
 
 .emotion-11:disabled svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-11:focus-visible:not(:disabled) {
@@ -984,7 +984,7 @@ exports[`Card renders actions section with overrides for spaceInset 1`] = `
   .emotion-0 {
   box-sizing: border-box;
   overflow: hidden;
-  color: #2E2E2E;
+  color: #3B3B3B;
   background-color: #FFFFFF;
   position: relative;
   display: -webkit-box;
@@ -1114,9 +1114,9 @@ exports[`Card renders actions section with overrides for spaceInset 1`] = `
   appearance: none;
   background-color: transparent;
   border-style: solid;
-  border-color: #535353;
+  border-color: #3B3B3B;
   border-width: 1px;
-  color: #2E2E2E;
+  color: #3B3B3B;
   border-radius: 0;
 }
 
@@ -1126,11 +1126,11 @@ exports[`Card renders actions section with overrides for spaceInset 1`] = `
 }
 
 .emotion-7 svg {
-  fill: #2E2E2E;
+  fill: #3B3B3B;
 }
 
 .emotion-7:hover:not(:disabled) {
-  background-color: #F4F4F4;
+  background-color: #E2E2E2;
 }
 
 .emotion-7:active:not(:disabled) {
@@ -1264,20 +1264,20 @@ exports[`Card renders actions section with overrides for spaceInset 1`] = `
 }
 
 .emotion-11:hover:not(:disabled) {
-  background-color: #2B4AAB;
+  background-color: #254CAC;
 }
 
 .emotion-11:active:not(:disabled) {
-  background-color: #213A82;
+  background-color: #14328D;
 }
 
 .emotion-11:disabled {
-  background-color: #F4F4F4;
-  color: #C0C0C0;
+  background-color: #E2E2E2;
+  color: #ABABAB;
 }
 
 .emotion-11:disabled svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-11:focus-visible:not(:disabled) {
@@ -1415,7 +1415,7 @@ exports[`Card renders card with logical props overrides 1`] = `
   .emotion-0 {
   box-sizing: border-box;
   overflow: hidden;
-  color: #2E2E2E;
+  color: #3B3B3B;
   background-color: #FFFFFF;
   position: relative;
   display: -webkit-box;
@@ -1500,7 +1500,7 @@ exports[`Card renders card with overrides 1`] = `
   box-sizing: border-box;
   overflow: hidden;
   border-style: solid;
-  border-color: #BBAEFF;
+  border-color: #DFE0FE;
   border-width: 1px;
   position: relative;
   display: -webkit-box;
@@ -1518,7 +1518,7 @@ exports[`Card renders card with overrides 1`] = `
 
 .emotion-2 {
   box-sizing: border-box;
-  background-color: #FFDB9D;
+  background-color: #FDDCC6;
   padding: 4px 8px;
 }
 
@@ -1582,7 +1582,7 @@ exports[`Card renders correctly with Headline component in cardBody 1`] = `
   .emotion-0 {
   box-sizing: border-box;
   overflow: hidden;
-  color: #2E2E2E;
+  color: #3B3B3B;
   background-color: #FFFFFF;
   position: relative;
   display: -webkit-box;
@@ -1708,11 +1708,11 @@ exports[`Card renders correctly with Headline component in cardBody 1`] = `
   display: inline;
   font: inherit;
   margin: 0;
-  color: #0A0A0A;
+  color: #111111;
 }
 
 .emotion-5 svg {
-  fill: #0A0A0A;
+  fill: #111111;
 }
 
 

   .emotion-1 {
   margin: 0;
-  color: #535353;
+  color: #6A6A6A;
   font-family: "DM Sans",sans-serif;
   font-size: 14px;
   line-height: 21px;
@@ -16,7 +16,7 @@ exports[`DateTime renders with fallback formatting 1`] = `
 }
 
 .emotion-1 svg {
-  fill: #535353;
+  fill: #6A6A6A;
 }
 
 .emotion-1::before {
@@ -57,7 +57,7 @@ exports[`DateTime renders with logical props overrides 1`] = `
 
 .emotion-1 {
   margin: 0;
-  color: #535353;
+  color: #6A6A6A;
   font-family: "DM Sans",sans-serif;
   font-size: 14px;
   line-height: 21px;
@@ -69,7 +69,7 @@ exports[`DateTime renders with logical props overrides 1`] = `
 }
 
 .emotion-1 svg {
-  fill: #535353;
+  fill: #6A6A6A;
 }
 
 .emotion-1::before {
@@ -197,7 +197,7 @@ exports[`DateTime renders with provided date, format, prefix and suffix 1`] = `
 
   .emotion-1 {
   margin: 0;
-  color: #535353;
+  color: #6A6A6A;
   font-family: "DM Sans",sans-serif;
   font-size: 14px;
   line-height: 21px;
@@ -209,7 +209,7 @@ exports[`DateTime renders with provided date, format, prefix and suffix 1`] = `
 }
 
 .emotion-1 svg {
-  fill: #535353;
+  fill: #6A6A6A;
 }
 
 .emotion-1::before {
diff --git a/src/divider/__tests__/__snapshots__/divider.test.tsx.snap b/src/divider/__tests__/__snapshots__/divider.test.tsx.snap
index c72a76f0d0..92321dc7c8 100644
--- a/src/divider/__tests__/__snapshots__/divider.test.tsx.snap
+++ b/src/divider/__tests__/__snapshots__/divider.test.tsx.snap
@@ -4,7 +4,7 @@ exports[`Divider renders as vertical 1`] = `
 
   .emotion-0 {
   border-style: solid;
-  border-color: #DEDEDE;
+  border-color: #C6C6C6;
   border-width: 1px;
   border-width: 0px;
   margin: 0;
@@ -25,7 +25,7 @@ exports[`Divider renders with default styles 1`] = `
 
   .emotion-0 {
   border-style: solid;
-  border-color: #DEDEDE;
+  border-color: #C6C6C6;
   border-width: 1px;
   border-width: 0px;
   margin: 0;
@@ -45,7 +45,7 @@ exports[`Divider renders with logical prop overrides 1`] = `
 
   .emotion-0 {
   border-style: solid;
-  border-color: #DEDEDE;
+  border-color: #C6C6C6;
   border-width: 1px;
   border-width: 0px;
   margin: 0;
diff --git a/src/drawer/__tests__/__snapshots__/drawer.test.tsx.snap b/src/drawer/__tests__/__snapshots__/drawer.test.tsx.snap
index 3bccf9f713..723280b91a 100644
--- a/src/drawer/__tests__/__snapshots__/drawer.test.tsx.snap
+++ b/src/drawer/__tests__/__snapshots__/drawer.test.tsx.snap
@@ -14,7 +14,7 @@ exports[`Drawer focus management when focus trap is disabled render drawer with
   bottom: 0;
   left: 0;
   cursor: pointer;
-  background-color: rgba(10,10,10,0.8);
+  background-color: rgba(0,0,0,0.8);
 }
 
 @media screen and (prefers-reduced-motion: no-preference) {
@@ -263,7 +263,7 @@ exports[`Drawer focus management when focus trap is disabled render drawer with
 }
 
 .emotion-2 {
-  color: #2E2E2E;
+  color: #3B3B3B;
   grid-row-start: 1;
   grid-column-start: 1;
   grid-column-end: 3;
@@ -282,7 +282,7 @@ exports[`Drawer focus management when focus trap is disabled render drawer with
   -ms-flex-align: center;
   align-items: center;
   padding: 16px 24px;
-  color: #2E2E2E;
+  color: #3B3B3B;
   font-family: "Poppins",sans-serif;
   font-size: 16px;
   line-height: 1.5;
@@ -339,7 +339,7 @@ exports[`Drawer focus management when focus trap is disabled render drawer with
   appearance: none;
   background-color: transparent;
   border-radius: 50%;
-  color: #2E2E2E;
+  color: #3B3B3B;
   margin: 0;
   cursor: pointer;
 }
@@ -350,24 +350,24 @@ exports[`Drawer focus management when focus trap is disabled render drawer with
 }
 
 .emotion-8 svg {
-  fill: #2E2E2E;
+  fill: #3B3B3B;
 }
 
 .emotion-8:hover:not(:disabled) {
-  background-color: #FAFAFA;
+  background-color: #F1F1F1;
 }
 
 .emotion-8:active:not(:disabled) {
-  background-color: #F4F4F4;
+  background-color: #E2E2E2;
 }
 
 .emotion-8:disabled {
   background-color: transparent;
-  color: #C0C0C0;
+  color: #ABABAB;
 }
 
 .emotion-8:disabled svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-8:focus-visible:not(:disabled) {
@@ -435,7 +435,7 @@ exports[`Drawer focus management when focus trap is disabled render drawer with
   display: inline-block;
   vertical-align: middle;
   overflow: hidden;
-  fill: #2E2E2E;
+  fill: #3B3B3B;
   vertical-align: unset;
   display: inline-block;
 }
@@ -569,7 +569,7 @@ exports[`Drawer focus management when focus trap is disabled render inline-drawe
   bottom: 0;
   left: 0;
   cursor: pointer;
-  background-color: rgba(10,10,10,0.8);
+  background-color: rgba(0,0,0,0.8);
 }
 
 @media screen and (prefers-reduced-motion: no-preference) {
@@ -817,7 +817,7 @@ exports[`Drawer focus management when focus trap is disabled render inline-drawe
 }
 
 .emotion-2 {
-  color: #2E2E2E;
+  color: #3B3B3B;
   grid-row-start: 1;
   grid-column-start: 1;
   grid-column-end: 3;
@@ -836,7 +836,7 @@ exports[`Drawer focus management when focus trap is disabled render inline-drawe
   -ms-flex-align: center;
   align-items: center;
   padding: 16px 24px;
-  color: #2E2E2E;
+  color: #3B3B3B;
   font-family: "Poppins",sans-serif;
   font-size: 16px;
   line-height: 1.5;
@@ -893,7 +893,7 @@ exports[`Drawer focus management when focus trap is disabled render inline-drawe
   appearance: none;
   background-color: transparent;
   border-radius: 50%;
-  color: #2E2E2E;
+  color: #3B3B3B;
   margin: 0;
   cursor: pointer;
 }
@@ -904,24 +904,24 @@ exports[`Drawer focus management when focus trap is disabled render inline-drawe
 }
 
 .emotion-8 svg {
-  fill: #2E2E2E;
+  fill: #3B3B3B;
 }
 
 .emotion-8:hover:not(:disabled) {
-  background-color: #FAFAFA;
+  background-color: #F1F1F1;
 }
 
 .emotion-8:active:not(:disabled) {
-  background-color: #F4F4F4;
+  background-color: #E2E2E2;
 }
 
 .emotion-8:disabled {
   background-color: transparent;
-  color: #C0C0C0;
+  color: #ABABAB;
 }
 
 .emotion-8:disabled svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-8:focus-visible:not(:disabled) {
@@ -989,7 +989,7 @@ exports[`Drawer focus management when focus trap is disabled render inline-drawe
   display: inline-block;
   vertical-align: middle;
   overflow: hidden;
-  fill: #2E2E2E;
+  fill: #3B3B3B;
   vertical-align: unset;
   display: inline-block;
 }
@@ -1120,7 +1120,7 @@ exports[`Drawer focus management when focus trap is disabled render inline-drawe
   bottom: 0;
   left: 0;
   cursor: pointer;
-  background-color: rgba(10,10,10,0.8);
+  background-color: rgba(0,0,0,0.8);
 }
 
 @media screen and (prefers-reduced-motion: no-preference) {
@@ -1370,7 +1370,7 @@ exports[`Drawer focus management when focus trap is disabled render inline-drawe
 }
 
 .emotion-2 {
-  color: #2E2E2E;
+  color: #3B3B3B;
   grid-row-start: 1;
   grid-column-start: 1;
   grid-column-end: 3;
@@ -1389,7 +1389,7 @@ exports[`Drawer focus management when focus trap is disabled render inline-drawe
   -ms-flex-align: center;
   align-items: center;
   padding: 16px 24px;
-  color: #2E2E2E;
+  color: #3B3B3B;
   font-family: "Poppins",sans-serif;
   font-size: 16px;
   line-height: 1.5;
@@ -1446,7 +1446,7 @@ exports[`Drawer focus management when focus trap is disabled render inline-drawe
   appearance: none;
   background-color: transparent;
   border-radius: 50%;
-  color: #2E2E2E;
+  color: #3B3B3B;
   margin: 0;
   cursor: pointer;
 }
@@ -1457,24 +1457,24 @@ exports[`Drawer focus management when focus trap is disabled render inline-drawe
 }
 
 .emotion-8 svg {
-  fill: #2E2E2E;
+  fill: #3B3B3B;
 }
 
 .emotion-8:hover:not(:disabled) {
-  background-color: #FAFAFA;
+  background-color: #F1F1F1;
 }
 
 .emotion-8:active:not(:disabled) {
-  background-color: #F4F4F4;
+  background-color: #E2E2E2;
 }
 
 .emotion-8:disabled {
   background-color: transparent;
-  color: #C0C0C0;
+  color: #ABABAB;
 }
 
 .emotion-8:disabled svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-8:focus-visible:not(:disabled) {
@@ -1542,7 +1542,7 @@ exports[`Drawer focus management when focus trap is disabled render inline-drawe
   display: inline-block;
   vertical-align: middle;
   overflow: hidden;
-  fill: #2E2E2E;
+  fill: #3B3B3B;
   vertical-align: unset;
   display: inline-block;
 }
@@ -1673,7 +1673,7 @@ exports[`Drawer render inline-drawer 1`] = `
   bottom: 0;
   left: 0;
   cursor: pointer;
-  background-color: rgba(10,10,10,0.8);
+  background-color: rgba(0,0,0,0.8);
 }
 
 @media screen and (prefers-reduced-motion: no-preference) {
@@ -1921,7 +1921,7 @@ exports[`Drawer render inline-drawer 1`] = `
 }
 
 .emotion-2 {
-  color: #2E2E2E;
+  color: #3B3B3B;
   grid-row-start: 1;
   grid-column-start: 1;
   grid-column-end: 3;
@@ -1940,7 +1940,7 @@ exports[`Drawer render inline-drawer 1`] = `
   -ms-flex-align: center;
   align-items: center;
   padding: 16px 24px;
-  color: #2E2E2E;
+  color: #3B3B3B;
   font-family: "Poppins",sans-serif;
   font-size: 16px;
   line-height: 1.5;
@@ -1997,7 +1997,7 @@ exports[`Drawer render inline-drawer 1`] = `
   appearance: none;
   background-color: transparent;
   border-radius: 50%;
-  color: #2E2E2E;
+  color: #3B3B3B;
   margin: 0;
   cursor: pointer;
 }
@@ -2008,24 +2008,24 @@ exports[`Drawer render inline-drawer 1`] = `
 }
 
 .emotion-8 svg {
-  fill: #2E2E2E;
+  fill: #3B3B3B;
 }
 
 .emotion-8:hover:not(:disabled) {
-  background-color: #FAFAFA;
+  background-color: #F1F1F1;
 }
 
 .emotion-8:active:not(:disabled) {
-  background-color: #F4F4F4;
+  background-color: #E2E2E2;
 }
 
 .emotion-8:disabled {
   background-color: transparent;
-  color: #C0C0C0;
+  color: #ABABAB;
 }
 
 .emotion-8:disabled svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-8:focus-visible:not(:disabled) {
@@ -2093,7 +2093,7 @@ exports[`Drawer render inline-drawer 1`] = `
   display: inline-block;
   vertical-align: middle;
   overflow: hidden;
-  fill: #2E2E2E;
+  fill: #3B3B3B;
   vertical-align: unset;
   display: inline-block;
 }
@@ -2395,7 +2395,7 @@ exports[`Drawer renders closed drawer visually hidden but remains in the DOM tre
 }
 
 .emotion-1 {
-  color: #2E2E2E;
+  color: #3B3B3B;
   grid-row-start: 1;
   grid-column-start: 1;
   grid-column-end: 3;
@@ -2450,7 +2450,7 @@ exports[`Drawer renders closed drawer visually hidden but remains in the DOM tre
   appearance: none;
   background-color: transparent;
   border-radius: 50%;
-  color: #2E2E2E;
+  color: #3B3B3B;
   margin: 0;
   cursor: pointer;
 }
@@ -2461,24 +2461,24 @@ exports[`Drawer renders closed drawer visually hidden but remains in the DOM tre
 }
 
 .emotion-5 svg {
-  fill: #2E2E2E;
+  fill: #3B3B3B;
 }
 
 .emotion-5:hover:not(:disabled) {
-  background-color: #FAFAFA;
+  background-color: #F1F1F1;
 }
 
 .emotion-5:active:not(:disabled) {
-  background-color: #F4F4F4;
+  background-color: #E2E2E2;
 }
 
 .emotion-5:disabled {
   background-color: transparent;
-  color: #C0C0C0;
+  color: #ABABAB;
 }
 
 .emotion-5:disabled svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-5:focus-visible:not(:disabled) {
@@ -2546,7 +2546,7 @@ exports[`Drawer renders closed drawer visually hidden but remains in the DOM tre
   display: inline-block;
   vertical-align: middle;
   overflow: hidden;
-  fill: #2E2E2E;
+  fill: #3B3B3B;
   vertical-align: unset;
   display: inline-block;
 }
@@ -2670,7 +2670,7 @@ exports[`Drawer renders default 1`] = `
   bottom: 0;
   left: 0;
   cursor: pointer;
-  background-color: rgba(10,10,10,0.8);
+  background-color: rgba(0,0,0,0.8);
 }
 
 @media screen and (prefers-reduced-motion: no-preference) {
@@ -2918,7 +2918,7 @@ exports[`Drawer renders default 1`] = `
 }
 
 .emotion-2 {
-  color: #2E2E2E;
+  color: #3B3B3B;
   grid-row-start: 1;
   grid-column-start: 1;
   grid-column-end: 3;
@@ -2937,7 +2937,7 @@ exports[`Drawer renders default 1`] = `
   -ms-flex-align: center;
   align-items: center;
   padding: 16px 24px;
-  color: #2E2E2E;
+  color: #3B3B3B;
   font-family: "Poppins",sans-serif;
   font-size: 16px;
   line-height: 1.5;
@@ -2994,7 +2994,7 @@ exports[`Drawer renders default 1`] = `
   appearance: none;
   background-color: transparent;
   border-radius: 50%;
-  color: #2E2E2E;
+  color: #3B3B3B;
   margin: 0;
   cursor: pointer;
 }
@@ -3005,24 +3005,24 @@ exports[`Drawer renders default 1`] = `
 }
 
 .emotion-8 svg {
-  fill: #2E2E2E;
+  fill: #3B3B3B;
 }
 
 .emotion-8:hover:not(:disabled) {
-  background-color: #FAFAFA;
+  background-color: #F1F1F1;
 }
 
 .emotion-8:active:not(:disabled) {
-  background-color: #F4F4F4;
+  background-color: #E2E2E2;
 }
 
 .emotion-8:disabled {
   background-color: transparent;
-  color: #C0C0C0;
+  color: #ABABAB;
 }
 
 .emotion-8:disabled svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-8:focus-visible:not(:disabled) {
@@ -3090,7 +3090,7 @@ exports[`Drawer renders default 1`] = `
   display: inline-block;
   vertical-align: middle;
   overflow: hidden;
-  fill: #2E2E2E;
+  fill: #3B3B3B;
   vertical-align: unset;
   display: inline-block;
 }
@@ -3228,7 +3228,7 @@ exports[`Drawer renders drawer with overrides 1`] = `
   bottom: 0;
   left: 0;
   cursor: pointer;
-  background-color: #FFEECF;
+  background-color: #FFEDE1;
 }
 
 @media screen and (prefers-reduced-motion: no-preference) {
@@ -3313,7 +3313,7 @@ exports[`Drawer renders drawer with overrides 1`] = `
   max-width: 40%;
   min-width: 200px;
   height: 100%;
-  background-color: #E6FAEB;
+  background-color: #E5F4EA;
   box-shadow: 0px 0px 16px 14px rgba(169,183,172,0.9);
 }
 
@@ -3449,7 +3449,7 @@ exports[`Drawer renders drawer with overrides 1`] = `
   background-color: transparent;
   border-style: none none solid none;
   border-width: 1px;
-  border-color: #EF1703;
+  border-color: #D60000;
   grid-row-start: 1;
   grid-column-start: 1;
   grid-column-end: 3;
@@ -3504,7 +3504,7 @@ exports[`Drawer renders drawer with overrides 1`] = `
   appearance: none;
   border-width: 1px;
   border-style: solid;
-  border-color: #81D2DA;
+  border-color: #97D0D6;
   background-color: transparent;
   border-radius: 50%;
   margin: 0;
@@ -3517,11 +3517,11 @@ exports[`Drawer renders drawer with overrides 1`] = `
 }
 
 .emotion-6 svg {
-  fill: #05717D;
+  fill: #005B65;
 }
 
 .emotion-6:hover:not(:disabled) {
-  background-color: #41A0AA;
+  background-color: #289FAB;
 }
 
 @media screen and (prefers-reduced-motion: no-preference) {
@@ -3574,7 +3574,7 @@ exports[`Drawer renders drawer with overrides 1`] = `
   display: inline-block;
   vertical-align: middle;
   overflow: hidden;
-  fill: #2E2E2E;
+  fill: #3B3B3B;
   vertical-align: unset;
   display: inline-block;
 }
@@ -3703,7 +3703,7 @@ exports[`Drawer renders screen reader message when focus trapping disabled 1`] =
   bottom: 0;
   left: 0;
   cursor: pointer;
-  background-color: rgba(10,10,10,0.8);
+  background-color: rgba(0,0,0,0.8);
 }
 
 @media screen and (prefers-reduced-motion: no-preference) {
@@ -3964,7 +3964,7 @@ exports[`Drawer renders screen reader message when focus trapping disabled 1`] =
 }
 
 .emotion-3 {
-  color: #2E2E2E;
+  color: #3B3B3B;
   grid-row-start: 1;
   grid-column-start: 1;
   grid-column-end: 3;
@@ -3983,7 +3983,7 @@ exports[`Drawer renders screen reader message when focus trapping disabled 1`] =
   -ms-flex-align: center;
   align-items: center;
   padding: 16px 24px;
-  color: #2E2E2E;
+  color: #3B3B3B;
   font-family: "Poppins",sans-serif;
   font-size: 16px;
   line-height: 1.5;
@@ -4040,7 +4040,7 @@ exports[`Drawer renders screen reader message when focus trapping disabled 1`] =
   appearance: none;
   background-color: transparent;
   border-radius: 50%;
-  color: #2E2E2E;
+  color: #3B3B3B;
   margin: 0;
   cursor: pointer;
 }
@@ -4051,24 +4051,24 @@ exports[`Drawer renders screen reader message when focus trapping disabled 1`] =
 }
 
 .emotion-9 svg {
-  fill: #2E2E2E;
+  fill: #3B3B3B;
 }
 
 .emotion-9:hover:not(:disabled) {
-  background-color: #FAFAFA;
+  background-color: #F1F1F1;
 }
 
 .emotion-9:active:not(:disabled) {
-  background-color: #F4F4F4;
+  background-color: #E2E2E2;
 }
 
 .emotion-9:disabled {
   background-color: transparent;
-  color: #C0C0C0;
+  color: #ABABAB;
 }
 
 .emotion-9:disabled svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-9:focus-visible:not(:disabled) {
@@ -4136,7 +4136,7 @@ exports[`Drawer renders screen reader message when focus trapping disabled 1`] =
   display: inline-block;
   vertical-align: middle;
   overflow: hidden;
-  fill: #2E2E2E;
+  fill: #3B3B3B;
   vertical-align: unset;
   display: inline-block;
 }
@@ -4298,7 +4298,7 @@ exports[`Drawer renders with aria-ariaLabelledby attribute 1`] = `
   bottom: 0;
   left: 0;
   cursor: pointer;
-  background-color: rgba(10,10,10,0.8);
+  background-color: rgba(0,0,0,0.8);
 }
 
 @media screen and (prefers-reduced-motion: no-preference) {
@@ -4546,7 +4546,7 @@ exports[`Drawer renders with aria-ariaLabelledby attribute 1`] = `
 }
 
 .emotion-2 {
-  color: #2E2E2E;
+  color: #3B3B3B;
   grid-row-start: 1;
   grid-column-start: 1;
   grid-column-end: 3;
@@ -4565,7 +4565,7 @@ exports[`Drawer renders with aria-ariaLabelledby attribute 1`] = `
   -ms-flex-align: center;
   align-items: center;
   padding: 16px 24px;
-  color: #2E2E2E;
+  color: #3B3B3B;
   font-family: "Poppins",sans-serif;
   font-size: 16px;
   line-height: 1.5;
@@ -4618,7 +4618,7 @@ exports[`Drawer renders with aria-ariaLabelledby attribute 1`] = `
   appearance: none;
   background-color: transparent;
   border-radius: 50%;
-  color: #2E2E2E;
+  color: #3B3B3B;
   margin: 0;
   cursor: pointer;
 }
@@ -4629,24 +4629,24 @@ exports[`Drawer renders with aria-ariaLabelledby attribute 1`] = `
 }
 
 .emotion-6 svg {
-  fill: #2E2E2E;
+  fill: #3B3B3B;
 }
 
 .emotion-6:hover:not(:disabled) {
-  background-color: #FAFAFA;
+  background-color: #F1F1F1;
 }
 
 .emotion-6:active:not(:disabled) {
-  background-color: #F4F4F4;
+  background-color: #E2E2E2;
 }
 
 .emotion-6:disabled {
   background-color: transparent;
-  color: #C0C0C0;
+  color: #ABABAB;
 }
 
 .emotion-6:disabled svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-6:focus-visible:not(:disabled) {
@@ -4714,7 +4714,7 @@ exports[`Drawer renders with aria-ariaLabelledby attribute 1`] = `
   display: inline-block;
   vertical-align: middle;
   overflow: hidden;
-  fill: #2E2E2E;
+  fill: #3B3B3B;
   vertical-align: unset;
   display: inline-block;
 }
@@ -4847,7 +4847,7 @@ exports[`Drawer renders with aria-describedby attribute 1`] = `
   bottom: 0;
   left: 0;
   cursor: pointer;
-  background-color: rgba(10,10,10,0.8);
+  background-color: rgba(0,0,0,0.8);
 }
 
 @media screen and (prefers-reduced-motion: no-preference) {
@@ -5095,7 +5095,7 @@ exports[`Drawer renders with aria-describedby attribute 1`] = `
 }
 
 .emotion-2 {
-  color: #2E2E2E;
+  color: #3B3B3B;
   grid-row-start: 1;
   grid-column-start: 1;
   grid-column-end: 3;
@@ -5146,7 +5146,7 @@ exports[`Drawer renders with aria-describedby attribute 1`] = `
   appearance: none;
   background-color: transparent;
   border-radius: 50%;
-  color: #2E2E2E;
+  color: #3B3B3B;
   margin: 0;
   cursor: pointer;
 }
@@ -5157,24 +5157,24 @@ exports[`Drawer renders with aria-describedby attribute 1`] = `
 }
 
 .emotion-5 svg {
-  fill: #2E2E2E;
+  fill: #3B3B3B;
 }
 
 .emotion-5:hover:not(:disabled) {
-  background-color: #FAFAFA;
+  background-color: #F1F1F1;
 }
 
 .emotion-5:active:not(:disabled) {
-  background-color: #F4F4F4;
+  background-color: #E2E2E2;
 }
 
 .emotion-5:disabled {
   background-color: transparent;
-  color: #C0C0C0;
+  color: #ABABAB;
 }
 
 .emotion-5:disabled svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-5:focus-visible:not(:disabled) {
@@ -5242,7 +5242,7 @@ exports[`Drawer renders with aria-describedby attribute 1`] = `
   display: inline-block;
   vertical-align: middle;
   overflow: hidden;
-  fill: #2E2E2E;
+  fill: #3B3B3B;
   vertical-align: unset;
   display: inline-block;
 }
@@ -5377,7 +5377,7 @@ exports[`Drawer renders with left placement and right closePosition 1`] = `
   bottom: 0;
   left: 0;
   cursor: pointer;
-  background-color: rgba(10,10,10,0.8);
+  background-color: rgba(0,0,0,0.8);
 }
 
 @media screen and (prefers-reduced-motion: no-preference) {
@@ -5625,7 +5625,7 @@ exports[`Drawer renders with left placement and right closePosition 1`] = `
 }
 
 .emotion-2 {
-  color: #2E2E2E;
+  color: #3B3B3B;
   grid-row-start: 1;
   grid-column-start: 1;
   grid-column-end: 3;
@@ -5644,7 +5644,7 @@ exports[`Drawer renders with left placement and right closePosition 1`] = `
   -ms-flex-align: center;
   align-items: center;
   padding: 16px 24px;
-  color: #2E2E2E;
+  color: #3B3B3B;
   font-family: "Poppins",sans-serif;
   font-size: 16px;
   line-height: 1.5;
@@ -5701,7 +5701,7 @@ exports[`Drawer renders with left placement and right closePosition 1`] = `
   appearance: none;
   background-color: transparent;
   border-radius: 50%;
-  color: #2E2E2E;
+  color: #3B3B3B;
   margin: 0;
   cursor: pointer;
 }
@@ -5712,24 +5712,24 @@ exports[`Drawer renders with left placement and right closePosition 1`] = `
 }
 
 .emotion-8 svg {
-  fill: #2E2E2E;
+  fill: #3B3B3B;
 }
 
 .emotion-8:hover:not(:disabled) {
-  background-color: #FAFAFA;
+  background-color: #F1F1F1;
 }
 
 .emotion-8:active:not(:disabled) {
-  background-color: #F4F4F4;
+  background-color: #E2E2E2;
 }
 
 .emotion-8:disabled {
   background-color: transparent;
-  color: #C0C0C0;
+  color: #ABABAB;
 }
 
 .emotion-8:disabled svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-8:focus-visible:not(:disabled) {
@@ -5797,7 +5797,7 @@ exports[`Drawer renders with left placement and right closePosition 1`] = `
   display: inline-block;
   vertical-align: middle;
   overflow: hidden;
-  fill: #2E2E2E;
+  fill: #3B3B3B;
   vertical-align: unset;
   display: inline-block;
 }
@@ -5935,7 +5935,7 @@ exports[`Drawer renders with menu items aligned at the bottom 1`] = `
   bottom: 0;
   left: 0;
   cursor: pointer;
-  background-color: rgba(10,10,10,0.8);
+  background-color: rgba(0,0,0,0.8);
 }
 
 @media screen and (prefers-reduced-motion: no-preference) {
@@ -6183,7 +6183,7 @@ exports[`Drawer renders with menu items aligned at the bottom 1`] = `
 }
 
 .emotion-2 {
-  color: #2E2E2E;
+  color: #3B3B3B;
   grid-row-start: 1;
   grid-column-start: 1;
   grid-column-end: 3;
@@ -6202,7 +6202,7 @@ exports[`Drawer renders with menu items aligned at the bottom 1`] = `
   -ms-flex-align: center;
   align-items: center;
   padding: 16px 24px;
-  color: #2E2E2E;
+  color: #3B3B3B;
   font-family: "Poppins",sans-serif;
   font-size: 16px;
   line-height: 1.5;
@@ -6259,7 +6259,7 @@ exports[`Drawer renders with menu items aligned at the bottom 1`] = `
   appearance: none;
   background-color: transparent;
   border-radius: 50%;
-  color: #2E2E2E;
+  color: #3B3B3B;
   margin: 0;
   cursor: pointer;
 }
@@ -6270,24 +6270,24 @@ exports[`Drawer renders with menu items aligned at the bottom 1`] = `
 }
 
 .emotion-8 svg {
-  fill: #2E2E2E;
+  fill: #3B3B3B;
 }
 
 .emotion-8:hover:not(:disabled) {
-  background-color: #FAFAFA;
+  background-color: #F1F1F1;
 }
 
 .emotion-8:active:not(:disabled) {
-  background-color: #F4F4F4;
+  background-color: #E2E2E2;
 }
 
 .emotion-8:disabled {
   background-color: transparent;
-  color: #C0C0C0;
+  color: #ABABAB;
 }
 
 .emotion-8:disabled svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-8:focus-visible:not(:disabled) {
@@ -6355,7 +6355,7 @@ exports[`Drawer renders with menu items aligned at the bottom 1`] = `
   display: inline-block;
   vertical-align: middle;
   overflow: hidden;
-  fill: #2E2E2E;
+  fill: #3B3B3B;
   vertical-align: unset;
   display: inline-block;
 }
@@ -6493,7 +6493,7 @@ exports[`Drawer renders with menu items aligned at the right 1`] = `
   bottom: 0;
   left: 0;
   cursor: pointer;
-  background-color: rgba(10,10,10,0.8);
+  background-color: rgba(0,0,0,0.8);
 }
 
 @media screen and (prefers-reduced-motion: no-preference) {
@@ -6741,7 +6741,7 @@ exports[`Drawer renders with menu items aligned at the right 1`] = `
 }
 
 .emotion-2 {
-  color: #2E2E2E;
+  color: #3B3B3B;
   grid-row-start: 1;
   grid-column-start: 1;
   grid-column-end: 3;
@@ -6760,7 +6760,7 @@ exports[`Drawer renders with menu items aligned at the right 1`] = `
   -ms-flex-align: center;
   align-items: center;
   padding: 16px 24px;
-  color: #2E2E2E;
+  color: #3B3B3B;
   font-family: "Poppins",sans-serif;
   font-size: 16px;
   line-height: 1.5;
@@ -6817,7 +6817,7 @@ exports[`Drawer renders with menu items aligned at the right 1`] = `
   appearance: none;
   background-color: transparent;
   border-radius: 50%;
-  color: #2E2E2E;
+  color: #3B3B3B;
   margin: 0;
   cursor: pointer;
 }
@@ -6828,24 +6828,24 @@ exports[`Drawer renders with menu items aligned at the right 1`] = `
 }
 
 .emotion-8 svg {
-  fill: #2E2E2E;
+  fill: #3B3B3B;
 }
 
 .emotion-8:hover:not(:disabled) {
-  background-color: #FAFAFA;
+  background-color: #F1F1F1;
 }
 
 .emotion-8:active:not(:disabled) {
-  background-color: #F4F4F4;
+  background-color: #E2E2E2;
 }
 
 .emotion-8:disabled {
   background-color: transparent;
-  color: #C0C0C0;
+  color: #ABABAB;
 }
 
 .emotion-8:disabled svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-8:focus-visible:not(:disabled) {
@@ -6913,7 +6913,7 @@ exports[`Drawer renders with menu items aligned at the right 1`] = `
   display: inline-block;
   vertical-align: middle;
   overflow: hidden;
-  fill: #2E2E2E;
+  fill: #3B3B3B;
   vertical-align: unset;
   display: inline-block;
 }
@@ -7051,7 +7051,7 @@ exports[`Drawer renders with menu items aligned at the top 1`] = `
   bottom: 0;
   left: 0;
   cursor: pointer;
-  background-color: rgba(10,10,10,0.8);
+  background-color: rgba(0,0,0,0.8);
 }
 
 @media screen and (prefers-reduced-motion: no-preference) {
@@ -7299,7 +7299,7 @@ exports[`Drawer renders with menu items aligned at the top 1`] = `
 }
 
 .emotion-2 {
-  color: #2E2E2E;
+  color: #3B3B3B;
   grid-row-start: 1;
   grid-column-start: 1;
   grid-column-end: 3;
@@ -7318,7 +7318,7 @@ exports[`Drawer renders with menu items aligned at the top 1`] = `
   -ms-flex-align: center;
   align-items: center;
   padding: 16px 24px;
-  color: #2E2E2E;
+  color: #3B3B3B;
   font-family: "Poppins",sans-serif;
   font-size: 16px;
   line-height: 1.5;
@@ -7375,7 +7375,7 @@ exports[`Drawer renders with menu items aligned at the top 1`] = `
   appearance: none;
   background-color: transparent;
   border-radius: 50%;
-  color: #2E2E2E;
+  color: #3B3B3B;
   margin: 0;
   cursor: pointer;
 }
@@ -7386,24 +7386,24 @@ exports[`Drawer renders with menu items aligned at the top 1`] = `
 }
 
 .emotion-8 svg {
-  fill: #2E2E2E;
+  fill: #3B3B3B;
 }
 
 .emotion-8:hover:not(:disabled) {
-  background-color: #FAFAFA;
+  background-color: #F1F1F1;
 }
 
 .emotion-8:active:not(:disabled) {
-  background-color: #F4F4F4;
+  background-color: #E2E2E2;
 }
 
 .emotion-8:disabled {
   background-color: transparent;
-  color: #C0C0C0;
+  color: #ABABAB;
 }
 
 .emotion-8:disabled svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-8:focus-visible:not(:disabled) {
@@ -7471,7 +7471,7 @@ exports[`Drawer renders with menu items aligned at the top 1`] = `
   display: inline-block;
   vertical-align: middle;
   overflow: hidden;
-  fill: #2E2E2E;
+  fill: #3B3B3B;
   vertical-align: unset;
   display: inline-block;
 }
@@ -7609,7 +7609,7 @@ exports[`Drawer renders without close button 1`] = `
   bottom: 0;
   left: 0;
   cursor: pointer;
-  background-color: rgba(10,10,10,0.8);
+  background-color: rgba(0,0,0,0.8);
 }
 
 @media screen and (prefers-reduced-motion: no-preference) {
@@ -7857,7 +7857,7 @@ exports[`Drawer renders without close button 1`] = `
 }
 
 .emotion-2 {
-  color: #2E2E2E;
+  color: #3B3B3B;
   grid-row-start: 1;
   grid-column-start: 1;
   grid-column-end: 3;
@@ -7876,7 +7876,7 @@ exports[`Drawer renders without close button 1`] = `
   -ms-flex-align: center;
   align-items: center;
   padding: 16px 24px;
-  color: #2E2E2E;
+  color: #3B3B3B;
   font-family: "Poppins",sans-serif;
   font-size: 16px;
   line-height: 1.5;
@@ -7977,7 +7977,7 @@ exports[`Drawer renders without header 1`] = `
   bottom: 0;
   left: 0;
   cursor: pointer;
-  background-color: rgba(10,10,10,0.8);
+  background-color: rgba(0,0,0,0.8);
 }
 
 @media screen and (prefers-reduced-motion: no-preference) {
@@ -8225,7 +8225,7 @@ exports[`Drawer renders without header 1`] = `
 }
 
 .emotion-2 {
-  color: #2E2E2E;
+  color: #3B3B3B;
   grid-row-start: 1;
   grid-column-start: 1;
   grid-column-end: 3;
@@ -8280,7 +8280,7 @@ exports[`Drawer renders without header 1`] = `
   appearance: none;
   background-color: transparent;
   border-radius: 50%;
-  color: #2E2E2E;
+  color: #3B3B3B;
   margin: 0;
   cursor: pointer;
 }
@@ -8291,24 +8291,24 @@ exports[`Drawer renders without header 1`] = `
 }
 
 .emotion-6 svg {
-  fill: #2E2E2E;
+  fill: #3B3B3B;
 }
 
 .emotion-6:hover:not(:disabled) {
-  background-color: #FAFAFA;
+  background-color: #F1F1F1;
 }
 
 .emotion-6:active:not(:disabled) {
-  background-color: #F4F4F4;
+  background-color: #E2E2E2;
 }
 
 .emotion-6:disabled {
   background-color: transparent;
-  color: #C0C0C0;
+  color: #ABABAB;
 }
 
 .emotion-6:disabled svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-6:focus-visible:not(:disabled) {
@@ -8376,7 +8376,7 @@ exports[`Drawer renders without header 1`] = `
   display: inline-block;
   vertical-align: middle;
   overflow: hidden;
-  fill: #2E2E2E;
+  fill: #3B3B3B;
   vertical-align: unset;
   display: inline-block;
 }
@@ -8505,7 +8505,7 @@ exports[`Drawer renders without header and close 1`] = `
   bottom: 0;
   left: 0;
   cursor: pointer;
-  background-color: rgba(10,10,10,0.8);
+  background-color: rgba(0,0,0,0.8);
 }
 
 @media screen and (prefers-reduced-motion: no-preference) {
@@ -9002,7 +9002,7 @@ exports[`Drawer renders without overlay 1`] = `
 }
 
 .emotion-1 {
-  color: #2E2E2E;
+  color: #3B3B3B;
   grid-row-start: 1;
   grid-column-start: 1;
   grid-column-end: 3;
@@ -9021,7 +9021,7 @@ exports[`Drawer renders without overlay 1`] = `
   -ms-flex-align: center;
   align-items: center;
   padding: 16px 24px;
-  color: #2E2E2E;
+  color: #3B3B3B;
   font-family: "Poppins",sans-serif;
   font-size: 16px;
   line-height: 1.5;
@@ -9078,7 +9078,7 @@ exports[`Drawer renders without overlay 1`] = `
   appearance: none;
   background-color: transparent;
   border-radius: 50%;
-  color: #2E2E2E;
+  color: #3B3B3B;
   margin: 0;
   cursor: pointer;
 }
@@ -9089,24 +9089,24 @@ exports[`Drawer renders without overlay 1`] = `
 }
 
 .emotion-7 svg {
-  fill: #2E2E2E;
+  fill: #3B3B3B;
 }
 
 .emotion-7:hover:not(:disabled) {
-  background-color: #FAFAFA;
+  background-color: #F1F1F1;
 }
 
 .emotion-7:active:not(:disabled) {
-  background-color: #F4F4F4;
+  background-color: #E2E2E2;
 }
 
 .emotion-7:disabled {
   background-color: transparent;
-  color: #C0C0C0;
+  color: #ABABAB;
 }
 
 .emotion-7:disabled svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-7:focus-visible:not(:disabled) {
@@ -9174,7 +9174,7 @@ exports[`Drawer renders without overlay 1`] = `
   display: inline-block;
   vertical-align: middle;
   overflow: hidden;
-  fill: #2E2E2E;
+  fill: #3B3B3B;
   vertical-align: unset;
   display: inline-block;
 }
@@ -9314,7 +9314,7 @@ exports[`Drawer toggle aria-hidden to content outside dialog 1`] = `
   bottom: 0;
   left: 0;
   cursor: pointer;
-  background-color: rgba(10,10,10,0.8);
+  background-color: rgba(0,0,0,0.8);
 }
 
 @media screen and (prefers-reduced-motion: no-preference) {
@@ -9562,7 +9562,7 @@ exports[`Drawer toggle aria-hidden to content outside dialog 1`] = `
 }
 
 .emotion-2 {
-  color: #2E2E2E;
+  color: #3B3B3B;
   grid-row-start: 1;
   grid-column-start: 1;
   grid-column-end: 3;
@@ -9613,7 +9613,7 @@ exports[`Drawer toggle aria-hidden to content outside dialog 1`] = `
   appearance: none;
   background-color: transparent;
   border-radius: 50%;
-  color: #2E2E2E;
+  color: #3B3B3B;
   margin: 0;
   cursor: pointer;
 }
@@ -9624,24 +9624,24 @@ exports[`Drawer toggle aria-hidden to content outside dialog 1`] = `
 }
 
 .emotion-5 svg {
-  fill: #2E2E2E;
+  fill: #3B3B3B;
 }
 
 .emotion-5:hover:not(:disabled) {
-  background-color: #FAFAFA;
+  background-color: #F1F1F1;
 }
 
 .emotion-5:active:not(:disabled) {
-  background-color: #F4F4F4;
+  background-color: #E2E2E2;
 }
 
 .emotion-5:disabled {
   background-color: transparent;
-  color: #C0C0C0;
+  color: #ABABAB;
 }
 
 .emotion-5:disabled svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-5:focus-visible:not(:disabled) {
@@ -9709,7 +9709,7 @@ exports[`Drawer toggle aria-hidden to content outside dialog 1`] = `
   display: inline-block;
   vertical-align: middle;
   overflow: hidden;
-  fill: #2E2E2E;
+  fill: #3B3B3B;
   vertical-align: unset;
   display: inline-block;
 }
@@ -10007,7 +10007,7 @@ exports[`Drawer toggle aria-hidden to content outside dialog 2`] = `
 }
 
 .emotion-1 {
-  color: #2E2E2E;
+  color: #3B3B3B;
   grid-row-start: 1;
   grid-column-start: 1;
   grid-column-end: 3;
@@ -10058,7 +10058,7 @@ exports[`Drawer toggle aria-hidden to content outside dialog 2`] = `
   appearance: none;
   background-color: transparent;
   border-radius: 50%;
-  color: #2E2E2E;
+  color: #3B3B3B;
   margin: 0;
   cursor: pointer;
 }
@@ -10069,24 +10069,24 @@ exports[`Drawer toggle aria-hidden to content outside dialog 2`] = `
 }
 
 .emotion-4 svg {
-  fill: #2E2E2E;
+  fill: #3B3B3B;
 }
 
 .emotion-4:hover:not(:disabled) {
-  background-color: #FAFAFA;
+  background-color: #F1F1F1;
 }
 
 .emotion-4:active:not(:disabled) {
-  background-color: #F4F4F4;
+  background-color: #E2E2E2;
 }
 
 .emotion-4:disabled {
   background-color: transparent;
-  color: #C0C0C0;
+  color: #ABABAB;
 }
 
 .emotion-4:disabled svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-4:focus-visible:not(:disabled) {
@@ -10154,7 +10154,7 @@ exports[`Drawer toggle aria-hidden to content outside dialog 2`] = `
   display: inline-block;
   vertical-align: middle;
   overflow: hidden;
-  fill: #2E2E2E;
+  fill: #3B3B3B;
   vertical-align: unset;
   display: inline-block;
 }
diff --git a/src/email-input/__tests__/__snapshots__/email-input.test.tsx.snap b/src/email-input/__tests__/__snapshots__/email-input.test.tsx.snap
index 3f2a790522..d93dba86a2 100644
--- a/src/email-input/__tests__/__snapshots__/email-input.test.tsx.snap
+++ b/src/email-input/__tests__/__snapshots__/email-input.test.tsx.snap
@@ -19,10 +19,10 @@ exports[`EmailInput renders correctly with label hidden 1`] = `
   cursor: default;
   background-color: transparent;
   border-style: solid;
-  border-color: #DEDEDE;
+  border-color: #C6C6C6;
   border-width: 1px;
   border-radius: 8px;
-  color: #2E2E2E;
+  color: #3B3B3B;
   text-overflow: ellipsis;
   padding: 12px;
   min-height: 48px;
@@ -41,33 +41,33 @@ exports[`EmailInput renders correctly with label hidden 1`] = `
 }
 
 .emotion-2::-webkit-input-placeholder {
-  color: #535353;
+  color: #6A6A6A;
 }
 
 .emotion-2::-moz-placeholder {
-  color: #535353;
+  color: #6A6A6A;
 }
 
 .emotion-2:-ms-input-placeholder {
-  color: #535353;
+  color: #6A6A6A;
 }
 
 .emotion-2::placeholder {
-  color: #535353;
+  color: #6A6A6A;
 }
 
 .emotion-2:focus:not(:disabled) {
-  background-color: #FAFAFA;
+  background-color: #F1F1F1;
   border-color: #3358CC;
 }
 
 .emotion-2:hover:not(:disabled) {
-  background-color: #FAFAFA;
+  background-color: #F1F1F1;
 }
 
 .emotion-2:disabled {
-  border-color: #F4F4F4;
-  color: #C0C0C0;
+  border-color: #E2E2E2;
+  color: #ABABAB;
 }
 
 .emotion-3 {
@@ -76,7 +76,7 @@ exports[`EmailInput renders correctly with label hidden 1`] = `
 
 .emotion-4 {
   margin: 0;
-  color: #535353;
+  color: #6A6A6A;
   font-family: "Poppins",sans-serif;
   font-size: 14px;
   line-height: 21px;
@@ -86,7 +86,7 @@ exports[`EmailInput renders correctly with label hidden 1`] = `
 }
 
 .emotion-4:disabled {
-  color: #C0C0C0;
+  color: #ABABAB;
 }
 
 .emotion-4::before {
diff --git a/src/fieldset/__tests__/__snapshots__/fieldset.test.tsx.snap b/src/fieldset/__tests__/__snapshots__/fieldset.test.tsx.snap
index d9eb2a02a3..158e4bb95c 100644
--- a/src/fieldset/__tests__/__snapshots__/fieldset.test.tsx.snap
+++ b/src/fieldset/__tests__/__snapshots__/fieldset.test.tsx.snap
@@ -15,7 +15,7 @@ exports[`Fieldset renders fieldset with large form inputs 1`] = `
   margin: 0;
   padding: 0;
   padding: 1px 0;
-  color: #0A0A0A;
+  color: #111111;
   font-family: "Poppins",sans-serif;
   font-size: 16px;
   line-height: 24px;
@@ -26,7 +26,7 @@ exports[`Fieldset renders fieldset with large form inputs 1`] = `
 }
 
 .emotion-1:disabled {
-  color: #C0C0C0;
+  color: #ABABAB;
 }
 
 .emotion-1::before {
@@ -60,15 +60,15 @@ exports[`Fieldset renders fieldset with large form inputs 1`] = `
   margin-bottom: 8px;
   background-color: transparent;
   border-style: solid;
-  border-color: #CCCCCC;
+  border-color: #919191;
   border-width: 1px;
   border-radius: 8px;
-  color: #2E2E2E;
+  color: #3B3B3B;
   text-overflow: ellipsis;
 }
 
 .emotion-2 svg {
-  fill: #2E2E2E;
+  fill: #3B3B3B;
 }
 
 .emotion-2:focus:not(:disabled) {
@@ -76,7 +76,7 @@ exports[`Fieldset renders fieldset with large form inputs 1`] = `
   outline-style: solid;
   outline-width: 2px;
   border-color: transparent;
-  background-color: #FAFAFA;
+  background-color: #F1F1F1;
 }
 
 @media not all and (min-resolution: 0.001dpcm) {
@@ -88,36 +88,36 @@ exports[`Fieldset renders fieldset with large form inputs 1`] = `
 }
 
 .emotion-2:hover:not(:disabled) {
-  background-color: #FAFAFA;
+  background-color: #F1F1F1;
 }
 
 .emotion-2:valid:hover:not(:disabled) {
-  border-color: #23A248;
-  background-color: #FAFAFA;
+  border-color: #007B22;
+  background-color: #F1F1F1;
 }
 
 .emotion-2:valid:focus:not(:disabled) {
   border-color: #3768FB;
-  background-color: #FAFAFA;
+  background-color: #F1F1F1;
 }
 
 .emotion-2:disabled {
-  border-color: #F4F4F4;
-  color: #C0C0C0;
+  border-color: #E2E2E2;
+  color: #ABABAB;
 }
 
 .emotion-2:disabled svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-2:invalid:focus:not(:disabled) {
   border-color: #3768FB;
-  background-color: #FAFAFA;
+  background-color: #F1F1F1;
 }
 
 .emotion-2:invalid:hover:not(:disabled) {
-  border-color: #EF1703;
-  background-color: #FAFAFA;
+  border-color: #D60000;
+  background-color: #F1F1F1;
 }
 
 .emotion-3 {
@@ -148,19 +148,19 @@ exports[`Fieldset renders fieldset with large form inputs 1`] = `
 }
 
 .emotion-3::-webkit-input-placeholder {
-  color: #535353;
+  color: #6A6A6A;
 }
 
 .emotion-3::-moz-placeholder {
-  color: #535353;
+  color: #6A6A6A;
 }
 
 .emotion-3:-ms-input-placeholder {
-  color: #535353;
+  color: #6A6A6A;
 }
 
 .emotion-3::placeholder {
-  color: #535353;
+  color: #6A6A6A;
 }
 
 .emotion-4 {
@@ -218,22 +218,22 @@ exports[`Fieldset renders fieldset with large form inputs 1`] = `
 }
 
 .emotion-6:valid:hover:not(:disabled) {
-  background-color: #148F39;
+  background-color: #00601A;
   opacity: 0.2;
 }
 
 .emotion-6:valid:hover:active:not(:disabled) {
-  background-color: #148F39;
+  background-color: #00601A;
   opacity: 0.4;
 }
 
 .emotion-6:invalid:hover:not(:disabled) {
-  background-color: #D20600;
+  background-color: #A90000;
   opacity: 0.2;
 }
 
 .emotion-6:invalid:hover:active:not(:disabled) {
-  background-color: #D20600;
+  background-color: #A90000;
   opacity: 0.4;
 }
 
@@ -271,8 +271,8 @@ exports[`Fieldset renders fieldset with large form inputs 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  background-color: #FAFAFA;
-  border-color: #CCCCCC;
+  background-color: #F1F1F1;
+  border-color: #919191;
   border-width: 2px;
   border-radius: 4px;
   border-style: solid;
@@ -283,13 +283,13 @@ exports[`Fieldset renders fieldset with large form inputs 1`] = `
 }
 
 .emotion-7:hover:not(:disabled) {
-  background-color: #E0E7FF;
-  border-color: #2B4AAB;
+  background-color: #ECF1FF;
+  border-color: #254CAC;
 }
 
 .emotion-7:focus:hover:not(:disabled) {
-  background-color: #E0E7FF;
-  border-color: #2B4AAB;
+  background-color: #ECF1FF;
+  border-color: #254CAC;
 }
 
 .emotion-7:checked:not(:disabled) {
@@ -298,8 +298,8 @@ exports[`Fieldset renders fieldset with large form inputs 1`] = `
 }
 
 .emotion-7:checked:hover:not(:disabled) {
-  background-color: #2B4AAB;
-  border-color: #2B4AAB;
+  background-color: #254CAC;
+  border-color: #254CAC;
 }
 
 .emotion-7:checked:focus:not(:disabled) {
@@ -308,91 +308,91 @@ exports[`Fieldset renders fieldset with large form inputs 1`] = `
 }
 
 .emotion-7:checked:focus:hover:not(:disabled) {
-  background-color: #2B4AAB;
-  border-color: #2B4AAB;
+  background-color: #254CAC;
+  border-color: #254CAC;
 }
 
 .emotion-7:invalid:hover:not(:disabled) {
-  background-color: #FFE6E5;
-  border-color: #A60100;
+  background-color: #FEECEC;
+  border-color: #820000;
 }
 
 .emotion-7:invalid:focus:not(:disabled) {
-  border-color: #D20600;
+  border-color: #A90000;
 }
 
 .emotion-7:invalid:focus:hover:not(:disabled) {
-  background-color: #FFE6E5;
-  border-color: #A60100;
+  background-color: #FEECEC;
+  border-color: #820000;
 }
 
 .emotion-7:checked:invalid:not(:disabled) {
-  background-color: #D20600;
-  border-color: #D20600;
+  background-color: #A90000;
+  border-color: #A90000;
 }
 
 .emotion-7:checked:invalid:focus:not(:disabled) {
-  background-color: #D20600;
-  border-color: #D20600;
+  background-color: #A90000;
+  border-color: #A90000;
 }
 
 .emotion-7:checked:invalid:hover:not(:disabled) {
-  background-color: #A60100;
-  border-color: #A60100;
+  background-color: #820000;
+  border-color: #820000;
 }
 
 .emotion-7:checked:invalid:focus:hover:not(:disabled) {
-  background-color: #A60100;
-  border-color: #A60100;
+  background-color: #820000;
+  border-color: #820000;
 }
 
 .emotion-7:valid:hover:not(:disabled) {
-  background-color: #E6FAEB;
-  border-color: #0A782A;
+  background-color: #E5F4EA;
+  border-color: #004914;
 }
 
 .emotion-7:valid:focus:not(:disabled) {
-  background-color: #FAFAFA;
-  border-color: #148F39;
+  background-color: #F1F1F1;
+  border-color: #00601A;
 }
 
 .emotion-7:valid:focus:hover:not(:disabled) {
-  background-color: #E6FAEB;
-  border-color: #0A782A;
+  background-color: #E5F4EA;
+  border-color: #004914;
 }
 
 .emotion-7:checked:valid:not(:disabled) {
-  background-color: #148F39;
-  border-color: #148F39;
+  background-color: #00601A;
+  border-color: #00601A;
 }
 
 .emotion-7:checked:valid:focus:not(:disabled) {
-  background-color: #148F39;
-  border-color: #148F39;
+  background-color: #00601A;
+  border-color: #00601A;
 }
 
 .emotion-7:checked:valid:hover:not(:disabled) {
-  background-color: #0A782A;
-  border-color: #0A782A;
+  background-color: #004914;
+  border-color: #004914;
 }
 
 .emotion-7:checked:valid:focus:hover:not(:disabled) {
-  background-color: #0A782A;
-  border-color: #0A782A;
+  background-color: #004914;
+  border-color: #004914;
 }
 
 .emotion-7:disabled {
   background-color: transparent;
-  border-color: #F4F4F4;
+  border-color: #E2E2E2;
 }
 
 .emotion-7:checked:disabled:not(:disabled) {
-  background-color: #F4F4F4;
-  border-color: #F4F4F4;
+  background-color: #E2E2E2;
+  border-color: #E2E2E2;
 }
 
 .emotion-7:checked:disabled:not(:disabled) svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-7:focus-visible:not(:disabled) {
@@ -432,7 +432,7 @@ exports[`Fieldset renders fieldset with large form inputs 1`] = `
   outline-style: solid;
   outline-width: 2px;
   outline-offset: 2px;
-  border-color: #D20600;
+  border-color: #A90000;
 }
 
 @media not all and (min-resolution: 0.001dpcm) {
@@ -448,8 +448,8 @@ exports[`Fieldset renders fieldset with large form inputs 1`] = `
   outline-style: solid;
   outline-width: 2px;
   outline-offset: 2px;
-  background-color: #D20600;
-  border-color: #D20600;
+  background-color: #A90000;
+  border-color: #A90000;
 }
 
 @media not all and (min-resolution: 0.001dpcm) {
@@ -465,8 +465,8 @@ exports[`Fieldset renders fieldset with large form inputs 1`] = `
   outline-style: solid;
   outline-width: 2px;
   outline-offset: 2px;
-  background-color: #FAFAFA;
-  border-color: #148F39;
+  background-color: #F1F1F1;
+  border-color: #00601A;
 }
 
 @media not all and (min-resolution: 0.001dpcm) {
@@ -482,8 +482,8 @@ exports[`Fieldset renders fieldset with large form inputs 1`] = `
   outline-style: solid;
   outline-width: 2px;
   outline-offset: 2px;
-  background-color: #148F39;
-  border-color: #148F39;
+  background-color: #00601A;
+  border-color: #00601A;
 }
 
 @media not all and (min-resolution: 0.001dpcm) {
@@ -499,8 +499,8 @@ exports[`Fieldset renders fieldset with large form inputs 1`] = `
   outline-style: solid;
   outline-width: 2px;
   outline-offset: 2px;
-  background-color: #E0E7FF;
-  border-color: #2B4AAB;
+  background-color: #ECF1FF;
+  border-color: #254CAC;
 }
 
 @media not all and (min-resolution: 0.001dpcm) {
@@ -516,8 +516,8 @@ exports[`Fieldset renders fieldset with large form inputs 1`] = `
   outline-style: solid;
   outline-width: 2px;
   outline-offset: 2px;
-  background-color: #2B4AAB;
-  border-color: #2B4AAB;
+  background-color: #254CAC;
+  border-color: #254CAC;
 }
 
 @media not all and (min-resolution: 0.001dpcm) {
@@ -533,8 +533,8 @@ exports[`Fieldset renders fieldset with large form inputs 1`] = `
   outline-style: solid;
   outline-width: 2px;
   outline-offset: 2px;
-  background-color: #FFE6E5;
-  border-color: #A60100;
+  background-color: #FEECEC;
+  border-color: #820000;
 }
 
 @media not all and (min-resolution: 0.001dpcm) {
@@ -550,8 +550,8 @@ exports[`Fieldset renders fieldset with large form inputs 1`] = `
   outline-style: solid;
   outline-width: 2px;
   outline-offset: 2px;
-  background-color: #A60100;
-  border-color: #A60100;
+  background-color: #820000;
+  border-color: #820000;
 }
 
 @media not all and (min-resolution: 0.001dpcm) {
@@ -567,8 +567,8 @@ exports[`Fieldset renders fieldset with large form inputs 1`] = `
   outline-style: solid;
   outline-width: 2px;
   outline-offset: 2px;
-  background-color: #E6FAEB;
-  border-color: #0A782A;
+  background-color: #E5F4EA;
+  border-color: #004914;
 }
 
 @media not all and (min-resolution: 0.001dpcm) {
@@ -584,8 +584,8 @@ exports[`Fieldset renders fieldset with large form inputs 1`] = `
   outline-style: solid;
   outline-width: 2px;
   outline-offset: 2px;
-  background-color: #0A782A;
-  border-color: #0A782A;
+  background-color: #004914;
+  border-color: #004914;
 }
 
 @media not all and (min-resolution: 0.001dpcm) {
@@ -623,7 +623,7 @@ exports[`Fieldset renders fieldset with large form inputs 1`] = `
 }
 
 .emotion-9 {
-  color: #2E2E2E;
+  color: #3B3B3B;
   font-family: "DM Sans",sans-serif;
   font-size: 16px;
   line-height: 1.5;
@@ -632,7 +632,7 @@ exports[`Fieldset renders fieldset with large form inputs 1`] = `
 }
 
 .emotion-9:disabled {
-  color: #C0C0C0;
+  color: #ABABAB;
 }
 
 

   .emotion-2 {
   display: block;
-  color: #0A0A0A;
+  color: #111111;
   font-family: "Poppins",sans-serif;
   font-size: 16px;
   line-height: 24px;
@@ -2868,7 +2868,7 @@ exports[`Form renders with inputs 1`] = `
 }
 
 .emotion-2:disabled {
-  color: #C0C0C0;
+  color: #ABABAB;
 }
 
 .emotion-2::before {
@@ -2900,10 +2900,10 @@ exports[`Form renders with inputs 1`] = `
   cursor: default;
   background-color: transparent;
   border-style: solid;
-  border-color: #DEDEDE;
+  border-color: #C6C6C6;
   border-width: 1px;
   border-radius: 8px;
-  color: #2E2E2E;
+  color: #3B3B3B;
   text-overflow: ellipsis;
   padding: 12px;
   min-height: 48px;
@@ -2922,33 +2922,33 @@ exports[`Form renders with inputs 1`] = `
 }
 
 .emotion-4::-webkit-input-placeholder {
-  color: #535353;
+  color: #6A6A6A;
 }
 
 .emotion-4::-moz-placeholder {
-  color: #535353;
+  color: #6A6A6A;
 }
 
 .emotion-4:-ms-input-placeholder {
-  color: #535353;
+  color: #6A6A6A;
 }
 
 .emotion-4::placeholder {
-  color: #535353;
+  color: #6A6A6A;
 }
 
 .emotion-4:focus:not(:disabled) {
-  background-color: #FAFAFA;
+  background-color: #F1F1F1;
   border-color: #3358CC;
 }
 
 .emotion-4:hover:not(:disabled) {
-  background-color: #FAFAFA;
+  background-color: #F1F1F1;
 }
 
 .emotion-4:disabled {
-  border-color: #F4F4F4;
-  color: #C0C0C0;
+  border-color: #E2E2E2;
+  color: #ABABAB;
 }
 
 .emotion-5 {
@@ -2957,7 +2957,7 @@ exports[`Form renders with inputs 1`] = `
 
 .emotion-6 {
   margin: 0;
-  color: #535353;
+  color: #6A6A6A;
   font-family: "Poppins",sans-serif;
   font-size: 14px;
   line-height: 21px;
@@ -2967,7 +2967,7 @@ exports[`Form renders with inputs 1`] = `
 }
 
 .emotion-6:disabled {
-  color: #C0C0C0;
+  color: #ABABAB;
 }
 
 .emotion-6::before {
@@ -3065,7 +3065,7 @@ exports[`Form renders with logical props 1`] = `
 
 .emotion-2 {
   display: block;
-  color: #0A0A0A;
+  color: #111111;
   font-family: "Poppins",sans-serif;
   font-size: 16px;
   line-height: 24px;
@@ -3077,7 +3077,7 @@ exports[`Form renders with logical props 1`] = `
 }
 
 .emotion-2:disabled {
-  color: #C0C0C0;
+  color: #ABABAB;
 }
 
 .emotion-2::before {
@@ -3109,10 +3109,10 @@ exports[`Form renders with logical props 1`] = `
   cursor: default;
   background-color: transparent;
   border-style: solid;
-  border-color: #DEDEDE;
+  border-color: #C6C6C6;
   border-width: 1px;
   border-radius: 8px;
-  color: #2E2E2E;
+  color: #3B3B3B;
   text-overflow: ellipsis;
   padding: 12px;
   min-height: 48px;
@@ -3131,33 +3131,33 @@ exports[`Form renders with logical props 1`] = `
 }
 
 .emotion-4::-webkit-input-placeholder {
-  color: #535353;
+  color: #6A6A6A;
 }
 
 .emotion-4::-moz-placeholder {
-  color: #535353;
+  color: #6A6A6A;
 }
 
 .emotion-4:-ms-input-placeholder {
-  color: #535353;
+  color: #6A6A6A;
 }
 
 .emotion-4::placeholder {
-  color: #535353;
+  color: #6A6A6A;
 }
 
 .emotion-4:focus:not(:disabled) {
-  background-color: #FAFAFA;
+  background-color: #F1F1F1;
   border-color: #3358CC;
 }
 
 .emotion-4:hover:not(:disabled) {
-  background-color: #FAFAFA;
+  background-color: #F1F1F1;
 }
 
 .emotion-4:disabled {
-  border-color: #F4F4F4;
-  color: #C0C0C0;
+  border-color: #E2E2E2;
+  color: #ABABAB;
 }
 
 .emotion-5 {
@@ -3166,7 +3166,7 @@ exports[`Form renders with logical props 1`] = `
 
 .emotion-6 {
   margin: 0;
-  color: #535353;
+  color: #6A6A6A;
   font-family: "Poppins",sans-serif;
   font-size: 14px;
   line-height: 21px;
@@ -3176,7 +3176,7 @@ exports[`Form renders with logical props 1`] = `
 }
 
 .emotion-6:disabled {
-  color: #C0C0C0;
+  color: #ABABAB;
 }
 
 .emotion-6::before {
@@ -3288,7 +3288,7 @@ exports[`Form renders with nested inputs 1`] = `
 
 .emotion-3 {
   display: block;
-  color: #0A0A0A;
+  color: #111111;
   font-family: "Poppins",sans-serif;
   font-size: 16px;
   line-height: 24px;
@@ -3300,7 +3300,7 @@ exports[`Form renders with nested inputs 1`] = `
 }
 
 .emotion-3:disabled {
-  color: #C0C0C0;
+  color: #ABABAB;
 }
 
 .emotion-3::before {
@@ -3332,10 +3332,10 @@ exports[`Form renders with nested inputs 1`] = `
   cursor: default;
   background-color: transparent;
   border-style: solid;
-  border-color: #DEDEDE;
+  border-color: #C6C6C6;
   border-width: 1px;
   border-radius: 8px;
-  color: #2E2E2E;
+  color: #3B3B3B;
   text-overflow: ellipsis;
   padding: 12px;
   min-height: 48px;
@@ -3354,33 +3354,33 @@ exports[`Form renders with nested inputs 1`] = `
 }
 
 .emotion-5::-webkit-input-placeholder {
-  color: #535353;
+  color: #6A6A6A;
 }
 
 .emotion-5::-moz-placeholder {
-  color: #535353;
+  color: #6A6A6A;
 }
 
 .emotion-5:-ms-input-placeholder {
-  color: #535353;
+  color: #6A6A6A;
 }
 
 .emotion-5::placeholder {
-  color: #535353;
+  color: #6A6A6A;
 }
 
 .emotion-5:focus:not(:disabled) {
-  background-color: #FAFAFA;
+  background-color: #F1F1F1;
   border-color: #3358CC;
 }
 
 .emotion-5:hover:not(:disabled) {
-  background-color: #FAFAFA;
+  background-color: #F1F1F1;
 }
 
 .emotion-5:disabled {
-  border-color: #F4F4F4;
-  color: #C0C0C0;
+  border-color: #E2E2E2;
+  color: #ABABAB;
 }
 
 .emotion-6 {
@@ -3389,7 +3389,7 @@ exports[`Form renders with nested inputs 1`] = `
 
 .emotion-7 {
   margin: 0;
-  color: #535353;
+  color: #6A6A6A;
   font-family: "Poppins",sans-serif;
   font-size: 14px;
   line-height: 21px;
@@ -3399,7 +3399,7 @@ exports[`Form renders with nested inputs 1`] = `
 }
 
 .emotion-7:disabled {
-  color: #C0C0C0;
+  color: #ABABAB;
 }
 
 .emotion-7::before {
@@ -3457,20 +3457,20 @@ exports[`Form renders with nested inputs 1`] = `
 }
 
 .emotion-15:hover:not(:disabled) {
-  background-color: #2B4AAB;
+  background-color: #254CAC;
 }
 
 .emotion-15:active:not(:disabled) {
-  background-color: #213A82;
+  background-color: #14328D;
 }
 
 .emotion-15:disabled {
-  background-color: #F4F4F4;
-  color: #C0C0C0;
+  background-color: #E2E2E2;
+  color: #ABABAB;
 }
 
 .emotion-15:disabled svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-15:focus-visible:not(:disabled) {
@@ -3669,7 +3669,7 @@ exports[`Form renders with onBlur validation 1`] = `
 
 .emotion-3 {
   display: block;
-  color: #0A0A0A;
+  color: #111111;
   font-family: "Poppins",sans-serif;
   font-size: 16px;
   line-height: 24px;
@@ -3681,7 +3681,7 @@ exports[`Form renders with onBlur validation 1`] = `
 }
 
 .emotion-3:disabled {
-  color: #C0C0C0;
+  color: #ABABAB;
 }
 
 .emotion-3::before {
@@ -3713,10 +3713,10 @@ exports[`Form renders with onBlur validation 1`] = `
   cursor: default;
   background-color: transparent;
   border-style: solid;
-  border-color: #DEDEDE;
+  border-color: #C6C6C6;
   border-width: 1px;
   border-radius: 8px;
-  color: #2E2E2E;
+  color: #3B3B3B;
   text-overflow: ellipsis;
   padding: 12px;
   min-height: 48px;
@@ -3735,33 +3735,33 @@ exports[`Form renders with onBlur validation 1`] = `
 }
 
 .emotion-5::-webkit-input-placeholder {
-  color: #535353;
+  color: #6A6A6A;
 }
 
 .emotion-5::-moz-placeholder {
-  color: #535353;
+  color: #6A6A6A;
 }
 
 .emotion-5:-ms-input-placeholder {
-  color: #535353;
+  color: #6A6A6A;
 }
 
 .emotion-5::placeholder {
-  color: #535353;
+  color: #6A6A6A;
 }
 
 .emotion-5:focus:not(:disabled) {
-  background-color: #FAFAFA;
+  background-color: #F1F1F1;
   border-color: #3358CC;
 }
 
 .emotion-5:hover:not(:disabled) {
-  background-color: #FAFAFA;
+  background-color: #F1F1F1;
 }
 
 .emotion-5:disabled {
-  border-color: #F4F4F4;
-  color: #C0C0C0;
+  border-color: #E2E2E2;
+  color: #ABABAB;
 }
 
 .emotion-6 {
@@ -3770,7 +3770,7 @@ exports[`Form renders with onBlur validation 1`] = `
 
 .emotion-7 {
   margin: 0;
-  color: #535353;
+  color: #6A6A6A;
   font-family: "Poppins",sans-serif;
   font-size: 14px;
   line-height: 21px;
@@ -3780,7 +3780,7 @@ exports[`Form renders with onBlur validation 1`] = `
 }
 
 .emotion-7:disabled {
-  color: #C0C0C0;
+  color: #ABABAB;
 }
 
 .emotion-7::before {
@@ -3838,20 +3838,20 @@ exports[`Form renders with onBlur validation 1`] = `
 }
 
 .emotion-15:hover:not(:disabled) {
-  background-color: #2B4AAB;
+  background-color: #254CAC;
 }
 
 .emotion-15:active:not(:disabled) {
-  background-color: #213A82;
+  background-color: #14328D;
 }
 
 .emotion-15:disabled {
-  background-color: #F4F4F4;
-  color: #C0C0C0;
+  background-color: #E2E2E2;
+  color: #ABABAB;
 }
 
 .emotion-15:disabled svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-15:focus-visible:not(:disabled) {
@@ -4046,7 +4046,7 @@ exports[`FormInput fireEvent with onBlur valid state 1`] = `
 
   .emotion-1 {
   display: block;
-  color: #0A0A0A;
+  color: #111111;
   font-family: "Poppins",sans-serif;
   font-size: 14px;
   line-height: 21px;
@@ -4058,7 +4058,7 @@ exports[`FormInput fireEvent with onBlur valid state 1`] = `
 }
 
 .emotion-1:disabled {
-  color: #C0C0C0;
+  color: #ABABAB;
 }
 
 .emotion-1::before {
@@ -4092,15 +4092,15 @@ exports[`FormInput fireEvent with onBlur valid state 1`] = `
   margin-bottom: 8px;
   background-color: transparent;
   border-style: solid;
-  border-color: #CCCCCC;
+  border-color: #919191;
   border-width: 1px;
   border-radius: 8px;
-  color: #2E2E2E;
+  color: #3B3B3B;
   text-overflow: ellipsis;
 }
 
 .emotion-2 svg {
-  fill: #2E2E2E;
+  fill: #3B3B3B;
 }
 
 .emotion-2:focus:not(:disabled) {
@@ -4108,7 +4108,7 @@ exports[`FormInput fireEvent with onBlur valid state 1`] = `
   outline-style: solid;
   outline-width: 2px;
   border-color: transparent;
-  background-color: #FAFAFA;
+  background-color: #F1F1F1;
 }
 
 @media not all and (min-resolution: 0.001dpcm) {
@@ -4120,36 +4120,36 @@ exports[`FormInput fireEvent with onBlur valid state 1`] = `
 }
 
 .emotion-2:hover:not(:disabled) {
-  background-color: #FAFAFA;
+  background-color: #F1F1F1;
 }
 
 .emotion-2:valid:hover:not(:disabled) {
-  border-color: #23A248;
-  background-color: #FAFAFA;
+  border-color: #007B22;
+  background-color: #F1F1F1;
 }
 
 .emotion-2:valid:focus:not(:disabled) {
   border-color: #3768FB;
-  background-color: #FAFAFA;
+  background-color: #F1F1F1;
 }
 
 .emotion-2:disabled {
-  border-color: #F4F4F4;
-  color: #C0C0C0;
+  border-color: #E2E2E2;
+  color: #ABABAB;
 }
 
 .emotion-2:disabled svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-2:invalid:focus:not(:disabled) {
   border-color: #3768FB;
-  background-color: #FAFAFA;
+  background-color: #F1F1F1;
 }
 
 .emotion-2:invalid:hover:not(:disabled) {
-  border-color: #EF1703;
-  background-color: #FAFAFA;
+  border-color: #D60000;
+  background-color: #F1F1F1;
 }
 
 .emotion-3 {
@@ -4180,19 +4180,19 @@ exports[`FormInput fireEvent with onBlur valid state 1`] = `
 }
 
 .emotion-3::-webkit-input-placeholder {
-  color: #535353;
+  color: #6A6A6A;
 }
 
 .emotion-3::-moz-placeholder {
-  color: #535353;
+  color: #6A6A6A;
 }
 
 .emotion-3:-ms-input-placeholder {
-  color: #535353;
+  color: #6A6A6A;
 }
 
 .emotion-3::placeholder {
-  color: #535353;
+  color: #6A6A6A;
 }
 
 .emotion-4 {
@@ -4214,7 +4214,7 @@ exports[`FormInput fireEvent with onBlur valid state 1`] = `
   display: inline-block;
   vertical-align: middle;
   overflow: hidden;
-  fill: #2E2E2E;
+  fill: #3B3B3B;
   vertical-align: unset;
   display: inline-block;
 }
@@ -4255,11 +4255,11 @@ exports[`FormInput fireEvent with onBlur valid state 1`] = `
   -ms-flex-align: center;
   align-items: center;
   min-height: 12px;
-  color: #535353;
+  color: #6A6A6A;
 }
 
 .emotion-7:disabled {
-  color: #C0C0C0;
+  color: #ABABAB;
 }
 
 .emotion-8 {
@@ -4267,7 +4267,7 @@ exports[`FormInput fireEvent with onBlur valid state 1`] = `
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
-  color: #535353;
+  color: #6A6A6A;
   font-family: "DM Sans",sans-serif;
   font-size: 14px;
   line-height: 21px;
@@ -4277,7 +4277,7 @@ exports[`FormInput fireEvent with onBlur valid state 1`] = `
 }
 
 .emotion-8:disabled {
-  color: #C0C0C0;
+  color: #ABABAB;
 }
 
 .emotion-8::before {
@@ -4329,7 +4329,7 @@ exports[`FormInput fireEvent with onBlur valid state 1`] = `
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
-  color: #535353;
+  color: #6A6A6A;
   font-family: "DM Sans",sans-serif;
   font-size: 14px;
   line-height: 1.5;
@@ -4413,22 +4413,22 @@ exports[`FormInput fireEvent with onBlur valid state 1`] = `
 }
 
 .emotion-24:valid:hover:not(:disabled) {
-  background-color: #148F39;
+  background-color: #00601A;
   opacity: 0.2;
 }
 
 .emotion-24:valid:hover:active:not(:disabled) {
-  background-color: #148F39;
+  background-color: #00601A;
   opacity: 0.4;
 }
 
 .emotion-24:invalid:hover:not(:disabled) {
-  background-color: #D20600;
+  background-color: #A90000;
   opacity: 0.2;
 }
 
 .emotion-24:invalid:hover:active:not(:disabled) {
-  background-color: #D20600;
+  background-color: #A90000;
   opacity: 0.4;
 }
 
@@ -4466,8 +4466,8 @@ exports[`FormInput fireEvent with onBlur valid state 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  background-color: #FAFAFA;
-  border-color: #CCCCCC;
+  background-color: #F1F1F1;
+  border-color: #919191;
   border-width: 2px;
   border-radius: 4px;
   border-style: solid;
@@ -4478,13 +4478,13 @@ exports[`FormInput fireEvent with onBlur valid state 1`] = `
 }
 
 .emotion-25:hover:not(:disabled) {
-  background-color: #E0E7FF;
-  border-color: #2B4AAB;
+  background-color: #ECF1FF;
+  border-color: #254CAC;
 }
 
 .emotion-25:focus:hover:not(:disabled) {
-  background-color: #E0E7FF;
-  border-color: #2B4AAB;
+  background-color: #ECF1FF;
+  border-color: #254CAC;
 }
 
 .emotion-25:checked:not(:disabled) {
@@ -4493,8 +4493,8 @@ exports[`FormInput fireEvent with onBlur valid state 1`] = `
 }
 
 .emotion-25:checked:hover:not(:disabled) {
-  background-color: #2B4AAB;
-  border-color: #2B4AAB;
+  background-color: #254CAC;
+  border-color: #254CAC;
 }
 
 .emotion-25:checked:focus:not(:disabled) {
@@ -4503,91 +4503,91 @@ exports[`FormInput fireEvent with onBlur valid state 1`] = `
 }
 
 .emotion-25:checked:focus:hover:not(:disabled) {
-  background-color: #2B4AAB;
-  border-color: #2B4AAB;
+  background-color: #254CAC;
+  border-color: #254CAC;
 }
 
 .emotion-25:invalid:hover:not(:disabled) {
-  background-color: #FFE6E5;
-  border-color: #A60100;
+  background-color: #FEECEC;
+  border-color: #820000;
 }
 
 .emotion-25:invalid:focus:not(:disabled) {
-  border-color: #D20600;
+  border-color: #A90000;
 }
 
 .emotion-25:invalid:focus:hover:not(:disabled) {
-  background-color: #FFE6E5;
-  border-color: #A60100;
+  background-color: #FEECEC;
+  border-color: #820000;
 }
 
 .emotion-25:checked:invalid:not(:disabled) {
-  background-color: #D20600;
-  border-color: #D20600;
+  background-color: #A90000;
+  border-color: #A90000;
 }
 
 .emotion-25:checked:invalid:focus:not(:disabled) {
-  background-color: #D20600;
-  border-color: #D20600;
+  background-color: #A90000;
+  border-color: #A90000;
 }
 
 .emotion-25:checked:invalid:hover:not(:disabled) {
-  background-color: #A60100;
-  border-color: #A60100;
+  background-color: #820000;
+  border-color: #820000;
 }
 
 .emotion-25:checked:invalid:focus:hover:not(:disabled) {
-  background-color: #A60100;
-  border-color: #A60100;
+  background-color: #820000;
+  border-color: #820000;
 }
 
 .emotion-25:valid:hover:not(:disabled) {
-  background-color: #E6FAEB;
-  border-color: #0A782A;
+  background-color: #E5F4EA;
+  border-color: #004914;
 }
 
 .emotion-25:valid:focus:not(:disabled) {
-  background-color: #FAFAFA;
-  border-color: #148F39;
+  background-color: #F1F1F1;
+  border-color: #00601A;
 }
 
 .emotion-25:valid:focus:hover:not(:disabled) {
-  background-color: #E6FAEB;
-  border-color: #0A782A;
+  background-color: #E5F4EA;
+  border-color: #004914;
 }
 
 .emotion-25:checked:valid:not(:disabled) {
-  background-color: #148F39;
-  border-color: #148F39;
+  background-color: #00601A;
+  border-color: #00601A;
 }
 
 .emotion-25:checked:valid:focus:not(:disabled) {
-  background-color: #148F39;
-  border-color: #148F39;
+  background-color: #00601A;
+  border-color: #00601A;
 }
 
 .emotion-25:checked:valid:hover:not(:disabled) {
-  background-color: #0A782A;
-  border-color: #0A782A;
+  background-color: #004914;
+  border-color: #004914;
 }
 
 .emotion-25:checked:valid:focus:hover:not(:disabled) {
-  background-color: #0A782A;
-  border-color: #0A782A;
+  background-color: #004914;
+  border-color: #004914;
 }
 
 .emotion-25:disabled {
   background-color: transparent;
-  border-color: #F4F4F4;
+  border-color: #E2E2E2;
 }
 
 .emotion-25:checked:disabled:not(:disabled) {
-  background-color: #F4F4F4;
-  border-color: #F4F4F4;
+  background-color: #E2E2E2;
+  border-color: #E2E2E2;
 }
 
 .emotion-25:checked:disabled:not(:disabled) svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-25:focus-visible:not(:disabled) {
@@ -4627,7 +4627,7 @@ exports[`FormInput fireEvent with onBlur valid state 1`] = `
   outline-style: solid;
   outline-width: 2px;
   outline-offset: 2px;
-  border-color: #D20600;
+  border-color: #A90000;
 }
 
 @media not all and (min-resolution: 0.001dpcm) {
@@ -4643,8 +4643,8 @@ exports[`FormInput fireEvent with onBlur valid state 1`] = `
   outline-style: solid;
   outline-width: 2px;
   outline-offset: 2px;
-  background-color: #D20600;
-  border-color: #D20600;
+  background-color: #A90000;
+  border-color: #A90000;
 }
 
 @media not all and (min-resolution: 0.001dpcm) {
@@ -4660,8 +4660,8 @@ exports[`FormInput fireEvent with onBlur valid state 1`] = `
   outline-style: solid;
   outline-width: 2px;
   outline-offset: 2px;
-  background-color: #FAFAFA;
-  border-color: #148F39;
+  background-color: #F1F1F1;
+  border-color: #00601A;
 }
 
 @media not all and (min-resolution: 0.001dpcm) {
@@ -4677,8 +4677,8 @@ exports[`FormInput fireEvent with onBlur valid state 1`] = `
   outline-style: solid;
   outline-width: 2px;
   outline-offset: 2px;
-  background-color: #148F39;
-  border-color: #148F39;
+  background-color: #00601A;
+  border-color: #00601A;
 }
 
 @media not all and (min-resolution: 0.001dpcm) {
@@ -4694,8 +4694,8 @@ exports[`FormInput fireEvent with onBlur valid state 1`] = `
   outline-style: solid;
   outline-width: 2px;
   outline-offset: 2px;
-  background-color: #E0E7FF;
-  border-color: #2B4AAB;
+  background-color: #ECF1FF;
+  border-color: #254CAC;
 }
 
 @media not all and (min-resolution: 0.001dpcm) {
@@ -4711,8 +4711,8 @@ exports[`FormInput fireEvent with onBlur valid state 1`] = `
   outline-style: solid;
   outline-width: 2px;
   outline-offset: 2px;
-  background-color: #2B4AAB;
-  border-color: #2B4AAB;
+  background-color: #254CAC;
+  border-color: #254CAC;
 }
 
 @media not all and (min-resolution: 0.001dpcm) {
@@ -4728,8 +4728,8 @@ exports[`FormInput fireEvent with onBlur valid state 1`] = `
   outline-style: solid;
   outline-width: 2px;
   outline-offset: 2px;
-  background-color: #FFE6E5;
-  border-color: #A60100;
+  background-color: #FEECEC;
+  border-color: #820000;
 }
 
 @media not all and (min-resolution: 0.001dpcm) {
@@ -4745,8 +4745,8 @@ exports[`FormInput fireEvent with onBlur valid state 1`] = `
   outline-style: solid;
   outline-width: 2px;
   outline-offset: 2px;
-  background-color: #A60100;
-  border-color: #A60100;
+  background-color: #820000;
+  border-color: #820000;
 }
 
 @media not all and (min-resolution: 0.001dpcm) {
@@ -4762,8 +4762,8 @@ exports[`FormInput fireEvent with onBlur valid state 1`] = `
   outline-style: solid;
   outline-width: 2px;
   outline-offset: 2px;
-  background-color: #E6FAEB;
-  border-color: #0A782A;
+  background-color: #E5F4EA;
+  border-color: #004914;
 }
 
 @media not all and (min-resolution: 0.001dpcm) {
@@ -4779,8 +4779,8 @@ exports[`FormInput fireEvent with onBlur valid state 1`] = `
   outline-style: solid;
   outline-width: 2px;
   outline-offset: 2px;
-  background-color: #0A782A;
-  border-color: #0A782A;
+  background-color: #004914;
+  border-color: #004914;
 }
 
 @media not all and (min-resolution: 0.001dpcm) {
@@ -4818,7 +4818,7 @@ exports[`FormInput fireEvent with onBlur valid state 1`] = `
 }
 
 .emotion-27 {
-  color: #2E2E2E;
+  color: #3B3B3B;
   font-family: "DM Sans",sans-serif;
   font-size: 14px;
   line-height: 1.5;
@@ -4827,7 +4827,7 @@ exports[`FormInput fireEvent with onBlur valid state 1`] = `
 }
 
 .emotion-27:disabled {
-  color: #C0C0C0;
+  color: #ABABAB;
 }
 
 .emotion-33 {
@@ -4848,25 +4848,25 @@ exports[`FormInput fireEvent with onBlur valid state 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  background-color: #FAFAFA;
-  border-color: #CCCCCC;
+  background-color: #F1F1F1;
+  border-color: #919191;
   border-width: 2px;
   border-radius: 50%;
   border-style: solid;
 }
 
 .emotion-33:hover:not(:disabled) {
-  background-color: #E0E7FF;
-  border-color: #2B4AAB;
+  background-color: #ECF1FF;
+  border-color: #254CAC;
 }
 
 .emotion-33:focus:hover:not(:disabled) {
-  background-color: #E0E7FF;
-  border-color: #2B4AAB;
+  background-color: #ECF1FF;
+  border-color: #254CAC;
 }
 
 .emotion-33:checked:not(:disabled) {
-  background-color: #FAFAFA;
+  background-color: #F1F1F1;
   border-color: #3358CC;
 }
 
@@ -4875,16 +4875,16 @@ exports[`FormInput fireEvent with onBlur valid state 1`] = `
 }
 
 .emotion-33:checked:hover:not(:disabled) {
-  background-color: #E0E7FF;
-  border-color: #2B4AAB;
+  background-color: #ECF1FF;
+  border-color: #254CAC;
 }
 
 .emotion-33:checked:hover:not(:disabled) svg {
-  fill: #2B4AAB;
+  fill: #254CAC;
 }
 
 .emotion-33:checked:focus:not(:disabled) {
-  background-color: #FAFAFA;
+  background-color: #F1F1F1;
   border-color: #3358CC;
 }
 
@@ -4893,124 +4893,124 @@ exports[`FormInput fireEvent with onBlur valid state 1`] = `
 }
 
 .emotion-33:checked:focus:hover:not(:disabled) {
-  background-color: #E0E7FF;
-  border-color: #2B4AAB;
+  background-color: #ECF1FF;
+  border-color: #254CAC;
 }
 
 .emotion-33:checked:focus:hover:not(:disabled) svg {
-  fill: #2B4AAB;
+  fill: #254CAC;
 }
 
 .emotion-33:invalid:focus:not(:disabled) {
-  border-color: #D20600;
+  border-color: #A90000;
 }
 
 .emotion-33:invalid:hover:not(:disabled) {
-  background-color: #FFE6E5;
-  border-color: #A60100;
+  background-color: #FEECEC;
+  border-color: #820000;
 }
 
 .emotion-33:invalid:focus:hover:not(:disabled) {
-  background-color: #FFE6E5;
-  border-color: #A60100;
+  background-color: #FEECEC;
+  border-color: #820000;
 }
 
 .emotion-33:checked:invalid:not(:disabled) {
-  background-color: #FAFAFA;
-  border-color: #D20600;
+  background-color: #F1F1F1;
+  border-color: #A90000;
 }
 
 .emotion-33:checked:invalid:not(:disabled) svg {
-  fill: #D20600;
+  fill: #A90000;
 }
 
 .emotion-33:checked:invalid:focus:not(:disabled) {
-  border-color: #D20600;
+  border-color: #A90000;
 }
 
 .emotion-33:checked:invalid:focus:not(:disabled) svg {
-  fill: #D20600;
+  fill: #A90000;
 }
 
 .emotion-33:checked:invalid:hover:not(:disabled) {
-  background-color: #FFE6E5;
-  border-color: #A60100;
+  background-color: #FEECEC;
+  border-color: #820000;
 }
 
 .emotion-33:checked:invalid:hover:not(:disabled) svg {
-  fill: #A60100;
+  fill: #820000;
 }
 
 .emotion-33:checked:invalid:focus:hover:not(:disabled) {
-  background-color: #FFE6E5;
-  border-color: #A60100;
+  background-color: #FEECEC;
+  border-color: #820000;
 }
 
 .emotion-33:checked:invalid:focus:hover:not(:disabled) svg {
-  fill: #A60100;
+  fill: #820000;
 }
 
 .emotion-33:valid:focus:not(:disabled) {
-  border-color: #0A782A;
+  border-color: #004914;
 }
 
 .emotion-33:valid:hover:not(:disabled) {
-  background-color: #E6FAEB;
-  border-color: #0A782A;
+  background-color: #E5F4EA;
+  border-color: #004914;
 }
 
 .emotion-33:valid:focus:hover:not(:disabled) {
-  background-color: #E6FAEB;
-  border-color: #0A782A;
+  background-color: #E5F4EA;
+  border-color: #004914;
 }
 
 .emotion-33:checked:valid:not(:disabled) {
-  background-color: #FAFAFA;
-  border-color: #148F39;
+  background-color: #F1F1F1;
+  border-color: #00601A;
 }
 
 .emotion-33:checked:valid:not(:disabled) svg {
-  fill: #148F39;
+  fill: #00601A;
 }
 
 .emotion-33:checked:valid:focus:not(:disabled) {
-  border-color: #148F39;
+  border-color: #00601A;
 }
 
 .emotion-33:checked:valid:focus:not(:disabled) svg {
-  fill: #148F39;
+  fill: #00601A;
 }
 
 .emotion-33:checked:valid:hover:not(:disabled) {
-  background-color: #E6FAEB;
-  border-color: #0A782A;
+  background-color: #E5F4EA;
+  border-color: #004914;
 }
 
 .emotion-33:checked:valid:hover:not(:disabled) svg {
-  fill: #0A782A;
+  fill: #004914;
 }
 
 .emotion-33:checked:valid:focus:hover:not(:disabled) {
-  background-color: #E6FAEB;
-  border-color: #0A782A;
+  background-color: #E5F4EA;
+  border-color: #004914;
 }
 
 .emotion-33:checked:valid:focus:hover:not(:disabled) svg {
-  fill: #0A782A;
+  fill: #004914;
 }
 
 .emotion-33:disabled {
   background-color: transparent;
-  border-color: #F4F4F4;
+  border-color: #E2E2E2;
 }
 
 .emotion-33:checked:disabled:not(:disabled) {
   background-color: transparent;
-  border-color: #F4F4F4;
+  border-color: #E2E2E2;
 }
 
 .emotion-33:checked:disabled:not(:disabled) svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-33:focus-visible:not(:disabled) {
@@ -5033,7 +5033,7 @@ exports[`FormInput fireEvent with onBlur valid state 1`] = `
   outline-style: solid;
   outline-width: 2px;
   outline-offset: 2px;
-  background-color: #FAFAFA;
+  background-color: #F1F1F1;
   border-color: #3358CC;
 }
 
@@ -5054,12 +5054,12 @@ exports[`FormInput fireEvent with onBlur valid state 1`] = `
   outline-style: solid;
   outline-width: 2px;
   outline-offset: 2px;
-  background-color: #E0E7FF;
-  border-color: #2B4AAB;
+  background-color: #ECF1FF;
+  border-color: #254CAC;
 }
 
 .emotion-33:checked:focus-visible:hover:not(:disabled) svg {
-  fill: #2B4AAB;
+  fill: #254CAC;
 }
 
 @media not all and (min-resolution: 0.001dpcm) {
@@ -5075,12 +5075,12 @@ exports[`FormInput fireEvent with onBlur valid state 1`] = `
   outline-style: solid;
   outline-width: 2px;
   outline-offset: 2px;
-  background-color: #FAFAFA;
-  border-color: #148F39;
+  background-color: #F1F1F1;
+  border-color: #00601A;
 }
 
 .emotion-33:checked:valid:focus-visible:not(:disabled) svg {
-  fill: #148F39;
+  fill: #00601A;
 }
 
 @media not all and (min-resolution: 0.001dpcm) {
@@ -5096,12 +5096,12 @@ exports[`FormInput fireEvent with onBlur valid state 1`] = `
   outline-style: solid;
   outline-width: 2px;
   outline-offset: 2px;
-  background-color: #E6FAEB;
-  border-color: #0A782A;
+  background-color: #E5F4EA;
+  border-color: #004914;
 }
 
 .emotion-33:checked:valid:focus-visible:hover:not(:disabled) svg {
-  fill: #0A782A;
+  fill: #004914;
 }
 
 @media not all and (min-resolution: 0.001dpcm) {
@@ -5117,12 +5117,12 @@ exports[`FormInput fireEvent with onBlur valid state 1`] = `
   outline-style: solid;
   outline-width: 2px;
   outline-offset: 2px;
-  background-color: #FAFAFA;
-  border-color: #D20600;
+  background-color: #F1F1F1;
+  border-color: #A90000;
 }
 
 .emotion-33:checked:invalid:focus-visible:not(:disabled) svg {
-  fill: #D20600;
+  fill: #A90000;
 }
 
 @media not all and (min-resolution: 0.001dpcm) {
@@ -5138,12 +5138,12 @@ exports[`FormInput fireEvent with onBlur valid state 1`] = `
   outline-style: solid;
   outline-width: 2px;
   outline-offset: 2px;
-  background-color: #FFE6E5;
-  border-color: #A60100;
+  background-color: #FEECEC;
+  border-color: #820000;
 }
 
 .emotion-33:checked:invalid:focus-visible:hover:not(:disabled) svg {
-  fill: #A60100;
+  fill: #820000;
 }
 
 @media not all and (min-resolution: 0.001dpcm) {
@@ -5477,7 +5477,7 @@ exports[`FormInput fireEvent with onChange when value is invalid 1`] = `
 
   .emotion-1 {
   display: block;
-  color: #0A0A0A;
+  color: #111111;
   font-family: "Poppins",sans-serif;
   font-size: 14px;
   line-height: 21px;
@@ -5489,7 +5489,7 @@ exports[`FormInput fireEvent with onChange when value is invalid 1`] = `
 }
 
 .emotion-1:disabled {
-  color: #C0C0C0;
+  color: #ABABAB;
 }
 
 .emotion-1::before {
@@ -5523,15 +5523,15 @@ exports[`FormInput fireEvent with onChange when value is invalid 1`] = `
   margin-bottom: 8px;
   background-color: transparent;
   border-style: solid;
-  border-color: #CCCCCC;
+  border-color: #919191;
   border-width: 1px;
   border-radius: 8px;
-  color: #2E2E2E;
+  color: #3B3B3B;
   text-overflow: ellipsis;
 }
 
 .emotion-2 svg {
-  fill: #2E2E2E;
+  fill: #3B3B3B;
 }
 
 .emotion-2:focus:not(:disabled) {
@@ -5539,7 +5539,7 @@ exports[`FormInput fireEvent with onChange when value is invalid 1`] = `
   outline-style: solid;
   outline-width: 2px;
   border-color: transparent;
-  background-color: #FAFAFA;
+  background-color: #F1F1F1;
 }
 
 @media not all and (min-resolution: 0.001dpcm) {
@@ -5551,36 +5551,36 @@ exports[`FormInput fireEvent with onChange when value is invalid 1`] = `
 }
 
 .emotion-2:hover:not(:disabled) {
-  background-color: #FAFAFA;
+  background-color: #F1F1F1;
 }
 
 .emotion-2:valid:hover:not(:disabled) {
-  border-color: #23A248;
-  background-color: #FAFAFA;
+  border-color: #007B22;
+  background-color: #F1F1F1;
 }
 
 .emotion-2:valid:focus:not(:disabled) {
   border-color: #3768FB;
-  background-color: #FAFAFA;
+  background-color: #F1F1F1;
 }
 
 .emotion-2:disabled {
-  border-color: #F4F4F4;
-  color: #C0C0C0;
+  border-color: #E2E2E2;
+  color: #ABABAB;
 }
 
 .emotion-2:disabled svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-2:invalid:focus:not(:disabled) {
   border-color: #3768FB;
-  background-color: #FAFAFA;
+  background-color: #F1F1F1;
 }
 
 .emotion-2:invalid:hover:not(:disabled) {
-  border-color: #EF1703;
-  background-color: #FAFAFA;
+  border-color: #D60000;
+  background-color: #F1F1F1;
 }
 
 .emotion-3 {
@@ -5611,19 +5611,19 @@ exports[`FormInput fireEvent with onChange when value is invalid 1`] = `
 }
 
 .emotion-3::-webkit-input-placeholder {
-  color: #535353;
+  color: #6A6A6A;
 }
 
 .emotion-3::-moz-placeholder {
-  color: #535353;
+  color: #6A6A6A;
 }
 
 .emotion-3:-ms-input-placeholder {
-  color: #535353;
+  color: #6A6A6A;
 }
 
 .emotion-3::placeholder {
-  color: #535353;
+  color: #6A6A6A;
 }
 
 .emotion-4 {
@@ -5645,7 +5645,7 @@ exports[`FormInput fireEvent with onChange when value is invalid 1`] = `
   display: inline-block;
   vertical-align: middle;
   overflow: hidden;
-  fill: #2E2E2E;
+  fill: #3B3B3B;
   vertical-align: unset;
   display: inline-block;
 }
@@ -5686,11 +5686,11 @@ exports[`FormInput fireEvent with onChange when value is invalid 1`] = `
   -ms-flex-align: center;
   align-items: center;
   min-height: 12px;
-  color: #535353;
+  color: #6A6A6A;
 }
 
 .emotion-7:disabled {
-  color: #C0C0C0;
+  color: #ABABAB;
 }
 
 .emotion-8 {
@@ -5698,7 +5698,7 @@ exports[`FormInput fireEvent with onChange when value is invalid 1`] = `
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
-  color: #535353;
+  color: #6A6A6A;
   font-family: "DM Sans",sans-serif;
   font-size: 14px;
   line-height: 21px;
@@ -5708,7 +5708,7 @@ exports[`FormInput fireEvent with onChange when value is invalid 1`] = `
 }
 
 .emotion-8:disabled {
-  color: #C0C0C0;
+  color: #ABABAB;
 }
 
 .emotion-8::before {
@@ -5760,7 +5760,7 @@ exports[`FormInput fireEvent with onChange when value is invalid 1`] = `
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
-  color: #535353;
+  color: #6A6A6A;
   font-family: "DM Sans",sans-serif;
   font-size: 14px;
   line-height: 1.5;
@@ -5844,22 +5844,22 @@ exports[`FormInput fireEvent with onChange when value is invalid 1`] = `
 }
 
 .emotion-24:valid:hover:not(:disabled) {
-  background-color: #148F39;
+  background-color: #00601A;
   opacity: 0.2;
 }
 
 .emotion-24:valid:hover:active:not(:disabled) {
-  background-color: #148F39;
+  background-color: #00601A;
   opacity: 0.4;
 }
 
 .emotion-24:invalid:hover:not(:disabled) {
-  background-color: #D20600;
+  background-color: #A90000;
   opacity: 0.2;
 }
 
 .emotion-24:invalid:hover:active:not(:disabled) {
-  background-color: #D20600;
+  background-color: #A90000;
   opacity: 0.4;
 }
 
@@ -5897,8 +5897,8 @@ exports[`FormInput fireEvent with onChange when value is invalid 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  background-color: #FAFAFA;
-  border-color: #CCCCCC;
+  background-color: #F1F1F1;
+  border-color: #919191;
   border-width: 2px;
   border-radius: 4px;
   border-style: solid;
@@ -5909,13 +5909,13 @@ exports[`FormInput fireEvent with onChange when value is invalid 1`] = `
 }
 
 .emotion-25:hover:not(:disabled) {
-  background-color: #E0E7FF;
-  border-color: #2B4AAB;
+  background-color: #ECF1FF;
+  border-color: #254CAC;
 }
 
 .emotion-25:focus:hover:not(:disabled) {
-  background-color: #E0E7FF;
-  border-color: #2B4AAB;
+  background-color: #ECF1FF;
+  border-color: #254CAC;
 }
 
 .emotion-25:checked:not(:disabled) {
@@ -5924,8 +5924,8 @@ exports[`FormInput fireEvent with onChange when value is invalid 1`] = `
 }
 
 .emotion-25:checked:hover:not(:disabled) {
-  background-color: #2B4AAB;
-  border-color: #2B4AAB;
+  background-color: #254CAC;
+  border-color: #254CAC;
 }
 
 .emotion-25:checked:focus:not(:disabled) {
@@ -5934,91 +5934,91 @@ exports[`FormInput fireEvent with onChange when value is invalid 1`] = `
 }
 
 .emotion-25:checked:focus:hover:not(:disabled) {
-  background-color: #2B4AAB;
-  border-color: #2B4AAB;
+  background-color: #254CAC;
+  border-color: #254CAC;
 }
 
 .emotion-25:invalid:hover:not(:disabled) {
-  background-color: #FFE6E5;
-  border-color: #A60100;
+  background-color: #FEECEC;
+  border-color: #820000;
 }
 
 .emotion-25:invalid:focus:not(:disabled) {
-  border-color: #D20600;
+  border-color: #A90000;
 }
 
 .emotion-25:invalid:focus:hover:not(:disabled) {
-  background-color: #FFE6E5;
-  border-color: #A60100;
+  background-color: #FEECEC;
+  border-color: #820000;
 }
 
 .emotion-25:checked:invalid:not(:disabled) {
-  background-color: #D20600;
-  border-color: #D20600;
+  background-color: #A90000;
+  border-color: #A90000;
 }
 
 .emotion-25:checked:invalid:focus:not(:disabled) {
-  background-color: #D20600;
-  border-color: #D20600;
+  background-color: #A90000;
+  border-color: #A90000;
 }
 
 .emotion-25:checked:invalid:hover:not(:disabled) {
-  background-color: #A60100;
-  border-color: #A60100;
+  background-color: #820000;
+  border-color: #820000;
 }
 
 .emotion-25:checked:invalid:focus:hover:not(:disabled) {
-  background-color: #A60100;
-  border-color: #A60100;
+  background-color: #820000;
+  border-color: #820000;
 }
 
 .emotion-25:valid:hover:not(:disabled) {
-  background-color: #E6FAEB;
-  border-color: #0A782A;
+  background-color: #E5F4EA;
+  border-color: #004914;
 }
 
 .emotion-25:valid:focus:not(:disabled) {
-  background-color: #FAFAFA;
-  border-color: #148F39;
+  background-color: #F1F1F1;
+  border-color: #00601A;
 }
 
 .emotion-25:valid:focus:hover:not(:disabled) {
-  background-color: #E6FAEB;
-  border-color: #0A782A;
+  background-color: #E5F4EA;
+  border-color: #004914;
 }
 
 .emotion-25:checked:valid:not(:disabled) {
-  background-color: #148F39;
-  border-color: #148F39;
+  background-color: #00601A;
+  border-color: #00601A;
 }
 
 .emotion-25:checked:valid:focus:not(:disabled) {
-  background-color: #148F39;
-  border-color: #148F39;
+  background-color: #00601A;
+  border-color: #00601A;
 }
 
 .emotion-25:checked:valid:hover:not(:disabled) {
-  background-color: #0A782A;
-  border-color: #0A782A;
+  background-color: #004914;
+  border-color: #004914;
 }
 
 .emotion-25:checked:valid:focus:hover:not(:disabled) {
-  background-color: #0A782A;
-  border-color: #0A782A;
+  background-color: #004914;
+  border-color: #004914;
 }
 
 .emotion-25:disabled {
   background-color: transparent;
-  border-color: #F4F4F4;
+  border-color: #E2E2E2;
 }
 
 .emotion-25:checked:disabled:not(:disabled) {
-  background-color: #F4F4F4;
-  border-color: #F4F4F4;
+  background-color: #E2E2E2;
+  border-color: #E2E2E2;
 }
 
 .emotion-25:checked:disabled:not(:disabled) svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-25:focus-visible:not(:disabled) {
@@ -6058,7 +6058,7 @@ exports[`FormInput fireEvent with onChange when value is invalid 1`] = `
   outline-style: solid;
   outline-width: 2px;
   outline-offset: 2px;
-  border-color: #D20600;
+  border-color: #A90000;
 }
 
 @media not all and (min-resolution: 0.001dpcm) {
@@ -6074,8 +6074,8 @@ exports[`FormInput fireEvent with onChange when value is invalid 1`] = `
   outline-style: solid;
   outline-width: 2px;
   outline-offset: 2px;
-  background-color: #D20600;
-  border-color: #D20600;
+  background-color: #A90000;
+  border-color: #A90000;
 }
 
 @media not all and (min-resolution: 0.001dpcm) {
@@ -6091,8 +6091,8 @@ exports[`FormInput fireEvent with onChange when value is invalid 1`] = `
   outline-style: solid;
   outline-width: 2px;
   outline-offset: 2px;
-  background-color: #FAFAFA;
-  border-color: #148F39;
+  background-color: #F1F1F1;
+  border-color: #00601A;
 }
 
 @media not all and (min-resolution: 0.001dpcm) {
@@ -6108,8 +6108,8 @@ exports[`FormInput fireEvent with onChange when value is invalid 1`] = `
   outline-style: solid;
   outline-width: 2px;
   outline-offset: 2px;
-  background-color: #148F39;
-  border-color: #148F39;
+  background-color: #00601A;
+  border-color: #00601A;
 }
 
 @media not all and (min-resolution: 0.001dpcm) {
@@ -6125,8 +6125,8 @@ exports[`FormInput fireEvent with onChange when value is invalid 1`] = `
   outline-style: solid;
   outline-width: 2px;
   outline-offset: 2px;
-  background-color: #E0E7FF;
-  border-color: #2B4AAB;
+  background-color: #ECF1FF;
+  border-color: #254CAC;
 }
 
 @media not all and (min-resolution: 0.001dpcm) {
@@ -6142,8 +6142,8 @@ exports[`FormInput fireEvent with onChange when value is invalid 1`] = `
   outline-style: solid;
   outline-width: 2px;
   outline-offset: 2px;
-  background-color: #2B4AAB;
-  border-color: #2B4AAB;
+  background-color: #254CAC;
+  border-color: #254CAC;
 }
 
 @media not all and (min-resolution: 0.001dpcm) {
@@ -6159,8 +6159,8 @@ exports[`FormInput fireEvent with onChange when value is invalid 1`] = `
   outline-style: solid;
   outline-width: 2px;
   outline-offset: 2px;
-  background-color: #FFE6E5;
-  border-color: #A60100;
+  background-color: #FEECEC;
+  border-color: #820000;
 }
 
 @media not all and (min-resolution: 0.001dpcm) {
@@ -6176,8 +6176,8 @@ exports[`FormInput fireEvent with onChange when value is invalid 1`] = `
   outline-style: solid;
   outline-width: 2px;
   outline-offset: 2px;
-  background-color: #A60100;
-  border-color: #A60100;
+  background-color: #820000;
+  border-color: #820000;
 }
 
 @media not all and (min-resolution: 0.001dpcm) {
@@ -6193,8 +6193,8 @@ exports[`FormInput fireEvent with onChange when value is invalid 1`] = `
   outline-style: solid;
   outline-width: 2px;
   outline-offset: 2px;
-  background-color: #E6FAEB;
-  border-color: #0A782A;
+  background-color: #E5F4EA;
+  border-color: #004914;
 }
 
 @media not all and (min-resolution: 0.001dpcm) {
@@ -6210,8 +6210,8 @@ exports[`FormInput fireEvent with onChange when value is invalid 1`] = `
   outline-style: solid;
   outline-width: 2px;
   outline-offset: 2px;
-  background-color: #0A782A;
-  border-color: #0A782A;
+  background-color: #004914;
+  border-color: #004914;
 }
 
 @media not all and (min-resolution: 0.001dpcm) {
@@ -6249,7 +6249,7 @@ exports[`FormInput fireEvent with onChange when value is invalid 1`] = `
 }
 
 .emotion-27 {
-  color: #2E2E2E;
+  color: #3B3B3B;
   font-family: "DM Sans",sans-serif;
   font-size: 14px;
   line-height: 1.5;
@@ -6258,7 +6258,7 @@ exports[`FormInput fireEvent with onChange when value is invalid 1`] = `
 }
 
 .emotion-27:disabled {
-  color: #C0C0C0;
+  color: #ABABAB;
 }
 
 .emotion-33 {
@@ -6279,25 +6279,25 @@ exports[`FormInput fireEvent with onChange when value is invalid 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  background-color: #FAFAFA;
-  border-color: #CCCCCC;
+  background-color: #F1F1F1;
+  border-color: #919191;
   border-width: 2px;
   border-radius: 50%;
   border-style: solid;
 }
 
 .emotion-33:hover:not(:disabled) {
-  background-color: #E0E7FF;
-  border-color: #2B4AAB;
+  background-color: #ECF1FF;
+  border-color: #254CAC;
 }
 
 .emotion-33:focus:hover:not(:disabled) {
-  background-color: #E0E7FF;
-  border-color: #2B4AAB;
+  background-color: #ECF1FF;
+  border-color: #254CAC;
 }
 
 .emotion-33:checked:not(:disabled) {
-  background-color: #FAFAFA;
+  background-color: #F1F1F1;
   border-color: #3358CC;
 }
 
@@ -6306,16 +6306,16 @@ exports[`FormInput fireEvent with onChange when value is invalid 1`] = `
 }
 
 .emotion-33:checked:hover:not(:disabled) {
-  background-color: #E0E7FF;
-  border-color: #2B4AAB;
+  background-color: #ECF1FF;
+  border-color: #254CAC;
 }
 
 .emotion-33:checked:hover:not(:disabled) svg {
-  fill: #2B4AAB;
+  fill: #254CAC;
 }
 
 .emotion-33:checked:focus:not(:disabled) {
-  background-color: #FAFAFA;
+  background-color: #F1F1F1;
   border-color: #3358CC;
 }
 
@@ -6324,124 +6324,124 @@ exports[`FormInput fireEvent with onChange when value is invalid 1`] = `
 }
 
 .emotion-33:checked:focus:hover:not(:disabled) {
-  background-color: #E0E7FF;
-  border-color: #2B4AAB;
+  background-color: #ECF1FF;
+  border-color: #254CAC;
 }
 
 .emotion-33:checked:focus:hover:not(:disabled) svg {
-  fill: #2B4AAB;
+  fill: #254CAC;
 }
 
 .emotion-33:invalid:focus:not(:disabled) {
-  border-color: #D20600;
+  border-color: #A90000;
 }
 
 .emotion-33:invalid:hover:not(:disabled) {
-  background-color: #FFE6E5;
-  border-color: #A60100;
+  background-color: #FEECEC;
+  border-color: #820000;
 }
 
 .emotion-33:invalid:focus:hover:not(:disabled) {
-  background-color: #FFE6E5;
-  border-color: #A60100;
+  background-color: #FEECEC;
+  border-color: #820000;
 }
 
 .emotion-33:checked:invalid:not(:disabled) {
-  background-color: #FAFAFA;
-  border-color: #D20600;
+  background-color: #F1F1F1;
+  border-color: #A90000;
 }
 
 .emotion-33:checked:invalid:not(:disabled) svg {
-  fill: #D20600;
+  fill: #A90000;
 }
 
 .emotion-33:checked:invalid:focus:not(:disabled) {
-  border-color: #D20600;
+  border-color: #A90000;
 }
 
 .emotion-33:checked:invalid:focus:not(:disabled) svg {
-  fill: #D20600;
+  fill: #A90000;
 }
 
 .emotion-33:checked:invalid:hover:not(:disabled) {
-  background-color: #FFE6E5;
-  border-color: #A60100;
+  background-color: #FEECEC;
+  border-color: #820000;
 }
 
 .emotion-33:checked:invalid:hover:not(:disabled) svg {
-  fill: #A60100;
+  fill: #820000;
 }
 
 .emotion-33:checked:invalid:focus:hover:not(:disabled) {
-  background-color: #FFE6E5;
-  border-color: #A60100;
+  background-color: #FEECEC;
+  border-color: #820000;
 }
 
 .emotion-33:checked:invalid:focus:hover:not(:disabled) svg {
-  fill: #A60100;
+  fill: #820000;
 }
 
 .emotion-33:valid:focus:not(:disabled) {
-  border-color: #0A782A;
+  border-color: #004914;
 }
 
 .emotion-33:valid:hover:not(:disabled) {
-  background-color: #E6FAEB;
-  border-color: #0A782A;
+  background-color: #E5F4EA;
+  border-color: #004914;
 }
 
 .emotion-33:valid:focus:hover:not(:disabled) {
-  background-color: #E6FAEB;
-  border-color: #0A782A;
+  background-color: #E5F4EA;
+  border-color: #004914;
 }
 
 .emotion-33:checked:valid:not(:disabled) {
-  background-color: #FAFAFA;
-  border-color: #148F39;
+  background-color: #F1F1F1;
+  border-color: #00601A;
 }
 
 .emotion-33:checked:valid:not(:disabled) svg {
-  fill: #148F39;
+  fill: #00601A;
 }
 
 .emotion-33:checked:valid:focus:not(:disabled) {
-  border-color: #148F39;
+  border-color: #00601A;
 }
 
 .emotion-33:checked:valid:focus:not(:disabled) svg {
-  fill: #148F39;
+  fill: #00601A;
 }
 
 .emotion-33:checked:valid:hover:not(:disabled) {
-  background-color: #E6FAEB;
-  border-color: #0A782A;
+  background-color: #E5F4EA;
+  border-color: #004914;
 }
 
 .emotion-33:checked:valid:hover:not(:disabled) svg {
-  fill: #0A782A;
+  fill: #004914;
 }
 
 .emotion-33:checked:valid:focus:hover:not(:disabled) {
-  background-color: #E6FAEB;
-  border-color: #0A782A;
+  background-color: #E5F4EA;
+  border-color: #004914;
 }
 
 .emotion-33:checked:valid:focus:hover:not(:disabled) svg {
-  fill: #0A782A;
+  fill: #004914;
 }
 
 .emotion-33:disabled {
   background-color: transparent;
-  border-color: #F4F4F4;
+  border-color: #E2E2E2;
 }
 
 .emotion-33:checked:disabled:not(:disabled) {
   background-color: transparent;
-  border-color: #F4F4F4;
+  border-color: #E2E2E2;
 }
 
 .emotion-33:checked:disabled:not(:disabled) svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-33:focus-visible:not(:disabled) {
@@ -6464,7 +6464,7 @@ exports[`FormInput fireEvent with onChange when value is invalid 1`] = `
   outline-style: solid;
   outline-width: 2px;
   outline-offset: 2px;
-  background-color: #FAFAFA;
+  background-color: #F1F1F1;
   border-color: #3358CC;
 }
 
@@ -6485,12 +6485,12 @@ exports[`FormInput fireEvent with onChange when value is invalid 1`] = `
   outline-style: solid;
   outline-width: 2px;
   outline-offset: 2px;
-  background-color: #E0E7FF;
-  border-color: #2B4AAB;
+  background-color: #ECF1FF;
+  border-color: #254CAC;
 }
 
 .emotion-33:checked:focus-visible:hover:not(:disabled) svg {
-  fill: #2B4AAB;
+  fill: #254CAC;
 }
 
 @media not all and (min-resolution: 0.001dpcm) {
@@ -6506,12 +6506,12 @@ exports[`FormInput fireEvent with onChange when value is invalid 1`] = `
   outline-style: solid;
   outline-width: 2px;
   outline-offset: 2px;
-  background-color: #FAFAFA;
-  border-color: #148F39;
+  background-color: #F1F1F1;
+  border-color: #00601A;
 }
 
 .emotion-33:checked:valid:focus-visible:not(:disabled) svg {
-  fill: #148F39;
+  fill: #00601A;
 }
 
 @media not all and (min-resolution: 0.001dpcm) {
@@ -6527,12 +6527,12 @@ exports[`FormInput fireEvent with onChange when value is invalid 1`] = `
   outline-style: solid;
   outline-width: 2px;
   outline-offset: 2px;
-  background-color: #E6FAEB;
-  border-color: #0A782A;
+  background-color: #E5F4EA;
+  border-color: #004914;
 }
 
 .emotion-33:checked:valid:focus-visible:hover:not(:disabled) svg {
-  fill: #0A782A;
+  fill: #004914;
 }
 
 @media not all and (min-resolution: 0.001dpcm) {
@@ -6548,12 +6548,12 @@ exports[`FormInput fireEvent with onChange when value is invalid 1`] = `
   outline-style: solid;
   outline-width: 2px;
   outline-offset: 2px;
-  background-color: #FAFAFA;
-  border-color: #D20600;
+  background-color: #F1F1F1;
+  border-color: #A90000;
 }
 
 .emotion-33:checked:invalid:focus-visible:not(:disabled) svg {
-  fill: #D20600;
+  fill: #A90000;
 }
 
 @media not all and (min-resolution: 0.001dpcm) {
@@ -6569,12 +6569,12 @@ exports[`FormInput fireEvent with onChange when value is invalid 1`] = `
   outline-style: solid;
   outline-width: 2px;
   outline-offset: 2px;
-  background-color: #FFE6E5;
-  border-color: #A60100;
+  background-color: #FEECEC;
+  border-color: #820000;
 }
 
 .emotion-33:checked:invalid:focus-visible:hover:not(:disabled) svg {
-  fill: #A60100;
+  fill: #820000;
 }
 
 @media not all and (min-resolution: 0.001dpcm) {
@@ -6908,7 +6908,7 @@ exports[`FormInput renders FormInput Correctly 1`] = `
 
   .emotion-0 {
   display: block;
-  color: #0A0A0A;
+  color: #111111;
   font-family: "Poppins",sans-serif;
   font-size: 14px;
   line-height: 21px;
@@ -6920,7 +6920,7 @@ exports[`FormInput renders FormInput Correctly 1`] = `
 }
 
 .emotion-0:disabled {
-  color: #C0C0C0;
+  color: #ABABAB;
 }
 
 .emotion-0::before {
@@ -6961,15 +6961,15 @@ exports[`FormInput renders FormInput Correctly 1`] = `
   margin-bottom: 8px;
   background-color: transparent;
   border-style: solid;
-  border-color: #CCCCCC;
+  border-color: #919191;
   border-width: 1px;
   border-radius: 8px;
-  color: #2E2E2E;
+  color: #3B3B3B;
   text-overflow: ellipsis;
 }
 
 .emotion-0 svg {
-  fill: #2E2E2E;
+  fill: #3B3B3B;
 }
 
 .emotion-0:focus:not(:disabled) {
@@ -6977,7 +6977,7 @@ exports[`FormInput renders FormInput Correctly 1`] = `
   outline-style: solid;
   outline-width: 2px;
   border-color: transparent;
-  background-color: #FAFAFA;
+  background-color: #F1F1F1;
 }
 
 @media not all and (min-resolution: 0.001dpcm) {
@@ -6989,36 +6989,36 @@ exports[`FormInput renders FormInput Correctly 1`] = `
 }
 
 .emotion-0:hover:not(:disabled) {
-  background-color: #FAFAFA;
+  background-color: #F1F1F1;
 }
 
 .emotion-0:valid:hover:not(:disabled) {
-  border-color: #23A248;
-  background-color: #FAFAFA;
+  border-color: #007B22;
+  background-color: #F1F1F1;
 }
 
 .emotion-0:valid:focus:not(:disabled) {
   border-color: #3768FB;
-  background-color: #FAFAFA;
+  background-color: #F1F1F1;
 }
 
 .emotion-0:disabled {
-  border-color: #F4F4F4;
-  color: #C0C0C0;
+  border-color: #E2E2E2;
+  color: #ABABAB;
 }
 
 .emotion-0:disabled svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-0:invalid:focus:not(:disabled) {
   border-color: #3768FB;
-  background-color: #FAFAFA;
+  background-color: #F1F1F1;
 }
 
 .emotion-0:invalid:hover:not(:disabled) {
-  border-color: #EF1703;
-  background-color: #FAFAFA;
+  border-color: #D60000;
+  background-color: #F1F1F1;
 }
 
 .emotion-1 {
@@ -7049,19 +7049,19 @@ exports[`FormInput renders FormInput Correctly 1`] = `
 }
 
 .emotion-1::-webkit-input-placeholder {
-  color: #535353;
+  color: #6A6A6A;
 }
 
 .emotion-1::-moz-placeholder {
-  color: #535353;
+  color: #6A6A6A;
 }
 
 .emotion-1:-ms-input-placeholder {
-  color: #535353;
+  color: #6A6A6A;
 }
 
 .emotion-1::placeholder {
-  color: #535353;
+  color: #6A6A6A;
 }
 
 .emotion-2 {
@@ -7083,7 +7083,7 @@ exports[`FormInput renders FormInput Correctly 1`] = `
   display: inline-block;
   vertical-align: middle;
   overflow: hidden;
-  fill: #2E2E2E;
+  fill: #3B3B3B;
   vertical-align: unset;
   display: inline-block;
 }
@@ -7183,11 +7183,11 @@ exports[`FormInput renders FormInput Correctly 1`] = `
   -ms-flex-align: center;
   align-items: center;
   min-height: 12px;
-  color: #535353;
+  color: #6A6A6A;
 }
 
 .emotion-0:disabled {
-  color: #C0C0C0;
+  color: #ABABAB;
 }
 
 .emotion-1 {
@@ -7195,7 +7195,7 @@ exports[`FormInput renders FormInput Correctly 1`] = `
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
-  color: #535353;
+  color: #6A6A6A;
   font-family: "DM Sans",sans-serif;
   font-size: 14px;
   line-height: 21px;
@@ -7205,7 +7205,7 @@ exports[`FormInput renders FormInput Correctly 1`] = `
 }
 
 .emotion-1:disabled {
-  color: #C0C0C0;
+  color: #ABABAB;
 }
 
 .emotion-1::before {
@@ -7232,7 +7232,7 @@ exports[`FormInput renders FormInput Correctly 1`] = `
   

   .emotion-0 {
   display: block;
-  color: #0A0A0A;
+  color: #111111;
   font-family: "Poppins",sans-serif;
   font-size: 14px;
   line-height: 21px;
@@ -7244,7 +7244,7 @@ exports[`FormInput renders FormInput Correctly 1`] = `
 }
 
 .emotion-0:disabled {
-  color: #C0C0C0;
+  color: #ABABAB;
 }
 
 .emotion-0::before {
@@ -7285,15 +7285,15 @@ exports[`FormInput renders FormInput Correctly 1`] = `
   margin-bottom: 8px;
   background-color: transparent;
   border-style: solid;
-  border-color: #CCCCCC;
+  border-color: #919191;
   border-width: 1px;
   border-radius: 8px;
-  color: #2E2E2E;
+  color: #3B3B3B;
   text-overflow: ellipsis;
 }
 
 .emotion-0 svg {
-  fill: #2E2E2E;
+  fill: #3B3B3B;
 }
 
 .emotion-0:focus:not(:disabled) {
@@ -7301,7 +7301,7 @@ exports[`FormInput renders FormInput Correctly 1`] = `
   outline-style: solid;
   outline-width: 2px;
   border-color: transparent;
-  background-color: #FAFAFA;
+  background-color: #F1F1F1;
 }
 
 @media not all and (min-resolution: 0.001dpcm) {
@@ -7313,36 +7313,36 @@ exports[`FormInput renders FormInput Correctly 1`] = `
 }
 
 .emotion-0:hover:not(:disabled) {
-  background-color: #FAFAFA;
+  background-color: #F1F1F1;
 }
 
 .emotion-0:valid:hover:not(:disabled) {
-  border-color: #23A248;
-  background-color: #FAFAFA;
+  border-color: #007B22;
+  background-color: #F1F1F1;
 }
 
 .emotion-0:valid:focus:not(:disabled) {
   border-color: #3768FB;
-  background-color: #FAFAFA;
+  background-color: #F1F1F1;
 }
 
 .emotion-0:disabled {
-  border-color: #F4F4F4;
-  color: #C0C0C0;
+  border-color: #E2E2E2;
+  color: #ABABAB;
 }
 
 .emotion-0:disabled svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-0:invalid:focus:not(:disabled) {
   border-color: #3768FB;
-  background-color: #FAFAFA;
+  background-color: #F1F1F1;
 }
 
 .emotion-0:invalid:hover:not(:disabled) {
-  border-color: #EF1703;
-  background-color: #FAFAFA;
+  border-color: #D60000;
+  background-color: #F1F1F1;
 }
 
 .emotion-1 {
@@ -7382,7 +7382,7 @@ exports[`FormInput renders FormInput Correctly 1`] = `
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
-  color: #535353;
+  color: #6A6A6A;
   font-family: "DM Sans",sans-serif;
   font-size: 14px;
   line-height: 1.5;
@@ -7430,7 +7430,7 @@ exports[`FormInput renders FormInput Correctly 1`] = `
   display: inline-block;
   vertical-align: middle;
   overflow: hidden;
-  fill: #2E2E2E;
+  fill: #3B3B3B;
   vertical-align: unset;
   display: inline-block;
 }
@@ -7532,11 +7532,11 @@ exports[`FormInput renders FormInput Correctly 1`] = `
   -ms-flex-align: center;
   align-items: center;
   min-height: 12px;
-  color: #535353;
+  color: #6A6A6A;
 }
 
 .emotion-0:disabled {
-  color: #C0C0C0;
+  color: #ABABAB;
 }
 
 .emotion-1 {
@@ -7544,7 +7544,7 @@ exports[`FormInput renders FormInput Correctly 1`] = `
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
-  color: #535353;
+  color: #6A6A6A;
   font-family: "DM Sans",sans-serif;
   font-size: 14px;
   line-height: 21px;
@@ -7554,7 +7554,7 @@ exports[`FormInput renders FormInput Correctly 1`] = `
 }
 
 .emotion-1:disabled {
-  color: #C0C0C0;
+  color: #ABABAB;
 }
 
 .emotion-1::before {
@@ -7634,22 +7634,22 @@ exports[`FormInput renders FormInput Correctly 1`] = `
 }
 
 .emotion-2:valid:hover:not(:disabled) {
-  background-color: #148F39;
+  background-color: #00601A;
   opacity: 0.2;
 }
 
 .emotion-2:valid:hover:active:not(:disabled) {
-  background-color: #148F39;
+  background-color: #00601A;
   opacity: 0.4;
 }
 
 .emotion-2:invalid:hover:not(:disabled) {
-  background-color: #D20600;
+  background-color: #A90000;
   opacity: 0.2;
 }
 
 .emotion-2:invalid:hover:active:not(:disabled) {
-  background-color: #D20600;
+  background-color: #A90000;
   opacity: 0.4;
 }
 
@@ -7687,8 +7687,8 @@ exports[`FormInput renders FormInput Correctly 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  background-color: #FAFAFA;
-  border-color: #CCCCCC;
+  background-color: #F1F1F1;
+  border-color: #919191;
   border-width: 2px;
   border-radius: 4px;
   border-style: solid;
@@ -7699,13 +7699,13 @@ exports[`FormInput renders FormInput Correctly 1`] = `
 }
 
 .emotion-3:hover:not(:disabled) {
-  background-color: #E0E7FF;
-  border-color: #2B4AAB;
+  background-color: #ECF1FF;
+  border-color: #254CAC;
 }
 
 .emotion-3:focus:hover:not(:disabled) {
-  background-color: #E0E7FF;
-  border-color: #2B4AAB;
+  background-color: #ECF1FF;
+  border-color: #254CAC;
 }
 
 .emotion-3:checked:not(:disabled) {
@@ -7714,8 +7714,8 @@ exports[`FormInput renders FormInput Correctly 1`] = `
 }
 
 .emotion-3:checked:hover:not(:disabled) {
-  background-color: #2B4AAB;
-  border-color: #2B4AAB;
+  background-color: #254CAC;
+  border-color: #254CAC;
 }
 
 .emotion-3:checked:focus:not(:disabled) {
@@ -7724,91 +7724,91 @@ exports[`FormInput renders FormInput Correctly 1`] = `
 }
 
 .emotion-3:checked:focus:hover:not(:disabled) {
-  background-color: #2B4AAB;
-  border-color: #2B4AAB;
+  background-color: #254CAC;
+  border-color: #254CAC;
 }
 
 .emotion-3:invalid:hover:not(:disabled) {
-  background-color: #FFE6E5;
-  border-color: #A60100;
+  background-color: #FEECEC;
+  border-color: #820000;
 }
 
 .emotion-3:invalid:focus:not(:disabled) {
-  border-color: #D20600;
+  border-color: #A90000;
 }
 
 .emotion-3:invalid:focus:hover:not(:disabled) {
-  background-color: #FFE6E5;
-  border-color: #A60100;
+  background-color: #FEECEC;
+  border-color: #820000;
 }
 
 .emotion-3:checked:invalid:not(:disabled) {
-  background-color: #D20600;
-  border-color: #D20600;
+  background-color: #A90000;
+  border-color: #A90000;
 }
 
 .emotion-3:checked:invalid:focus:not(:disabled) {
-  background-color: #D20600;
-  border-color: #D20600;
+  background-color: #A90000;
+  border-color: #A90000;
 }
 
 .emotion-3:checked:invalid:hover:not(:disabled) {
-  background-color: #A60100;
-  border-color: #A60100;
+  background-color: #820000;
+  border-color: #820000;
 }
 
 .emotion-3:checked:invalid:focus:hover:not(:disabled) {
-  background-color: #A60100;
-  border-color: #A60100;
+  background-color: #820000;
+  border-color: #820000;
 }
 
 .emotion-3:valid:hover:not(:disabled) {
-  background-color: #E6FAEB;
-  border-color: #0A782A;
+  background-color: #E5F4EA;
+  border-color: #004914;
 }
 
 .emotion-3:valid:focus:not(:disabled) {
-  background-color: #FAFAFA;
-  border-color: #148F39;
+  background-color: #F1F1F1;
+  border-color: #00601A;
 }
 
 .emotion-3:valid:focus:hover:not(:disabled) {
-  background-color: #E6FAEB;
-  border-color: #0A782A;
+  background-color: #E5F4EA;
+  border-color: #004914;
 }
 
 .emotion-3:checked:valid:not(:disabled) {
-  background-color: #148F39;
-  border-color: #148F39;
+  background-color: #00601A;
+  border-color: #00601A;
 }
 
 .emotion-3:checked:valid:focus:not(:disabled) {
-  background-color: #148F39;
-  border-color: #148F39;
+  background-color: #00601A;
+  border-color: #00601A;
 }
 
 .emotion-3:checked:valid:hover:not(:disabled) {
-  background-color: #0A782A;
-  border-color: #0A782A;
+  background-color: #004914;
+  border-color: #004914;
 }
 
 .emotion-3:checked:valid:focus:hover:not(:disabled) {
-  background-color: #0A782A;
-  border-color: #0A782A;
+  background-color: #004914;
+  border-color: #004914;
 }
 
 .emotion-3:disabled {
   background-color: transparent;
-  border-color: #F4F4F4;
+  border-color: #E2E2E2;
 }
 
 .emotion-3:checked:disabled:not(:disabled) {
-  background-color: #F4F4F4;
-  border-color: #F4F4F4;
+  background-color: #E2E2E2;
+  border-color: #E2E2E2;
 }
 
 .emotion-3:checked:disabled:not(:disabled) svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-3:focus-visible:not(:disabled) {
@@ -7848,7 +7848,7 @@ exports[`FormInput renders FormInput Correctly 1`] = `
   outline-style: solid;
   outline-width: 2px;
   outline-offset: 2px;
-  border-color: #D20600;
+  border-color: #A90000;
 }
 
 @media not all and (min-resolution: 0.001dpcm) {
@@ -7864,8 +7864,8 @@ exports[`FormInput renders FormInput Correctly 1`] = `
   outline-style: solid;
   outline-width: 2px;
   outline-offset: 2px;
-  background-color: #D20600;
-  border-color: #D20600;
+  background-color: #A90000;
+  border-color: #A90000;
 }
 
 @media not all and (min-resolution: 0.001dpcm) {
@@ -7881,8 +7881,8 @@ exports[`FormInput renders FormInput Correctly 1`] = `
   outline-style: solid;
   outline-width: 2px;
   outline-offset: 2px;
-  background-color: #FAFAFA;
-  border-color: #148F39;
+  background-color: #F1F1F1;
+  border-color: #00601A;
 }
 
 @media not all and (min-resolution: 0.001dpcm) {
@@ -7898,8 +7898,8 @@ exports[`FormInput renders FormInput Correctly 1`] = `
   outline-style: solid;
   outline-width: 2px;
   outline-offset: 2px;
-  background-color: #148F39;
-  border-color: #148F39;
+  background-color: #00601A;
+  border-color: #00601A;
 }
 
 @media not all and (min-resolution: 0.001dpcm) {
@@ -7915,8 +7915,8 @@ exports[`FormInput renders FormInput Correctly 1`] = `
   outline-style: solid;
   outline-width: 2px;
   outline-offset: 2px;
-  background-color: #E0E7FF;
-  border-color: #2B4AAB;
+  background-color: #ECF1FF;
+  border-color: #254CAC;
 }
 
 @media not all and (min-resolution: 0.001dpcm) {
@@ -7932,8 +7932,8 @@ exports[`FormInput renders FormInput Correctly 1`] = `
   outline-style: solid;
   outline-width: 2px;
   outline-offset: 2px;
-  background-color: #2B4AAB;
-  border-color: #2B4AAB;
+  background-color: #254CAC;
+  border-color: #254CAC;
 }
 
 @media not all and (min-resolution: 0.001dpcm) {
@@ -7949,8 +7949,8 @@ exports[`FormInput renders FormInput Correctly 1`] = `
   outline-style: solid;
   outline-width: 2px;
   outline-offset: 2px;
-  background-color: #FFE6E5;
-  border-color: #A60100;
+  background-color: #FEECEC;
+  border-color: #820000;
 }
 
 @media not all and (min-resolution: 0.001dpcm) {
@@ -7966,8 +7966,8 @@ exports[`FormInput renders FormInput Correctly 1`] = `
   outline-style: solid;
   outline-width: 2px;
   outline-offset: 2px;
-  background-color: #A60100;
-  border-color: #A60100;
+  background-color: #820000;
+  border-color: #820000;
 }
 
 @media not all and (min-resolution: 0.001dpcm) {
@@ -7983,8 +7983,8 @@ exports[`FormInput renders FormInput Correctly 1`] = `
   outline-style: solid;
   outline-width: 2px;
   outline-offset: 2px;
-  background-color: #E6FAEB;
-  border-color: #0A782A;
+  background-color: #E5F4EA;
+  border-color: #004914;
 }
 
 @media not all and (min-resolution: 0.001dpcm) {
@@ -8000,8 +8000,8 @@ exports[`FormInput renders FormInput Correctly 1`] = `
   outline-style: solid;
   outline-width: 2px;
   outline-offset: 2px;
-  background-color: #0A782A;
-  border-color: #0A782A;
+  background-color: #004914;
+  border-color: #004914;
 }
 
 @media not all and (min-resolution: 0.001dpcm) {
@@ -8039,7 +8039,7 @@ exports[`FormInput renders FormInput Correctly 1`] = `
 }
 
 .emotion-5 {
-  color: #2E2E2E;
+  color: #3B3B3B;
   font-family: "DM Sans",sans-serif;
   font-size: 14px;
   line-height: 1.5;
@@ -8048,7 +8048,7 @@ exports[`FormInput renders FormInput Correctly 1`] = `
 }
 
 .emotion-5:disabled {
-  color: #C0C0C0;
+  color: #ABABAB;
 }
 
 

   .emotion-0 {
   display: block;
-  color: #0A0A0A;
+  color: #111111;
   font-family: "Poppins",sans-serif;
   font-size: 14px;
   line-height: 21px;
@@ -9659,7 +9659,7 @@ exports[`FormInput renders with nested inputs 1`] = `
 }
 
 .emotion-0:disabled {
-  color: #C0C0C0;
+  color: #ABABAB;
 }
 
 .emotion-0::before {
@@ -9700,15 +9700,15 @@ exports[`FormInput renders with nested inputs 1`] = `
   margin-bottom: 8px;
   background-color: transparent;
   border-style: solid;
-  border-color: #CCCCCC;
+  border-color: #919191;
   border-width: 1px;
   border-radius: 8px;
-  color: #2E2E2E;
+  color: #3B3B3B;
   text-overflow: ellipsis;
 }
 
 .emotion-0 svg {
-  fill: #2E2E2E;
+  fill: #3B3B3B;
 }
 
 .emotion-0:focus:not(:disabled) {
@@ -9716,7 +9716,7 @@ exports[`FormInput renders with nested inputs 1`] = `
   outline-style: solid;
   outline-width: 2px;
   border-color: transparent;
-  background-color: #FAFAFA;
+  background-color: #F1F1F1;
 }
 
 @media not all and (min-resolution: 0.001dpcm) {
@@ -9728,36 +9728,36 @@ exports[`FormInput renders with nested inputs 1`] = `
 }
 
 .emotion-0:hover:not(:disabled) {
-  background-color: #FAFAFA;
+  background-color: #F1F1F1;
 }
 
 .emotion-0:valid:hover:not(:disabled) {
-  border-color: #23A248;
-  background-color: #FAFAFA;
+  border-color: #007B22;
+  background-color: #F1F1F1;
 }
 
 .emotion-0:valid:focus:not(:disabled) {
   border-color: #3768FB;
-  background-color: #FAFAFA;
+  background-color: #F1F1F1;
 }
 
 .emotion-0:disabled {
-  border-color: #F4F4F4;
-  color: #C0C0C0;
+  border-color: #E2E2E2;
+  color: #ABABAB;
 }
 
 .emotion-0:disabled svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-0:invalid:focus:not(:disabled) {
   border-color: #3768FB;
-  background-color: #FAFAFA;
+  background-color: #F1F1F1;
 }
 
 .emotion-0:invalid:hover:not(:disabled) {
-  border-color: #EF1703;
-  background-color: #FAFAFA;
+  border-color: #D60000;
+  background-color: #F1F1F1;
 }
 
 .emotion-1 {
@@ -9788,19 +9788,19 @@ exports[`FormInput renders with nested inputs 1`] = `
 }
 
 .emotion-1::-webkit-input-placeholder {
-  color: #535353;
+  color: #6A6A6A;
 }
 
 .emotion-1::-moz-placeholder {
-  color: #535353;
+  color: #6A6A6A;
 }
 
 .emotion-1:-ms-input-placeholder {
-  color: #535353;
+  color: #6A6A6A;
 }
 
 .emotion-1::placeholder {
-  color: #535353;
+  color: #6A6A6A;
 }
 
 

   .emotion-0 {
-  fill: #535353;
+  fill: #6A6A6A;
   vertical-align: unset;
   display: inline-block;
 }
@@ -37,7 +37,7 @@ exports[`IconFilledFacebook renders the IconFilledFacebook icon with specified s
 .emotion-0.emotion-0 {
   width: 64px;
   height: 64px;
-  fill: #535353;
+  fill: #6A6A6A;
 }
 
 @media screen and (prefers-reduced-motion: no-preference) {
@@ -74,7 +74,7 @@ exports[`IconFilledFacebook renders the IconFilledFacebook icon with specified s
 exports[`IconFilledFacebook renders the IconFilledFacebook icon with title override 1`] = `
 
   .emotion-0 {
-  fill: #535353;
+  fill: #6A6A6A;
   vertical-align: unset;
   display: inline-block;
 }
@@ -98,7 +98,7 @@ exports[`IconFilledFacebook renders the IconFilledFacebook icon with title overr
 .emotion-0.emotion-0 {
   width: 64px;
   height: 64px;
-  fill: #535353;
+  fill: #6A6A6A;
 }
 
 @media screen and (prefers-reduced-motion: no-preference) {
@@ -148,7 +148,7 @@ exports[`IconFilledFigma renders the IconFilledFigma icon from theme override 1`
 exports[`IconFilledFigma renders the IconFilledFigma icon with specified style 1`] = `
 
   .emotion-0 {
-  fill: #535353;
+  fill: #6A6A6A;
   vertical-align: unset;
   display: inline-block;
 }
@@ -172,7 +172,7 @@ exports[`IconFilledFigma renders the IconFilledFigma icon with specified style 1
 .emotion-0.emotion-0 {
   width: 64px;
   height: 64px;
-  fill: #535353;
+  fill: #6A6A6A;
 }
 
 @media screen and (prefers-reduced-motion: no-preference) {
@@ -225,7 +225,7 @@ exports[`IconFilledFigma renders the IconFilledFigma icon with specified style 1
 exports[`IconFilledFigma renders the IconFilledFigma icon with title override 1`] = `
 
   .emotion-0 {
-  fill: #535353;
+  fill: #6A6A6A;
   vertical-align: unset;
   display: inline-block;
 }
@@ -249,7 +249,7 @@ exports[`IconFilledFigma renders the IconFilledFigma icon with title override 1`
 .emotion-0.emotion-0 {
   width: 64px;
   height: 64px;
-  fill: #535353;
+  fill: #6A6A6A;
 }
 
 @media screen and (prefers-reduced-motion: no-preference) {
@@ -315,7 +315,7 @@ exports[`IconFilledForward5 renders the IconFilledForward5 icon from theme overr
 exports[`IconFilledForward5 renders the IconFilledForward5 icon with specified style 1`] = `
 
   .emotion-0 {
-  fill: #535353;
+  fill: #6A6A6A;
   vertical-align: unset;
   display: inline-block;
 }
@@ -339,7 +339,7 @@ exports[`IconFilledForward5 renders the IconFilledForward5 icon with specified s
 .emotion-0.emotion-0 {
   width: 64px;
   height: 64px;
-  fill: #535353;
+  fill: #6A6A6A;
 }
 
 @media screen and (prefers-reduced-motion: no-preference) {
@@ -377,7 +377,7 @@ exports[`IconFilledForward5 renders the IconFilledForward5 icon with specified s
 exports[`IconFilledForward5 renders the IconFilledForward5 icon with title override 1`] = `
 
   .emotion-0 {
-  fill: #535353;
+  fill: #6A6A6A;
   vertical-align: unset;
   display: inline-block;
 }
@@ -401,7 +401,7 @@ exports[`IconFilledForward5 renders the IconFilledForward5 icon with title overr
 .emotion-0.emotion-0 {
   width: 64px;
   height: 64px;
-  fill: #535353;
+  fill: #6A6A6A;
 }
 
 @media screen and (prefers-reduced-motion: no-preference) {
@@ -452,7 +452,7 @@ exports[`IconFilledForward10 renders the IconFilledForward10 icon from theme ove
 exports[`IconFilledForward10 renders the IconFilledForward10 icon with specified style 1`] = `
 
   .emotion-0 {
-  fill: #535353;
+  fill: #6A6A6A;
   vertical-align: unset;
   display: inline-block;
 }
@@ -476,7 +476,7 @@ exports[`IconFilledForward10 renders the IconFilledForward10 icon with specified
 .emotion-0.emotion-0 {
   width: 64px;
   height: 64px;
-  fill: #535353;
+  fill: #6A6A6A;
 }
 
 @media screen and (prefers-reduced-motion: no-preference) {
@@ -514,7 +514,7 @@ exports[`IconFilledForward10 renders the IconFilledForward10 icon with specified
 exports[`IconFilledForward10 renders the IconFilledForward10 icon with title override 1`] = `
 
   .emotion-0 {
-  fill: #535353;
+  fill: #6A6A6A;
   vertical-align: unset;
   display: inline-block;
 }
@@ -538,7 +538,7 @@ exports[`IconFilledForward10 renders the IconFilledForward10 icon with title ove
 .emotion-0.emotion-0 {
   width: 64px;
   height: 64px;
-  fill: #535353;
+  fill: #6A6A6A;
 }
 
 @media screen and (prefers-reduced-motion: no-preference) {
@@ -589,7 +589,7 @@ exports[`IconFilledForward15 renders the IconFilledForward15 icon from theme ove
 exports[`IconFilledForward15 renders the IconFilledForward15 icon with specified style 1`] = `
 
   .emotion-0 {
-  fill: #535353;
+  fill: #6A6A6A;
   vertical-align: unset;
   display: inline-block;
 }
@@ -613,7 +613,7 @@ exports[`IconFilledForward15 renders the IconFilledForward15 icon with specified
 .emotion-0.emotion-0 {
   width: 64px;
   height: 64px;
-  fill: #535353;
+  fill: #6A6A6A;
 }
 
 @media screen and (prefers-reduced-motion: no-preference) {
@@ -651,7 +651,7 @@ exports[`IconFilledForward15 renders the IconFilledForward15 icon with specified
 exports[`IconFilledForward15 renders the IconFilledForward15 icon with title override 1`] = `
 
   .emotion-0 {
-  fill: #535353;
+  fill: #6A6A6A;
   vertical-align: unset;
   display: inline-block;
 }
@@ -675,7 +675,7 @@ exports[`IconFilledForward15 renders the IconFilledForward15 icon with title ove
 .emotion-0.emotion-0 {
   width: 64px;
   height: 64px;
-  fill: #535353;
+  fill: #6A6A6A;
 }
 
 @media screen and (prefers-reduced-motion: no-preference) {
@@ -726,7 +726,7 @@ exports[`IconFilledForward20 renders the IconFilledForward20 icon from theme ove
 exports[`IconFilledForward20 renders the IconFilledForward20 icon with specified style 1`] = `
 
   .emotion-0 {
-  fill: #535353;
+  fill: #6A6A6A;
   vertical-align: unset;
   display: inline-block;
 }
@@ -750,7 +750,7 @@ exports[`IconFilledForward20 renders the IconFilledForward20 icon with specified
 .emotion-0.emotion-0 {
   width: 64px;
   height: 64px;
-  fill: #535353;
+  fill: #6A6A6A;
 }
 
 @media screen and (prefers-reduced-motion: no-preference) {
@@ -788,7 +788,7 @@ exports[`IconFilledForward20 renders the IconFilledForward20 icon with specified
 exports[`IconFilledForward20 renders the IconFilledForward20 icon with title override 1`] = `
 
   .emotion-0 {
-  fill: #535353;
+  fill: #6A6A6A;
   vertical-align: unset;
   display: inline-block;
 }
@@ -812,7 +812,7 @@ exports[`IconFilledForward20 renders the IconFilledForward20 icon with title ove
 .emotion-0.emotion-0 {
   width: 64px;
   height: 64px;
-  fill: #535353;
+  fill: #6A6A6A;
 }
 
 @media screen and (prefers-reduced-motion: no-preference) {
@@ -863,7 +863,7 @@ exports[`IconFilledForward25 renders the IconFilledForward25 icon from theme ove
 exports[`IconFilledForward25 renders the IconFilledForward25 icon with specified style 1`] = `
 
   .emotion-0 {
-  fill: #535353;
+  fill: #6A6A6A;
   vertical-align: unset;
   display: inline-block;
 }
@@ -887,7 +887,7 @@ exports[`IconFilledForward25 renders the IconFilledForward25 icon with specified
 .emotion-0.emotion-0 {
   width: 64px;
   height: 64px;
-  fill: #535353;
+  fill: #6A6A6A;
 }
 
 @media screen and (prefers-reduced-motion: no-preference) {
@@ -925,7 +925,7 @@ exports[`IconFilledForward25 renders the IconFilledForward25 icon with specified
 exports[`IconFilledForward25 renders the IconFilledForward25 icon with title override 1`] = `
 
   .emotion-0 {
-  fill: #535353;
+  fill: #6A6A6A;
   vertical-align: unset;
   display: inline-block;
 }
@@ -949,7 +949,7 @@ exports[`IconFilledForward25 renders the IconFilledForward25 icon with title ove
 .emotion-0.emotion-0 {
   width: 64px;
   height: 64px;
-  fill: #535353;
+  fill: #6A6A6A;
 }
 
 @media screen and (prefers-reduced-motion: no-preference) {
@@ -1000,7 +1000,7 @@ exports[`IconFilledForward30 renders the IconFilledForward30 icon from theme ove
 exports[`IconFilledForward30 renders the IconFilledForward30 icon with specified style 1`] = `
 
   .emotion-0 {
-  fill: #535353;
+  fill: #6A6A6A;
   vertical-align: unset;
   display: inline-block;
 }
@@ -1024,7 +1024,7 @@ exports[`IconFilledForward30 renders the IconFilledForward30 icon with specified
 .emotion-0.emotion-0 {
   width: 64px;
   height: 64px;
-  fill: #535353;
+  fill: #6A6A6A;
 }
 
 @media screen and (prefers-reduced-motion: no-preference) {
@@ -1062,7 +1062,7 @@ exports[`IconFilledForward30 renders the IconFilledForward30 icon with specified
 exports[`IconFilledForward30 renders the IconFilledForward30 icon with title override 1`] = `
 
   .emotion-0 {
-  fill: #535353;
+  fill: #6A6A6A;
   vertical-align: unset;
   display: inline-block;
 }
@@ -1086,7 +1086,7 @@ exports[`IconFilledForward30 renders the IconFilledForward30 icon with title ove
 .emotion-0.emotion-0 {
   width: 64px;
   height: 64px;
-  fill: #535353;
+  fill: #6A6A6A;
 }
 
 @media screen and (prefers-reduced-motion: no-preference) {
@@ -1137,7 +1137,7 @@ exports[`IconFilledGitHub renders the IconFilledGitHub icon from theme override
 exports[`IconFilledGitHub renders the IconFilledGitHub icon with specified style 1`] = `
 
   .emotion-0 {
-  fill: #535353;
+  fill: #6A6A6A;
   vertical-align: unset;
   display: inline-block;
 }
@@ -1161,7 +1161,7 @@ exports[`IconFilledGitHub renders the IconFilledGitHub icon with specified style
 .emotion-0.emotion-0 {
   width: 64px;
   height: 64px;
-  fill: #535353;
+  fill: #6A6A6A;
 }
 
 @media screen and (prefers-reduced-motion: no-preference) {
@@ -1198,7 +1198,7 @@ exports[`IconFilledGitHub renders the IconFilledGitHub icon with specified style
 exports[`IconFilledGitHub renders the IconFilledGitHub icon with title override 1`] = `
 
   .emotion-0 {
-  fill: #535353;
+  fill: #6A6A6A;
   vertical-align: unset;
   display: inline-block;
 }
@@ -1222,7 +1222,7 @@ exports[`IconFilledGitHub renders the IconFilledGitHub icon with title override
 .emotion-0.emotion-0 {
   width: 64px;
   height: 64px;
-  fill: #535353;
+  fill: #6A6A6A;
 }
 
 @media screen and (prefers-reduced-motion: no-preference) {
@@ -1272,7 +1272,7 @@ exports[`IconFilledInstagram renders the IconFilledInstagram icon from theme ove
 exports[`IconFilledInstagram renders the IconFilledInstagram icon with specified style 1`] = `
 
   .emotion-0 {
-  fill: #535353;
+  fill: #6A6A6A;
   vertical-align: unset;
   display: inline-block;
 }
@@ -1296,7 +1296,7 @@ exports[`IconFilledInstagram renders the IconFilledInstagram icon with specified
 .emotion-0.emotion-0 {
   width: 64px;
   height: 64px;
-  fill: #535353;
+  fill: #6A6A6A;
 }
 
 @media screen and (prefers-reduced-motion: no-preference) {
@@ -1333,7 +1333,7 @@ exports[`IconFilledInstagram renders the IconFilledInstagram icon with specified
 exports[`IconFilledInstagram renders the IconFilledInstagram icon with title override 1`] = `
 
   .emotion-0 {
-  fill: #535353;
+  fill: #6A6A6A;
   vertical-align: unset;
   display: inline-block;
 }
@@ -1357,7 +1357,7 @@ exports[`IconFilledInstagram renders the IconFilledInstagram icon with title ove
 .emotion-0.emotion-0 {
   width: 64px;
   height: 64px;
-  fill: #535353;
+  fill: #6A6A6A;
 }
 
 @media screen and (prefers-reduced-motion: no-preference) {
@@ -1407,7 +1407,7 @@ exports[`IconFilledReddit renders the IconFilledReddit icon from theme override
 exports[`IconFilledReddit renders the IconFilledReddit icon with specified style 1`] = `
 
   .emotion-0 {
-  fill: #535353;
+  fill: #6A6A6A;
   vertical-align: unset;
   display: inline-block;
 }
@@ -1431,7 +1431,7 @@ exports[`IconFilledReddit renders the IconFilledReddit icon with specified style
 .emotion-0.emotion-0 {
   width: 64px;
   height: 64px;
-  fill: #535353;
+  fill: #6A6A6A;
 }
 
 @media screen and (prefers-reduced-motion: no-preference) {
@@ -1468,7 +1468,7 @@ exports[`IconFilledReddit renders the IconFilledReddit icon with specified style
 exports[`IconFilledReddit renders the IconFilledReddit icon with title override 1`] = `
 
   .emotion-0 {
-  fill: #535353;
+  fill: #6A6A6A;
   vertical-align: unset;
   display: inline-block;
 }
@@ -1492,7 +1492,7 @@ exports[`IconFilledReddit renders the IconFilledReddit icon with title override
 .emotion-0.emotion-0 {
   width: 64px;
   height: 64px;
-  fill: #535353;
+  fill: #6A6A6A;
 }
 
 @media screen and (prefers-reduced-motion: no-preference) {
@@ -1542,7 +1542,7 @@ exports[`IconFilledReplay5 renders the IconFilledReplay5 icon from theme overrid
 exports[`IconFilledReplay5 renders the IconFilledReplay5 icon with specified style 1`] = `
 
   .emotion-0 {
-  fill: #535353;
+  fill: #6A6A6A;
   vertical-align: unset;
   display: inline-block;
 }
@@ -1566,7 +1566,7 @@ exports[`IconFilledReplay5 renders the IconFilledReplay5 icon with specified sty
 .emotion-0.emotion-0 {
   width: 64px;
   height: 64px;
-  fill: #535353;
+  fill: #6A6A6A;
 }
 
 @media screen and (prefers-reduced-motion: no-preference) {
@@ -1604,7 +1604,7 @@ exports[`IconFilledReplay5 renders the IconFilledReplay5 icon with specified sty
 exports[`IconFilledReplay5 renders the IconFilledReplay5 icon with title override 1`] = `
 
   .emotion-0 {
-  fill: #535353;
+  fill: #6A6A6A;
   vertical-align: unset;
   display: inline-block;
 }
@@ -1628,7 +1628,7 @@ exports[`IconFilledReplay5 renders the IconFilledReplay5 icon with title overrid
 .emotion-0.emotion-0 {
   width: 64px;
   height: 64px;
-  fill: #535353;
+  fill: #6A6A6A;
 }
 
 @media screen and (prefers-reduced-motion: no-preference) {
@@ -1679,7 +1679,7 @@ exports[`IconFilledReplay10 renders the IconFilledReplay10 icon from theme overr
 exports[`IconFilledReplay10 renders the IconFilledReplay10 icon with specified style 1`] = `
 
   .emotion-0 {
-  fill: #535353;
+  fill: #6A6A6A;
   vertical-align: unset;
   display: inline-block;
 }
@@ -1703,7 +1703,7 @@ exports[`IconFilledReplay10 renders the IconFilledReplay10 icon with specified s
 .emotion-0.emotion-0 {
   width: 64px;
   height: 64px;
-  fill: #535353;
+  fill: #6A6A6A;
 }
 
 @media screen and (prefers-reduced-motion: no-preference) {
@@ -1741,7 +1741,7 @@ exports[`IconFilledReplay10 renders the IconFilledReplay10 icon with specified s
 exports[`IconFilledReplay10 renders the IconFilledReplay10 icon with title override 1`] = `
 
   .emotion-0 {
-  fill: #535353;
+  fill: #6A6A6A;
   vertical-align: unset;
   display: inline-block;
 }
@@ -1765,7 +1765,7 @@ exports[`IconFilledReplay10 renders the IconFilledReplay10 icon with title overr
 .emotion-0.emotion-0 {
   width: 64px;
   height: 64px;
-  fill: #535353;
+  fill: #6A6A6A;
 }
 
 @media screen and (prefers-reduced-motion: no-preference) {
@@ -1816,7 +1816,7 @@ exports[`IconFilledReplay15 renders the IconFilledReplay15 icon from theme overr
 exports[`IconFilledReplay15 renders the IconFilledReplay15 icon with specified style 1`] = `
 
   .emotion-0 {
-  fill: #535353;
+  fill: #6A6A6A;
   vertical-align: unset;
   display: inline-block;
 }
@@ -1840,7 +1840,7 @@ exports[`IconFilledReplay15 renders the IconFilledReplay15 icon with specified s
 .emotion-0.emotion-0 {
   width: 64px;
   height: 64px;
-  fill: #535353;
+  fill: #6A6A6A;
 }
 
 @media screen and (prefers-reduced-motion: no-preference) {
@@ -1878,7 +1878,7 @@ exports[`IconFilledReplay15 renders the IconFilledReplay15 icon with specified s
 exports[`IconFilledReplay15 renders the IconFilledReplay15 icon with title override 1`] = `
 
   .emotion-0 {
-  fill: #535353;
+  fill: #6A6A6A;
   vertical-align: unset;
   display: inline-block;
 }
@@ -1902,7 +1902,7 @@ exports[`IconFilledReplay15 renders the IconFilledReplay15 icon with title overr
 .emotion-0.emotion-0 {
   width: 64px;
   height: 64px;
-  fill: #535353;
+  fill: #6A6A6A;
 }
 
 @media screen and (prefers-reduced-motion: no-preference) {
@@ -1953,7 +1953,7 @@ exports[`IconFilledReplay20 renders the IconFilledReplay20 icon from theme overr
 exports[`IconFilledReplay20 renders the IconFilledReplay20 icon with specified style 1`] = `
 
   .emotion-0 {
-  fill: #535353;
+  fill: #6A6A6A;
   vertical-align: unset;
   display: inline-block;
 }
@@ -1977,7 +1977,7 @@ exports[`IconFilledReplay20 renders the IconFilledReplay20 icon with specified s
 .emotion-0.emotion-0 {
   width: 64px;
   height: 64px;
-  fill: #535353;
+  fill: #6A6A6A;
 }
 
 @media screen and (prefers-reduced-motion: no-preference) {
@@ -2015,7 +2015,7 @@ exports[`IconFilledReplay20 renders the IconFilledReplay20 icon with specified s
 exports[`IconFilledReplay20 renders the IconFilledReplay20 icon with title override 1`] = `
 
   .emotion-0 {
-  fill: #535353;
+  fill: #6A6A6A;
   vertical-align: unset;
   display: inline-block;
 }
@@ -2039,7 +2039,7 @@ exports[`IconFilledReplay20 renders the IconFilledReplay20 icon with title overr
 .emotion-0.emotion-0 {
   width: 64px;
   height: 64px;
-  fill: #535353;
+  fill: #6A6A6A;
 }
 
 @media screen and (prefers-reduced-motion: no-preference) {
@@ -2090,7 +2090,7 @@ exports[`IconFilledReplay25 renders the IconFilledReplay25 icon from theme overr
 exports[`IconFilledReplay25 renders the IconFilledReplay25 icon with specified style 1`] = `
 
   .emotion-0 {
-  fill: #535353;
+  fill: #6A6A6A;
   vertical-align: unset;
   display: inline-block;
 }
@@ -2114,7 +2114,7 @@ exports[`IconFilledReplay25 renders the IconFilledReplay25 icon with specified s
 .emotion-0.emotion-0 {
   width: 64px;
   height: 64px;
-  fill: #535353;
+  fill: #6A6A6A;
 }
 
 @media screen and (prefers-reduced-motion: no-preference) {
@@ -2152,7 +2152,7 @@ exports[`IconFilledReplay25 renders the IconFilledReplay25 icon with specified s
 exports[`IconFilledReplay25 renders the IconFilledReplay25 icon with title override 1`] = `
 
   .emotion-0 {
-  fill: #535353;
+  fill: #6A6A6A;
   vertical-align: unset;
   display: inline-block;
 }
@@ -2176,7 +2176,7 @@ exports[`IconFilledReplay25 renders the IconFilledReplay25 icon with title overr
 .emotion-0.emotion-0 {
   width: 64px;
   height: 64px;
-  fill: #535353;
+  fill: #6A6A6A;
 }
 
 @media screen and (prefers-reduced-motion: no-preference) {
@@ -2227,7 +2227,7 @@ exports[`IconFilledReplay30 renders the IconFilledReplay30 icon from theme overr
 exports[`IconFilledReplay30 renders the IconFilledReplay30 icon with specified style 1`] = `
 
   .emotion-0 {
-  fill: #535353;
+  fill: #6A6A6A;
   vertical-align: unset;
   display: inline-block;
 }
@@ -2251,7 +2251,7 @@ exports[`IconFilledReplay30 renders the IconFilledReplay30 icon with specified s
 .emotion-0.emotion-0 {
   width: 64px;
   height: 64px;
-  fill: #535353;
+  fill: #6A6A6A;
 }
 
 @media screen and (prefers-reduced-motion: no-preference) {
@@ -2289,7 +2289,7 @@ exports[`IconFilledReplay30 renders the IconFilledReplay30 icon with specified s
 exports[`IconFilledReplay30 renders the IconFilledReplay30 icon with title override 1`] = `
 
   .emotion-0 {
-  fill: #535353;
+  fill: #6A6A6A;
   vertical-align: unset;
   display: inline-block;
 }
@@ -2313,7 +2313,7 @@ exports[`IconFilledReplay30 renders the IconFilledReplay30 icon with title overr
 .emotion-0.emotion-0 {
   width: 64px;
   height: 64px;
-  fill: #535353;
+  fill: #6A6A6A;
 }
 
 @media screen and (prefers-reduced-motion: no-preference) {
@@ -2364,7 +2364,7 @@ exports[`IconFilledTwitter renders the IconFilledTwitter icon from theme overrid
 exports[`IconFilledTwitter renders the IconFilledTwitter icon with specified style 1`] = `
 
   .emotion-0 {
-  fill: #535353;
+  fill: #6A6A6A;
   vertical-align: unset;
   display: inline-block;
 }
@@ -2388,7 +2388,7 @@ exports[`IconFilledTwitter renders the IconFilledTwitter icon with specified sty
 .emotion-0.emotion-0 {
   width: 64px;
   height: 64px;
-  fill: #535353;
+  fill: #6A6A6A;
 }
 
 @media screen and (prefers-reduced-motion: no-preference) {
@@ -2425,7 +2425,7 @@ exports[`IconFilledTwitter renders the IconFilledTwitter icon with specified sty
 exports[`IconFilledTwitter renders the IconFilledTwitter icon with title override 1`] = `
 
   .emotion-0 {
-  fill: #535353;
+  fill: #6A6A6A;
   vertical-align: unset;
   display: inline-block;
 }
@@ -2449,7 +2449,7 @@ exports[`IconFilledTwitter renders the IconFilledTwitter icon with title overrid
 .emotion-0.emotion-0 {
   width: 64px;
   height: 64px;
-  fill: #535353;
+  fill: #6A6A6A;
 }
 
 @media screen and (prefers-reduced-motion: no-preference) {
@@ -2499,7 +2499,7 @@ exports[`IconFilledWhatsApp renders the IconFilledWhatsApp icon from theme overr
 exports[`IconFilledWhatsApp renders the IconFilledWhatsApp icon with specified style 1`] = `
 
   .emotion-0 {
-  fill: #535353;
+  fill: #6A6A6A;
   vertical-align: unset;
   display: inline-block;
 }
@@ -2523,7 +2523,7 @@ exports[`IconFilledWhatsApp renders the IconFilledWhatsApp icon with specified s
 .emotion-0.emotion-0 {
   width: 64px;
   height: 64px;
-  fill: #535353;
+  fill: #6A6A6A;
 }
 
 @media screen and (prefers-reduced-motion: no-preference) {
@@ -2560,7 +2560,7 @@ exports[`IconFilledWhatsApp renders the IconFilledWhatsApp icon with specified s
 exports[`IconFilledWhatsApp renders the IconFilledWhatsApp icon with title override 1`] = `
 
   .emotion-0 {
-  fill: #535353;
+  fill: #6A6A6A;
   vertical-align: unset;
   display: inline-block;
 }
@@ -2584,7 +2584,7 @@ exports[`IconFilledWhatsApp renders the IconFilledWhatsApp icon with title overr
 .emotion-0.emotion-0 {
   width: 64px;
   height: 64px;
-  fill: #535353;
+  fill: #6A6A6A;
 }
 
 @media screen and (prefers-reduced-motion: no-preference) {
@@ -2634,7 +2634,7 @@ exports[`IconFilledYoutube renders the IconFilledYoutube icon from theme overrid
 exports[`IconFilledYoutube renders the IconFilledYoutube icon with specified style 1`] = `
 
   .emotion-0 {
-  fill: #535353;
+  fill: #6A6A6A;
   vertical-align: unset;
   display: inline-block;
 }
@@ -2658,7 +2658,7 @@ exports[`IconFilledYoutube renders the IconFilledYoutube icon with specified sty
 .emotion-0.emotion-0 {
   width: 64px;
   height: 64px;
-  fill: #535353;
+  fill: #6A6A6A;
 }
 
 @media screen and (prefers-reduced-motion: no-preference) {
@@ -2695,7 +2695,7 @@ exports[`IconFilledYoutube renders the IconFilledYoutube icon with specified sty
 exports[`IconFilledYoutube renders the IconFilledYoutube icon with title override 1`] = `
 
   .emotion-0 {
-  fill: #535353;
+  fill: #6A6A6A;
   vertical-align: unset;
   display: inline-block;
 }
@@ -2719,7 +2719,7 @@ exports[`IconFilledYoutube renders the IconFilledYoutube icon with title overrid
 .emotion-0.emotion-0 {
   width: 64px;
   height: 64px;
-  fill: #535353;
+  fill: #6A6A6A;
 }
 
 @media screen and (prefers-reduced-motion: no-preference) {
@@ -2769,7 +2769,7 @@ exports[`IconOutlinedForward5 renders the IconOutlinedForward5 icon from theme o
 exports[`IconOutlinedForward5 renders the IconOutlinedForward5 icon with specified style 1`] = `
 
   .emotion-0 {
-  fill: #535353;
+  fill: #6A6A6A;
   vertical-align: unset;
   display: inline-block;
 }
@@ -2793,7 +2793,7 @@ exports[`IconOutlinedForward5 renders the IconOutlinedForward5 icon with specifi
 .emotion-0.emotion-0 {
   width: 64px;
   height: 64px;
-  fill: #535353;
+  fill: #6A6A6A;
 }
 
 @media screen and (prefers-reduced-motion: no-preference) {
@@ -2831,7 +2831,7 @@ exports[`IconOutlinedForward5 renders the IconOutlinedForward5 icon with specifi
 exports[`IconOutlinedForward5 renders the IconOutlinedForward5 icon with title override 1`] = `
 
   .emotion-0 {
-  fill: #535353;
+  fill: #6A6A6A;
   vertical-align: unset;
   display: inline-block;
 }
@@ -2855,7 +2855,7 @@ exports[`IconOutlinedForward5 renders the IconOutlinedForward5 icon with title o
 .emotion-0.emotion-0 {
   width: 64px;
   height: 64px;
-  fill: #535353;
+  fill: #6A6A6A;
 }
 
 @media screen and (prefers-reduced-motion: no-preference) {
@@ -2906,7 +2906,7 @@ exports[`IconOutlinedForward10 renders the IconOutlinedForward10 icon from theme
 exports[`IconOutlinedForward10 renders the IconOutlinedForward10 icon with specified style 1`] = `
 
   .emotion-0 {
-  fill: #535353;
+  fill: #6A6A6A;
   vertical-align: unset;
   display: inline-block;
 }
@@ -2930,7 +2930,7 @@ exports[`IconOutlinedForward10 renders the IconOutlinedForward10 icon with speci
 .emotion-0.emotion-0 {
   width: 64px;
   height: 64px;
-  fill: #535353;
+  fill: #6A6A6A;
 }
 
 @media screen and (prefers-reduced-motion: no-preference) {
@@ -2968,7 +2968,7 @@ exports[`IconOutlinedForward10 renders the IconOutlinedForward10 icon with speci
 exports[`IconOutlinedForward10 renders the IconOutlinedForward10 icon with title override 1`] = `
 
   .emotion-0 {
-  fill: #535353;
+  fill: #6A6A6A;
   vertical-align: unset;
   display: inline-block;
 }
@@ -2992,7 +2992,7 @@ exports[`IconOutlinedForward10 renders the IconOutlinedForward10 icon with title
 .emotion-0.emotion-0 {
   width: 64px;
   height: 64px;
-  fill: #535353;
+  fill: #6A6A6A;
 }
 
 @media screen and (prefers-reduced-motion: no-preference) {
@@ -3043,7 +3043,7 @@ exports[`IconOutlinedForward15 renders the IconOutlinedForward15 icon from theme
 exports[`IconOutlinedForward15 renders the IconOutlinedForward15 icon with specified style 1`] = `
 
   .emotion-0 {
-  fill: #535353;
+  fill: #6A6A6A;
   vertical-align: unset;
   display: inline-block;
 }
@@ -3067,7 +3067,7 @@ exports[`IconOutlinedForward15 renders the IconOutlinedForward15 icon with speci
 .emotion-0.emotion-0 {
   width: 64px;
   height: 64px;
-  fill: #535353;
+  fill: #6A6A6A;
 }
 
 @media screen and (prefers-reduced-motion: no-preference) {
@@ -3105,7 +3105,7 @@ exports[`IconOutlinedForward15 renders the IconOutlinedForward15 icon with speci
 exports[`IconOutlinedForward15 renders the IconOutlinedForward15 icon with title override 1`] = `
 
   .emotion-0 {
-  fill: #535353;
+  fill: #6A6A6A;
   vertical-align: unset;
   display: inline-block;
 }
@@ -3129,7 +3129,7 @@ exports[`IconOutlinedForward15 renders the IconOutlinedForward15 icon with title
 .emotion-0.emotion-0 {
   width: 64px;
   height: 64px;
-  fill: #535353;
+  fill: #6A6A6A;
 }
 
 @media screen and (prefers-reduced-motion: no-preference) {
@@ -3180,7 +3180,7 @@ exports[`IconOutlinedForward20 renders the IconOutlinedForward20 icon from theme
 exports[`IconOutlinedForward20 renders the IconOutlinedForward20 icon with specified style 1`] = `
 
   .emotion-0 {
-  fill: #535353;
+  fill: #6A6A6A;
   vertical-align: unset;
   display: inline-block;
 }
@@ -3204,7 +3204,7 @@ exports[`IconOutlinedForward20 renders the IconOutlinedForward20 icon with speci
 .emotion-0.emotion-0 {
   width: 64px;
   height: 64px;
-  fill: #535353;
+  fill: #6A6A6A;
 }
 
 @media screen and (prefers-reduced-motion: no-preference) {
@@ -3242,7 +3242,7 @@ exports[`IconOutlinedForward20 renders the IconOutlinedForward20 icon with speci
 exports[`IconOutlinedForward20 renders the IconOutlinedForward20 icon with title override 1`] = `
 
   .emotion-0 {
-  fill: #535353;
+  fill: #6A6A6A;
   vertical-align: unset;
   display: inline-block;
 }
@@ -3266,7 +3266,7 @@ exports[`IconOutlinedForward20 renders the IconOutlinedForward20 icon with title
 .emotion-0.emotion-0 {
   width: 64px;
   height: 64px;
-  fill: #535353;
+  fill: #6A6A6A;
 }
 
 @media screen and (prefers-reduced-motion: no-preference) {
@@ -3317,7 +3317,7 @@ exports[`IconOutlinedForward25 renders the IconOutlinedForward25 icon from theme
 exports[`IconOutlinedForward25 renders the IconOutlinedForward25 icon with specified style 1`] = `
 
   .emotion-0 {
-  fill: #535353;
+  fill: #6A6A6A;
   vertical-align: unset;
   display: inline-block;
 }
@@ -3341,7 +3341,7 @@ exports[`IconOutlinedForward25 renders the IconOutlinedForward25 icon with speci
 .emotion-0.emotion-0 {
   width: 64px;
   height: 64px;
-  fill: #535353;
+  fill: #6A6A6A;
 }
 
 @media screen and (prefers-reduced-motion: no-preference) {
@@ -3379,7 +3379,7 @@ exports[`IconOutlinedForward25 renders the IconOutlinedForward25 icon with speci
 exports[`IconOutlinedForward25 renders the IconOutlinedForward25 icon with title override 1`] = `
 
   .emotion-0 {
-  fill: #535353;
+  fill: #6A6A6A;
   vertical-align: unset;
   display: inline-block;
 }
@@ -3403,7 +3403,7 @@ exports[`IconOutlinedForward25 renders the IconOutlinedForward25 icon with title
 .emotion-0.emotion-0 {
   width: 64px;
   height: 64px;
-  fill: #535353;
+  fill: #6A6A6A;
 }
 
 @media screen and (prefers-reduced-motion: no-preference) {
@@ -3454,7 +3454,7 @@ exports[`IconOutlinedForward30 renders the IconOutlinedForward30 icon from theme
 exports[`IconOutlinedForward30 renders the IconOutlinedForward30 icon with specified style 1`] = `
 
   .emotion-0 {
-  fill: #535353;
+  fill: #6A6A6A;
   vertical-align: unset;
   display: inline-block;
 }
@@ -3478,7 +3478,7 @@ exports[`IconOutlinedForward30 renders the IconOutlinedForward30 icon with speci
 .emotion-0.emotion-0 {
   width: 64px;
   height: 64px;
-  fill: #535353;
+  fill: #6A6A6A;
 }
 
 @media screen and (prefers-reduced-motion: no-preference) {
@@ -3516,7 +3516,7 @@ exports[`IconOutlinedForward30 renders the IconOutlinedForward30 icon with speci
 exports[`IconOutlinedForward30 renders the IconOutlinedForward30 icon with title override 1`] = `
 
   .emotion-0 {
-  fill: #535353;
+  fill: #6A6A6A;
   vertical-align: unset;
   display: inline-block;
 }
@@ -3540,7 +3540,7 @@ exports[`IconOutlinedForward30 renders the IconOutlinedForward30 icon with title
 .emotion-0.emotion-0 {
   width: 64px;
   height: 64px;
-  fill: #535353;
+  fill: #6A6A6A;
 }
 
 @media screen and (prefers-reduced-motion: no-preference) {
@@ -3591,7 +3591,7 @@ exports[`IconOutlinedReplay5 renders the IconOutlinedReplay5 icon from theme ove
 exports[`IconOutlinedReplay5 renders the IconOutlinedReplay5 icon with specified style 1`] = `
 
   .emotion-0 {
-  fill: #535353;
+  fill: #6A6A6A;
   vertical-align: unset;
   display: inline-block;
 }
@@ -3615,7 +3615,7 @@ exports[`IconOutlinedReplay5 renders the IconOutlinedReplay5 icon with specified
 .emotion-0.emotion-0 {
   width: 64px;
   height: 64px;
-  fill: #535353;
+  fill: #6A6A6A;
 }
 
 @media screen and (prefers-reduced-motion: no-preference) {
@@ -3653,7 +3653,7 @@ exports[`IconOutlinedReplay5 renders the IconOutlinedReplay5 icon with specified
 exports[`IconOutlinedReplay5 renders the IconOutlinedReplay5 icon with title override 1`] = `
 
   .emotion-0 {
-  fill: #535353;
+  fill: #6A6A6A;
   vertical-align: unset;
   display: inline-block;
 }
@@ -3677,7 +3677,7 @@ exports[`IconOutlinedReplay5 renders the IconOutlinedReplay5 icon with title ove
 .emotion-0.emotion-0 {
   width: 64px;
   height: 64px;
-  fill: #535353;
+  fill: #6A6A6A;
 }
 
 @media screen and (prefers-reduced-motion: no-preference) {
@@ -3728,7 +3728,7 @@ exports[`IconOutlinedReplay10 renders the IconOutlinedReplay10 icon from theme o
 exports[`IconOutlinedReplay10 renders the IconOutlinedReplay10 icon with specified style 1`] = `
 
   .emotion-0 {
-  fill: #535353;
+  fill: #6A6A6A;
   vertical-align: unset;
   display: inline-block;
 }
@@ -3752,7 +3752,7 @@ exports[`IconOutlinedReplay10 renders the IconOutlinedReplay10 icon with specifi
 .emotion-0.emotion-0 {
   width: 64px;
   height: 64px;
-  fill: #535353;
+  fill: #6A6A6A;
 }
 
 @media screen and (prefers-reduced-motion: no-preference) {
@@ -3790,7 +3790,7 @@ exports[`IconOutlinedReplay10 renders the IconOutlinedReplay10 icon with specifi
 exports[`IconOutlinedReplay10 renders the IconOutlinedReplay10 icon with title override 1`] = `
 
   .emotion-0 {
-  fill: #535353;
+  fill: #6A6A6A;
   vertical-align: unset;
   display: inline-block;
 }
@@ -3814,7 +3814,7 @@ exports[`IconOutlinedReplay10 renders the IconOutlinedReplay10 icon with title o
 .emotion-0.emotion-0 {
   width: 64px;
   height: 64px;
-  fill: #535353;
+  fill: #6A6A6A;
 }
 
 @media screen and (prefers-reduced-motion: no-preference) {
@@ -3865,7 +3865,7 @@ exports[`IconOutlinedReplay15 renders the IconOutlinedReplay15 icon from theme o
 exports[`IconOutlinedReplay15 renders the IconOutlinedReplay15 icon with specified style 1`] = `
 
   .emotion-0 {
-  fill: #535353;
+  fill: #6A6A6A;
   vertical-align: unset;
   display: inline-block;
 }
@@ -3889,7 +3889,7 @@ exports[`IconOutlinedReplay15 renders the IconOutlinedReplay15 icon with specifi
 .emotion-0.emotion-0 {
   width: 64px;
   height: 64px;
-  fill: #535353;
+  fill: #6A6A6A;
 }
 
 @media screen and (prefers-reduced-motion: no-preference) {
@@ -3927,7 +3927,7 @@ exports[`IconOutlinedReplay15 renders the IconOutlinedReplay15 icon with specifi
 exports[`IconOutlinedReplay15 renders the IconOutlinedReplay15 icon with title override 1`] = `
 
   .emotion-0 {
-  fill: #535353;
+  fill: #6A6A6A;
   vertical-align: unset;
   display: inline-block;
 }
@@ -3951,7 +3951,7 @@ exports[`IconOutlinedReplay15 renders the IconOutlinedReplay15 icon with title o
 .emotion-0.emotion-0 {
   width: 64px;
   height: 64px;
-  fill: #535353;
+  fill: #6A6A6A;
 }
 
 @media screen and (prefers-reduced-motion: no-preference) {
@@ -4002,7 +4002,7 @@ exports[`IconOutlinedReplay20 renders the IconOutlinedReplay20 icon from theme o
 exports[`IconOutlinedReplay20 renders the IconOutlinedReplay20 icon with specified style 1`] = `
 
   .emotion-0 {
-  fill: #535353;
+  fill: #6A6A6A;
   vertical-align: unset;
   display: inline-block;
 }
@@ -4026,7 +4026,7 @@ exports[`IconOutlinedReplay20 renders the IconOutlinedReplay20 icon with specifi
 .emotion-0.emotion-0 {
   width: 64px;
   height: 64px;
-  fill: #535353;
+  fill: #6A6A6A;
 }
 
 @media screen and (prefers-reduced-motion: no-preference) {
@@ -4064,7 +4064,7 @@ exports[`IconOutlinedReplay20 renders the IconOutlinedReplay20 icon with specifi
 exports[`IconOutlinedReplay20 renders the IconOutlinedReplay20 icon with title override 1`] = `
 
   .emotion-0 {
-  fill: #535353;
+  fill: #6A6A6A;
   vertical-align: unset;
   display: inline-block;
 }
@@ -4088,7 +4088,7 @@ exports[`IconOutlinedReplay20 renders the IconOutlinedReplay20 icon with title o
 .emotion-0.emotion-0 {
   width: 64px;
   height: 64px;
-  fill: #535353;
+  fill: #6A6A6A;
 }
 
 @media screen and (prefers-reduced-motion: no-preference) {
@@ -4139,7 +4139,7 @@ exports[`IconOutlinedReplay25 renders the IconOutlinedReplay25 icon from theme o
 exports[`IconOutlinedReplay25 renders the IconOutlinedReplay25 icon with specified style 1`] = `
 
   .emotion-0 {
-  fill: #535353;
+  fill: #6A6A6A;
   vertical-align: unset;
   display: inline-block;
 }
@@ -4163,7 +4163,7 @@ exports[`IconOutlinedReplay25 renders the IconOutlinedReplay25 icon with specifi
 .emotion-0.emotion-0 {
   width: 64px;
   height: 64px;
-  fill: #535353;
+  fill: #6A6A6A;
 }
 
 @media screen and (prefers-reduced-motion: no-preference) {
@@ -4201,7 +4201,7 @@ exports[`IconOutlinedReplay25 renders the IconOutlinedReplay25 icon with specifi
 exports[`IconOutlinedReplay25 renders the IconOutlinedReplay25 icon with title override 1`] = `
 
   .emotion-0 {
-  fill: #535353;
+  fill: #6A6A6A;
   vertical-align: unset;
   display: inline-block;
 }
@@ -4225,7 +4225,7 @@ exports[`IconOutlinedReplay25 renders the IconOutlinedReplay25 icon with title o
 .emotion-0.emotion-0 {
   width: 64px;
   height: 64px;
-  fill: #535353;
+  fill: #6A6A6A;
 }
 
 @media screen and (prefers-reduced-motion: no-preference) {
@@ -4276,7 +4276,7 @@ exports[`IconOutlinedReplay30 renders the IconOutlinedReplay30 icon from theme o
 exports[`IconOutlinedReplay30 renders the IconOutlinedReplay30 icon with specified style 1`] = `
 
   .emotion-0 {
-  fill: #535353;
+  fill: #6A6A6A;
   vertical-align: unset;
   display: inline-block;
 }
@@ -4300,7 +4300,7 @@ exports[`IconOutlinedReplay30 renders the IconOutlinedReplay30 icon with specifi
 .emotion-0.emotion-0 {
   width: 64px;
   height: 64px;
-  fill: #535353;
+  fill: #6A6A6A;
 }
 
 @media screen and (prefers-reduced-motion: no-preference) {
@@ -4338,7 +4338,7 @@ exports[`IconOutlinedReplay30 renders the IconOutlinedReplay30 icon with specifi
 exports[`IconOutlinedReplay30 renders the IconOutlinedReplay30 icon with title override 1`] = `
 
   .emotion-0 {
-  fill: #535353;
+  fill: #6A6A6A;
   vertical-align: unset;
   display: inline-block;
 }
@@ -4362,7 +4362,7 @@ exports[`IconOutlinedReplay30 renders the IconOutlinedReplay30 icon with title o
 .emotion-0.emotion-0 {
   width: 64px;
   height: 64px;
-  fill: #535353;
+  fill: #6A6A6A;
 }
 
 @media screen and (prefers-reduced-motion: no-preference) {
@@ -4478,7 +4478,7 @@ exports[`IconOutlinedigma renders the IconOutlinedigma icon from theme override
 exports[`IconOutlinedigma renders the IconOutlinedigma icon with specified style 1`] = `
 
   .emotion-0 {
-  fill: #535353;
+  fill: #6A6A6A;
   vertical-align: unset;
   display: inline-block;
 }
@@ -4502,7 +4502,7 @@ exports[`IconOutlinedigma renders the IconOutlinedigma icon with specified style
 .emotion-0.emotion-0 {
   width: 64px;
   height: 64px;
-  fill: #535353;
+  fill: #6A6A6A;
 }
 
 @media screen and (prefers-reduced-motion: no-preference) {
@@ -4555,7 +4555,7 @@ exports[`IconOutlinedigma renders the IconOutlinedigma icon with specified style
 exports[`IconOutlinedigma renders the IconOutlinedigma icon with title override 1`] = `
 
   .emotion-0 {
-  fill: #535353;
+  fill: #6A6A6A;
   vertical-align: unset;
   display: inline-block;
 }
@@ -4579,7 +4579,7 @@ exports[`IconOutlinedigma renders the IconOutlinedigma icon with title override
 .emotion-0.emotion-0 {
   width: 64px;
   height: 64px;
-  fill: #535353;
+  fill: #6A6A6A;
 }
 
 @media screen and (prefers-reduced-motion: no-preference) {
@@ -4647,7 +4647,7 @@ exports[`IndeterminateProgressIndicator renders the IndeterminateProgressIndicat
   .emotion-0 {
   width: 64px;
   height: 64px;
-  stroke: #535353;
+  stroke: #6A6A6A;
 }
 
 .emotion-0 circle {
@@ -4688,7 +4688,7 @@ exports[`IndeterminateProgressIndicator renders the IndeterminateProgressIndicat
   .emotion-0 {
   width: 64px;
   height: 64px;
-  stroke: #535353;
+  stroke: #6A6A6A;
 }
 
 .emotion-0 circle {
@@ -4730,7 +4730,7 @@ exports[`IndeterminateProgressIndicator renders the IndeterminateProgressIndicat
 exports[`customToNewsKit renders icon with overrides 1`] = `
 
   .emotion-0 {
-  fill: #2E2E2E;
+  fill: #3B3B3B;
   vertical-align: unset;
   display: inline-block;
 }
diff --git a/src/icons/__tests__/__snapshots__/material-icons.test.tsx.snap b/src/icons/__tests__/__snapshots__/material-icons.test.tsx.snap
index 0b2611500e..a1be7da924 100644
--- a/src/icons/__tests__/__snapshots__/material-icons.test.tsx.snap
+++ b/src/icons/__tests__/__snapshots__/material-icons.test.tsx.snap
@@ -6,7 +6,7 @@ exports[`Material icons should render icons with no props IconFilledAccountBalan
   display: inline-block;
   vertical-align: middle;
   overflow: hidden;
-  fill: #2E2E2E;
+  fill: #3B3B3B;
   vertical-align: unset;
   display: inline-block;
 }
@@ -77,7 +77,7 @@ exports[`Material icons should render icons with no props IconFilledAccountTree
   display: inline-block;
   vertical-align: middle;
   overflow: hidden;
-  fill: #2E2E2E;
+  fill: #3B3B3B;
   vertical-align: unset;
   display: inline-block;
 }
@@ -123,7 +123,7 @@ exports[`Material icons should render icons with no props IconOutlinedAccountBal
   display: inline-block;
   vertical-align: middle;
   overflow: hidden;
-  fill: #2E2E2E;
+  fill: #3B3B3B;
   vertical-align: unset;
   display: inline-block;
 }
@@ -169,7 +169,7 @@ exports[`Material icons should render icons with no props IconOutlinedAccountTre
   display: inline-block;
   vertical-align: middle;
   overflow: hidden;
-  fill: #2E2E2E;
+  fill: #3B3B3B;
   vertical-align: unset;
   display: inline-block;
 }
diff --git a/src/image/__tests__/__snapshots__/image.test.tsx.snap b/src/image/__tests__/__snapshots__/image.test.tsx.snap
index daf43f5844..46a517ac1f 100644
--- a/src/image/__tests__/__snapshots__/image.test.tsx.snap
+++ b/src/image/__tests__/__snapshots__/image.test.tsx.snap
@@ -7,7 +7,7 @@ exports[`Image loadingAspectRatio renders with MQ aspect ratio 1`] = `
   width: 100%;
   display: block;
   border-radius: 0;
-  background-color: #F4F4F4;
+  background-color: #F1F1F1;
 }
 
 @media screen and (max-width: 479px) {
@@ -27,7 +27,7 @@ exports[`Image loadingAspectRatio renders with MQ aspect ratio 1`] = `
 }
 
 .emotion-0 svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-1 {
@@ -95,7 +95,7 @@ exports[`Image loadingAspectRatio renders with MQ aspect ratio,  width and heigh
   width: 100%;
   display: block;
   border-radius: 0;
-  background-color: #F4F4F4;
+  background-color: #F1F1F1;
 }
 
 @media screen and (max-width: 479px) {
@@ -113,7 +113,7 @@ exports[`Image loadingAspectRatio renders with MQ aspect ratio,  width and heigh
 }
 
 .emotion-0 svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-1 {
@@ -181,7 +181,7 @@ exports[`Image loadingAspectRatio renders with MQ width and height 1`] = `
   width: 100%;
   display: block;
   border-radius: 0;
-  background-color: #F4F4F4;
+  background-color: #F1F1F1;
 }
 
 @media screen and (max-width: 479px) {
@@ -199,7 +199,7 @@ exports[`Image loadingAspectRatio renders with MQ width and height 1`] = `
 }
 
 .emotion-0 svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-1 {
@@ -269,11 +269,11 @@ exports[`Image loadingAspectRatio renders with height dimensions and 1:3 aspect
   width: 100px;
   height: 300px;
   border-radius: 0;
-  background-color: #F4F4F4;
+  background-color: #F1F1F1;
 }
 
 .emotion-0 svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-1 {
@@ -331,11 +331,11 @@ exports[`Image loadingAspectRatio renders with height dimensions in px and 1:3 a
   width: 100px;
   height: 300px;
   border-radius: 0;
-  background-color: #F4F4F4;
+  background-color: #F1F1F1;
 }
 
 .emotion-0 svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-1 {
@@ -394,13 +394,13 @@ exports[`Image loadingAspectRatio renders with logical margin props 1`] = `
   height: 0;
   width: 100%;
   border-radius: 0;
-  background-color: #F4F4F4;
+  background-color: #F1F1F1;
   margin-inline: 25px;
   margin-block: 50px;
 }
 
 .emotion-0 svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-1 {
@@ -459,11 +459,11 @@ exports[`Image loadingAspectRatio renders with no dimensions and 1:1 aspect rati
   height: 0;
   width: 100%;
   border-radius: 0;
-  background-color: #F4F4F4;
+  background-color: #F1F1F1;
 }
 
 .emotion-0 svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-1 {
@@ -522,11 +522,11 @@ exports[`Image loadingAspectRatio renders with no dimensions and invalid aspect
   height: 0;
   width: 100%;
   border-radius: 0;
-  background-color: #F4F4F4;
+  background-color: #F1F1F1;
 }
 
 .emotion-0 svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-1 {
@@ -585,11 +585,11 @@ exports[`Image loadingAspectRatio renders with no dimensions or aspect ratio 1`]
   height: 0;
   width: 100%;
   border-radius: 0;
-  background-color: #F4F4F4;
+  background-color: #F1F1F1;
 }
 
 .emotion-0 svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-1 {
@@ -647,11 +647,11 @@ exports[`Image loadingAspectRatio renders with number dimensions or aspect ratio
   width: 100px;
   height: 100px;
   border-radius: 0;
-  background-color: #F4F4F4;
+  background-color: #F1F1F1;
 }
 
 .emotion-0 svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-1 {
@@ -710,11 +710,11 @@ exports[`Image loadingAspectRatio renders with string dimensions or aspect ratio
   height: 0;
   width: auto;
   border-radius: 0;
-  background-color: #F4F4F4;
+  background-color: #F1F1F1;
 }
 
 .emotion-0 svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-1 {
@@ -772,11 +772,11 @@ exports[`Image loadingAspectRatio renders with width dimensions and 1:3 aspect r
   width: 100px;
   height: 300px;
   border-radius: 0;
-  background-color: #F4F4F4;
+  background-color: #F1F1F1;
 }
 
 .emotion-0 svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-1 {
@@ -834,11 +834,11 @@ exports[`Image loadingAspectRatio renders with width dimensions in px and 1:3 as
   width: 100px;
   height: 300px;
   border-radius: 0;
-  background-color: #F4F4F4;
+  background-color: #F1F1F1;
 }
 
 .emotion-0 svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-1 {
@@ -897,11 +897,11 @@ exports[`Image render with incorect path 1`] = `
   height: 0;
   width: 100%;
   border-radius: 0;
-  background-color: #F4F4F4;
+  background-color: #F1F1F1;
 }
 
 .emotion-0 svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-1 {
@@ -959,11 +959,11 @@ exports[`Image render with multiple sources 1`] = `
   height: 0;
   width: 100%;
   border-radius: 0;
-  background-color: #F4F4F4;
+  background-color: #F1F1F1;
 }
 
 .emotion-0 svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-1 {
@@ -1032,11 +1032,11 @@ exports[`Image renders with defaults 1`] = `
   width: 3px;
   height: 3px;
   border-radius: 0;
-  background-color: #F4F4F4;
+  background-color: #F1F1F1;
 }
 
 .emotion-0 svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-1 {
@@ -1128,11 +1128,11 @@ exports[`Image renders with max height and width 1`] = `
   width: 3px;
   height: 3px;
   border-radius: 0;
-  background-color: #F4F4F4;
+  background-color: #F1F1F1;
 }
 
 .emotion-0 svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-1 {
@@ -1192,11 +1192,11 @@ exports[`Image renders with object-fit and object-position 1`] = `
   width: 3px;
   height: 3px;
   border-radius: 0;
-  background-color: #F4F4F4;
+  background-color: #F1F1F1;
 }
 
 .emotion-0 svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-1 {
@@ -1256,11 +1256,11 @@ exports[`Image renders with placeholder icon 1`] = `
   width: 3px;
   height: 3px;
   border-radius: 0;
-  background-color: #F4F4F4;
+  background-color: #F1F1F1;
 }
 
 .emotion-0 svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-1 {
@@ -1298,7 +1298,7 @@ exports[`Image renders with placeholder icon 1`] = `
   display: inline-block;
   vertical-align: middle;
   overflow: hidden;
-  fill: #2E2E2E;
+  fill: #3B3B3B;
   vertical-align: unset;
   display: inline-block;
 }
@@ -1380,11 +1380,11 @@ exports[`Image renders with placeholder icon override 1`] = `
   width: 3px;
   height: 3px;
   border-radius: 0;
-  background-color: #F4F4F4;
+  background-color: #F1F1F1;
 }
 
 .emotion-0 svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-1 {
@@ -1422,7 +1422,7 @@ exports[`Image renders with placeholder icon override 1`] = `
   display: inline-block;
   vertical-align: middle;
   overflow: hidden;
-  fill: #2E2E2E;
+  fill: #3B3B3B;
   vertical-align: unset;
   display: inline-block;
 }
@@ -1710,22 +1710,22 @@ exports[`Image stylePreset with mq 1`] = `
 @media screen and (min-width: 768px) and (max-width: 1023px) {
   .emotion-0 {
     border-radius: 12px;
-    background-color: #F4F4F4;
+    background-color: #F1F1F1;
   }
 
   .emotion-0 svg {
-    fill: #C0C0C0;
+    fill: #ABABAB;
   }
 }
 
 @media screen and (min-width: 1024px) {
   .emotion-0 {
     border-radius: 24px;
-    background-color: #F4F4F4;
+    background-color: #F1F1F1;
   }
 
   .emotion-0 svg {
-    fill: #C0C0C0;
+    fill: #ABABAB;
   }
 }
 
diff --git a/src/inline-message/__tests__/__snapshots__/inline-message.test.tsx.snap b/src/inline-message/__tests__/__snapshots__/inline-message.test.tsx.snap
index aecf6da727..7c8ea0cd44 100644
--- a/src/inline-message/__tests__/__snapshots__/inline-message.test.tsx.snap
+++ b/src/inline-message/__tests__/__snapshots__/inline-message.test.tsx.snap
@@ -3,8 +3,8 @@
 exports[`InlineMessage renders with Title 1`] = `
 
   .emotion-0 {
-  background-color: #EBF8F9;
-  border-color: #05717D;
+  background-color: #E6F4F6;
+  border-color: #017582;
   border-style: solid;
   border-radius: 4px;
   border-width: 0 0 0 4px;
@@ -23,7 +23,7 @@ exports[`InlineMessage renders with Title 1`] = `
 }
 
 .emotion-0 svg {
-  fill: #05717D;
+  fill: #017582;
 }
 
 .emotion-1 {
@@ -51,7 +51,7 @@ exports[`InlineMessage renders with Title 1`] = `
   font-weight: 700;
   letter-spacing: 0;
   padding: 0.5px 0px;
-  color: #0A0A0A;
+  color: #111111;
   margin-bottom: 12px;
 }
 
@@ -68,7 +68,7 @@ exports[`InlineMessage renders with Title 1`] = `
 }
 
 .emotion-3 svg {
-  fill: #0A0A0A;
+  fill: #111111;
 }
 
 .emotion-4 {
@@ -79,7 +79,7 @@ exports[`InlineMessage renders with Title 1`] = `
   font-weight: 400;
   letter-spacing: 0;
   padding: 0.5px 0px;
-  color: #2E2E2E;
+  color: #3B3B3B;
 }
 
 .emotion-4::before {
@@ -95,7 +95,7 @@ exports[`InlineMessage renders with Title 1`] = `
 }
 
 .emotion-4 svg {
-  fill: #2E2E2E;
+  fill: #3B3B3B;
 }
 
 

   .emotion-0 {
-  background-color: #EBF8F9;
-  border-color: #05717D;
+  background-color: #E6F4F6;
+  border-color: #017582;
   border-style: solid;
   border-radius: 4px;
   border-width: 0 0 0 4px;
@@ -149,7 +149,7 @@ exports[`InlineMessage renders with Title and Icon 1`] = `
 }
 
 .emotion-0 svg {
-  fill: #05717D;
+  fill: #017582;
 }
 
 .emotion-1 {
@@ -175,7 +175,7 @@ exports[`InlineMessage renders with Title and Icon 1`] = `
   display: inline-block;
   vertical-align: middle;
   overflow: hidden;
-  fill: #2E2E2E;
+  fill: #3B3B3B;
   vertical-align: unset;
   display: inline-block;
 }
@@ -215,7 +215,7 @@ exports[`InlineMessage renders with Title and Icon 1`] = `
   font-weight: 700;
   letter-spacing: 0;
   padding: 0.5px 0px;
-  color: #0A0A0A;
+  color: #111111;
   margin-bottom: 12px;
 }
 
@@ -232,7 +232,7 @@ exports[`InlineMessage renders with Title and Icon 1`] = `
 }
 
 .emotion-6 svg {
-  fill: #0A0A0A;
+  fill: #111111;
 }
 
 .emotion-7 {
@@ -243,7 +243,7 @@ exports[`InlineMessage renders with Title and Icon 1`] = `
   font-weight: 400;
   letter-spacing: 0;
   padding: 0.5px 0px;
-  color: #2E2E2E;
+  color: #3B3B3B;
 }
 
 .emotion-7::before {
@@ -259,7 +259,7 @@ exports[`InlineMessage renders with Title and Icon 1`] = `
 }
 
 .emotion-7 svg {
-  fill: #2E2E2E;
+  fill: #3B3B3B;
 }
 
 

   .emotion-0 {
-  background-color: #EBF8F9;
-  border-color: #05717D;
+  background-color: #E6F4F6;
+  border-color: #017582;
   border-style: solid;
   border-radius: 4px;
   border-width: 0 0 0 4px;
@@ -334,7 +334,7 @@ exports[`InlineMessage renders with default props 1`] = `
 }
 
 .emotion-0 svg {
-  fill: #05717D;
+  fill: #017582;
 }
 
 .emotion-1 {
@@ -362,7 +362,7 @@ exports[`InlineMessage renders with default props 1`] = `
   font-weight: 400;
   letter-spacing: 0;
   padding: 0.5px 0px;
-  color: #2E2E2E;
+  color: #3B3B3B;
 }
 
 .emotion-3::before {
@@ -378,7 +378,7 @@ exports[`InlineMessage renders with default props 1`] = `
 }
 
 .emotion-3 svg {
-  fill: #2E2E2E;
+  fill: #3B3B3B;
 }
 
 

   .emotion-0 {
-  background-color: #EBF8F9;
-  border-color: #05717D;
+  background-color: #E6F4F6;
+  border-color: #017582;
   border-style: solid;
   border-radius: 4px;
   border-width: 0 0 0 4px;
@@ -429,7 +429,7 @@ exports[`InlineMessage renders with logical prop overrides 1`] = `
 }
 
 .emotion-0 svg {
-  fill: #05717D;
+  fill: #017582;
 }
 
 .emotion-1 {
@@ -455,7 +455,7 @@ exports[`InlineMessage renders with logical prop overrides 1`] = `
   display: inline-block;
   vertical-align: middle;
   overflow: hidden;
-  fill: #2E2E2E;
+  fill: #3B3B3B;
   vertical-align: unset;
   display: inline-block;
 }
@@ -495,7 +495,7 @@ exports[`InlineMessage renders with logical prop overrides 1`] = `
   font-weight: 700;
   letter-spacing: 0;
   padding: 0.5px 0px;
-  color: #0A0A0A;
+  color: #111111;
   margin-bottom: 12px;
 }
 
@@ -512,7 +512,7 @@ exports[`InlineMessage renders with logical prop overrides 1`] = `
 }
 
 .emotion-6 svg {
-  fill: #0A0A0A;
+  fill: #111111;
 }
 
 .emotion-7 {
@@ -523,7 +523,7 @@ exports[`InlineMessage renders with logical prop overrides 1`] = `
   font-weight: 400;
   letter-spacing: 0;
   padding: 0.5px 0px;
-  color: #2E2E2E;
+  color: #3B3B3B;
 }
 
 .emotion-7::before {
@@ -539,7 +539,7 @@ exports[`InlineMessage renders with logical prop overrides 1`] = `
 }
 
 .emotion-7 svg {
-  fill: #2E2E2E;
+  fill: #3B3B3B;
 }
 
 

   .emotion-0 {
   display: block;
-  color: #0A0A0A;
+  color: #111111;
   font-family: "Poppins",sans-serif;
   font-size: 16px;
   line-height: 24px;
@@ -16,7 +16,7 @@ exports[`Label renders large label 1`] = `
 }
 
 .emotion-0:disabled {
-  color: #C0C0C0;
+  color: #ABABAB;
 }
 
 .emotion-0::before {
@@ -43,7 +43,7 @@ exports[`Label renders medium label 1`] = `
 
   .emotion-0 {
   display: block;
-  color: #0A0A0A;
+  color: #111111;
   font-family: "Poppins",sans-serif;
   font-size: 14px;
   line-height: 21px;
@@ -55,7 +55,7 @@ exports[`Label renders medium label 1`] = `
 }
 
 .emotion-0:disabled {
-  color: #C0C0C0;
+  color: #ABABAB;
 }
 
 .emotion-0::before {
@@ -82,7 +82,7 @@ exports[`Label renders small label 1`] = `
 
   .emotion-0 {
   display: block;
-  color: #0A0A0A;
+  color: #111111;
   font-family: "Poppins",sans-serif;
   font-size: 12px;
   line-height: 18px;
@@ -94,7 +94,7 @@ exports[`Label renders small label 1`] = `
 }
 
 .emotion-0:disabled {
-  color: #C0C0C0;
+  color: #ABABAB;
 }
 
 .emotion-0::before {
@@ -121,7 +121,7 @@ exports[`Label should render disabled Label 1`] = `
 
   .emotion-0 {
   display: block;
-  color: #C0C0C0;
+  color: #ABABAB;
   font-family: "Poppins",sans-serif;
   font-size: 14px;
   line-height: 21px;
@@ -157,7 +157,7 @@ exports[`Label should render with logical props overrides 1`] = `
 
   .emotion-0 {
   display: block;
-  color: #0A0A0A;
+  color: #111111;
   font-family: "Poppins",sans-serif;
   font-size: 14px;
   line-height: 21px;
@@ -171,7 +171,7 @@ exports[`Label should render with logical props overrides 1`] = `
 }
 
 .emotion-0:disabled {
-  color: #C0C0C0;
+  color: #ABABAB;
 }
 
 .emotion-0::before {
diff --git a/src/link/__tests__/__snapshots__/link.test.tsx.snap b/src/link/__tests__/__snapshots__/link.test.tsx.snap
index 8b3147e30b..5f31cfaec9 100644
--- a/src/link/__tests__/__snapshots__/link.test.tsx.snap
+++ b/src/link/__tests__/__snapshots__/link.test.tsx.snap
@@ -30,43 +30,43 @@ exports[`Link does not render the external icon even if the href is external 1`]
 }
 
 .emotion-0:hover:not(:disabled) {
-  color: #2B4AAB;
+  color: #254CAC;
   -webkit-text-decoration: underline;
   text-decoration: underline;
 }
 
 .emotion-0:hover:not(:disabled) svg {
-  fill: #2B4AAB;
+  fill: #254CAC;
 }
 
 .emotion-0:active:not(:disabled) {
-  color: #213A82;
+  color: #14328D;
   -webkit-text-decoration: underline;
   text-decoration: underline;
 }
 
 .emotion-0:active:not(:disabled) svg {
-  fill: #213A82;
+  fill: #14328D;
 }
 
 .emotion-0:visited:not(:disabled) {
-  color: #5E44E4;
+  color: #6454E3;
   -webkit-text-decoration: underline;
   text-decoration: underline;
 }
 
 .emotion-0:visited:not(:disabled) svg {
-  fill: #5E44E4;
+  fill: #6454E3;
 }
 
 .emotion-0:visited:hover:not(:disabled) {
-  color: #5E44E4;
+  color: #6454E3;
   -webkit-text-decoration: underline;
   text-decoration: underline;
 }
 
 .emotion-0:visited:hover:not(:disabled) svg {
-  fill: #5E44E4;
+  fill: #6454E3;
 }
 
 .emotion-0:focus-visible:not(:disabled) {
@@ -156,43 +156,43 @@ exports[`Link does not render the external icon if the href is internal 1`] = `
 }
 
 .emotion-0:hover:not(:disabled) {
-  color: #2B4AAB;
+  color: #254CAC;
   -webkit-text-decoration: underline;
   text-decoration: underline;
 }
 
 .emotion-0:hover:not(:disabled) svg {
-  fill: #2B4AAB;
+  fill: #254CAC;
 }
 
 .emotion-0:active:not(:disabled) {
-  color: #213A82;
+  color: #14328D;
   -webkit-text-decoration: underline;
   text-decoration: underline;
 }
 
 .emotion-0:active:not(:disabled) svg {
-  fill: #213A82;
+  fill: #14328D;
 }
 
 .emotion-0:visited:not(:disabled) {
-  color: #5E44E4;
+  color: #6454E3;
   -webkit-text-decoration: underline;
   text-decoration: underline;
 }
 
 .emotion-0:visited:not(:disabled) svg {
-  fill: #5E44E4;
+  fill: #6454E3;
 }
 
 .emotion-0:visited:hover:not(:disabled) {
-  color: #5E44E4;
+  color: #6454E3;
   -webkit-text-decoration: underline;
   text-decoration: underline;
 }
 
 .emotion-0:visited:hover:not(:disabled) svg {
-  fill: #5E44E4;
+  fill: #6454E3;
 }
 
 .emotion-0:focus-visible:not(:disabled) {
@@ -282,43 +282,43 @@ exports[`Link renders as expected in default state 1`] = `
 }
 
 .emotion-0:hover:not(:disabled) {
-  color: #2B4AAB;
+  color: #254CAC;
   -webkit-text-decoration: underline;
   text-decoration: underline;
 }
 
 .emotion-0:hover:not(:disabled) svg {
-  fill: #2B4AAB;
+  fill: #254CAC;
 }
 
 .emotion-0:active:not(:disabled) {
-  color: #213A82;
+  color: #14328D;
   -webkit-text-decoration: underline;
   text-decoration: underline;
 }
 
 .emotion-0:active:not(:disabled) svg {
-  fill: #213A82;
+  fill: #14328D;
 }
 
 .emotion-0:visited:not(:disabled) {
-  color: #5E44E4;
+  color: #6454E3;
   -webkit-text-decoration: underline;
   text-decoration: underline;
 }
 
 .emotion-0:visited:not(:disabled) svg {
-  fill: #5E44E4;
+  fill: #6454E3;
 }
 
 .emotion-0:visited:hover:not(:disabled) {
-  color: #5E44E4;
+  color: #6454E3;
   -webkit-text-decoration: underline;
   text-decoration: underline;
 }
 
 .emotion-0:visited:hover:not(:disabled) svg {
-  fill: #5E44E4;
+  fill: #6454E3;
 }
 
 .emotion-0:focus-visible:not(:disabled) {
@@ -408,43 +408,43 @@ exports[`Link renders the external icon even if the href is internal 1`] = `
 }
 
 .emotion-0:hover:not(:disabled) {
-  color: #2B4AAB;
+  color: #254CAC;
   -webkit-text-decoration: underline;
   text-decoration: underline;
 }
 
 .emotion-0:hover:not(:disabled) svg {
-  fill: #2B4AAB;
+  fill: #254CAC;
 }
 
 .emotion-0:active:not(:disabled) {
-  color: #213A82;
+  color: #14328D;
   -webkit-text-decoration: underline;
   text-decoration: underline;
 }
 
 .emotion-0:active:not(:disabled) svg {
-  fill: #213A82;
+  fill: #14328D;
 }
 
 .emotion-0:visited:not(:disabled) {
-  color: #5E44E4;
+  color: #6454E3;
   -webkit-text-decoration: underline;
   text-decoration: underline;
 }
 
 .emotion-0:visited:not(:disabled) svg {
-  fill: #5E44E4;
+  fill: #6454E3;
 }
 
 .emotion-0:visited:hover:not(:disabled) {
-  color: #5E44E4;
+  color: #6454E3;
   -webkit-text-decoration: underline;
   text-decoration: underline;
 }
 
 .emotion-0:visited:hover:not(:disabled) svg {
-  fill: #5E44E4;
+  fill: #6454E3;
 }
 
 .emotion-0:focus-visible:not(:disabled) {
@@ -502,7 +502,7 @@ exports[`Link renders the external icon even if the href is internal 1`] = `
   display: inline-block;
   vertical-align: middle;
   overflow: hidden;
-  fill: #2E2E2E;
+  fill: #3B3B3B;
   vertical-align: unset;
   display: inline-block;
 }
@@ -602,43 +602,43 @@ exports[`Link renders the external icon if the href is external 1`] = `
 }
 
 .emotion-0:hover:not(:disabled) {
-  color: #2B4AAB;
+  color: #254CAC;
   -webkit-text-decoration: underline;
   text-decoration: underline;
 }
 
 .emotion-0:hover:not(:disabled) svg {
-  fill: #2B4AAB;
+  fill: #254CAC;
 }
 
 .emotion-0:active:not(:disabled) {
-  color: #213A82;
+  color: #14328D;
   -webkit-text-decoration: underline;
   text-decoration: underline;
 }
 
 .emotion-0:active:not(:disabled) svg {
-  fill: #213A82;
+  fill: #14328D;
 }
 
 .emotion-0:visited:not(:disabled) {
-  color: #5E44E4;
+  color: #6454E3;
   -webkit-text-decoration: underline;
   text-decoration: underline;
 }
 
 .emotion-0:visited:not(:disabled) svg {
-  fill: #5E44E4;
+  fill: #6454E3;
 }
 
 .emotion-0:visited:hover:not(:disabled) {
-  color: #5E44E4;
+  color: #6454E3;
   -webkit-text-decoration: underline;
   text-decoration: underline;
 }
 
 .emotion-0:visited:hover:not(:disabled) svg {
-  fill: #5E44E4;
+  fill: #6454E3;
 }
 
 .emotion-0:focus-visible:not(:disabled) {
@@ -730,43 +730,43 @@ exports[`Link renders with logical props overrides 1`] = `
 }
 
 .emotion-0:hover:not(:disabled) {
-  color: #2B4AAB;
+  color: #254CAC;
   -webkit-text-decoration: underline;
   text-decoration: underline;
 }
 
 .emotion-0:hover:not(:disabled) svg {
-  fill: #2B4AAB;
+  fill: #254CAC;
 }
 
 .emotion-0:active:not(:disabled) {
-  color: #213A82;
+  color: #14328D;
   -webkit-text-decoration: underline;
   text-decoration: underline;
 }
 
 .emotion-0:active:not(:disabled) svg {
-  fill: #213A82;
+  fill: #14328D;
 }
 
 .emotion-0:visited:not(:disabled) {
-  color: #5E44E4;
+  color: #6454E3;
   -webkit-text-decoration: underline;
   text-decoration: underline;
 }
 
 .emotion-0:visited:not(:disabled) svg {
-  fill: #5E44E4;
+  fill: #6454E3;
 }
 
 .emotion-0:visited:hover:not(:disabled) {
-  color: #5E44E4;
+  color: #6454E3;
   -webkit-text-decoration: underline;
   text-decoration: underline;
 }
 
 .emotion-0:visited:hover:not(:disabled) svg {
-  fill: #5E44E4;
+  fill: #6454E3;
 }
 
 .emotion-0:focus-visible:not(:disabled) {
@@ -830,7 +830,7 @@ exports[`Link renders with overrides 1`] = `
 
   .emotion-0 {
   display: inline-block;
-  color: #EF1703;
+  color: #D60000;
 }
 
 @media screen and (prefers-reduced-motion: no-preference) {
@@ -850,11 +850,11 @@ exports[`Link renders with overrides 1`] = `
 }
 
 .emotion-0:visited:not(:disabled) {
-  color: #A60100;
+  color: #820000;
 }
 
 .emotion-0:hover:not(:disabled) {
-  color: #23A248;
+  color: #007B22;
 }
 
 .emotion-1 {
@@ -947,23 +947,23 @@ exports[`LinkStandalone renders as expected in default state 1`] = `
 }
 
 .emotion-0:hover:not(:disabled) {
-  color: #2B4AAB;
+  color: #254CAC;
   -webkit-text-decoration: underline;
   text-decoration: underline;
 }
 
 .emotion-0:hover:not(:disabled) svg {
-  fill: #2B4AAB;
+  fill: #254CAC;
 }
 
 .emotion-0:active:not(:disabled) {
-  color: #213A82;
+  color: #14328D;
   -webkit-text-decoration: underline;
   text-decoration: underline;
 }
 
 .emotion-0:active:not(:disabled) svg {
-  fill: #213A82;
+  fill: #14328D;
 }
 
 .emotion-0:focus-visible:not(:disabled) {
@@ -1073,23 +1073,23 @@ exports[`LinkStandalone renders with logical props overrides 1`] = `
 }
 
 .emotion-0:hover:not(:disabled) {
-  color: #2B4AAB;
+  color: #254CAC;
   -webkit-text-decoration: underline;
   text-decoration: underline;
 }
 
 .emotion-0:hover:not(:disabled) svg {
-  fill: #2B4AAB;
+  fill: #254CAC;
 }
 
 .emotion-0:active:not(:disabled) {
-  color: #213A82;
+  color: #14328D;
   -webkit-text-decoration: underline;
   text-decoration: underline;
 }
 
 .emotion-0:active:not(:disabled) svg {
-  fill: #213A82;
+  fill: #14328D;
 }
 
 .emotion-0:focus-visible:not(:disabled) {
diff --git a/src/menu/__tests__/__snapshots__/menu.test.tsx.snap b/src/menu/__tests__/__snapshots__/menu.test.tsx.snap
index fa19d618e3..c6e86d8e58 100644
--- a/src/menu/__tests__/__snapshots__/menu.test.tsx.snap
+++ b/src/menu/__tests__/__snapshots__/menu.test.tsx.snap
@@ -74,7 +74,7 @@ exports[`Menu renders horizontally with menu dividers 1`] = `
   border-style: solid;
   border-color: transparent;
   border-width: 0 0 2px 0;
-  color: #535353;
+  color: #6A6A6A;
   margin: 0;
   cursor: pointer;
   -webkit-box-pack: center;
@@ -90,42 +90,42 @@ exports[`Menu renders horizontally with menu dividers 1`] = `
 }
 
 .emotion-3 svg {
-  fill: #535353;
+  fill: #6A6A6A;
 }
 
 .emotion-3:hover:not(:disabled) {
   border-color: #3358CC;
-  color: #2E2E2E;
+  color: #3B3B3B;
 }
 
 .emotion-3:hover:not(:disabled) svg {
-  fill: #2E2E2E;
+  fill: #3B3B3B;
 }
 
 .emotion-3:active:not(:disabled) {
-  border-color: #2B4AAB;
-  color: #0A0A0A;
+  border-color: #254CAC;
+  color: #111111;
 }
 
 .emotion-3:active:not(:disabled) svg {
-  fill: #0A0A0A;
+  fill: #111111;
 }
 
 .emotion-3:selected:hover:not(:disabled) {
   border-color: #3358CC;
-  color: #2E2E2E;
+  color: #3B3B3B;
 }
 
 .emotion-3:selected:hover:not(:disabled) svg {
-  fill: #2E2E2E;
+  fill: #3B3B3B;
 }
 
 .emotion-3:disabled {
-  color: #C0C0C0;
+  color: #ABABAB;
 }
 
 .emotion-3:disabled svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-3:focus-visible:not(:disabled) {
@@ -226,7 +226,7 @@ exports[`Menu renders horizontally with menu dividers 1`] = `
 
 .emotion-8 {
   border-style: solid;
-  border-color: #DEDEDE;
+  border-color: #C6C6C6;
   border-width: 1px;
   border-width: 0px;
   margin: 0;
@@ -461,7 +461,7 @@ exports[`Menu renders horizontally with menu group 1`] = `
   border-style: solid;
   border-color: transparent;
   border-width: 0 0 2px 0;
-  color: #535353;
+  color: #6A6A6A;
   margin: 0;
   cursor: pointer;
   -webkit-box-pack: center;
@@ -477,42 +477,42 @@ exports[`Menu renders horizontally with menu group 1`] = `
 }
 
 .emotion-3 svg {
-  fill: #535353;
+  fill: #6A6A6A;
 }
 
 .emotion-3:hover:not(:disabled) {
   border-color: #3358CC;
-  color: #2E2E2E;
+  color: #3B3B3B;
 }
 
 .emotion-3:hover:not(:disabled) svg {
-  fill: #2E2E2E;
+  fill: #3B3B3B;
 }
 
 .emotion-3:active:not(:disabled) {
-  border-color: #2B4AAB;
-  color: #0A0A0A;
+  border-color: #254CAC;
+  color: #111111;
 }
 
 .emotion-3:active:not(:disabled) svg {
-  fill: #0A0A0A;
+  fill: #111111;
 }
 
 .emotion-3:selected:hover:not(:disabled) {
   border-color: #3358CC;
-  color: #2E2E2E;
+  color: #3B3B3B;
 }
 
 .emotion-3:selected:hover:not(:disabled) svg {
-  fill: #2E2E2E;
+  fill: #3B3B3B;
 }
 
 .emotion-3:disabled {
-  color: #C0C0C0;
+  color: #ABABAB;
 }
 
 .emotion-3:disabled svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-3:focus-visible:not(:disabled) {
@@ -774,7 +774,7 @@ exports[`Menu renders horizontally with menu items 1`] = `
   border-style: solid;
   border-color: transparent;
   border-width: 0 0 2px 0;
-  color: #535353;
+  color: #6A6A6A;
   margin: 0;
   cursor: pointer;
   -webkit-box-pack: center;
@@ -790,42 +790,42 @@ exports[`Menu renders horizontally with menu items 1`] = `
 }
 
 .emotion-2 svg {
-  fill: #535353;
+  fill: #6A6A6A;
 }
 
 .emotion-2:hover:not(:disabled) {
   border-color: #3358CC;
-  color: #2E2E2E;
+  color: #3B3B3B;
 }
 
 .emotion-2:hover:not(:disabled) svg {
-  fill: #2E2E2E;
+  fill: #3B3B3B;
 }
 
 .emotion-2:active:not(:disabled) {
-  border-color: #2B4AAB;
-  color: #0A0A0A;
+  border-color: #254CAC;
+  color: #111111;
 }
 
 .emotion-2:active:not(:disabled) svg {
-  fill: #0A0A0A;
+  fill: #111111;
 }
 
 .emotion-2:selected:hover:not(:disabled) {
   border-color: #3358CC;
-  color: #2E2E2E;
+  color: #3B3B3B;
 }
 
 .emotion-2:selected:hover:not(:disabled) svg {
-  fill: #2E2E2E;
+  fill: #3B3B3B;
 }
 
 .emotion-2:disabled {
-  color: #C0C0C0;
+  color: #ABABAB;
 }
 
 .emotion-2:disabled svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-2:focus-visible:not(:disabled) {
@@ -1090,7 +1090,7 @@ exports[`Menu renders vertically with menu dividers 1`] = `
   border-style: solid;
   border-color: transparent;
   border-width: 0 2px 0 0;
-  color: #535353;
+  color: #6A6A6A;
   margin: 0;
   cursor: pointer;
   -webkit-box-pack: start;
@@ -1106,11 +1106,11 @@ exports[`Menu renders vertically with menu dividers 1`] = `
 }
 
 .emotion-3 svg {
-  fill: #535353;
+  fill: #6A6A6A;
 }
 
 .emotion-3:hover:not(:disabled) {
-  background-color: #E0E7FF;
+  background-color: #ECF1FF;
   color: #3358CC;
 }
 
@@ -1119,7 +1119,7 @@ exports[`Menu renders vertically with menu dividers 1`] = `
 }
 
 .emotion-3:active:not(:disabled) {
-  background-color: #AEBFFF;
+  background-color: #D5E0FC;
   color: #3358CC;
 }
 
@@ -1138,11 +1138,11 @@ exports[`Menu renders vertically with menu dividers 1`] = `
 }
 
 .emotion-3:disabled {
-  color: #C0C0C0;
+  color: #ABABAB;
 }
 
 .emotion-3:disabled svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-3:focus-visible:not(:disabled) {
@@ -1243,7 +1243,7 @@ exports[`Menu renders vertically with menu dividers 1`] = `
 
 .emotion-8 {
   border-style: solid;
-  border-color: #DEDEDE;
+  border-color: #C6C6C6;
   border-width: 1px;
   border-width: 0px;
   margin: 0;
@@ -1476,7 +1476,7 @@ exports[`Menu renders vertically with menu group 1`] = `
   border-style: solid;
   border-color: transparent;
   border-width: 0 2px 0 0;
-  color: #535353;
+  color: #6A6A6A;
   margin: 0;
   cursor: pointer;
   -webkit-box-pack: start;
@@ -1492,11 +1492,11 @@ exports[`Menu renders vertically with menu group 1`] = `
 }
 
 .emotion-3 svg {
-  fill: #535353;
+  fill: #6A6A6A;
 }
 
 .emotion-3:hover:not(:disabled) {
-  background-color: #E0E7FF;
+  background-color: #ECF1FF;
   color: #3358CC;
 }
 
@@ -1505,7 +1505,7 @@ exports[`Menu renders vertically with menu group 1`] = `
 }
 
 .emotion-3:active:not(:disabled) {
-  background-color: #AEBFFF;
+  background-color: #D5E0FC;
   color: #3358CC;
 }
 
@@ -1524,11 +1524,11 @@ exports[`Menu renders vertically with menu group 1`] = `
 }
 
 .emotion-3:disabled {
-  color: #C0C0C0;
+  color: #ABABAB;
 }
 
 .emotion-3:disabled svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-3:focus-visible:not(:disabled) {
@@ -1793,7 +1793,7 @@ exports[`Menu renders vertically with menu items 1`] = `
   border-style: solid;
   border-color: transparent;
   border-width: 0 2px 0 0;
-  color: #535353;
+  color: #6A6A6A;
   margin: 0;
   cursor: pointer;
   -webkit-box-pack: start;
@@ -1809,11 +1809,11 @@ exports[`Menu renders vertically with menu items 1`] = `
 }
 
 .emotion-2 svg {
-  fill: #535353;
+  fill: #6A6A6A;
 }
 
 .emotion-2:hover:not(:disabled) {
-  background-color: #E0E7FF;
+  background-color: #ECF1FF;
   color: #3358CC;
 }
 
@@ -1822,7 +1822,7 @@ exports[`Menu renders vertically with menu items 1`] = `
 }
 
 .emotion-2:active:not(:disabled) {
-  background-color: #AEBFFF;
+  background-color: #D5E0FC;
   color: #3358CC;
 }
 
@@ -1841,11 +1841,11 @@ exports[`Menu renders vertically with menu items 1`] = `
 }
 
 .emotion-2:disabled {
-  color: #C0C0C0;
+  color: #ABABAB;
 }
 
 .emotion-2:disabled svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-2:focus-visible:not(:disabled) {
@@ -2098,7 +2098,7 @@ exports[`Menu renders with Large size menu items 1`] = `
   border-style: solid;
   border-color: transparent;
   border-width: 0 2px 0 0;
-  color: #535353;
+  color: #6A6A6A;
   margin: 0;
   cursor: pointer;
   -webkit-box-pack: start;
@@ -2114,11 +2114,11 @@ exports[`Menu renders with Large size menu items 1`] = `
 }
 
 .emotion-2 svg {
-  fill: #535353;
+  fill: #6A6A6A;
 }
 
 .emotion-2:hover:not(:disabled) {
-  background-color: #E0E7FF;
+  background-color: #ECF1FF;
   color: #3358CC;
 }
 
@@ -2127,7 +2127,7 @@ exports[`Menu renders with Large size menu items 1`] = `
 }
 
 .emotion-2:active:not(:disabled) {
-  background-color: #AEBFFF;
+  background-color: #D5E0FC;
   color: #3358CC;
 }
 
@@ -2146,11 +2146,11 @@ exports[`Menu renders with Large size menu items 1`] = `
 }
 
 .emotion-2:disabled {
-  color: #C0C0C0;
+  color: #ABABAB;
 }
 
 .emotion-2:disabled svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-2:focus-visible:not(:disabled) {
@@ -2400,7 +2400,7 @@ exports[`Menu renders with Large size menu items 2`] = `
   border-style: solid;
   border-color: transparent;
   border-width: 0 0 2px 0;
-  color: #535353;
+  color: #6A6A6A;
   margin: 0;
   cursor: pointer;
   -webkit-box-pack: center;
@@ -2416,42 +2416,42 @@ exports[`Menu renders with Large size menu items 2`] = `
 }
 
 .emotion-2 svg {
-  fill: #535353;
+  fill: #6A6A6A;
 }
 
 .emotion-2:hover:not(:disabled) {
   border-color: #3358CC;
-  color: #2E2E2E;
+  color: #3B3B3B;
 }
 
 .emotion-2:hover:not(:disabled) svg {
-  fill: #2E2E2E;
+  fill: #3B3B3B;
 }
 
 .emotion-2:active:not(:disabled) {
-  border-color: #2B4AAB;
-  color: #0A0A0A;
+  border-color: #254CAC;
+  color: #111111;
 }
 
 .emotion-2:active:not(:disabled) svg {
-  fill: #0A0A0A;
+  fill: #111111;
 }
 
 .emotion-2:selected:hover:not(:disabled) {
   border-color: #3358CC;
-  color: #2E2E2E;
+  color: #3B3B3B;
 }
 
 .emotion-2:selected:hover:not(:disabled) svg {
-  fill: #2E2E2E;
+  fill: #3B3B3B;
 }
 
 .emotion-2:disabled {
-  color: #C0C0C0;
+  color: #ABABAB;
 }
 
 .emotion-2:disabled svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-2:focus-visible:not(:disabled) {
@@ -2704,7 +2704,7 @@ exports[`Menu renders with Medium size menu items 1`] = `
   border-style: solid;
   border-color: transparent;
   border-width: 0 2px 0 0;
-  color: #535353;
+  color: #6A6A6A;
   margin: 0;
   cursor: pointer;
   -webkit-box-pack: start;
@@ -2720,11 +2720,11 @@ exports[`Menu renders with Medium size menu items 1`] = `
 }
 
 .emotion-2 svg {
-  fill: #535353;
+  fill: #6A6A6A;
 }
 
 .emotion-2:hover:not(:disabled) {
-  background-color: #E0E7FF;
+  background-color: #ECF1FF;
   color: #3358CC;
 }
 
@@ -2733,7 +2733,7 @@ exports[`Menu renders with Medium size menu items 1`] = `
 }
 
 .emotion-2:active:not(:disabled) {
-  background-color: #AEBFFF;
+  background-color: #D5E0FC;
   color: #3358CC;
 }
 
@@ -2752,11 +2752,11 @@ exports[`Menu renders with Medium size menu items 1`] = `
 }
 
 .emotion-2:disabled {
-  color: #C0C0C0;
+  color: #ABABAB;
 }
 
 .emotion-2:disabled svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-2:focus-visible:not(:disabled) {
@@ -3006,7 +3006,7 @@ exports[`Menu renders with Medium size menu items 2`] = `
   border-style: solid;
   border-color: transparent;
   border-width: 0 0 2px 0;
-  color: #535353;
+  color: #6A6A6A;
   margin: 0;
   cursor: pointer;
   -webkit-box-pack: center;
@@ -3022,42 +3022,42 @@ exports[`Menu renders with Medium size menu items 2`] = `
 }
 
 .emotion-2 svg {
-  fill: #535353;
+  fill: #6A6A6A;
 }
 
 .emotion-2:hover:not(:disabled) {
   border-color: #3358CC;
-  color: #2E2E2E;
+  color: #3B3B3B;
 }
 
 .emotion-2:hover:not(:disabled) svg {
-  fill: #2E2E2E;
+  fill: #3B3B3B;
 }
 
 .emotion-2:active:not(:disabled) {
-  border-color: #2B4AAB;
-  color: #0A0A0A;
+  border-color: #254CAC;
+  color: #111111;
 }
 
 .emotion-2:active:not(:disabled) svg {
-  fill: #0A0A0A;
+  fill: #111111;
 }
 
 .emotion-2:selected:hover:not(:disabled) {
   border-color: #3358CC;
-  color: #2E2E2E;
+  color: #3B3B3B;
 }
 
 .emotion-2:selected:hover:not(:disabled) svg {
-  fill: #2E2E2E;
+  fill: #3B3B3B;
 }
 
 .emotion-2:disabled {
-  color: #C0C0C0;
+  color: #ABABAB;
 }
 
 .emotion-2:disabled svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-2:focus-visible:not(:disabled) {
@@ -3310,7 +3310,7 @@ exports[`Menu renders with Small size menu items 1`] = `
   border-style: solid;
   border-color: transparent;
   border-width: 0 2px 0 0;
-  color: #535353;
+  color: #6A6A6A;
   margin: 0;
   cursor: pointer;
   -webkit-box-pack: start;
@@ -3326,11 +3326,11 @@ exports[`Menu renders with Small size menu items 1`] = `
 }
 
 .emotion-2 svg {
-  fill: #535353;
+  fill: #6A6A6A;
 }
 
 .emotion-2:hover:not(:disabled) {
-  background-color: #E0E7FF;
+  background-color: #ECF1FF;
   color: #3358CC;
 }
 
@@ -3339,7 +3339,7 @@ exports[`Menu renders with Small size menu items 1`] = `
 }
 
 .emotion-2:active:not(:disabled) {
-  background-color: #AEBFFF;
+  background-color: #D5E0FC;
   color: #3358CC;
 }
 
@@ -3358,11 +3358,11 @@ exports[`Menu renders with Small size menu items 1`] = `
 }
 
 .emotion-2:disabled {
-  color: #C0C0C0;
+  color: #ABABAB;
 }
 
 .emotion-2:disabled svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-2:focus-visible:not(:disabled) {
@@ -3612,7 +3612,7 @@ exports[`Menu renders with Small size menu items 2`] = `
   border-style: solid;
   border-color: transparent;
   border-width: 0 0 2px 0;
-  color: #535353;
+  color: #6A6A6A;
   margin: 0;
   cursor: pointer;
   -webkit-box-pack: center;
@@ -3628,42 +3628,42 @@ exports[`Menu renders with Small size menu items 2`] = `
 }
 
 .emotion-2 svg {
-  fill: #535353;
+  fill: #6A6A6A;
 }
 
 .emotion-2:hover:not(:disabled) {
   border-color: #3358CC;
-  color: #2E2E2E;
+  color: #3B3B3B;
 }
 
 .emotion-2:hover:not(:disabled) svg {
-  fill: #2E2E2E;
+  fill: #3B3B3B;
 }
 
 .emotion-2:active:not(:disabled) {
-  border-color: #2B4AAB;
-  color: #0A0A0A;
+  border-color: #254CAC;
+  color: #111111;
 }
 
 .emotion-2:active:not(:disabled) svg {
-  fill: #0A0A0A;
+  fill: #111111;
 }
 
 .emotion-2:selected:hover:not(:disabled) {
   border-color: #3358CC;
-  color: #2E2E2E;
+  color: #3B3B3B;
 }
 
 .emotion-2:selected:hover:not(:disabled) svg {
-  fill: #2E2E2E;
+  fill: #3B3B3B;
 }
 
 .emotion-2:disabled {
-  color: #C0C0C0;
+  color: #ABABAB;
 }
 
 .emotion-2:disabled svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-2:focus-visible:not(:disabled) {
@@ -3913,7 +3913,7 @@ exports[`Menu renders with default props 1`] = `
   border-style: solid;
   border-color: transparent;
   border-width: 0 0 2px 0;
-  color: #535353;
+  color: #6A6A6A;
   margin: 0;
   cursor: pointer;
   -webkit-box-pack: center;
@@ -3929,42 +3929,42 @@ exports[`Menu renders with default props 1`] = `
 }
 
 .emotion-2 svg {
-  fill: #535353;
+  fill: #6A6A6A;
 }
 
 .emotion-2:hover:not(:disabled) {
   border-color: #3358CC;
-  color: #2E2E2E;
+  color: #3B3B3B;
 }
 
 .emotion-2:hover:not(:disabled) svg {
-  fill: #2E2E2E;
+  fill: #3B3B3B;
 }
 
 .emotion-2:active:not(:disabled) {
-  border-color: #2B4AAB;
-  color: #0A0A0A;
+  border-color: #254CAC;
+  color: #111111;
 }
 
 .emotion-2:active:not(:disabled) svg {
-  fill: #0A0A0A;
+  fill: #111111;
 }
 
 .emotion-2:selected:hover:not(:disabled) {
   border-color: #3358CC;
-  color: #2E2E2E;
+  color: #3B3B3B;
 }
 
 .emotion-2:selected:hover:not(:disabled) svg {
-  fill: #2E2E2E;
+  fill: #3B3B3B;
 }
 
 .emotion-2:disabled {
-  color: #C0C0C0;
+  color: #ABABAB;
 }
 
 .emotion-2:disabled svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-2:focus-visible:not(:disabled) {
@@ -4216,7 +4216,7 @@ exports[`Menu renders with logical prop overrides 1`] = `
   border-style: solid;
   border-color: transparent;
   border-width: 0 0 2px 0;
-  color: #535353;
+  color: #6A6A6A;
   margin: 0;
   cursor: pointer;
   -webkit-box-pack: center;
@@ -4232,42 +4232,42 @@ exports[`Menu renders with logical prop overrides 1`] = `
 }
 
 .emotion-2 svg {
-  fill: #535353;
+  fill: #6A6A6A;
 }
 
 .emotion-2:hover:not(:disabled) {
   border-color: #3358CC;
-  color: #2E2E2E;
+  color: #3B3B3B;
 }
 
 .emotion-2:hover:not(:disabled) svg {
-  fill: #2E2E2E;
+  fill: #3B3B3B;
 }
 
 .emotion-2:active:not(:disabled) {
-  border-color: #2B4AAB;
-  color: #0A0A0A;
+  border-color: #254CAC;
+  color: #111111;
 }
 
 .emotion-2:active:not(:disabled) svg {
-  fill: #0A0A0A;
+  fill: #111111;
 }
 
 .emotion-2:selected:hover:not(:disabled) {
   border-color: #3358CC;
-  color: #2E2E2E;
+  color: #3B3B3B;
 }
 
 .emotion-2:selected:hover:not(:disabled) svg {
-  fill: #2E2E2E;
+  fill: #3B3B3B;
 }
 
 .emotion-2:disabled {
-  color: #C0C0C0;
+  color: #ABABAB;
 }
 
 .emotion-2:disabled svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-2:focus-visible:not(:disabled) {
@@ -4520,7 +4520,7 @@ exports[`Menu renders with menu items aligned at the Center 1`] = `
   border-style: solid;
   border-color: transparent;
   border-width: 0 2px 0 0;
-  color: #535353;
+  color: #6A6A6A;
   margin: 0;
   cursor: pointer;
   -webkit-box-pack: center;
@@ -4536,11 +4536,11 @@ exports[`Menu renders with menu items aligned at the Center 1`] = `
 }
 
 .emotion-2 svg {
-  fill: #535353;
+  fill: #6A6A6A;
 }
 
 .emotion-2:hover:not(:disabled) {
-  background-color: #E0E7FF;
+  background-color: #ECF1FF;
   color: #3358CC;
 }
 
@@ -4549,7 +4549,7 @@ exports[`Menu renders with menu items aligned at the Center 1`] = `
 }
 
 .emotion-2:active:not(:disabled) {
-  background-color: #AEBFFF;
+  background-color: #D5E0FC;
   color: #3358CC;
 }
 
@@ -4568,11 +4568,11 @@ exports[`Menu renders with menu items aligned at the Center 1`] = `
 }
 
 .emotion-2:disabled {
-  color: #C0C0C0;
+  color: #ABABAB;
 }
 
 .emotion-2:disabled svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-2:focus-visible:not(:disabled) {
@@ -4822,7 +4822,7 @@ exports[`Menu renders with menu items aligned at the Center 2`] = `
   border-style: solid;
   border-color: transparent;
   border-width: 0 0 2px 0;
-  color: #535353;
+  color: #6A6A6A;
   margin: 0;
   cursor: pointer;
   -webkit-box-pack: center;
@@ -4838,42 +4838,42 @@ exports[`Menu renders with menu items aligned at the Center 2`] = `
 }
 
 .emotion-2 svg {
-  fill: #535353;
+  fill: #6A6A6A;
 }
 
 .emotion-2:hover:not(:disabled) {
   border-color: #3358CC;
-  color: #2E2E2E;
+  color: #3B3B3B;
 }
 
 .emotion-2:hover:not(:disabled) svg {
-  fill: #2E2E2E;
+  fill: #3B3B3B;
 }
 
 .emotion-2:active:not(:disabled) {
-  border-color: #2B4AAB;
-  color: #0A0A0A;
+  border-color: #254CAC;
+  color: #111111;
 }
 
 .emotion-2:active:not(:disabled) svg {
-  fill: #0A0A0A;
+  fill: #111111;
 }
 
 .emotion-2:selected:hover:not(:disabled) {
   border-color: #3358CC;
-  color: #2E2E2E;
+  color: #3B3B3B;
 }
 
 .emotion-2:selected:hover:not(:disabled) svg {
-  fill: #2E2E2E;
+  fill: #3B3B3B;
 }
 
 .emotion-2:disabled {
-  color: #C0C0C0;
+  color: #ABABAB;
 }
 
 .emotion-2:disabled svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-2:focus-visible:not(:disabled) {
@@ -5126,7 +5126,7 @@ exports[`Menu renders with menu items aligned at the End 1`] = `
   border-style: solid;
   border-color: transparent;
   border-width: 0 2px 0 0;
-  color: #535353;
+  color: #6A6A6A;
   margin: 0;
   cursor: pointer;
   -webkit-box-pack: end;
@@ -5142,11 +5142,11 @@ exports[`Menu renders with menu items aligned at the End 1`] = `
 }
 
 .emotion-2 svg {
-  fill: #535353;
+  fill: #6A6A6A;
 }
 
 .emotion-2:hover:not(:disabled) {
-  background-color: #E0E7FF;
+  background-color: #ECF1FF;
   color: #3358CC;
 }
 
@@ -5155,7 +5155,7 @@ exports[`Menu renders with menu items aligned at the End 1`] = `
 }
 
 .emotion-2:active:not(:disabled) {
-  background-color: #AEBFFF;
+  background-color: #D5E0FC;
   color: #3358CC;
 }
 
@@ -5174,11 +5174,11 @@ exports[`Menu renders with menu items aligned at the End 1`] = `
 }
 
 .emotion-2:disabled {
-  color: #C0C0C0;
+  color: #ABABAB;
 }
 
 .emotion-2:disabled svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-2:focus-visible:not(:disabled) {
@@ -5428,7 +5428,7 @@ exports[`Menu renders with menu items aligned at the End 2`] = `
   border-style: solid;
   border-color: transparent;
   border-width: 0 0 2px 0;
-  color: #535353;
+  color: #6A6A6A;
   margin: 0;
   cursor: pointer;
   -webkit-box-pack: end;
@@ -5444,42 +5444,42 @@ exports[`Menu renders with menu items aligned at the End 2`] = `
 }
 
 .emotion-2 svg {
-  fill: #535353;
+  fill: #6A6A6A;
 }
 
 .emotion-2:hover:not(:disabled) {
   border-color: #3358CC;
-  color: #2E2E2E;
+  color: #3B3B3B;
 }
 
 .emotion-2:hover:not(:disabled) svg {
-  fill: #2E2E2E;
+  fill: #3B3B3B;
 }
 
 .emotion-2:active:not(:disabled) {
-  border-color: #2B4AAB;
-  color: #0A0A0A;
+  border-color: #254CAC;
+  color: #111111;
 }
 
 .emotion-2:active:not(:disabled) svg {
-  fill: #0A0A0A;
+  fill: #111111;
 }
 
 .emotion-2:selected:hover:not(:disabled) {
   border-color: #3358CC;
-  color: #2E2E2E;
+  color: #3B3B3B;
 }
 
 .emotion-2:selected:hover:not(:disabled) svg {
-  fill: #2E2E2E;
+  fill: #3B3B3B;
 }
 
 .emotion-2:disabled {
-  color: #C0C0C0;
+  color: #ABABAB;
 }
 
 .emotion-2:disabled svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-2:focus-visible:not(:disabled) {
@@ -5732,7 +5732,7 @@ exports[`Menu renders with menu items aligned at the Start 1`] = `
   border-style: solid;
   border-color: transparent;
   border-width: 0 2px 0 0;
-  color: #535353;
+  color: #6A6A6A;
   margin: 0;
   cursor: pointer;
   -webkit-box-pack: start;
@@ -5748,11 +5748,11 @@ exports[`Menu renders with menu items aligned at the Start 1`] = `
 }
 
 .emotion-2 svg {
-  fill: #535353;
+  fill: #6A6A6A;
 }
 
 .emotion-2:hover:not(:disabled) {
-  background-color: #E0E7FF;
+  background-color: #ECF1FF;
   color: #3358CC;
 }
 
@@ -5761,7 +5761,7 @@ exports[`Menu renders with menu items aligned at the Start 1`] = `
 }
 
 .emotion-2:active:not(:disabled) {
-  background-color: #AEBFFF;
+  background-color: #D5E0FC;
   color: #3358CC;
 }
 
@@ -5780,11 +5780,11 @@ exports[`Menu renders with menu items aligned at the Start 1`] = `
 }
 
 .emotion-2:disabled {
-  color: #C0C0C0;
+  color: #ABABAB;
 }
 
 .emotion-2:disabled svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-2:focus-visible:not(:disabled) {
@@ -6034,7 +6034,7 @@ exports[`Menu renders with menu items aligned at the Start 2`] = `
   border-style: solid;
   border-color: transparent;
   border-width: 0 0 2px 0;
-  color: #535353;
+  color: #6A6A6A;
   margin: 0;
   cursor: pointer;
   -webkit-box-pack: start;
@@ -6050,42 +6050,42 @@ exports[`Menu renders with menu items aligned at the Start 2`] = `
 }
 
 .emotion-2 svg {
-  fill: #535353;
+  fill: #6A6A6A;
 }
 
 .emotion-2:hover:not(:disabled) {
   border-color: #3358CC;
-  color: #2E2E2E;
+  color: #3B3B3B;
 }
 
 .emotion-2:hover:not(:disabled) svg {
-  fill: #2E2E2E;
+  fill: #3B3B3B;
 }
 
 .emotion-2:active:not(:disabled) {
-  border-color: #2B4AAB;
-  color: #0A0A0A;
+  border-color: #254CAC;
+  color: #111111;
 }
 
 .emotion-2:active:not(:disabled) svg {
-  fill: #0A0A0A;
+  fill: #111111;
 }
 
 .emotion-2:selected:hover:not(:disabled) {
   border-color: #3358CC;
-  color: #2E2E2E;
+  color: #3B3B3B;
 }
 
 .emotion-2:selected:hover:not(:disabled) svg {
-  fill: #2E2E2E;
+  fill: #3B3B3B;
 }
 
 .emotion-2:disabled {
-  color: #C0C0C0;
+  color: #ABABAB;
 }
 
 .emotion-2:disabled svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-2:focus-visible:not(:disabled) {
@@ -6317,7 +6317,7 @@ exports[`MenuDivider renders horizontally 1`] = `
 
 .emotion-2 {
   border-style: solid;
-  border-color: #DEDEDE;
+  border-color: #C6C6C6;
   border-width: 1px;
   border-width: 0px;
   margin: 0;
@@ -6386,7 +6386,7 @@ exports[`MenuDivider renders vertically with default props 1`] = `
 
 .emotion-2 {
   border-style: solid;
-  border-color: #DEDEDE;
+  border-color: #C6C6C6;
   border-width: 1px;
   border-width: 0px;
   margin: 0;
@@ -6550,7 +6550,7 @@ exports[`MenuGroup renders with overrides 1`] = `
 
 .emotion-3 {
   margin: 0;
-  color: #535353;
+  color: #6A6A6A;
   font-family: "Poppins",sans-serif;
   font-size: 18px;
   line-height: 20.25px;
@@ -6560,7 +6560,7 @@ exports[`MenuGroup renders with overrides 1`] = `
 }
 
 .emotion-3 svg {
-  fill: #535353;
+  fill: #6A6A6A;
 }
 
 .emotion-3::before {
@@ -6610,7 +6610,7 @@ exports[`MenuGroup renders with overrides 1`] = `
   border-style: solid;
   border-color: transparent;
   border-width: 0 2px 0 0;
-  color: #535353;
+  color: #6A6A6A;
   margin: 0;
   cursor: pointer;
   -webkit-box-pack: start;
@@ -6626,11 +6626,11 @@ exports[`MenuGroup renders with overrides 1`] = `
 }
 
 .emotion-5 svg {
-  fill: #535353;
+  fill: #6A6A6A;
 }
 
 .emotion-5:hover:not(:disabled) {
-  background-color: #E0E7FF;
+  background-color: #ECF1FF;
   color: #3358CC;
 }
 
@@ -6639,7 +6639,7 @@ exports[`MenuGroup renders with overrides 1`] = `
 }
 
 .emotion-5:active:not(:disabled) {
-  background-color: #AEBFFF;
+  background-color: #D5E0FC;
   color: #3358CC;
 }
 
@@ -6658,11 +6658,11 @@ exports[`MenuGroup renders with overrides 1`] = `
 }
 
 .emotion-5:disabled {
-  color: #C0C0C0;
+  color: #ABABAB;
 }
 
 .emotion-5:disabled svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-5:focus-visible:not(:disabled) {
@@ -6919,7 +6919,7 @@ exports[`MenuGroup renders with title as a component 1`] = `
   display: inline-block;
   vertical-align: middle;
   overflow: hidden;
-  fill: #2E2E2E;
+  fill: #3B3B3B;
   vertical-align: unset;
   display: inline-block;
 }
@@ -6980,7 +6980,7 @@ exports[`MenuGroup renders with title as a component 1`] = `
   border-style: solid;
   border-color: transparent;
   border-width: 0 2px 0 0;
-  color: #535353;
+  color: #6A6A6A;
   margin: 0;
   cursor: pointer;
   -webkit-box-pack: start;
@@ -6996,11 +6996,11 @@ exports[`MenuGroup renders with title as a component 1`] = `
 }
 
 .emotion-8 svg {
-  fill: #535353;
+  fill: #6A6A6A;
 }
 
 .emotion-8:hover:not(:disabled) {
-  background-color: #E0E7FF;
+  background-color: #ECF1FF;
   color: #3358CC;
 }
 
@@ -7009,7 +7009,7 @@ exports[`MenuGroup renders with title as a component 1`] = `
 }
 
 .emotion-8:active:not(:disabled) {
-  background-color: #AEBFFF;
+  background-color: #D5E0FC;
   color: #3358CC;
 }
 
@@ -7028,11 +7028,11 @@ exports[`MenuGroup renders with title as a component 1`] = `
 }
 
 .emotion-8:disabled {
-  color: #C0C0C0;
+  color: #ABABAB;
 }
 
 .emotion-8:disabled svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-8:focus-visible:not(:disabled) {
@@ -7316,7 +7316,7 @@ exports[`MenuGroup renders with title when vertical 1`] = `
 
 .emotion-3 {
   margin: 0;
-  color: #535353;
+  color: #6A6A6A;
   font-family: "Poppins",sans-serif;
   font-size: 20px;
   line-height: 22.5px;
@@ -7326,7 +7326,7 @@ exports[`MenuGroup renders with title when vertical 1`] = `
 }
 
 .emotion-3 svg {
-  fill: #535353;
+  fill: #6A6A6A;
 }
 
 .emotion-3::before {
@@ -7376,7 +7376,7 @@ exports[`MenuGroup renders with title when vertical 1`] = `
   border-style: solid;
   border-color: transparent;
   border-width: 0 2px 0 0;
-  color: #535353;
+  color: #6A6A6A;
   margin: 0;
   cursor: pointer;
   -webkit-box-pack: start;
@@ -7392,11 +7392,11 @@ exports[`MenuGroup renders with title when vertical 1`] = `
 }
 
 .emotion-5 svg {
-  fill: #535353;
+  fill: #6A6A6A;
 }
 
 .emotion-5:hover:not(:disabled) {
-  background-color: #E0E7FF;
+  background-color: #ECF1FF;
   color: #3358CC;
 }
 
@@ -7405,7 +7405,7 @@ exports[`MenuGroup renders with title when vertical 1`] = `
 }
 
 .emotion-5:active:not(:disabled) {
-  background-color: #AEBFFF;
+  background-color: #D5E0FC;
   color: #3358CC;
 }
 
@@ -7424,11 +7424,11 @@ exports[`MenuGroup renders with title when vertical 1`] = `
 }
 
 .emotion-5:disabled {
-  color: #C0C0C0;
+  color: #ABABAB;
 }
 
 .emotion-5:disabled svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-5:focus-visible:not(:disabled) {
@@ -7683,7 +7683,7 @@ exports[`MenuGroup renders without title when horizontal 1`] = `
 
 .emotion-3 {
   margin: 0;
-  color: #535353;
+  color: #6A6A6A;
   font-family: "Poppins",sans-serif;
   font-size: 20px;
   line-height: 22.5px;
@@ -7693,7 +7693,7 @@ exports[`MenuGroup renders without title when horizontal 1`] = `
 }
 
 .emotion-3 svg {
-  fill: #535353;
+  fill: #6A6A6A;
 }
 
 .emotion-3::before {
@@ -7743,7 +7743,7 @@ exports[`MenuGroup renders without title when horizontal 1`] = `
   border-style: solid;
   border-color: transparent;
   border-width: 0 2px 0 0;
-  color: #535353;
+  color: #6A6A6A;
   margin: 0;
   cursor: pointer;
   -webkit-box-pack: start;
@@ -7759,11 +7759,11 @@ exports[`MenuGroup renders without title when horizontal 1`] = `
 }
 
 .emotion-5 svg {
-  fill: #535353;
+  fill: #6A6A6A;
 }
 
 .emotion-5:hover:not(:disabled) {
-  background-color: #E0E7FF;
+  background-color: #ECF1FF;
   color: #3358CC;
 }
 
@@ -7772,7 +7772,7 @@ exports[`MenuGroup renders without title when horizontal 1`] = `
 }
 
 .emotion-5:active:not(:disabled) {
-  background-color: #AEBFFF;
+  background-color: #D5E0FC;
   color: #3358CC;
 }
 
@@ -7791,11 +7791,11 @@ exports[`MenuGroup renders without title when horizontal 1`] = `
 }
 
 .emotion-5:disabled {
-  color: #C0C0C0;
+  color: #ABABAB;
 }
 
 .emotion-5:disabled svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-5:focus-visible:not(:disabled) {
@@ -8063,7 +8063,7 @@ exports[`MenuItem renders in Large size 1`] = `
   border-style: solid;
   border-color: transparent;
   border-width: 0 0 2px 0;
-  color: #535353;
+  color: #6A6A6A;
   margin: 0;
   cursor: pointer;
   -webkit-box-pack: center;
@@ -8079,42 +8079,42 @@ exports[`MenuItem renders in Large size 1`] = `
 }
 
 .emotion-2 svg {
-  fill: #535353;
+  fill: #6A6A6A;
 }
 
 .emotion-2:hover:not(:disabled) {
   border-color: #3358CC;
-  color: #2E2E2E;
+  color: #3B3B3B;
 }
 
 .emotion-2:hover:not(:disabled) svg {
-  fill: #2E2E2E;
+  fill: #3B3B3B;
 }
 
 .emotion-2:active:not(:disabled) {
-  border-color: #2B4AAB;
-  color: #0A0A0A;
+  border-color: #254CAC;
+  color: #111111;
 }
 
 .emotion-2:active:not(:disabled) svg {
-  fill: #0A0A0A;
+  fill: #111111;
 }
 
 .emotion-2:selected:hover:not(:disabled) {
   border-color: #3358CC;
-  color: #2E2E2E;
+  color: #3B3B3B;
 }
 
 .emotion-2:selected:hover:not(:disabled) svg {
-  fill: #2E2E2E;
+  fill: #3B3B3B;
 }
 
 .emotion-2:disabled {
-  color: #C0C0C0;
+  color: #ABABAB;
 }
 
 .emotion-2:disabled svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-2:focus-visible:not(:disabled) {
@@ -8295,7 +8295,7 @@ exports[`MenuItem renders in Medium size 1`] = `
   border-style: solid;
   border-color: transparent;
   border-width: 0 0 2px 0;
-  color: #535353;
+  color: #6A6A6A;
   margin: 0;
   cursor: pointer;
   -webkit-box-pack: center;
@@ -8311,42 +8311,42 @@ exports[`MenuItem renders in Medium size 1`] = `
 }
 
 .emotion-2 svg {
-  fill: #535353;
+  fill: #6A6A6A;
 }
 
 .emotion-2:hover:not(:disabled) {
   border-color: #3358CC;
-  color: #2E2E2E;
+  color: #3B3B3B;
 }
 
 .emotion-2:hover:not(:disabled) svg {
-  fill: #2E2E2E;
+  fill: #3B3B3B;
 }
 
 .emotion-2:active:not(:disabled) {
-  border-color: #2B4AAB;
-  color: #0A0A0A;
+  border-color: #254CAC;
+  color: #111111;
 }
 
 .emotion-2:active:not(:disabled) svg {
-  fill: #0A0A0A;
+  fill: #111111;
 }
 
 .emotion-2:selected:hover:not(:disabled) {
   border-color: #3358CC;
-  color: #2E2E2E;
+  color: #3B3B3B;
 }
 
 .emotion-2:selected:hover:not(:disabled) svg {
-  fill: #2E2E2E;
+  fill: #3B3B3B;
 }
 
 .emotion-2:disabled {
-  color: #C0C0C0;
+  color: #ABABAB;
 }
 
 .emotion-2:disabled svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-2:focus-visible:not(:disabled) {
@@ -8527,7 +8527,7 @@ exports[`MenuItem renders in Small size 1`] = `
   border-style: solid;
   border-color: transparent;
   border-width: 0 0 2px 0;
-  color: #535353;
+  color: #6A6A6A;
   margin: 0;
   cursor: pointer;
   -webkit-box-pack: center;
@@ -8543,42 +8543,42 @@ exports[`MenuItem renders in Small size 1`] = `
 }
 
 .emotion-2 svg {
-  fill: #535353;
+  fill: #6A6A6A;
 }
 
 .emotion-2:hover:not(:disabled) {
   border-color: #3358CC;
-  color: #2E2E2E;
+  color: #3B3B3B;
 }
 
 .emotion-2:hover:not(:disabled) svg {
-  fill: #2E2E2E;
+  fill: #3B3B3B;
 }
 
 .emotion-2:active:not(:disabled) {
-  border-color: #2B4AAB;
-  color: #0A0A0A;
+  border-color: #254CAC;
+  color: #111111;
 }
 
 .emotion-2:active:not(:disabled) svg {
-  fill: #0A0A0A;
+  fill: #111111;
 }
 
 .emotion-2:selected:hover:not(:disabled) {
   border-color: #3358CC;
-  color: #2E2E2E;
+  color: #3B3B3B;
 }
 
 .emotion-2:selected:hover:not(:disabled) svg {
-  fill: #2E2E2E;
+  fill: #3B3B3B;
 }
 
 .emotion-2:disabled {
-  color: #C0C0C0;
+  color: #ABABAB;
 }
 
 .emotion-2:disabled svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-2:focus-visible:not(:disabled) {
@@ -8759,7 +8759,7 @@ exports[`MenuItem renders menu item with anchor attributes 1`] = `
   border-style: solid;
   border-color: transparent;
   border-width: 0 0 2px 0;
-  color: #535353;
+  color: #6A6A6A;
   margin: 0;
   cursor: pointer;
   -webkit-box-pack: center;
@@ -8775,42 +8775,42 @@ exports[`MenuItem renders menu item with anchor attributes 1`] = `
 }
 
 .emotion-2 svg {
-  fill: #535353;
+  fill: #6A6A6A;
 }
 
 .emotion-2:hover:not(:disabled) {
   border-color: #3358CC;
-  color: #2E2E2E;
+  color: #3B3B3B;
 }
 
 .emotion-2:hover:not(:disabled) svg {
-  fill: #2E2E2E;
+  fill: #3B3B3B;
 }
 
 .emotion-2:active:not(:disabled) {
-  border-color: #2B4AAB;
-  color: #0A0A0A;
+  border-color: #254CAC;
+  color: #111111;
 }
 
 .emotion-2:active:not(:disabled) svg {
-  fill: #0A0A0A;
+  fill: #111111;
 }
 
 .emotion-2:selected:hover:not(:disabled) {
   border-color: #3358CC;
-  color: #2E2E2E;
+  color: #3B3B3B;
 }
 
 .emotion-2:selected:hover:not(:disabled) svg {
-  fill: #2E2E2E;
+  fill: #3B3B3B;
 }
 
 .emotion-2:disabled {
-  color: #C0C0C0;
+  color: #ABABAB;
 }
 
 .emotion-2:disabled svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-2:focus-visible:not(:disabled) {
@@ -8992,14 +8992,14 @@ exports[`MenuItem renders selected menu item with aria attributes 1`] = `
   border-style: solid;
   border-color: transparent;
   border-width: 0 0 2px 0;
-  color: #535353;
+  color: #6A6A6A;
   margin: 0;
   cursor: pointer;
   background-color: transparent;
   border-style: solid;
   border-color: #3358CC;
   border-width: 0 0 2px 0;
-  color: #2E2E2E;
+  color: #3B3B3B;
   -webkit-box-pack: center;
   -ms-flex-pack: center;
   -webkit-justify-content: center;
@@ -9013,42 +9013,42 @@ exports[`MenuItem renders selected menu item with aria attributes 1`] = `
 }
 
 .emotion-2 svg {
-  fill: #535353;
+  fill: #6A6A6A;
 }
 
 .emotion-2:hover:not(:disabled) {
   border-color: #3358CC;
-  color: #2E2E2E;
+  color: #3B3B3B;
 }
 
 .emotion-2:hover:not(:disabled) svg {
-  fill: #2E2E2E;
+  fill: #3B3B3B;
 }
 
 .emotion-2:active:not(:disabled) {
-  border-color: #2B4AAB;
-  color: #0A0A0A;
+  border-color: #254CAC;
+  color: #111111;
 }
 
 .emotion-2:active:not(:disabled) svg {
-  fill: #0A0A0A;
+  fill: #111111;
 }
 
 .emotion-2:selected:hover:not(:disabled) {
   border-color: #3358CC;
-  color: #2E2E2E;
+  color: #3B3B3B;
 }
 
 .emotion-2:selected:hover:not(:disabled) svg {
-  fill: #2E2E2E;
+  fill: #3B3B3B;
 }
 
 .emotion-2:disabled {
-  color: #C0C0C0;
+  color: #ABABAB;
 }
 
 .emotion-2:disabled svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-2:focus-visible:not(:disabled) {
@@ -9083,16 +9083,16 @@ exports[`MenuItem renders selected menu item with aria attributes 1`] = `
 }
 
 .emotion-2 svg {
-  fill: #2E2E2E;
+  fill: #3B3B3B;
 }
 
 .emotion-2:hover:not(:disabled) {
   border-color: #3358CC;
-  color: #2E2E2E;
+  color: #3B3B3B;
 }
 
 .emotion-2:hover:not(:disabled) svg {
-  fill: #2E2E2E;
+  fill: #3B3B3B;
 }
 
 .emotion-3 {
@@ -9129,7 +9129,7 @@ exports[`MenuItem renders selected menu item with aria attributes 1`] = `
   display: inline-block;
   vertical-align: middle;
   overflow: hidden;
-  fill: #2E2E2E;
+  fill: #3B3B3B;
   vertical-align: unset;
   display: inline-block;
 }
@@ -9288,7 +9288,7 @@ exports[`MenuItem renders with default props 1`] = `
   border-style: solid;
   border-color: transparent;
   border-width: 0 0 2px 0;
-  color: #535353;
+  color: #6A6A6A;
   margin: 0;
   cursor: pointer;
   -webkit-box-pack: center;
@@ -9304,42 +9304,42 @@ exports[`MenuItem renders with default props 1`] = `
 }
 
 .emotion-2 svg {
-  fill: #535353;
+  fill: #6A6A6A;
 }
 
 .emotion-2:hover:not(:disabled) {
   border-color: #3358CC;
-  color: #2E2E2E;
+  color: #3B3B3B;
 }
 
 .emotion-2:hover:not(:disabled) svg {
-  fill: #2E2E2E;
+  fill: #3B3B3B;
 }
 
 .emotion-2:active:not(:disabled) {
-  border-color: #2B4AAB;
-  color: #0A0A0A;
+  border-color: #254CAC;
+  color: #111111;
 }
 
 .emotion-2:active:not(:disabled) svg {
-  fill: #0A0A0A;
+  fill: #111111;
 }
 
 .emotion-2:selected:hover:not(:disabled) {
   border-color: #3358CC;
-  color: #2E2E2E;
+  color: #3B3B3B;
 }
 
 .emotion-2:selected:hover:not(:disabled) svg {
-  fill: #2E2E2E;
+  fill: #3B3B3B;
 }
 
 .emotion-2:disabled {
-  color: #C0C0C0;
+  color: #ABABAB;
 }
 
 .emotion-2:disabled svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-2:focus-visible:not(:disabled) {
@@ -9520,7 +9520,7 @@ exports[`MenuItem renders with icon 1`] = `
   border-style: solid;
   border-color: transparent;
   border-width: 0 0 2px 0;
-  color: #535353;
+  color: #6A6A6A;
   margin: 0;
   cursor: pointer;
   -webkit-box-pack: center;
@@ -9536,42 +9536,42 @@ exports[`MenuItem renders with icon 1`] = `
 }
 
 .emotion-2 svg {
-  fill: #535353;
+  fill: #6A6A6A;
 }
 
 .emotion-2:hover:not(:disabled) {
   border-color: #3358CC;
-  color: #2E2E2E;
+  color: #3B3B3B;
 }
 
 .emotion-2:hover:not(:disabled) svg {
-  fill: #2E2E2E;
+  fill: #3B3B3B;
 }
 
 .emotion-2:active:not(:disabled) {
-  border-color: #2B4AAB;
-  color: #0A0A0A;
+  border-color: #254CAC;
+  color: #111111;
 }
 
 .emotion-2:active:not(:disabled) svg {
-  fill: #0A0A0A;
+  fill: #111111;
 }
 
 .emotion-2:selected:hover:not(:disabled) {
   border-color: #3358CC;
-  color: #2E2E2E;
+  color: #3B3B3B;
 }
 
 .emotion-2:selected:hover:not(:disabled) svg {
-  fill: #2E2E2E;
+  fill: #3B3B3B;
 }
 
 .emotion-2:disabled {
-  color: #C0C0C0;
+  color: #ABABAB;
 }
 
 .emotion-2:disabled svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-2:focus-visible:not(:disabled) {
@@ -9639,7 +9639,7 @@ exports[`MenuItem renders with icon 1`] = `
   display: inline-block;
   vertical-align: middle;
   overflow: hidden;
-  fill: #2E2E2E;
+  fill: #3B3B3B;
   vertical-align: unset;
   display: inline-block;
 }
diff --git a/src/modal/__tests__/__snapshots__/modal.test.tsx.snap b/src/modal/__tests__/__snapshots__/modal.test.tsx.snap
index b274ee00c9..667f5dfb18 100644
--- a/src/modal/__tests__/__snapshots__/modal.test.tsx.snap
+++ b/src/modal/__tests__/__snapshots__/modal.test.tsx.snap
@@ -14,7 +14,7 @@ exports[`Modal renders default 1`] = `
   bottom: 0;
   left: 0;
   cursor: pointer;
-  background-color: rgba(10,10,10,0.8);
+  background-color: rgba(0,0,0,0.8);
 }
 
 @media screen and (prefers-reduced-motion: no-preference) {
@@ -298,7 +298,7 @@ exports[`Modal renders default 1`] = `
 }
 
 .emotion-3 {
-  color: #2E2E2E;
+  color: #3B3B3B;
   grid-row-start: 1;
   grid-column-start: 1;
   grid-column-end: 3;
@@ -317,7 +317,7 @@ exports[`Modal renders default 1`] = `
   -ms-flex-align: center;
   align-items: center;
   padding: 16px 24px;
-  color: #2E2E2E;
+  color: #3B3B3B;
   font-family: "Poppins",sans-serif;
   font-size: 16px;
   line-height: 1.5;
@@ -374,7 +374,7 @@ exports[`Modal renders default 1`] = `
   appearance: none;
   background-color: transparent;
   border-radius: 50%;
-  color: #2E2E2E;
+  color: #3B3B3B;
   margin: 0;
   cursor: pointer;
 }
@@ -385,24 +385,24 @@ exports[`Modal renders default 1`] = `
 }
 
 .emotion-9 svg {
-  fill: #2E2E2E;
+  fill: #3B3B3B;
 }
 
 .emotion-9:hover:not(:disabled) {
-  background-color: #FAFAFA;
+  background-color: #F1F1F1;
 }
 
 .emotion-9:active:not(:disabled) {
-  background-color: #F4F4F4;
+  background-color: #E2E2E2;
 }
 
 .emotion-9:disabled {
   background-color: transparent;
-  color: #C0C0C0;
+  color: #ABABAB;
 }
 
 .emotion-9:disabled svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-9:focus-visible:not(:disabled) {
@@ -470,7 +470,7 @@ exports[`Modal renders default 1`] = `
   display: inline-block;
   vertical-align: middle;
   overflow: hidden;
-  fill: #2E2E2E;
+  fill: #3B3B3B;
   vertical-align: unset;
   display: inline-block;
 }
@@ -607,7 +607,7 @@ exports[`Modal renders inline 1`] = `
   bottom: 0;
   left: 0;
   cursor: pointer;
-  background-color: rgba(10,10,10,0.8);
+  background-color: rgba(0,0,0,0.8);
 }
 
 @media screen and (prefers-reduced-motion: no-preference) {
@@ -891,7 +891,7 @@ exports[`Modal renders inline 1`] = `
 }
 
 .emotion-3 {
-  color: #2E2E2E;
+  color: #3B3B3B;
   grid-row-start: 1;
   grid-column-start: 1;
   grid-column-end: 3;
@@ -910,7 +910,7 @@ exports[`Modal renders inline 1`] = `
   -ms-flex-align: center;
   align-items: center;
   padding: 16px 24px;
-  color: #2E2E2E;
+  color: #3B3B3B;
   font-family: "Poppins",sans-serif;
   font-size: 16px;
   line-height: 1.5;
@@ -967,7 +967,7 @@ exports[`Modal renders inline 1`] = `
   appearance: none;
   background-color: transparent;
   border-radius: 50%;
-  color: #2E2E2E;
+  color: #3B3B3B;
   margin: 0;
   cursor: pointer;
 }
@@ -978,24 +978,24 @@ exports[`Modal renders inline 1`] = `
 }
 
 .emotion-9 svg {
-  fill: #2E2E2E;
+  fill: #3B3B3B;
 }
 
 .emotion-9:hover:not(:disabled) {
-  background-color: #FAFAFA;
+  background-color: #F1F1F1;
 }
 
 .emotion-9:active:not(:disabled) {
-  background-color: #F4F4F4;
+  background-color: #E2E2E2;
 }
 
 .emotion-9:disabled {
   background-color: transparent;
-  color: #C0C0C0;
+  color: #ABABAB;
 }
 
 .emotion-9:disabled svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-9:focus-visible:not(:disabled) {
@@ -1063,7 +1063,7 @@ exports[`Modal renders inline 1`] = `
   display: inline-block;
   vertical-align: middle;
   overflow: hidden;
-  fill: #2E2E2E;
+  fill: #3B3B3B;
   vertical-align: unset;
   display: inline-block;
 }
@@ -1201,7 +1201,7 @@ exports[`Modal renders modal with overrides 1`] = `
   bottom: 0;
   left: 0;
   cursor: pointer;
-  background-color: #FFEECF;
+  background-color: #FFEDE1;
 }
 
 @media screen and (prefers-reduced-motion: no-preference) {
@@ -1308,7 +1308,7 @@ exports[`Modal renders modal with overrides 1`] = `
   grid-template-rows: auto 1fr;
   overflow: hidden;
   pointer-events: all;
-  background-color: #E6FAEB;
+  background-color: #E5F4EA;
   box-shadow: 0px 0px 16px 14px rgba(169,183,172,0.9);
   width: 600px;
   min-width: 20vw;
@@ -1461,7 +1461,7 @@ exports[`Modal renders modal with overrides 1`] = `
   background-color: transparent;
   border-style: none none solid none;
   border-width: 1px;
-  border-color: #EF1703;
+  border-color: #D60000;
   grid-row-start: 1;
   grid-column-start: 1;
   grid-column-end: 3;
@@ -1516,7 +1516,7 @@ exports[`Modal renders modal with overrides 1`] = `
   appearance: none;
   border-width: 1px;
   border-style: solid;
-  border-color: #81D2DA;
+  border-color: #97D0D6;
   background-color: transparent;
   border-radius: 50%;
   margin: 0;
@@ -1529,11 +1529,11 @@ exports[`Modal renders modal with overrides 1`] = `
 }
 
 .emotion-7 svg {
-  fill: #05717D;
+  fill: #005B65;
 }
 
 .emotion-7:hover:not(:disabled) {
-  background-color: #41A0AA;
+  background-color: #289FAB;
 }
 
 @media screen and (prefers-reduced-motion: no-preference) {
@@ -1586,7 +1586,7 @@ exports[`Modal renders modal with overrides 1`] = `
   display: inline-block;
   vertical-align: middle;
   overflow: hidden;
-  fill: #2E2E2E;
+  fill: #3B3B3B;
   vertical-align: unset;
   display: inline-block;
 }
@@ -1756,7 +1756,7 @@ exports[`Modal renders screen reader message when focus trapping disabled 1`] =
   bottom: 0;
   left: 0;
   cursor: pointer;
-  background-color: rgba(10,10,10,0.8);
+  background-color: rgba(0,0,0,0.8);
 }
 
 @media screen and (prefers-reduced-motion: no-preference) {
@@ -2053,7 +2053,7 @@ exports[`Modal renders screen reader message when focus trapping disabled 1`] =
 }
 
 .emotion-4 {
-  color: #2E2E2E;
+  color: #3B3B3B;
   grid-row-start: 1;
   grid-column-start: 1;
   grid-column-end: 3;
@@ -2072,7 +2072,7 @@ exports[`Modal renders screen reader message when focus trapping disabled 1`] =
   -ms-flex-align: center;
   align-items: center;
   padding: 16px 24px;
-  color: #2E2E2E;
+  color: #3B3B3B;
   font-family: "Poppins",sans-serif;
   font-size: 16px;
   line-height: 1.5;
@@ -2129,7 +2129,7 @@ exports[`Modal renders screen reader message when focus trapping disabled 1`] =
   appearance: none;
   background-color: transparent;
   border-radius: 50%;
-  color: #2E2E2E;
+  color: #3B3B3B;
   margin: 0;
   cursor: pointer;
 }
@@ -2140,24 +2140,24 @@ exports[`Modal renders screen reader message when focus trapping disabled 1`] =
 }
 
 .emotion-10 svg {
-  fill: #2E2E2E;
+  fill: #3B3B3B;
 }
 
 .emotion-10:hover:not(:disabled) {
-  background-color: #FAFAFA;
+  background-color: #F1F1F1;
 }
 
 .emotion-10:active:not(:disabled) {
-  background-color: #F4F4F4;
+  background-color: #E2E2E2;
 }
 
 .emotion-10:disabled {
   background-color: transparent;
-  color: #C0C0C0;
+  color: #ABABAB;
 }
 
 .emotion-10:disabled svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-10:focus-visible:not(:disabled) {
@@ -2225,7 +2225,7 @@ exports[`Modal renders screen reader message when focus trapping disabled 1`] =
   display: inline-block;
   vertical-align: middle;
   overflow: hidden;
-  fill: #2E2E2E;
+  fill: #3B3B3B;
   vertical-align: unset;
   display: inline-block;
 }
@@ -2390,7 +2390,7 @@ exports[`Modal renders with aria-ariaLabelledby attribute 1`] = `
   bottom: 0;
   left: 0;
   cursor: pointer;
-  background-color: rgba(10,10,10,0.8);
+  background-color: rgba(0,0,0,0.8);
 }
 
 @media screen and (prefers-reduced-motion: no-preference) {
@@ -2674,7 +2674,7 @@ exports[`Modal renders with aria-ariaLabelledby attribute 1`] = `
 }
 
 .emotion-3 {
-  color: #2E2E2E;
+  color: #3B3B3B;
   grid-row-start: 1;
   grid-column-start: 1;
   grid-column-end: 3;
@@ -2693,7 +2693,7 @@ exports[`Modal renders with aria-ariaLabelledby attribute 1`] = `
   -ms-flex-align: center;
   align-items: center;
   padding: 16px 24px;
-  color: #2E2E2E;
+  color: #3B3B3B;
   font-family: "Poppins",sans-serif;
   font-size: 16px;
   line-height: 1.5;
@@ -2746,7 +2746,7 @@ exports[`Modal renders with aria-ariaLabelledby attribute 1`] = `
   appearance: none;
   background-color: transparent;
   border-radius: 50%;
-  color: #2E2E2E;
+  color: #3B3B3B;
   margin: 0;
   cursor: pointer;
 }
@@ -2757,24 +2757,24 @@ exports[`Modal renders with aria-ariaLabelledby attribute 1`] = `
 }
 
 .emotion-7 svg {
-  fill: #2E2E2E;
+  fill: #3B3B3B;
 }
 
 .emotion-7:hover:not(:disabled) {
-  background-color: #FAFAFA;
+  background-color: #F1F1F1;
 }
 
 .emotion-7:active:not(:disabled) {
-  background-color: #F4F4F4;
+  background-color: #E2E2E2;
 }
 
 .emotion-7:disabled {
   background-color: transparent;
-  color: #C0C0C0;
+  color: #ABABAB;
 }
 
 .emotion-7:disabled svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-7:focus-visible:not(:disabled) {
@@ -2842,7 +2842,7 @@ exports[`Modal renders with aria-ariaLabelledby attribute 1`] = `
   display: inline-block;
   vertical-align: middle;
   overflow: hidden;
-  fill: #2E2E2E;
+  fill: #3B3B3B;
   vertical-align: unset;
   display: inline-block;
 }
@@ -2978,7 +2978,7 @@ exports[`Modal renders with aria-describedby attribute 1`] = `
   bottom: 0;
   left: 0;
   cursor: pointer;
-  background-color: rgba(10,10,10,0.8);
+  background-color: rgba(0,0,0,0.8);
 }
 
 @media screen and (prefers-reduced-motion: no-preference) {
@@ -3262,7 +3262,7 @@ exports[`Modal renders with aria-describedby attribute 1`] = `
 }
 
 .emotion-3 {
-  color: #2E2E2E;
+  color: #3B3B3B;
   grid-row-start: 1;
   grid-column-start: 1;
   grid-column-end: 3;
@@ -3313,7 +3313,7 @@ exports[`Modal renders with aria-describedby attribute 1`] = `
   appearance: none;
   background-color: transparent;
   border-radius: 50%;
-  color: #2E2E2E;
+  color: #3B3B3B;
   margin: 0;
   cursor: pointer;
 }
@@ -3324,24 +3324,24 @@ exports[`Modal renders with aria-describedby attribute 1`] = `
 }
 
 .emotion-6 svg {
-  fill: #2E2E2E;
+  fill: #3B3B3B;
 }
 
 .emotion-6:hover:not(:disabled) {
-  background-color: #FAFAFA;
+  background-color: #F1F1F1;
 }
 
 .emotion-6:active:not(:disabled) {
-  background-color: #F4F4F4;
+  background-color: #E2E2E2;
 }
 
 .emotion-6:disabled {
   background-color: transparent;
-  color: #C0C0C0;
+  color: #ABABAB;
 }
 
 .emotion-6:disabled svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-6:focus-visible:not(:disabled) {
@@ -3409,7 +3409,7 @@ exports[`Modal renders with aria-describedby attribute 1`] = `
   display: inline-block;
   vertical-align: middle;
   overflow: hidden;
-  fill: #2E2E2E;
+  fill: #3B3B3B;
   vertical-align: unset;
   display: inline-block;
 }
@@ -3547,7 +3547,7 @@ exports[`Modal renders with different closePosition 1`] = `
   bottom: 0;
   left: 0;
   cursor: pointer;
-  background-color: rgba(10,10,10,0.8);
+  background-color: rgba(0,0,0,0.8);
 }
 
 @media screen and (prefers-reduced-motion: no-preference) {
@@ -3831,7 +3831,7 @@ exports[`Modal renders with different closePosition 1`] = `
 }
 
 .emotion-3 {
-  color: #2E2E2E;
+  color: #3B3B3B;
   grid-row-start: 1;
   grid-column-start: 1;
   grid-column-end: 3;
@@ -3850,7 +3850,7 @@ exports[`Modal renders with different closePosition 1`] = `
   -ms-flex-align: center;
   align-items: center;
   padding: 16px 24px;
-  color: #2E2E2E;
+  color: #3B3B3B;
   font-family: "Poppins",sans-serif;
   font-size: 16px;
   line-height: 1.5;
@@ -3907,7 +3907,7 @@ exports[`Modal renders with different closePosition 1`] = `
   appearance: none;
   background-color: transparent;
   border-radius: 50%;
-  color: #2E2E2E;
+  color: #3B3B3B;
   margin: 0;
   cursor: pointer;
 }
@@ -3918,24 +3918,24 @@ exports[`Modal renders with different closePosition 1`] = `
 }
 
 .emotion-9 svg {
-  fill: #2E2E2E;
+  fill: #3B3B3B;
 }
 
 .emotion-9:hover:not(:disabled) {
-  background-color: #FAFAFA;
+  background-color: #F1F1F1;
 }
 
 .emotion-9:active:not(:disabled) {
-  background-color: #F4F4F4;
+  background-color: #E2E2E2;
 }
 
 .emotion-9:disabled {
   background-color: transparent;
-  color: #C0C0C0;
+  color: #ABABAB;
 }
 
 .emotion-9:disabled svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-9:focus-visible:not(:disabled) {
@@ -4003,7 +4003,7 @@ exports[`Modal renders with different closePosition 1`] = `
   display: inline-block;
   vertical-align: middle;
   overflow: hidden;
-  fill: #2E2E2E;
+  fill: #3B3B3B;
   vertical-align: unset;
   display: inline-block;
 }
@@ -4144,7 +4144,7 @@ exports[`Modal renders with logical padding props 1`] = `
   bottom: 0;
   left: 0;
   cursor: pointer;
-  background-color: rgba(10,10,10,0.8);
+  background-color: rgba(0,0,0,0.8);
 }
 
 @media screen and (prefers-reduced-motion: no-preference) {
@@ -4430,7 +4430,7 @@ exports[`Modal renders with logical padding props 1`] = `
 }
 
 .emotion-3 {
-  color: #2E2E2E;
+  color: #3B3B3B;
   grid-row-start: 1;
   grid-column-start: 1;
   grid-column-end: 3;
@@ -4449,7 +4449,7 @@ exports[`Modal renders with logical padding props 1`] = `
   -ms-flex-align: center;
   align-items: center;
   padding: 16px 24px;
-  color: #2E2E2E;
+  color: #3B3B3B;
   font-family: "Poppins",sans-serif;
   font-size: 16px;
   line-height: 1.5;
@@ -4506,7 +4506,7 @@ exports[`Modal renders with logical padding props 1`] = `
   appearance: none;
   background-color: transparent;
   border-radius: 50%;
-  color: #2E2E2E;
+  color: #3B3B3B;
   margin: 0;
   cursor: pointer;
 }
@@ -4517,24 +4517,24 @@ exports[`Modal renders with logical padding props 1`] = `
 }
 
 .emotion-9 svg {
-  fill: #2E2E2E;
+  fill: #3B3B3B;
 }
 
 .emotion-9:hover:not(:disabled) {
-  background-color: #FAFAFA;
+  background-color: #F1F1F1;
 }
 
 .emotion-9:active:not(:disabled) {
-  background-color: #F4F4F4;
+  background-color: #E2E2E2;
 }
 
 .emotion-9:disabled {
   background-color: transparent;
-  color: #C0C0C0;
+  color: #ABABAB;
 }
 
 .emotion-9:disabled svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-9:focus-visible:not(:disabled) {
@@ -4602,7 +4602,7 @@ exports[`Modal renders with logical padding props 1`] = `
   display: inline-block;
   vertical-align: middle;
   overflow: hidden;
-  fill: #2E2E2E;
+  fill: #3B3B3B;
   vertical-align: unset;
   display: inline-block;
 }
@@ -4743,7 +4743,7 @@ exports[`Modal renders without close button 1`] = `
   bottom: 0;
   left: 0;
   cursor: pointer;
-  background-color: rgba(10,10,10,0.8);
+  background-color: rgba(0,0,0,0.8);
 }
 
 @media screen and (prefers-reduced-motion: no-preference) {
@@ -5027,7 +5027,7 @@ exports[`Modal renders without close button 1`] = `
 }
 
 .emotion-3 {
-  color: #2E2E2E;
+  color: #3B3B3B;
   grid-row-start: 1;
   grid-column-start: 1;
   grid-column-end: 3;
@@ -5046,7 +5046,7 @@ exports[`Modal renders without close button 1`] = `
   -ms-flex-align: center;
   align-items: center;
   padding: 16px 24px;
-  color: #2E2E2E;
+  color: #3B3B3B;
   font-family: "Poppins",sans-serif;
   font-size: 16px;
   line-height: 1.5;
@@ -5150,7 +5150,7 @@ exports[`Modal renders without header 1`] = `
   bottom: 0;
   left: 0;
   cursor: pointer;
-  background-color: rgba(10,10,10,0.8);
+  background-color: rgba(0,0,0,0.8);
 }
 
 @media screen and (prefers-reduced-motion: no-preference) {
@@ -5434,7 +5434,7 @@ exports[`Modal renders without header 1`] = `
 }
 
 .emotion-3 {
-  color: #2E2E2E;
+  color: #3B3B3B;
   grid-row-start: 1;
   grid-column-start: 1;
   grid-column-end: 3;
@@ -5489,7 +5489,7 @@ exports[`Modal renders without header 1`] = `
   appearance: none;
   background-color: transparent;
   border-radius: 50%;
-  color: #2E2E2E;
+  color: #3B3B3B;
   margin: 0;
   cursor: pointer;
 }
@@ -5500,24 +5500,24 @@ exports[`Modal renders without header 1`] = `
 }
 
 .emotion-7 svg {
-  fill: #2E2E2E;
+  fill: #3B3B3B;
 }
 
 .emotion-7:hover:not(:disabled) {
-  background-color: #FAFAFA;
+  background-color: #F1F1F1;
 }
 
 .emotion-7:active:not(:disabled) {
-  background-color: #F4F4F4;
+  background-color: #E2E2E2;
 }
 
 .emotion-7:disabled {
   background-color: transparent;
-  color: #C0C0C0;
+  color: #ABABAB;
 }
 
 .emotion-7:disabled svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-7:focus-visible:not(:disabled) {
@@ -5585,7 +5585,7 @@ exports[`Modal renders without header 1`] = `
   display: inline-block;
   vertical-align: middle;
   overflow: hidden;
-  fill: #2E2E2E;
+  fill: #3B3B3B;
   vertical-align: unset;
   display: inline-block;
 }
@@ -5717,7 +5717,7 @@ exports[`Modal renders without header and close 1`] = `
   bottom: 0;
   left: 0;
   cursor: pointer;
-  background-color: rgba(10,10,10,0.8);
+  background-color: rgba(0,0,0,0.8);
 }
 
 @media screen and (prefers-reduced-motion: no-preference) {
@@ -6283,7 +6283,7 @@ exports[`Modal renders without overlay 1`] = `
 }
 
 .emotion-2 {
-  color: #2E2E2E;
+  color: #3B3B3B;
   grid-row-start: 1;
   grid-column-start: 1;
   grid-column-end: 3;
@@ -6302,7 +6302,7 @@ exports[`Modal renders without overlay 1`] = `
   -ms-flex-align: center;
   align-items: center;
   padding: 16px 24px;
-  color: #2E2E2E;
+  color: #3B3B3B;
   font-family: "Poppins",sans-serif;
   font-size: 16px;
   line-height: 1.5;
@@ -6359,7 +6359,7 @@ exports[`Modal renders without overlay 1`] = `
   appearance: none;
   background-color: transparent;
   border-radius: 50%;
-  color: #2E2E2E;
+  color: #3B3B3B;
   margin: 0;
   cursor: pointer;
 }
@@ -6370,24 +6370,24 @@ exports[`Modal renders without overlay 1`] = `
 }
 
 .emotion-8 svg {
-  fill: #2E2E2E;
+  fill: #3B3B3B;
 }
 
 .emotion-8:hover:not(:disabled) {
-  background-color: #FAFAFA;
+  background-color: #F1F1F1;
 }
 
 .emotion-8:active:not(:disabled) {
-  background-color: #F4F4F4;
+  background-color: #E2E2E2;
 }
 
 .emotion-8:disabled {
   background-color: transparent;
-  color: #C0C0C0;
+  color: #ABABAB;
 }
 
 .emotion-8:disabled svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-8:focus-visible:not(:disabled) {
@@ -6455,7 +6455,7 @@ exports[`Modal renders without overlay 1`] = `
   display: inline-block;
   vertical-align: middle;
   overflow: hidden;
-  fill: #2E2E2E;
+  fill: #3B3B3B;
   vertical-align: unset;
   display: inline-block;
 }
@@ -6598,7 +6598,7 @@ exports[`Modal toggle aria-hidden to content outside dialog 1`] = `
   bottom: 0;
   left: 0;
   cursor: pointer;
-  background-color: rgba(10,10,10,0.8);
+  background-color: rgba(0,0,0,0.8);
 }
 
 @media screen and (prefers-reduced-motion: no-preference) {
@@ -6882,7 +6882,7 @@ exports[`Modal toggle aria-hidden to content outside dialog 1`] = `
 }
 
 .emotion-3 {
-  color: #2E2E2E;
+  color: #3B3B3B;
   grid-row-start: 1;
   grid-column-start: 1;
   grid-column-end: 3;
@@ -6933,7 +6933,7 @@ exports[`Modal toggle aria-hidden to content outside dialog 1`] = `
   appearance: none;
   background-color: transparent;
   border-radius: 50%;
-  color: #2E2E2E;
+  color: #3B3B3B;
   margin: 0;
   cursor: pointer;
 }
@@ -6944,24 +6944,24 @@ exports[`Modal toggle aria-hidden to content outside dialog 1`] = `
 }
 
 .emotion-6 svg {
-  fill: #2E2E2E;
+  fill: #3B3B3B;
 }
 
 .emotion-6:hover:not(:disabled) {
-  background-color: #FAFAFA;
+  background-color: #F1F1F1;
 }
 
 .emotion-6:active:not(:disabled) {
-  background-color: #F4F4F4;
+  background-color: #E2E2E2;
 }
 
 .emotion-6:disabled {
   background-color: transparent;
-  color: #C0C0C0;
+  color: #ABABAB;
 }
 
 .emotion-6:disabled svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-6:focus-visible:not(:disabled) {
@@ -7029,7 +7029,7 @@ exports[`Modal toggle aria-hidden to content outside dialog 1`] = `
   display: inline-block;
   vertical-align: middle;
   overflow: hidden;
-  fill: #2E2E2E;
+  fill: #3B3B3B;
   vertical-align: unset;
   display: inline-block;
 }
diff --git a/src/ordered-list/__tests__/__snapshots__/ordered-list.test.tsx.snap b/src/ordered-list/__tests__/__snapshots__/ordered-list.test.tsx.snap
index f7e4a9f948..9260c27b72 100644
--- a/src/ordered-list/__tests__/__snapshots__/ordered-list.test.tsx.snap
+++ b/src/ordered-list/__tests__/__snapshots__/ordered-list.test.tsx.snap
@@ -12,7 +12,7 @@ exports[`OrderedList renders with defaults 1`] = `
 .emotion-1 {
   margin-bottom: 16px;
   counter-increment: item-counter;
-  color: #2E2E2E;
+  color: #3B3B3B;
   font-family: "DM Sans",sans-serif;
   font-size: 14px;
   line-height: 21px;
@@ -22,7 +22,7 @@ exports[`OrderedList renders with defaults 1`] = `
 }
 
 .emotion-1 svg {
-  fill: #2E2E2E;
+  fill: #3B3B3B;
 }
 
 .emotion-1::before {
@@ -39,7 +39,7 @@ exports[`OrderedList renders with defaults 1`] = `
 
 .emotion-1::before {
   content: counter(item-counter) '. ';
-  color: #2E2E2E;
+  color: #3B3B3B;
   font-family: "DM Sans",sans-serif;
   font-size: 14px;
   line-height: 1.5;
@@ -50,7 +50,7 @@ exports[`OrderedList renders with defaults 1`] = `
 }
 
 .emotion-1::before svg {
-  fill: #2E2E2E;
+  fill: #3B3B3B;
 }
 
 
    
   .emotion-0 {
   display: block;
-  color: #0A0A0A;
+  color: #111111;
   font-family: "Poppins",sans-serif;
   font-size: 14px;
   line-height: 21px;
@@ -3145,7 +3145,7 @@ exports[`Select renders Select, AssistiveText and Label 1`] = `
 }
 
 .emotion-0:disabled {
-  color: #C0C0C0;
+  color: #ABABAB;
 }
 
 .emotion-0::before {
@@ -3179,15 +3179,15 @@ exports[`Select renders Select, AssistiveText and Label 1`] = `
   margin-bottom: 8px;
   background-color: transparent;
   border-style: solid;
-  border-color: #CCCCCC;
+  border-color: #919191;
   border-width: 1px;
   border-radius: 8px;
-  color: #2E2E2E;
+  color: #3B3B3B;
   text-overflow: ellipsis;
 }
 
 .emotion-1 svg {
-  fill: #2E2E2E;
+  fill: #3B3B3B;
 }
 
 .emotion-1:focus:not(:disabled) {
@@ -3195,7 +3195,7 @@ exports[`Select renders Select, AssistiveText and Label 1`] = `
   outline-style: solid;
   outline-width: 2px;
   border-color: transparent;
-  background-color: #FAFAFA;
+  background-color: #F1F1F1;
 }
 
 @media not all and (min-resolution: 0.001dpcm) {
@@ -3207,36 +3207,36 @@ exports[`Select renders Select, AssistiveText and Label 1`] = `
 }
 
 .emotion-1:hover:not(:disabled) {
-  background-color: #FAFAFA;
+  background-color: #F1F1F1;
 }
 
 .emotion-1:valid:hover:not(:disabled) {
-  border-color: #23A248;
-  background-color: #FAFAFA;
+  border-color: #007B22;
+  background-color: #F1F1F1;
 }
 
 .emotion-1:valid:focus:not(:disabled) {
   border-color: #3768FB;
-  background-color: #FAFAFA;
+  background-color: #F1F1F1;
 }
 
 .emotion-1:disabled {
-  border-color: #F4F4F4;
-  color: #C0C0C0;
+  border-color: #E2E2E2;
+  color: #ABABAB;
 }
 
 .emotion-1:disabled svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-1:invalid:focus:not(:disabled) {
   border-color: #3768FB;
-  background-color: #FAFAFA;
+  background-color: #F1F1F1;
 }
 
 .emotion-1:invalid:hover:not(:disabled) {
-  border-color: #EF1703;
-  background-color: #FAFAFA;
+  border-color: #D60000;
+  background-color: #F1F1F1;
 }
 
 .emotion-2 {
@@ -3276,7 +3276,7 @@ exports[`Select renders Select, AssistiveText and Label 1`] = `
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
-  color: #535353;
+  color: #6A6A6A;
   font-family: "DM Sans",sans-serif;
   font-size: 14px;
   line-height: 1.5;
@@ -3324,7 +3324,7 @@ exports[`Select renders Select, AssistiveText and Label 1`] = `
   display: inline-block;
   vertical-align: middle;
   overflow: hidden;
-  fill: #2E2E2E;
+  fill: #3B3B3B;
   vertical-align: unset;
   display: inline-block;
 }
@@ -3365,11 +3365,11 @@ exports[`Select renders Select, AssistiveText and Label 1`] = `
   -ms-flex-align: center;
   align-items: center;
   min-height: 12px;
-  color: #535353;
+  color: #6A6A6A;
 }
 
 .emotion-11:disabled {
-  color: #C0C0C0;
+  color: #ABABAB;
 }
 
 .emotion-12 {
@@ -3377,7 +3377,7 @@ exports[`Select renders Select, AssistiveText and Label 1`] = `
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
-  color: #535353;
+  color: #6A6A6A;
   font-family: "DM Sans",sans-serif;
   font-size: 14px;
   line-height: 21px;
@@ -3387,7 +3387,7 @@ exports[`Select renders Select, AssistiveText and Label 1`] = `
 }
 
 .emotion-12:disabled {
-  color: #C0C0C0;
+  color: #ABABAB;
 }
 
 .emotion-12::before {
@@ -3536,15 +3536,15 @@ exports[`Select renders SelectOption with logical props 1`] = `
   margin-bottom: 8px;
   background-color: transparent;
   border-style: solid;
-  border-color: #CCCCCC;
+  border-color: #919191;
   border-width: 1px;
   border-radius: 8px;
-  color: #2E2E2E;
+  color: #3B3B3B;
   text-overflow: ellipsis;
 }
 
 .emotion-0 svg {
-  fill: #2E2E2E;
+  fill: #3B3B3B;
 }
 
 .emotion-0:focus:not(:disabled) {
@@ -3552,7 +3552,7 @@ exports[`Select renders SelectOption with logical props 1`] = `
   outline-style: solid;
   outline-width: 2px;
   border-color: transparent;
-  background-color: #FAFAFA;
+  background-color: #F1F1F1;
 }
 
 @media not all and (min-resolution: 0.001dpcm) {
@@ -3564,36 +3564,36 @@ exports[`Select renders SelectOption with logical props 1`] = `
 }
 
 .emotion-0:hover:not(:disabled) {
-  background-color: #FAFAFA;
+  background-color: #F1F1F1;
 }
 
 .emotion-0:valid:hover:not(:disabled) {
-  border-color: #23A248;
-  background-color: #FAFAFA;
+  border-color: #007B22;
+  background-color: #F1F1F1;
 }
 
 .emotion-0:valid:focus:not(:disabled) {
   border-color: #3768FB;
-  background-color: #FAFAFA;
+  background-color: #F1F1F1;
 }
 
 .emotion-0:disabled {
-  border-color: #F4F4F4;
-  color: #C0C0C0;
+  border-color: #E2E2E2;
+  color: #ABABAB;
 }
 
 .emotion-0:disabled svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-0:invalid:focus:not(:disabled) {
   border-color: #3768FB;
-  background-color: #FAFAFA;
+  background-color: #F1F1F1;
 }
 
 .emotion-0:invalid:hover:not(:disabled) {
-  border-color: #EF1703;
-  background-color: #FAFAFA;
+  border-color: #D60000;
+  background-color: #F1F1F1;
 }
 
 .emotion-1 {
@@ -3633,7 +3633,7 @@ exports[`Select renders SelectOption with logical props 1`] = `
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
-  color: #2E2E2E;
+  color: #3B3B3B;
   font-family: "DM Sans",sans-serif;
   font-size: 14px;
   line-height: 1.5;
@@ -3707,7 +3707,7 @@ exports[`Select renders SelectOption with logical props 1`] = `
   display: inline-block;
   vertical-align: middle;
   overflow: hidden;
-  fill: #2E2E2E;
+  fill: #3B3B3B;
   vertical-align: unset;
   display: inline-block;
 }
@@ -3824,15 +3824,15 @@ exports[`Select renders disabled select 1`] = `
   margin-bottom: 8px;
   background-color: transparent;
   border-style: solid;
-  border-color: #F4F4F4;
+  border-color: #E2E2E2;
   border-width: 1px;
   border-radius: 8px;
-  color: #C0C0C0;
+  color: #ABABAB;
   text-overflow: ellipsis;
 }
 
 .emotion-0 svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-1 {
@@ -3920,7 +3920,7 @@ exports[`Select renders disabled select 1`] = `
   display: inline-block;
   vertical-align: middle;
   overflow: hidden;
-  fill: #2E2E2E;
+  fill: #3B3B3B;
   vertical-align: unset;
   display: inline-block;
 }
@@ -4069,15 +4069,15 @@ exports[`Select renders large Select 1`] = `
   margin-bottom: 8px;
   background-color: transparent;
   border-style: solid;
-  border-color: #CCCCCC;
+  border-color: #919191;
   border-width: 1px;
   border-radius: 8px;
-  color: #2E2E2E;
+  color: #3B3B3B;
   text-overflow: ellipsis;
 }
 
 .emotion-0 svg {
-  fill: #2E2E2E;
+  fill: #3B3B3B;
 }
 
 .emotion-0:focus:not(:disabled) {
@@ -4085,7 +4085,7 @@ exports[`Select renders large Select 1`] = `
   outline-style: solid;
   outline-width: 2px;
   border-color: transparent;
-  background-color: #FAFAFA;
+  background-color: #F1F1F1;
 }
 
 @media not all and (min-resolution: 0.001dpcm) {
@@ -4097,36 +4097,36 @@ exports[`Select renders large Select 1`] = `
 }
 
 .emotion-0:hover:not(:disabled) {
-  background-color: #FAFAFA;
+  background-color: #F1F1F1;
 }
 
 .emotion-0:valid:hover:not(:disabled) {
-  border-color: #23A248;
-  background-color: #FAFAFA;
+  border-color: #007B22;
+  background-color: #F1F1F1;
 }
 
 .emotion-0:valid:focus:not(:disabled) {
   border-color: #3768FB;
-  background-color: #FAFAFA;
+  background-color: #F1F1F1;
 }
 
 .emotion-0:disabled {
-  border-color: #F4F4F4;
-  color: #C0C0C0;
+  border-color: #E2E2E2;
+  color: #ABABAB;
 }
 
 .emotion-0:disabled svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-0:invalid:focus:not(:disabled) {
   border-color: #3768FB;
-  background-color: #FAFAFA;
+  background-color: #F1F1F1;
 }
 
 .emotion-0:invalid:hover:not(:disabled) {
-  border-color: #EF1703;
-  background-color: #FAFAFA;
+  border-color: #D60000;
+  background-color: #F1F1F1;
 }
 
 .emotion-1 {
@@ -4166,7 +4166,7 @@ exports[`Select renders large Select 1`] = `
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
-  color: #535353;
+  color: #6A6A6A;
   font-family: "DM Sans",sans-serif;
   font-size: 16px;
   line-height: 1.5;
@@ -4214,7 +4214,7 @@ exports[`Select renders large Select 1`] = `
   display: inline-block;
   vertical-align: middle;
   overflow: hidden;
-  fill: #2E2E2E;
+  fill: #3B3B3B;
   vertical-align: unset;
   display: inline-block;
 }
@@ -4360,15 +4360,15 @@ exports[`Select renders loading select 1`] = `
   margin-bottom: 8px;
   background-color: transparent;
   border-style: solid;
-  border-color: #CCCCCC;
+  border-color: #919191;
   border-width: 1px;
   border-radius: 8px;
-  color: #2E2E2E;
+  color: #3B3B3B;
   text-overflow: ellipsis;
 }
 
 .emotion-0 svg {
-  fill: #2E2E2E;
+  fill: #3B3B3B;
 }
 
 .emotion-0:focus:not(:disabled) {
@@ -4376,7 +4376,7 @@ exports[`Select renders loading select 1`] = `
   outline-style: solid;
   outline-width: 2px;
   border-color: transparent;
-  background-color: #FAFAFA;
+  background-color: #F1F1F1;
 }
 
 @media not all and (min-resolution: 0.001dpcm) {
@@ -4388,36 +4388,36 @@ exports[`Select renders loading select 1`] = `
 }
 
 .emotion-0:hover:not(:disabled) {
-  background-color: #FAFAFA;
+  background-color: #F1F1F1;
 }
 
 .emotion-0:valid:hover:not(:disabled) {
-  border-color: #23A248;
-  background-color: #FAFAFA;
+  border-color: #007B22;
+  background-color: #F1F1F1;
 }
 
 .emotion-0:valid:focus:not(:disabled) {
   border-color: #3768FB;
-  background-color: #FAFAFA;
+  background-color: #F1F1F1;
 }
 
 .emotion-0:disabled {
-  border-color: #F4F4F4;
-  color: #C0C0C0;
+  border-color: #E2E2E2;
+  color: #ABABAB;
 }
 
 .emotion-0:disabled svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-0:invalid:focus:not(:disabled) {
   border-color: #3768FB;
-  background-color: #FAFAFA;
+  background-color: #F1F1F1;
 }
 
 .emotion-0:invalid:hover:not(:disabled) {
-  border-color: #EF1703;
-  background-color: #FAFAFA;
+  border-color: #D60000;
+  background-color: #F1F1F1;
 }
 
 .emotion-1 {
@@ -4457,7 +4457,7 @@ exports[`Select renders loading select 1`] = `
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
-  color: #535353;
+  color: #6A6A6A;
   font-family: "DM Sans",sans-serif;
   font-size: 14px;
   line-height: 1.5;
@@ -4630,15 +4630,15 @@ exports[`Select renders medium Select 1`] = `
   margin-bottom: 8px;
   background-color: transparent;
   border-style: solid;
-  border-color: #CCCCCC;
+  border-color: #919191;
   border-width: 1px;
   border-radius: 8px;
-  color: #2E2E2E;
+  color: #3B3B3B;
   text-overflow: ellipsis;
 }
 
 .emotion-0 svg {
-  fill: #2E2E2E;
+  fill: #3B3B3B;
 }
 
 .emotion-0:focus:not(:disabled) {
@@ -4646,7 +4646,7 @@ exports[`Select renders medium Select 1`] = `
   outline-style: solid;
   outline-width: 2px;
   border-color: transparent;
-  background-color: #FAFAFA;
+  background-color: #F1F1F1;
 }
 
 @media not all and (min-resolution: 0.001dpcm) {
@@ -4658,36 +4658,36 @@ exports[`Select renders medium Select 1`] = `
 }
 
 .emotion-0:hover:not(:disabled) {
-  background-color: #FAFAFA;
+  background-color: #F1F1F1;
 }
 
 .emotion-0:valid:hover:not(:disabled) {
-  border-color: #23A248;
-  background-color: #FAFAFA;
+  border-color: #007B22;
+  background-color: #F1F1F1;
 }
 
 .emotion-0:valid:focus:not(:disabled) {
   border-color: #3768FB;
-  background-color: #FAFAFA;
+  background-color: #F1F1F1;
 }
 
 .emotion-0:disabled {
-  border-color: #F4F4F4;
-  color: #C0C0C0;
+  border-color: #E2E2E2;
+  color: #ABABAB;
 }
 
 .emotion-0:disabled svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-0:invalid:focus:not(:disabled) {
   border-color: #3768FB;
-  background-color: #FAFAFA;
+  background-color: #F1F1F1;
 }
 
 .emotion-0:invalid:hover:not(:disabled) {
-  border-color: #EF1703;
-  background-color: #FAFAFA;
+  border-color: #D60000;
+  background-color: #F1F1F1;
 }
 
 .emotion-1 {
@@ -4727,7 +4727,7 @@ exports[`Select renders medium Select 1`] = `
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
-  color: #535353;
+  color: #6A6A6A;
   font-family: "DM Sans",sans-serif;
   font-size: 14px;
   line-height: 1.5;
@@ -4775,7 +4775,7 @@ exports[`Select renders medium Select 1`] = `
   display: inline-block;
   vertical-align: middle;
   overflow: hidden;
-  fill: #2E2E2E;
+  fill: #3B3B3B;
   vertical-align: unset;
   display: inline-block;
 }
@@ -4921,15 +4921,15 @@ exports[`Select renders select with a pre selected option 1`] = `
   margin-bottom: 8px;
   background-color: transparent;
   border-style: solid;
-  border-color: #CCCCCC;
+  border-color: #919191;
   border-width: 1px;
   border-radius: 8px;
-  color: #2E2E2E;
+  color: #3B3B3B;
   text-overflow: ellipsis;
 }
 
 .emotion-0 svg {
-  fill: #2E2E2E;
+  fill: #3B3B3B;
 }
 
 .emotion-0:focus:not(:disabled) {
@@ -4937,7 +4937,7 @@ exports[`Select renders select with a pre selected option 1`] = `
   outline-style: solid;
   outline-width: 2px;
   border-color: transparent;
-  background-color: #FAFAFA;
+  background-color: #F1F1F1;
 }
 
 @media not all and (min-resolution: 0.001dpcm) {
@@ -4949,36 +4949,36 @@ exports[`Select renders select with a pre selected option 1`] = `
 }
 
 .emotion-0:hover:not(:disabled) {
-  background-color: #FAFAFA;
+  background-color: #F1F1F1;
 }
 
 .emotion-0:valid:hover:not(:disabled) {
-  border-color: #23A248;
-  background-color: #FAFAFA;
+  border-color: #007B22;
+  background-color: #F1F1F1;
 }
 
 .emotion-0:valid:focus:not(:disabled) {
   border-color: #3768FB;
-  background-color: #FAFAFA;
+  background-color: #F1F1F1;
 }
 
 .emotion-0:disabled {
-  border-color: #F4F4F4;
-  color: #C0C0C0;
+  border-color: #E2E2E2;
+  color: #ABABAB;
 }
 
 .emotion-0:disabled svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-0:invalid:focus:not(:disabled) {
   border-color: #3768FB;
-  background-color: #FAFAFA;
+  background-color: #F1F1F1;
 }
 
 .emotion-0:invalid:hover:not(:disabled) {
-  border-color: #EF1703;
-  background-color: #FAFAFA;
+  border-color: #D60000;
+  background-color: #F1F1F1;
 }
 
 .emotion-1 {
@@ -5018,7 +5018,7 @@ exports[`Select renders select with a pre selected option 1`] = `
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
-  color: #2E2E2E;
+  color: #3B3B3B;
   font-family: "DM Sans",sans-serif;
   font-size: 14px;
   line-height: 1.5;
@@ -5090,7 +5090,7 @@ exports[`Select renders select with a pre selected option 1`] = `
   display: inline-block;
   vertical-align: middle;
   overflow: hidden;
-  fill: #2E2E2E;
+  fill: #3B3B3B;
   vertical-align: unset;
   display: inline-block;
 }
@@ -5246,15 +5246,15 @@ exports[`Select renders select with a selected option 1`] = `
   margin-bottom: 8px;
   background-color: transparent;
   border-style: solid;
-  border-color: #CCCCCC;
+  border-color: #919191;
   border-width: 1px;
   border-radius: 8px;
-  color: #2E2E2E;
+  color: #3B3B3B;
   text-overflow: ellipsis;
 }
 
 .emotion-0 svg {
-  fill: #2E2E2E;
+  fill: #3B3B3B;
 }
 
 .emotion-0:focus:not(:disabled) {
@@ -5262,7 +5262,7 @@ exports[`Select renders select with a selected option 1`] = `
   outline-style: solid;
   outline-width: 2px;
   border-color: transparent;
-  background-color: #FAFAFA;
+  background-color: #F1F1F1;
 }
 
 @media not all and (min-resolution: 0.001dpcm) {
@@ -5274,36 +5274,36 @@ exports[`Select renders select with a selected option 1`] = `
 }
 
 .emotion-0:hover:not(:disabled) {
-  background-color: #FAFAFA;
+  background-color: #F1F1F1;
 }
 
 .emotion-0:valid:hover:not(:disabled) {
-  border-color: #23A248;
-  background-color: #FAFAFA;
+  border-color: #007B22;
+  background-color: #F1F1F1;
 }
 
 .emotion-0:valid:focus:not(:disabled) {
   border-color: #3768FB;
-  background-color: #FAFAFA;
+  background-color: #F1F1F1;
 }
 
 .emotion-0:disabled {
-  border-color: #F4F4F4;
-  color: #C0C0C0;
+  border-color: #E2E2E2;
+  color: #ABABAB;
 }
 
 .emotion-0:disabled svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-0:invalid:focus:not(:disabled) {
   border-color: #3768FB;
-  background-color: #FAFAFA;
+  background-color: #F1F1F1;
 }
 
 .emotion-0:invalid:hover:not(:disabled) {
-  border-color: #EF1703;
-  background-color: #FAFAFA;
+  border-color: #D60000;
+  background-color: #F1F1F1;
 }
 
 .emotion-1 {
@@ -5343,7 +5343,7 @@ exports[`Select renders select with a selected option 1`] = `
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
-  color: #2E2E2E;
+  color: #3B3B3B;
   font-family: "DM Sans",sans-serif;
   font-size: 14px;
   line-height: 1.5;
@@ -5415,7 +5415,7 @@ exports[`Select renders select with a selected option 1`] = `
   display: inline-block;
   vertical-align: middle;
   overflow: hidden;
-  fill: #2E2E2E;
+  fill: #3B3B3B;
   vertical-align: unset;
   display: inline-block;
 }
@@ -5571,15 +5571,15 @@ exports[`Select renders select with leading and trailing icon 1`] = `
   margin-bottom: 8px;
   background-color: transparent;
   border-style: solid;
-  border-color: #CCCCCC;
+  border-color: #919191;
   border-width: 1px;
   border-radius: 8px;
-  color: #2E2E2E;
+  color: #3B3B3B;
   text-overflow: ellipsis;
 }
 
 .emotion-0 svg {
-  fill: #2E2E2E;
+  fill: #3B3B3B;
 }
 
 .emotion-0:focus:not(:disabled) {
@@ -5587,7 +5587,7 @@ exports[`Select renders select with leading and trailing icon 1`] = `
   outline-style: solid;
   outline-width: 2px;
   border-color: transparent;
-  background-color: #FAFAFA;
+  background-color: #F1F1F1;
 }
 
 @media not all and (min-resolution: 0.001dpcm) {
@@ -5599,36 +5599,36 @@ exports[`Select renders select with leading and trailing icon 1`] = `
 }
 
 .emotion-0:hover:not(:disabled) {
-  background-color: #FAFAFA;
+  background-color: #F1F1F1;
 }
 
 .emotion-0:valid:hover:not(:disabled) {
-  border-color: #23A248;
-  background-color: #FAFAFA;
+  border-color: #007B22;
+  background-color: #F1F1F1;
 }
 
 .emotion-0:valid:focus:not(:disabled) {
   border-color: #3768FB;
-  background-color: #FAFAFA;
+  background-color: #F1F1F1;
 }
 
 .emotion-0:disabled {
-  border-color: #F4F4F4;
-  color: #C0C0C0;
+  border-color: #E2E2E2;
+  color: #ABABAB;
 }
 
 .emotion-0:disabled svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-0:invalid:focus:not(:disabled) {
   border-color: #3768FB;
-  background-color: #FAFAFA;
+  background-color: #F1F1F1;
 }
 
 .emotion-0:invalid:hover:not(:disabled) {
-  border-color: #EF1703;
-  background-color: #FAFAFA;
+  border-color: #D60000;
+  background-color: #F1F1F1;
 }
 
 .emotion-1 {
@@ -5650,7 +5650,7 @@ exports[`Select renders select with leading and trailing icon 1`] = `
   display: inline-block;
   vertical-align: middle;
   overflow: hidden;
-  fill: #2E2E2E;
+  fill: #3B3B3B;
   vertical-align: unset;
   display: inline-block;
 }
@@ -5713,7 +5713,7 @@ exports[`Select renders select with leading and trailing icon 1`] = `
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
-  color: #535353;
+  color: #6A6A6A;
   font-family: "DM Sans",sans-serif;
   font-size: 14px;
   line-height: 1.5;
@@ -5920,15 +5920,15 @@ exports[`Select renders select with non-string options 1`] = `
   margin-bottom: 8px;
   background-color: transparent;
   border-style: solid;
-  border-color: #CCCCCC;
+  border-color: #919191;
   border-width: 1px;
   border-radius: 8px;
-  color: #2E2E2E;
+  color: #3B3B3B;
   text-overflow: ellipsis;
 }
 
 .emotion-0 svg {
-  fill: #2E2E2E;
+  fill: #3B3B3B;
 }
 
 .emotion-0:focus:not(:disabled) {
@@ -5936,7 +5936,7 @@ exports[`Select renders select with non-string options 1`] = `
   outline-style: solid;
   outline-width: 2px;
   border-color: transparent;
-  background-color: #FAFAFA;
+  background-color: #F1F1F1;
 }
 
 @media not all and (min-resolution: 0.001dpcm) {
@@ -5948,36 +5948,36 @@ exports[`Select renders select with non-string options 1`] = `
 }
 
 .emotion-0:hover:not(:disabled) {
-  background-color: #FAFAFA;
+  background-color: #F1F1F1;
 }
 
 .emotion-0:valid:hover:not(:disabled) {
-  border-color: #23A248;
-  background-color: #FAFAFA;
+  border-color: #007B22;
+  background-color: #F1F1F1;
 }
 
 .emotion-0:valid:focus:not(:disabled) {
   border-color: #3768FB;
-  background-color: #FAFAFA;
+  background-color: #F1F1F1;
 }
 
 .emotion-0:disabled {
-  border-color: #F4F4F4;
-  color: #C0C0C0;
+  border-color: #E2E2E2;
+  color: #ABABAB;
 }
 
 .emotion-0:disabled svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-0:invalid:focus:not(:disabled) {
   border-color: #3768FB;
-  background-color: #FAFAFA;
+  background-color: #F1F1F1;
 }
 
 .emotion-0:invalid:hover:not(:disabled) {
-  border-color: #EF1703;
-  background-color: #FAFAFA;
+  border-color: #D60000;
+  background-color: #F1F1F1;
 }
 
 .emotion-1 {
@@ -6017,7 +6017,7 @@ exports[`Select renders select with non-string options 1`] = `
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
-  color: #2E2E2E;
+  color: #3B3B3B;
   font-family: "DM Sans",sans-serif;
   font-size: 14px;
   line-height: 1.5;
@@ -6089,7 +6089,7 @@ exports[`Select renders select with non-string options 1`] = `
   display: inline-block;
   vertical-align: middle;
   overflow: hidden;
-  fill: #2E2E2E;
+  fill: #3B3B3B;
   vertical-align: unset;
   display: inline-block;
 }
@@ -6247,15 +6247,15 @@ exports[`Select renders small Select 1`] = `
   margin-bottom: 8px;
   background-color: transparent;
   border-style: solid;
-  border-color: #CCCCCC;
+  border-color: #919191;
   border-width: 1px;
   border-radius: 8px;
-  color: #2E2E2E;
+  color: #3B3B3B;
   text-overflow: ellipsis;
 }
 
 .emotion-0 svg {
-  fill: #2E2E2E;
+  fill: #3B3B3B;
 }
 
 .emotion-0:focus:not(:disabled) {
@@ -6263,7 +6263,7 @@ exports[`Select renders small Select 1`] = `
   outline-style: solid;
   outline-width: 2px;
   border-color: transparent;
-  background-color: #FAFAFA;
+  background-color: #F1F1F1;
 }
 
 @media not all and (min-resolution: 0.001dpcm) {
@@ -6275,36 +6275,36 @@ exports[`Select renders small Select 1`] = `
 }
 
 .emotion-0:hover:not(:disabled) {
-  background-color: #FAFAFA;
+  background-color: #F1F1F1;
 }
 
 .emotion-0:valid:hover:not(:disabled) {
-  border-color: #23A248;
-  background-color: #FAFAFA;
+  border-color: #007B22;
+  background-color: #F1F1F1;
 }
 
 .emotion-0:valid:focus:not(:disabled) {
   border-color: #3768FB;
-  background-color: #FAFAFA;
+  background-color: #F1F1F1;
 }
 
 .emotion-0:disabled {
-  border-color: #F4F4F4;
-  color: #C0C0C0;
+  border-color: #E2E2E2;
+  color: #ABABAB;
 }
 
 .emotion-0:disabled svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-0:invalid:focus:not(:disabled) {
   border-color: #3768FB;
-  background-color: #FAFAFA;
+  background-color: #F1F1F1;
 }
 
 .emotion-0:invalid:hover:not(:disabled) {
-  border-color: #EF1703;
-  background-color: #FAFAFA;
+  border-color: #D60000;
+  background-color: #F1F1F1;
 }
 
 .emotion-1 {
@@ -6344,7 +6344,7 @@ exports[`Select renders small Select 1`] = `
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
-  color: #535353;
+  color: #6A6A6A;
   font-family: "DM Sans",sans-serif;
   font-size: 14px;
   line-height: 1.5;
@@ -6392,7 +6392,7 @@ exports[`Select renders small Select 1`] = `
   display: inline-block;
   vertical-align: middle;
   overflow: hidden;
-  fill: #2E2E2E;
+  fill: #3B3B3B;
   vertical-align: unset;
   display: inline-block;
 }
@@ -6538,15 +6538,15 @@ exports[`Select should render custom placeholder 1`] = `
   margin-bottom: 8px;
   background-color: transparent;
   border-style: solid;
-  border-color: #CCCCCC;
+  border-color: #919191;
   border-width: 1px;
   border-radius: 8px;
-  color: #2E2E2E;
+  color: #3B3B3B;
   text-overflow: ellipsis;
 }
 
 .emotion-0 svg {
-  fill: #2E2E2E;
+  fill: #3B3B3B;
 }
 
 .emotion-0:focus:not(:disabled) {
@@ -6554,7 +6554,7 @@ exports[`Select should render custom placeholder 1`] = `
   outline-style: solid;
   outline-width: 2px;
   border-color: transparent;
-  background-color: #FAFAFA;
+  background-color: #F1F1F1;
 }
 
 @media not all and (min-resolution: 0.001dpcm) {
@@ -6566,36 +6566,36 @@ exports[`Select should render custom placeholder 1`] = `
 }
 
 .emotion-0:hover:not(:disabled) {
-  background-color: #FAFAFA;
+  background-color: #F1F1F1;
 }
 
 .emotion-0:valid:hover:not(:disabled) {
-  border-color: #23A248;
-  background-color: #FAFAFA;
+  border-color: #007B22;
+  background-color: #F1F1F1;
 }
 
 .emotion-0:valid:focus:not(:disabled) {
   border-color: #3768FB;
-  background-color: #FAFAFA;
+  background-color: #F1F1F1;
 }
 
 .emotion-0:disabled {
-  border-color: #F4F4F4;
-  color: #C0C0C0;
+  border-color: #E2E2E2;
+  color: #ABABAB;
 }
 
 .emotion-0:disabled svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-0:invalid:focus:not(:disabled) {
   border-color: #3768FB;
-  background-color: #FAFAFA;
+  background-color: #F1F1F1;
 }
 
 .emotion-0:invalid:hover:not(:disabled) {
-  border-color: #EF1703;
-  background-color: #FAFAFA;
+  border-color: #D60000;
+  background-color: #F1F1F1;
 }
 
 .emotion-1 {
@@ -6635,7 +6635,7 @@ exports[`Select should render custom placeholder 1`] = `
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
-  color: #535353;
+  color: #6A6A6A;
   font-family: "DM Sans",sans-serif;
   font-size: 14px;
   line-height: 1.5;
@@ -6683,7 +6683,7 @@ exports[`Select should render custom placeholder 1`] = `
   display: inline-block;
   vertical-align: middle;
   overflow: hidden;
-  fill: #2E2E2E;
+  fill: #3B3B3B;
   vertical-align: unset;
   display: inline-block;
 }
@@ -6829,15 +6829,15 @@ exports[`Select virtualize long list 1`] = `
   margin-bottom: 8px;
   background-color: transparent;
   border-style: solid;
-  border-color: #CCCCCC;
+  border-color: #919191;
   border-width: 1px;
   border-radius: 8px;
-  color: #2E2E2E;
+  color: #3B3B3B;
   text-overflow: ellipsis;
 }
 
 .emotion-0 svg {
-  fill: #2E2E2E;
+  fill: #3B3B3B;
 }
 
 .emotion-0:focus:not(:disabled) {
@@ -6845,7 +6845,7 @@ exports[`Select virtualize long list 1`] = `
   outline-style: solid;
   outline-width: 2px;
   border-color: transparent;
-  background-color: #FAFAFA;
+  background-color: #F1F1F1;
 }
 
 @media not all and (min-resolution: 0.001dpcm) {
@@ -6857,36 +6857,36 @@ exports[`Select virtualize long list 1`] = `
 }
 
 .emotion-0:hover:not(:disabled) {
-  background-color: #FAFAFA;
+  background-color: #F1F1F1;
 }
 
 .emotion-0:valid:hover:not(:disabled) {
-  border-color: #23A248;
-  background-color: #FAFAFA;
+  border-color: #007B22;
+  background-color: #F1F1F1;
 }
 
 .emotion-0:valid:focus:not(:disabled) {
   border-color: #3768FB;
-  background-color: #FAFAFA;
+  background-color: #F1F1F1;
 }
 
 .emotion-0:disabled {
-  border-color: #F4F4F4;
-  color: #C0C0C0;
+  border-color: #E2E2E2;
+  color: #ABABAB;
 }
 
 .emotion-0:disabled svg {
-  fill: #C0C0C0;
+  fill: #ABABAB;
 }
 
 .emotion-0:invalid:focus:not(:disabled) {
   border-color: #3768FB;
-  background-color: #FAFAFA;
+  background-color: #F1F1F1;
 }
 
 .emotion-0:invalid:hover:not(:disabled) {
-  border-color: #EF1703;
-  background-color: #FAFAFA;
+  border-color: #D60000;
+  background-color: #F1F1F1;
 }
 
 .emotion-1 {
@@ -6926,7 +6926,7 @@ exports[`Select virtualize long list 1`] = `
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
-  color: #535353;
+  color: #6A6A6A;
   font-family: "DM Sans",sans-serif;
   font-size: 14px;
   line-height: 1.5;
@@ -6974,7 +6974,7 @@ exports[`Select virtualize long list 1`] = `
   display: inline-block;
   vertical-align: middle;
   overflow: hidden;
-  fill: #2E2E2E;
+  fill: #3B3B3B;
   vertical-align: unset;
   display: inline-block;
 }
@@ -7111,7 +7111,7 @@ exports[`Select virtualize long list 1`] = `
   -webkit-column-gap: 8px;
   column-gap: 8px;
   background-color: transparent;
-  color: #2E2E2E;
+  color: #3B3B3B;
   text-overflow: ellipsis;
   border-radius: 0;
   border-style: solid;
@@ -7133,43 +7133,43 @@ exports[`Select virtualize long list 1`] = `
 }
 
 .emotion-2:hover:not(:disabled) {
-  background-color: #FAFAFA;
+  background-color: #F1F1F1;
 }
 
 .emotion-2:focus:not(:disabled) {
-  background-color: #FAFAFA;
+  background-color: #F1F1F1;
   border-color: #3358CC;
 }
 
 .emotion-2:active:not(:disabled) {
-  background-color: #E0E7FF;
+  background-color: #ECF1FF;
 }
 
 .emotion-2:disabled {
-  color: #C0C0C0;
+  color: #ABABAB;
 }
 
 .emotion-2:selected:hover:not(:disabled) {
-  background-color: #E0E7FF;
-  color: #0A0A0A;
+  background-color: #ECF1FF;
+  color: #111111;
 }
 
 .emotion-2:selected:focus:not(:disabled) {
-  background-color: #E0E7FF;
+  background-color: #ECF1FF;
   border-color: #3358CC;
 }
 
 .emotion-2:selected:active:not(:disabled) {
-  background-color: #E0E7FF;
+  background-color: #ECF1FF;
 }
 
 .emotion-2:selected:focus:active:not(:disabled) {
-  background-color: #E0E7FF;
+  background-color: #ECF1FF;
 }
 
 .emotion-2:selected:focus:hover:not(:disabled) {
-  background-color: #E0E7FF;
-  color: #0A0A0A;
+  background-color: #ECF1FF;
+  color: #111111;
 }
 
 
    
   .emotion-0 {
-  color: #2E2E2E;
+  color: #3B3B3B;
 }
 
 @media screen and (max-width: 1023px) {
@@ -61,7 +61,7 @@ exports[`Standfirst renders as h4 html tag 1`] = `
 exports[`Standfirst renders as span html tag 1`] = `
 
   .emotion-0 {
-  color: #2E2E2E;
+  color: #3B3B3B;
   display: inline-block;
 }
 
@@ -178,7 +178,7 @@ exports[`Standfirst renders with custom style preset 1`] = `
 exports[`Standfirst renders with custom typography preset 1`] = `
 
   .emotion-0 {
-  color: #2E2E2E;
+  color: #3B3B3B;
   font-family: "Bitter",serif;
   font-size: 16px;
   line-height: 18px;
@@ -208,7 +208,7 @@ exports[`Standfirst renders with custom typography preset 1`] = `
 exports[`Standfirst renders with default styles 1`] = `
 
   .emotion-0 {
-  color: #2E2E2E;
+  color: #3B3B3B;
 }
 
 @media screen and (max-width: 1023px) {
@@ -266,7 +266,7 @@ exports[`Standfirst renders with default styles 1`] = `
 exports[`Standfirst renders with logical prop overrides 1`] = `
 
   .emotion-0 {
-  color: #2E2E2E;
+  color: #3B3B3B;
   padding-inline: 20px;
   padding-block: 10px;
 }
diff --git a/src/structured-list/__tests__/__snapshots__/structured-list.test.tsx.snap b/src/structured-list/__tests__/__snapshots__/structured-list.test.tsx.snap
index e0bb535700..daea369b27 100644
--- a/src/structured-list/__tests__/__snapshots__/structured-list.test.tsx.snap
+++ b/src/structured-list/__tests__/__snapshots__/structured-list.test.tsx.snap
@@ -22,7 +22,7 @@ exports[`StructuredList with href renders four cells with href 1`] = `
 
 .emotion-3 {
   border-style: solid;
-  border-color: #DEDEDE;
+  border-color: #C6C6C6;
   border-width: 1px;
   border-width: 0px;
   margin: 0;
@@ -140,11 +140,11 @@ exports[`StructuredList with href renders one cell with disabled link and hidden
 }
 
 .emotion-4:hover:not(:disabled) {
-  background-color: #FAFAFA;
+  background-color: #F1F1F1;
 }
 
 .emotion-4:active:not(:disabled) {
-  background-color: #F4F4F4;
+  background-color: #E2E2E2;
 }
 
 .emotion-4:disabled {
@@ -192,7 +192,7 @@ exports[`StructuredList with href renders one cell with disabled link and hidden
 
 .emotion-7 {
   margin: 0;
-  color: #0A0A0A;
+  color: #111111;
   font-family: "Poppins",sans-serif;
   font-size: 16px;
   line-height: 18px;
@@ -202,7 +202,7 @@ exports[`StructuredList with href renders one cell with disabled link and hidden
 }
 
 .emotion-7 svg {
-  fill: #0A0A0A;
+  fill: #111111;
 }
 
 .emotion-7::before {
@@ -219,7 +219,7 @@ exports[`StructuredList with href renders one cell with disabled link and hidden
 
 .emotion-8 {
   border-style: solid;
-  border-color: #DEDEDE;
+  border-color: #C6C6C6;
   border-width: 1px;
   border-width: 0px;
   margin: 0;
@@ -384,11 +384,11 @@ exports[`StructuredList with href renders one cell with external link and hidden
 }
 
 .emotion-4:hover:not(:disabled) {
-  background-color: #FAFAFA;
+  background-color: #F1F1F1;
 }
 
 .emotion-4:active:not(:disabled) {
-  background-color: #F4F4F4;
+  background-color: #E2E2E2;
 }
 
 .emotion-4:disabled {
@@ -436,7 +436,7 @@ exports[`StructuredList with href renders one cell with external link and hidden
 
 .emotion-7 {
   margin: 0;
-  color: #0A0A0A;
+  color: #111111;
   font-family: "Poppins",sans-serif;
   font-size: 16px;
   line-height: 18px;
@@ -446,7 +446,7 @@ exports[`StructuredList with href renders one cell with external link and hidden
 }
 
 .emotion-7 svg {
-  fill: #0A0A0A;
+  fill: #111111;
 }
 
 .emotion-7::before {
@@ -463,7 +463,7 @@ exports[`StructuredList with href renders one cell with external link and hidden
 
 .emotion-8 {
   border-style: solid;
-  border-color: #DEDEDE;
+  border-color: #C6C6C6;
   border-width: 1px;
   border-width: 0px;
   margin: 0;
@@ -624,11 +624,11 @@ exports[`StructuredList with href renders one cell with external link icon 1`] =
 }
 
 .emotion-4:hover:not(:disabled) {
-  background-color: #FAFAFA;
+  background-color: #F1F1F1;
 }
 
 .emotion-4:active:not(:disabled) {
-  background-color: #F4F4F4;
+  background-color: #E2E2E2;
 }
 
 .emotion-4:disabled {
@@ -687,7 +687,7 @@ exports[`StructuredList with href renders one cell with external link icon 1`] =
 
 .emotion-7 {
   margin: 0;
-  color: #0A0A0A;
+  color: #111111;
   font-family: "Poppins",sans-serif;
   font-size: 16px;
   line-height: 18px;
@@ -697,7 +697,7 @@ exports[`StructuredList with href renders one cell with external link icon 1`] =
 }
 
 .emotion-7 svg {
-  fill: #0A0A0A;
+  fill: #111111;
 }
 
 .emotion-7::before {
@@ -771,8 +771,8 @@ exports[`StructuredList with href renders one cell with external link icon 1`] =
   display: inline-block;
   vertical-align: middle;
   overflow: hidden;
-  color: #0A0A0A;
-  fill: #0A0A0A;
+  color: #111111;
+  fill: #111111;
   vertical-align: unset;
   display: inline-block;
 }
@@ -796,8 +796,8 @@ exports[`StructuredList with href renders one cell with external link icon 1`] =
 .emotion-11.emotion-11 {
   width: 16px;
   height: 16px;
-  color: #0A0A0A;
-  fill: #0A0A0A;
+  color: #111111;
+  fill: #111111;
 }
 
 @media screen and (prefers-reduced-motion: no-preference) {
@@ -818,7 +818,7 @@ exports[`StructuredList with href renders one cell with external link icon 1`] =
 
 .emotion-13 {
   border-style: solid;
-  border-color: #DEDEDE;
+  border-color: #C6C6C6;
   border-width: 1px;
   border-width: 0px;
   margin: 0;
@@ -1035,11 +1035,11 @@ exports[`StructuredList with href renders one cell with internal link and hidden
 }
 
 .emotion-4:hover:not(:disabled) {
-  background-color: #FAFAFA;
+  background-color: #F1F1F1;
 }
 
 .emotion-4:active:not(:disabled) {
-  background-color: #F4F4F4;
+  background-color: #E2E2E2;
 }
 
 .emotion-4:disabled {
@@ -1087,7 +1087,7 @@ exports[`StructuredList with href renders one cell with internal link and hidden
 
 .emotion-7 {
   margin: 0;
-  color: #0A0A0A;
+  color: #111111;
   font-family: "Poppins",sans-serif;
   font-size: 16px;
   line-height: 18px;
@@ -1097,7 +1097,7 @@ exports[`StructuredList with href renders one cell with internal link and hidden
 }
 
 .emotion-7 svg {
-  fill: #0A0A0A;
+  fill: #111111;
 }
 
 .emotion-7::before {
@@ -1114,7 +1114,7 @@ exports[`StructuredList with href renders one cell with internal link and hidden
 
 .emotion-8 {
   border-style: solid;
-  border-color: #DEDEDE;
+  border-color: #C6C6C6;
   border-width: 1px;
   border-width: 0px;
   margin: 0;
@@ -1275,11 +1275,11 @@ exports[`StructuredList with href renders one cell with internal link icon 1`] =
 }
 
 .emotion-4:hover:not(:disabled) {
-  background-color: #FAFAFA;
+  background-color: #F1F1F1;
 }
 
 .emotion-4:active:not(:disabled) {
-  background-color: #F4F4F4;
+  background-color: #E2E2E2;
 }
 
 .emotion-4:disabled {
@@ -1338,7 +1338,7 @@ exports[`StructuredList with href renders one cell with internal link icon 1`] =
 
 .emotion-7 {
   margin: 0;
-  color: #0A0A0A;
+  color: #111111;
   font-family: "Poppins",sans-serif;
   font-size: 16px;
   line-height: 18px;
@@ -1348,7 +1348,7 @@ exports[`StructuredList with href renders one cell with internal link icon 1`] =
 }
 
 .emotion-7 svg {
-  fill: #0A0A0A;
+  fill: #111111;
 }
 
 .emotion-7::before {
@@ -1422,8 +1422,8 @@ exports[`StructuredList with href renders one cell with internal link icon 1`] =
   display: inline-block;
   vertical-align: middle;
   overflow: hidden;
-  color: #0A0A0A;
-  fill: #0A0A0A;
+  color: #111111;
+  fill: #111111;
   vertical-align: unset;
   display: inline-block;
 }
@@ -1447,8 +1447,8 @@ exports[`StructuredList with href renders one cell with internal link icon 1`] =
 .emotion-11.emotion-11 {
   width: 16px;
   height: 16px;
-  color: #0A0A0A;
-  fill: #0A0A0A;
+  color: #111111;
+  fill: #111111;
 }
 
 @media screen and (prefers-reduced-motion: no-preference) {
@@ -1469,7 +1469,7 @@ exports[`StructuredList with href renders one cell with internal link icon 1`] =
 
 .emotion-13 {
   border-style: solid;
-  border-color: #DEDEDE;
+  border-color: #C6C6C6;
   border-width: 1px;
   border-width: 0px;
   margin: 0;
@@ -1688,11 +1688,11 @@ exports[`StructuredList with href renders three cells with custom icon 1`] = `
 }
 
 .emotion-4:hover:not(:disabled) {
-  background-color: #FAFAFA;
+  background-color: #F1F1F1;
 }
 
 .emotion-4:active:not(:disabled) {
-  background-color: #F4F4F4;
+  background-color: #E2E2E2;
 }
 
 .emotion-4:disabled {
@@ -1815,7 +1815,7 @@ exports[`StructuredList with href renders three cells with custom icon 1`] = `
 
 .emotion-10 {
   margin: 0;
-  color: #0A0A0A;
+  color: #111111;
   font-family: "Poppins",sans-serif;
   font-size: 16px;
   line-height: 18px;
@@ -1825,7 +1825,7 @@ exports[`StructuredList with href renders three cells with custom icon 1`] = `
 }
 
 .emotion-10 svg {
-  fill: #0A0A0A;
+  fill: #111111;
 }
 
 .emotion-10::before {
@@ -1870,7 +1870,7 @@ exports[`StructuredList with href renders three cells with custom icon 1`] = `
 
 .emotion-13 {
   margin: 0;
-  color: #535353;
+  color: #6A6A6A;
   font-family: "DM Sans",sans-serif;
   font-size: 14px;
   line-height: 21px;
@@ -1880,7 +1880,7 @@ exports[`StructuredList with href renders three cells with custom icon 1`] = `
 }
 
 .emotion-13 svg {
-  fill: #535353;
+  fill: #6A6A6A;
 }
 
 .emotion-13::before {
@@ -1924,7 +1924,7 @@ exports[`StructuredList with href renders three cells with custom icon 1`] = `
   display: inline-block;
   vertical-align: middle;
   overflow: hidden;
-  fill: #2E2E2E;
+  fill: #3B3B3B;
   vertical-align: unset;
   display: inline-block;
 }
@@ -1952,7 +1952,7 @@ exports[`StructuredList with href renders three cells with custom icon 1`] = `
 
 .emotion-18 {
   border-style: solid;
-  border-color: #DEDEDE;
+  border-color: #C6C6C6;
   border-width: 1px;
   border-width: 0px;
   margin: 0;
@@ -2211,11 +2211,11 @@ exports[`StructuredList with href renders two cells with external link icon 1`]
 }
 
 .emotion-4:hover:not(:disabled) {
-  background-color: #FAFAFA;
+  background-color: #F1F1F1;
 }
 
 .emotion-4:active:not(:disabled) {
-  background-color: #F4F4F4;
+  background-color: #E2E2E2;
 }
 
 .emotion-4:disabled {
@@ -2338,7 +2338,7 @@ exports[`StructuredList with href renders two cells with external link icon 1`]
 
 .emotion-10 {
   margin: 0;
-  color: #0A0A0A;
+  color: #111111;
   font-family: "Poppins",sans-serif;
   font-size: 16px;
   line-height: 18px;
@@ -2348,7 +2348,7 @@ exports[`StructuredList with href renders two cells with external link icon 1`]
 }
 
 .emotion-10 svg {
-  fill: #0A0A0A;
+  fill: #111111;
 }
 
 .emotion-10::before {
@@ -2393,7 +2393,7 @@ exports[`StructuredList with href renders two cells with external link icon 1`]
 
 .emotion-13 {
   margin: 0;
-  color: #535353;
+  color: #6A6A6A;
   font-family: "DM Sans",sans-serif;
   font-size: 14px;
   line-height: 21px;
@@ -2403,7 +2403,7 @@ exports[`StructuredList with href renders two cells with external link icon 1`]
 }
 
 .emotion-13 svg {
-  fill: #535353;
+  fill: #6A6A6A;
 }
 
 .emotion-13::before {
@@ -2466,8 +2466,8 @@ exports[`StructuredList with href renders two cells with external link icon 1`]
   display: inline-block;
   vertical-align: middle;
   overflow: hidden;
-  color: #0A0A0A;
-  fill: #0A0A0A;
+  color: #111111;
+  fill: #111111;
   vertical-align: unset;
   display: inline-block;
 }
@@ -2491,8 +2491,8 @@ exports[`StructuredList with href renders two cells with external link icon 1`]
 .emotion-17.emotion-17 {
   width: 16px;
   height: 16px;
-  color: #0A0A0A;
-  fill: #0A0A0A;
+  color: #111111;
+  fill: #111111;
 }
 
 @media screen and (prefers-reduced-motion: no-preference) {
@@ -2513,7 +2513,7 @@ exports[`StructuredList with href renders two cells with external link icon 1`]
 
 .emotion-19 {
   border-style: solid;
-  border-color: #DEDEDE;
+  border-color: #C6C6C6;
   border-width: 1px;
   border-width: 0px;
   margin: 0;
@@ -2780,11 +2780,11 @@ exports[`StructuredList with href renders two cells with internal link icon 1`]
 }
 
 .emotion-4:hover:not(:disabled) {
-  background-color: #FAFAFA;
+  background-color: #F1F1F1;
 }
 
 .emotion-4:active:not(:disabled) {
-  background-color: #F4F4F4;
+  background-color: #E2E2E2;
 }
 
 .emotion-4:disabled {
@@ -2907,7 +2907,7 @@ exports[`StructuredList with href renders two cells with internal link icon 1`]
 
 .emotion-10 {
   margin: 0;
-  color: #0A0A0A;
+  color: #111111;
   font-family: "Poppins",sans-serif;
   font-size: 16px;
   line-height: 18px;
@@ -2917,7 +2917,7 @@ exports[`StructuredList with href renders two cells with internal link icon 1`]
 }
 
 .emotion-10 svg {
-  fill: #0A0A0A;
+  fill: #111111;
 }
 
 .emotion-10::before {
@@ -2962,7 +2962,7 @@ exports[`StructuredList with href renders two cells with internal link icon 1`]
 
 .emotion-13 {
   margin: 0;
-  color: #535353;
+  color: #6A6A6A;
   font-family: "DM Sans",sans-serif;
   font-size: 14px;
   line-height: 21px;
@@ -2972,7 +2972,7 @@ exports[`StructuredList with href renders two cells with internal link icon 1`]
 }
 
 .emotion-13 svg {
-  fill: #535353;
+  fill: #6A6A6A;
 }
 
 .emotion-13::before {
@@ -3035,8 +3035,8 @@ exports[`StructuredList with href renders two cells with internal link icon 1`]
   display: inline-block;
   vertical-align: middle;
   overflow: hidden;
-  color: #0A0A0A;
-  fill: #0A0A0A;
+  color: #111111;
+  fill: #111111;
   vertical-align: unset;
   display: inline-block;
 }
@@ -3060,8 +3060,8 @@ exports[`StructuredList with href renders two cells with internal link icon 1`]
 .emotion-17.emotion-17 {
   width: 16px;
   height: 16px;
-  color: #0A0A0A;
-  fill: #0A0A0A;
+  color: #111111;
+  fill: #111111;
 }
 
 @media screen and (prefers-reduced-motion: no-preference) {
@@ -3082,7 +3082,7 @@ exports[`StructuredList with href renders two cells with internal link icon 1`]
 
 .emotion-19 {
   border-style: solid;
-  border-color: #DEDEDE;
+  border-color: #C6C6C6;
   border-width: 1px;
   border-width: 0px;
   margin: 0;
@@ -3351,11 +3351,11 @@ exports[`StructuredList with href renders two cells with pullRightOnSecond and h
 }
 
 .emotion-4:hover:not(:disabled) {
-  background-color: #FAFAFA;
+  background-color: #F1F1F1;
 }
 
 .emotion-4:active:not(:disabled) {
-  background-color: #F4F4F4;
+  background-color: #E2E2E2;
 }
 
 .emotion-4:disabled {
@@ -3414,7 +3414,7 @@ exports[`StructuredList with href renders two cells with pullRightOnSecond and h
 
 .emotion-7 {
   margin: 0;
-  color: #0A0A0A;
+  color: #111111;
   font-family: "Poppins",sans-serif;
   font-size: 16px;
   line-height: 18px;
@@ -3424,7 +3424,7 @@ exports[`StructuredList with href renders two cells with pullRightOnSecond and h
 }
 
 .emotion-7 svg {
-  fill: #0A0A0A;
+  fill: #111111;
 }
 
 .emotion-7::before {
@@ -3477,7 +3477,7 @@ exports[`StructuredList with href renders two cells with pullRightOnSecond and h
 
 .emotion-10 {
   margin: 0;
-  color: #535353;
+  color: #6A6A6A;
   font-family: "DM Sans",sans-serif;
   font-size: 14px;
   line-height: 21px;
@@ -3487,7 +3487,7 @@ exports[`StructuredList with href renders two cells with pullRightOnSecond and h
 }
 
 .emotion-10 svg {
-  fill: #535353;
+  fill: #6A6A6A;
 }
 
 .emotion-10::before {
@@ -3504,7 +3504,7 @@ exports[`StructuredList with href renders two cells with pullRightOnSecond and h
 
 .emotion-11 {
   border-style: solid;
-  border-color: #DEDEDE;
+  border-color: #C6C6C6;
   border-width: 1px;
   border-width: 0px;
   margin: 0;
@@ -3691,11 +3691,11 @@ exports[`StructuredList with href renders with alignment on icon center 1`] = `
 }
 
 .emotion-4:hover:not(:disabled) {
-  background-color: #FAFAFA;
+  background-color: #F1F1F1;
 }
 
 .emotion-4:active:not(:disabled) {
-  background-color: #F4F4F4;
+  background-color: #E2E2E2;
 }
 
 .emotion-4:disabled {
@@ -3818,7 +3818,7 @@ exports[`StructuredList with href renders with alignment on icon center 1`] = `
 
 .emotion-10 {
   margin: 0;
-  color: #0A0A0A;
+  color: #111111;
   font-family: "Poppins",sans-serif;
   font-size: 16px;
   line-height: 18px;
@@ -3828,7 +3828,7 @@ exports[`StructuredList with href renders with alignment on icon center 1`] = `
 }
 
 .emotion-10 svg {
-  fill: #0A0A0A;
+  fill: #111111;
 }
 
 .emotion-10::before {
@@ -3873,7 +3873,7 @@ exports[`StructuredList with href renders with alignment on icon center 1`] = `
 
 .emotion-13 {
   margin: 0;
-  color: #535353;
+  color: #6A6A6A;
   font-family: "DM Sans",sans-serif;
   font-size: 14px;
   line-height: 21px;
@@ -3883,7 +3883,7 @@ exports[`StructuredList with href renders with alignment on icon center 1`] = `
 }
 
 .emotion-13 svg {
-  fill: #535353;
+  fill: #6A6A6A;
 }
 
 .emotion-13::before {
@@ -3949,8 +3949,8 @@ exports[`StructuredList with href renders with alignment on icon center 1`] = `
   display: inline-block;
   vertical-align: middle;
   overflow: hidden;
-  color: #0A0A0A;
-  fill: #0A0A0A;
+  color: #111111;
+  fill: #111111;
   vertical-align: unset;
   display: inline-block;
 }
@@ -3974,8 +3974,8 @@ exports[`StructuredList with href renders with alignment on icon center 1`] = `
 .emotion-17.emotion-17 {
   width: 16px;
   height: 16px;
-  color: #0A0A0A;
-  fill: #0A0A0A;
+  color: #111111;
+  fill: #111111;
 }
 
 @media screen and (prefers-reduced-motion: no-preference) {
@@ -3996,7 +3996,7 @@ exports[`StructuredList with href renders with alignment on icon center 1`] = `
 
 .emotion-19 {
   border-style: solid;
-  border-color: #DEDEDE;
+  border-color: #C6C6C6;
   border-width: 1px;
   border-width: 0px;
   margin: 0;
@@ -4265,11 +4265,11 @@ exports[`StructuredList with href renders with alignment on icon end 1`] = `
 }
 
 .emotion-4:hover:not(:disabled) {
-  background-color: #FAFAFA;
+  background-color: #F1F1F1;
 }
 
 .emotion-4:active:not(:disabled) {
-  background-color: #F4F4F4;
+  background-color: #E2E2E2;
 }
 
 .emotion-4:disabled {
@@ -4392,7 +4392,7 @@ exports[`StructuredList with href renders with alignment on icon end 1`] = `
 
 .emotion-10 {
   margin: 0;
-  color: #0A0A0A;
+  color: #111111;
   font-family: "Poppins",sans-serif;
   font-size: 16px;
   line-height: 18px;
@@ -4402,7 +4402,7 @@ exports[`StructuredList with href renders with alignment on icon end 1`] = `
 }
 
 .emotion-10 svg {
-  fill: #0A0A0A;
+  fill: #111111;
 }
 
 .emotion-10::before {
@@ -4447,7 +4447,7 @@ exports[`StructuredList with href renders with alignment on icon end 1`] = `
 
 .emotion-13 {
   margin: 0;
-  color: #535353;
+  color: #6A6A6A;
   font-family: "DM Sans",sans-serif;
   font-size: 14px;
   line-height: 21px;
@@ -4457,7 +4457,7 @@ exports[`StructuredList with href renders with alignment on icon end 1`] = `
 }
 
 .emotion-13 svg {
-  fill: #535353;
+  fill: #6A6A6A;
 }
 
 .emotion-13::before {
@@ -4523,8 +4523,8 @@ exports[`StructuredList with href renders with alignment on icon end 1`] = `
   display: inline-block;
   vertical-align: middle;
   overflow: hidden;
-  color: #0A0A0A;
-  fill: #0A0A0A;
+  color: #111111;
+  fill: #111111;
   vertical-align: unset;
   display: inline-block;
 }
@@ -4548,8 +4548,8 @@ exports[`StructuredList with href renders with alignment on icon end 1`] = `
 .emotion-17.emotion-17 {
   width: 16px;
   height: 16px;
-  color: #0A0A0A;
-  fill: #0A0A0A;
+  color: #111111;
+  fill: #111111;
 }
 
 @media screen and (prefers-reduced-motion: no-preference) {
@@ -4570,7 +4570,7 @@ exports[`StructuredList with href renders with alignment on icon end 1`] = `
 
 .emotion-19 {
   border-style: solid;
-  border-color: #DEDEDE;
+  border-color: #C6C6C6;
   border-width: 1px;
   border-width: 0px;
   margin: 0;
@@ -4839,11 +4839,11 @@ exports[`StructuredList with href renders with anchor attributes 1`] = `
 }
 
 .emotion-4:hover:not(:disabled) {
-  background-color: #FAFAFA;
+  background-color: #F1F1F1;
 }
 
 .emotion-4:active:not(:disabled) {
-  background-color: #F4F4F4;
+  background-color: #E2E2E2;
 }
 
 .emotion-4:disabled {
@@ -4966,7 +4966,7 @@ exports[`StructuredList with href renders with anchor attributes 1`] = `
 
 .emotion-10 {
   margin: 0;
-  color: #0A0A0A;
+  color: #111111;
   font-family: "Poppins",sans-serif;
   font-size: 16px;
   line-height: 18px;
@@ -4976,7 +4976,7 @@ exports[`StructuredList with href renders with anchor attributes 1`] = `
 }
 
 .emotion-10 svg {
-  fill: #0A0A0A;
+  fill: #111111;
 }
 
 .emotion-10::before {
@@ -5021,7 +5021,7 @@ exports[`StructuredList with href renders with anchor attributes 1`] = `
 
 .emotion-13 {
   margin: 0;
-  color: #535353;
+  color: #6A6A6A;
   font-family: "DM Sans",sans-serif;
   font-size: 14px;
   line-height: 21px;
@@ -5031,7 +5031,7 @@ exports[`StructuredList with href renders with anchor attributes 1`] = `
 }
 
 .emotion-13 svg {
-  fill: #535353;
+  fill: #6A6A6A;
 }
 
 .emotion-13::before {
@@ -5094,8 +5094,8 @@ exports[`StructuredList with href renders with anchor attributes 1`] = `
   display: inline-block;
   vertical-align: middle;
   overflow: hidden;
-  color: #0A0A0A;
-  fill: #0A0A0A;
+  color: #111111;
+  fill: #111111;
   vertical-align: unset;
   display: inline-block;
 }
@@ -5119,8 +5119,8 @@ exports[`StructuredList with href renders with anchor attributes 1`] = `
 .emotion-17.emotion-17 {
   width: 16px;
   height: 16px;
-  color: #0A0A0A;
-  fill: #0A0A0A;
+  color: #111111;
+  fill: #111111;
 }
 
 @media screen and (prefers-reduced-motion: no-preference) {
@@ -5141,7 +5141,7 @@ exports[`StructuredList with href renders with anchor attributes 1`] = `
 
 .emotion-19 {
   border-style: solid;
-  border-color: #DEDEDE;
+  border-color: #C6C6C6;
   border-width: 1px;
   border-width: 0px;
   margin: 0;
@@ -5413,11 +5413,11 @@ exports[`StructuredList with href renders with disabled link 1`] = `
 }
 
 .emotion-4:hover:not(:disabled) {
-  background-color: #FAFAFA;
+  background-color: #F1F1F1;
 }
 
 .emotion-4:active:not(:disabled) {
-  background-color: #F4F4F4;
+  background-color: #E2E2E2;
 }
 
 .emotion-4:disabled {
@@ -5476,7 +5476,7 @@ exports[`StructuredList with href renders with disabled link 1`] = `
 
 .emotion-7 {
   margin: 0;
-  color: #0A0A0A;
+  color: #111111;
   font-family: "Poppins",sans-serif;
   font-size: 16px;
   line-height: 18px;
@@ -5486,7 +5486,7 @@ exports[`StructuredList with href renders with disabled link 1`] = `
 }
 
 .emotion-7 svg {
-  fill: #0A0A0A;
+  fill: #111111;
 }
 
 .emotion-7::before {
@@ -5560,8 +5560,8 @@ exports[`StructuredList with href renders with disabled link 1`] = `
   display: inline-block;
   vertical-align: middle;
   overflow: hidden;
-  color: #0A0A0A;
-  fill: #0A0A0A;
+  color: #111111;
+  fill: #111111;
   vertical-align: unset;
   display: inline-block;
 }
@@ -5585,8 +5585,8 @@ exports[`StructuredList with href renders with disabled link 1`] = `
 .emotion-11.emotion-11 {
   width: 16px;
   height: 16px;
-  color: #0A0A0A;
-  fill: #0A0A0A;
+  color: #111111;
+  fill: #111111;
 }
 
 @media screen and (prefers-reduced-motion: no-preference) {
@@ -5607,7 +5607,7 @@ exports[`StructuredList with href renders with disabled link 1`] = `
 
 .emotion-13 {
   border-style: solid;
-  border-color: #DEDEDE;
+  border-color: #C6C6C6;
   border-width: 1px;
   border-width: 0px;
   margin: 0;
@@ -5943,7 +5943,7 @@ exports[`StructuredList without-href renders with default style 1`] = `
 
 .emotion-9 {
   margin: 0;
-  color: #0A0A0A;
+  color: #111111;
   font-family: "Poppins",sans-serif;
   font-size: 16px;
   line-height: 18px;
@@ -5953,7 +5953,7 @@ exports[`StructuredList without-href renders with default style 1`] = `
 }
 
 .emotion-9 svg {
-  fill: #0A0A0A;
+  fill: #111111;
 }
 
 .emotion-9::before {
@@ -5998,7 +5998,7 @@ exports[`StructuredList without-href renders with default style 1`] = `
 
 .emotion-12 {
   margin: 0;
-  color: #535353;
+  color: #6A6A6A;
   font-family: "DM Sans",sans-serif;
   font-size: 14px;
   line-height: 21px;
@@ -6008,7 +6008,7 @@ exports[`StructuredList without-href renders with default style 1`] = `
 }
 
 .emotion-12 svg {
-  fill: #535353;
+  fill: #6A6A6A;
 }
 
 .emotion-12::before {
@@ -6052,7 +6052,7 @@ exports[`StructuredList without-href renders with default style 1`] = `
   display: inline-block;
   vertical-align: middle;
   overflow: hidden;
-  fill: #2E2E2E;
+  fill: #3B3B3B;
   vertical-align: unset;
   display: inline-block;
 }
@@ -6080,7 +6080,7 @@ exports[`StructuredList without-href renders with default style 1`] = `
 
 .emotion-17 {
   border-style: solid;
-  border-color: #DEDEDE;
+  border-color: #C6C6C6;
   border-width: 1px;
   border-width: 0px;
   margin: 0;
@@ -6353,7 +6353,7 @@ exports[`StructuredList without-href renders with logical prop overrides 1`] = `
 
 .emotion-5 {
   border-style: solid;
-  border-color: #DEDEDE;
+  border-color: #C6C6C6;
   border-width: 1px;
   border-width: 0px;
   margin: 0;
@@ -6426,7 +6426,7 @@ exports[`StructuredList without-href renders with more than 3 children 1`] = `
 
 .emotion-2 {
   border-style: solid;
-  border-color: #DEDEDE;
+  border-color: #C6C6C6;
   border-width: 1px;
   border-width: 0px;
   margin: 0;
@@ -6569,7 +6569,7 @@ exports[`StructuredList without-href renders with one cell default 1`] = `
 
 .emotion-6 {
   margin: 0;
-  color: #0A0A0A;
+  color: #111111;
   font-family: "Poppins",sans-serif;
   font-size: 16px;
   line-height: 18px;
@@ -6579,7 +6579,7 @@ exports[`StructuredList without-href renders with one cell default 1`] = `
 }
 
 .emotion-6 svg {
-  fill: #0A0A0A;
+  fill: #111111;
 }
 
 .emotion-6::before {
@@ -6596,7 +6596,7 @@ exports[`StructuredList without-href renders with one cell default 1`] = `
 
 .emotion-7 {
   border-style: solid;
-  border-color: #DEDEDE;
+  border-color: #C6C6C6;
   border-width: 1px;
   border-width: 0px;
   margin: 0;
@@ -6854,7 +6854,7 @@ exports[`StructuredList without-href renders with overrides 1`] = `
 
 .emotion-9 {
   margin: 0;
-  color: #0A0A0A;
+  color: #111111;
   font-family: "Poppins",sans-serif;
   font-size: 16px;
   line-height: 18px;
@@ -6864,7 +6864,7 @@ exports[`StructuredList without-href renders with overrides 1`] = `
 }
 
 .emotion-9 svg {
-  fill: #0A0A0A;
+  fill: #111111;
 }
 
 .emotion-9::before {
@@ -6909,7 +6909,7 @@ exports[`StructuredList without-href renders with overrides 1`] = `
 
 .emotion-12 {
   margin: 0;
-  color: #535353;
+  color: #6A6A6A;
   font-family: "DM Sans",sans-serif;
   font-size: 14px;
   line-height: 21px;
@@ -6919,7 +6919,7 @@ exports[`StructuredList without-href renders with overrides 1`] = `
 }
 
 .emotion-12 svg {
-  fill: #535353;
+  fill: #6A6A6A;
 }
 
 .emotion-12::before {
@@ -6963,7 +6963,7 @@ exports[`StructuredList without-href renders with overrides 1`] = `
   display: inline-block;
   vertical-align: middle;
   overflow: hidden;
-  fill: #2E2E2E;
+  fill: #3B3B3B;
   vertical-align: unset;
   display: inline-block;
 }
@@ -6990,14 +6990,14 @@ exports[`StructuredList without-href renders with overrides 1`] = `
 }
 
 .emotion-17 {
-  color: #0A0A0A;
+  color: #111111;
   border-width: 0px;
   margin: 0;
   width: 100%;
 }
 
 .emotion-17 svg {
-  fill: #0A0A0A;
+  fill: #111111;
 }