@telefonica/mistica 16.65.0 → 16.66.0

package/src/community/skins/cyber-skin.tsx

@@ -4,101 +4,120 @@ import type {Skin} from '../../skins/types';
 
 export const CYBER_SKIN = 'Cyber';
 
-// TODO: Replace skin with real one when ready
-
 export const palette = {
-    primary: '#00B6F1',
-    primary10: '#F7FDFF',
-    primary20: '#E5F6FD',
-    primary30: '#B3E9FB',
-    secondary: '#0072BC',
-    secondary10: '#E5F1F9',
-    secondary20: '#B2D4EC',
-    secondary30: '#80B7DF',
-    secondary60: '#005A99',
-    accent: '#7814B3',
-    accent10: '#F1E7F7',
-    accent30: '#BB89D9',
-    yellow: '#FFA922',
-    yellow10: '#FFF6E9',
-    yellow40: '#FFC364',
-    yellow60: '#F09500',
-    yellow65: '#D28200',
-    yellow70: '#996614',
-    green: '#30D300',
-    green10: '#EAFBE5',
-    green30: '#97E980',
-    green70: '#1D7F00',
-    red: '#D12937',
-    red10: '#FEECE8',
-    red20: '#FCC7B9',
-    red30: '#FA9E87',
-    red40: '#F97C5D',
-    red70: '#BC3310',
-    grey1: '#F6F6F6',
-    grey2: '#F2F2F2',
-    grey3: '#DDDDDD',
-    grey4: '#8A8C90',
-    grey5: '#666666',
-    grey6: '#000000',
+    brand: '#0066FF',
+    brandDark: '#00264D',
+    brand10: '#F7F7FF',
+    brand15: '#E5F0FF',
+    brand20: '#B2D1FF',
+    brand30: '#80B3FF',
+    brand70: '#0356C9',
+    brand80: '#002E73',
+    brand90: '#1D2E46',
+    orange: '#FC9D66',
+    orange60: '#DA773E',
+    orange90: '#412617',
+    green: '#43A062',
+    green10: '#CCF6DA',
+    green20: '#BCEFCD',
+    green30: '#54B675',
+    green70: '#367049',
+    green90: '#324439',
+    yellow: '#FBF662',
+    yellow10: '#FDF9EC',
+    yellow15: '#FCF7DB',
+    yellow30: '#F3E996',
+    yellow40: '#F0D57C',
+    yellow50: '#EAC344',
+    yellow60: '#BEA537',
+    yellow70: '#B3902F',
+    yellow80: '#473515',
+    red: '#F4686B',
+    red10: '#F9EEED',
+    red20: '#F2B1A5',
+    red30: '#D6786B',
+    red40: '#E04C4F',
+    red50: '#D22A1E',
+    red60: '#BF2618',
+    red70: '#843C34',
+    red80: '#653948',
+    red90: '#491818',
+    purple: '#B86BE8',
+    purple10: '#F8F0FD',
+    purple40: '#CD97EF',
+    purple70: '#9E2EB1',
+    purple80: '#471551',
+    teal: '#75C0C7',
+    teal10: '#EBFFFF',
+    teal20: '#BFEAEC',
+    teal40: '#9ED3D8',
+    teal70: '#528889',
+    teal80: '#253D3C',
+    grey10: '#F2F2F2',
+    grey15: '#F5F5F5',
+    grey100: '#D1D5E4',
+    grey200: '#B0B6CA',
+    grey300: '#8F97AF',
+    grey400: '#6E7894',
+    grey500: '#5A637C',
+    grey600: '#414B61',
+    grey700: '#2F4255',
+    grey800: '#393F46',
+    grey900: '#031A34',
     white: '#FFFFFF',
-    darkModeBlack: '#191919',
-    darkModeGrey: '#242424',
-    darkModeGrey5: '#6D7D88',
-    darkModeGrey6: '#313235',
+    black: '#000000',
+    darkModeBlack: '#070706',
+    darkModeGrey: '#151414',
+    darkModeBrand: '#227AFF',
 };
 
 export const getCyberSkin = (): Skin => {
     const skin: Skin = {
         name: CYBER_SKIN,
         colors: {
+            appBarBackground: palette.white,
             background: palette.white,
-            backgroundAlternative: palette.primary20,
-            backgroundBrand: palette.primary,
-            backgroundNegative: palette.secondary,
-            backgroundBrandSecondary: palette.primary,
             backgroundContainer: palette.white,
             backgroundContainerError: palette.red10,
-            backgroundContainerHover: applyAlpha(palette.secondary, 0.05),
-            backgroundContainerPressed: applyAlpha(palette.secondary, 0.08),
-            backgroundContainerBrand: palette.primary,
-            backgroundContainerBrandHover: applyAlpha(palette.darkModeBlack, 0.05),
-            backgroundContainerBrandPressed: applyAlpha(palette.darkModeBlack, 0.08),
-            backgroundContainerBrandOverInverse: palette.primary30,
-            backgroundContainerNegative: applyAlpha(palette.darkModeBlack, 0.4),
-            backgroundContainerBrandOverBrand: palette.primary30,
-            backgroundContainerAlternative: palette.primary20,
-            backgroundOverlay: applyAlpha(palette.secondary, 0.75),
-            backgroundSkeleton: palette.grey3,
-            backgroundSkeletonInverse: palette.secondary,
-            backgroundSkeletonNegative: applyAlpha(palette.grey6, 0.2),
-            backgroundSkeletonBrand: palette.secondary,
-            backgroundBrandTop: palette.primary,
-            backgroundBrandBottom: palette.primary,
-            appBarBackground: palette.white,
-            navigationBarBackground: palette.primary,
-            backgroundDropZoneHover: applyAlpha(palette.secondary, 0.05),
-            backgroundDropZoneDragover: applyAlpha(palette.secondary, 0.08),
-            backgroundDropZoneBrandHover: applyAlpha(palette.grey6, 0.05),
-            backgroundDropZoneBrandDragover: applyAlpha(palette.grey6, 0.08),
+            backgroundContainerHover: applyAlpha(palette.brand70, 0.05),
+            backgroundContainerPressed: applyAlpha(palette.brand70, 0.08),
+            backgroundContainerBrand: palette.brand,
+            backgroundContainerBrandHover: applyAlpha(palette.darkModeBlack, 0.2),
+            backgroundContainerBrandPressed: applyAlpha(palette.darkModeBlack, 0.4),
+            backgroundContainerBrandOverInverse: palette.brand70,
+            backgroundContainerNegative: applyAlpha(palette.white, 0.1),
+            backgroundContainerBrandOverBrand: palette.brand70,
+            backgroundContainerAlternative: palette.brand10,
+            backgroundBrand: palette.brand,
+            backgroundNegative: palette.grey900,
+            backgroundBrandSecondary: palette.brand,
+            backgroundOverlay: applyAlpha(palette.grey900, 0.8),
+            backgroundSkeleton: palette.grey100,
+            backgroundSkeletonInverse: palette.brand70,
+            backgroundSkeletonNegative: applyAlpha(palette.black, 0.2),
+            backgroundSkeletonBrand: palette.brand70,
+            navigationBarBackground: palette.brand,
+            backgroundAlternative: palette.brand10,
+            backgroundBrandTop: palette.brand,
+            backgroundBrandBottom: palette.brand,
+            backgroundDropZoneHover: applyAlpha(palette.brand70, 0.05),
+            backgroundDropZoneDragover: applyAlpha(palette.brand70, 0.08),
+            backgroundDropZoneBrandHover: applyAlpha(palette.brand80, 0.2),
+            backgroundDropZoneBrandDragover: applyAlpha(palette.brand80, 0.4),
             backgroundDropZoneNegativeHover: applyAlpha(palette.white, 0.1),
             backgroundDropZoneNegativeDragover: applyAlpha(palette.white, 0.17),
-            backgroundDropZoneMediaHover: applyAlpha(palette.grey6, 0.05),
-            backgroundDropZoneMediaDragover: applyAlpha(palette.grey6, 0.08),
-            skeletonWave: palette.grey2,
-            borderLow: palette.grey1,
-            border: palette.grey3,
-            borderHigh: palette.grey5,
-            borderSelected: palette.secondary60,
-            completedStep: palette.secondary,
-            completedStepInverse: palette.secondary60,
-            completedStepNegative: palette.secondary60,
-            completedStepBrand: palette.secondary60,
+            backgroundDropZoneMediaHover: applyAlpha(palette.brand80, 0.2),
+            backgroundDropZoneMediaDragover: applyAlpha(palette.brand80, 0.4),
+            skeletonWave: palette.grey100,
+            borderLow: palette.grey100,
+            border: palette.grey300,
+            borderHigh: palette.grey500,
+            borderSelected: palette.brand,
             coverBackgroundHover: applyAlpha(palette.darkModeBlack, 0.25),
             coverBackgroundPressed: applyAlpha(palette.darkModeBlack, 0.35),
-            buttonDangerBackground: palette.red,
-            buttonDangerBackgroundPressed: palette.red70,
-            buttonDangerBackgroundHover: palette.red70,
+            buttonDangerBackground: palette.red50,
+            buttonDangerBackgroundPressed: palette.red60,
+            buttonDangerBackgroundHover: palette.red60,
             buttonLinkDangerBackgroundInverse: palette.white,
             buttonLinkDangerBackgroundNegative: palette.white,
             buttonLinkDangerBackgroundBrand: palette.white,
@@ -108,234 +127,238 @@ export const getCyberSkin = (): Skin => {
             buttonLinkDangerBackgroundNegativePressed: palette.red10,
             buttonLinkDangerBackgroundBrandPressed: palette.red10,
             buttonLinkDangerBackgroundMediaPressed: palette.red10,
-            buttonLinkBackgroundPressed: palette.accent10,
-            buttonLinkBackgroundInversePressed: applyAlpha(palette.white, 0.15),
-            buttonLinkBackgroundNegativePressed: applyAlpha(palette.white, 0.15),
-            buttonLinkBackgroundBrandPressed: applyAlpha(palette.white, 0.15),
-            buttonLinkBackgroundMediaPressed: applyAlpha(palette.white, 0.15),
-            buttonPrimaryBackground: palette.secondary,
-            buttonPrimaryBackgroundInverse: palette.secondary,
+            buttonLinkBackgroundPressed: palette.brand10,
+            buttonLinkBackgroundInversePressed: applyAlpha(palette.white, 0.08),
+            buttonLinkBackgroundNegativePressed: applyAlpha(palette.white, 0.08),
+            buttonLinkBackgroundBrandPressed: applyAlpha(palette.white, 0.08),
+            buttonLinkBackgroundMediaPressed: applyAlpha(palette.white, 0.08),
+            buttonPrimaryBackground: palette.black,
+            buttonPrimaryBackgroundInverse: palette.white,
             buttonPrimaryBackgroundNegative: palette.white,
-            buttonPrimaryBackgroundBrand: palette.secondary,
+            buttonPrimaryBackgroundBrand: palette.white,
             buttonPrimaryBackgroundMedia: palette.white,
-            buttonPrimaryBackgroundHover: palette.secondary60,
-            buttonPrimaryBackgroundInverseHover: palette.secondary60,
-            buttonPrimaryBackgroundNegativeHover: palette.primary20,
-            buttonPrimaryBackgroundBrandHover: palette.secondary60,
-            buttonPrimaryBackgroundMediaHover: palette.primary20,
-            buttonPrimaryBackgroundPressed: palette.secondary60,
-            buttonPrimaryBackgroundInversePressed: palette.secondary60,
-            buttonPrimaryBackgroundNegativePressed: palette.primary30,
-            buttonPrimaryBackgroundBrandPressed: palette.secondary60,
-            buttonPrimaryBackgroundMediaPressed: palette.primary30,
-            buttonSecondaryBackgroundBrand: palette.white,
-            buttonSecondaryBorder: palette.secondary,
-            buttonSecondaryBorderInverse: applyAlpha(palette.white, 0),
+            buttonPrimaryBackgroundHover: palette.brand70,
+            buttonPrimaryBackgroundInverseHover: palette.brand15,
+            buttonPrimaryBackgroundNegativeHover: palette.brand15,
+            buttonPrimaryBackgroundBrandHover: palette.brand15,
+            buttonPrimaryBackgroundMediaHover: palette.brand15,
+            buttonPrimaryBackgroundPressed: palette.brand70,
+            buttonPrimaryBackgroundInversePressed: palette.brand15,
+            buttonPrimaryBackgroundNegativePressed: palette.brand15,
+            buttonPrimaryBackgroundBrandPressed: palette.brand15,
+            buttonPrimaryBackgroundMediaPressed: palette.brand15,
+            buttonSecondaryBackgroundBrand: applyAlpha(palette.white, 0),
+            buttonSecondaryBorder: palette.brand,
+            buttonSecondaryBorderInverse: palette.white,
             buttonSecondaryBorderNegative: palette.white,
-            buttonSecondaryBorderBrand: applyAlpha(palette.white, 0),
+            buttonSecondaryBorderBrand: palette.white,
             buttonSecondaryBorderMedia: palette.white,
-            buttonSecondaryBorderPressed: palette.secondary60,
-            buttonSecondaryBorderInversePressed: applyAlpha(palette.white, 0),
+            buttonSecondaryBorderPressed: palette.brand70,
+            buttonSecondaryBorderInversePressed: palette.white,
             buttonSecondaryBorderNegativePressed: palette.white,
-            buttonSecondaryBorderBrandPressed: applyAlpha(palette.white, 0),
+            buttonSecondaryBorderBrandPressed: palette.white,
             buttonSecondaryBorderMediaPressed: palette.white,
-            buttonSecondaryBackgroundHover: palette.secondary10,
-            buttonSecondaryBackgroundInverseHover: palette.secondary10,
-            buttonSecondaryBackgroundNegativeHover: applyAlpha(palette.white, 0.2),
-            buttonSecondaryBackgroundBrandHover: palette.secondary10,
-            buttonSecondaryBackgroundMediaHover: applyAlpha(palette.white, 0.2),
-            buttonSecondaryBackgroundPressed: palette.secondary10,
-            buttonSecondaryBackgroundInversePressed: palette.secondary10,
-            buttonSecondaryBackgroundNegativePressed: applyAlpha(palette.white, 0.2),
-            buttonSecondaryBackgroundBrandPressed: palette.secondary10,
-            buttonSecondaryBackgroundMediaPressed: applyAlpha(palette.white, 0.2),
+            buttonSecondaryBackgroundHover: palette.brand15,
+            buttonSecondaryBackgroundInverseHover: applyAlpha(palette.white, 0.1),
+            buttonSecondaryBackgroundNegativeHover: applyAlpha(palette.white, 0.1),
+            buttonSecondaryBackgroundBrandHover: applyAlpha(palette.white, 0.1),
+            buttonSecondaryBackgroundMediaHover: applyAlpha(palette.white, 0.1),
+            buttonSecondaryBackgroundPressed: palette.brand15,
+            buttonSecondaryBackgroundInversePressed: applyAlpha(palette.white, 0.1),
+            buttonSecondaryBackgroundNegativePressed: applyAlpha(palette.white, 0.1),
+            buttonSecondaryBackgroundBrandPressed: applyAlpha(palette.white, 0.1),
+            buttonSecondaryBackgroundMediaPressed: applyAlpha(palette.white, 0.1),
             textButtonPrimary: palette.white,
-            textButtonPrimaryInverse: palette.white,
-            textButtonPrimaryNegative: palette.secondary,
-            textButtonPrimaryBrand: palette.white,
-            textButtonPrimaryMedia: palette.secondary,
-            textButtonPrimaryInversePressed: palette.white,
-            textButtonPrimaryNegativePressed: palette.secondary60,
-            textButtonPrimaryBrandPressed: palette.white,
-            textButtonPrimaryMediaPressed: palette.secondary60,
-            textButtonSecondary: palette.secondary,
-            textButtonSecondaryInverse: palette.secondary,
+            textButtonPrimaryInverse: palette.brand,
+            textButtonPrimaryNegative: palette.brand,
+            textButtonPrimaryBrand: palette.brand,
+            textButtonPrimaryMedia: palette.brand,
+            textButtonPrimaryInversePressed: palette.brand70,
+            textButtonPrimaryNegativePressed: palette.brand70,
+            textButtonPrimaryBrandPressed: palette.brand70,
+            textButtonPrimaryMediaPressed: palette.brand70,
+            textButtonSecondary: palette.black,
+            textButtonSecondaryInverse: palette.white,
             textButtonSecondaryNegative: palette.white,
-            textButtonSecondaryBrand: palette.secondary,
+            textButtonSecondaryBrand: palette.white,
             textButtonSecondaryMedia: palette.white,
-            textButtonSecondaryPressed: palette.secondary60,
-            textButtonSecondaryInversePressed: palette.secondary60,
+            textButtonSecondaryPressed: palette.brand70,
+            textButtonSecondaryInversePressed: palette.white,
             textButtonSecondaryNegativePressed: palette.white,
-            textButtonSecondaryBrandPressed: palette.secondary60,
+            textButtonSecondaryBrandPressed: palette.white,
             textButtonSecondaryMediaPressed: palette.white,
-            textLink: palette.accent,
-            textLinkInverse: palette.grey6,
+            textLink: palette.brand,
+            textLinkInverse: palette.white,
             textLinkNegative: palette.white,
-            textLinkBrand: palette.grey6,
+            textLinkBrand: palette.white,
             textLinkMedia: palette.white,
-            textLinkDanger: palette.red,
-            textLinkDangerMedia: palette.red,
-            textLinkSnackbar: palette.accent30,
-            textActivated: palette.secondary,
-            textBrand: palette.secondary,
-            inputBorder: palette.grey4,
-            inputBorderInverse: palette.grey6,
+            textLinkDanger: palette.red50,
+            textLinkDangerMedia: palette.red50,
+            textLinkSnackbar: palette.brand30,
+            textActivated: palette.brand70,
+            textBrand: palette.brand70,
+            inputBorder: palette.grey400,
+            inputBorderInverse: palette.white,
             inputBorderNegative: palette.white,
-            inputBorderBrand: palette.grey6,
-            control: palette.grey4,
-            controlActivated: palette.secondary,
-            controlInverse: palette.secondary60,
-            controlNegative: palette.primary30,
-            controlBrand: palette.secondary60,
-            controlActivatedInverse: palette.secondary60,
+            inputBorderBrand: palette.white,
+            completedStep: palette.brand,
+            completedStepInverse: palette.brand70,
+            completedStepNegative: palette.brand70,
+            completedStepBrand: palette.brand70,
+            control: palette.grey400,
+            controlActivated: palette.brand,
+            controlInverse: palette.brand10,
+            controlNegative: palette.brand10,
+            controlBrand: palette.brand10,
+            controlActivatedInverse: palette.white,
             controlActivatedNegative: palette.white,
-            controlActivatedBrand: palette.secondary60,
-            controlError: palette.red,
-            chevronIndicator: palette.grey5,
-            barTrack: palette.grey3,
-            barTrackInverse: applyAlpha(palette.grey6, 0.2),
-            barTrackNegative: applyAlpha(palette.grey6, 0.2),
-            barTrackBrand: applyAlpha(palette.grey6, 0.2),
-            loadingBar: palette.secondary,
-            loadingBarBackground: palette.secondary20,
-            toggleAndroidInactive: palette.grey2,
-            toggleAndroidBackgroundActive: palette.secondary30,
-            toggleAndroidActiveBrand: palette.secondary60,
-            toggleAndroidInactiveBrand: palette.grey2,
-            toggleAndroidBackgroundActiveBrand: palette.secondary30,
-            toggleAndroidBackgroundInactiveBrand: palette.grey2,
+            controlActivatedBrand: palette.white,
+            controlError: palette.red50,
+            chevronIndicator: palette.grey400,
+            barTrack: palette.grey100,
+            barTrackInverse: applyAlpha(palette.white, 0.3),
+            barTrackNegative: applyAlpha(palette.white, 0.3),
+            barTrackBrand: applyAlpha(palette.white, 0.3),
+            loadingBar: palette.brand30,
+            loadingBarBackground: palette.brand70,
+            toggleAndroidInactive: palette.grey100,
+            toggleAndroidBackgroundActive: palette.grey100,
+            toggleAndroidActiveBrand: palette.white,
+            toggleAndroidInactiveBrand: palette.grey100,
+            toggleAndroidBackgroundActiveBrand: palette.grey100,
+            toggleAndroidBackgroundInactiveBrand: palette.brand10,
             iosControlKnob: palette.white,
-            controlKnobInverse: palette.primary,
-            controlKnobNegative: palette.secondary,
-            controlKnobBrand: palette.primary,
-            divider: palette.grey3,
-            dividerInverse: applyAlpha(palette.grey6, 0.2),
+            controlKnobInverse: palette.brand,
+            controlKnobNegative: palette.brand,
+            controlKnobBrand: palette.brand,
+            divider: palette.grey100,
+            dividerInverse: applyAlpha(palette.white, 0.2),
             dividerNegative: applyAlpha(palette.white, 0.2),
-            dividerBrand: applyAlpha(palette.grey6, 0.2),
-            navigationBarDivider: palette.primary,
-            badge: palette.red,
-            feedbackErrorBackground: palette.red,
-            feedbackInfoBackground: palette.grey6,
-            brand: palette.primary,
-            brandHigh: palette.secondary60,
+            dividerBrand: applyAlpha(palette.white, 0.2),
+            navigationBarDivider: palette.brand,
+            badge: palette.red50,
+            feedbackErrorBackground: palette.red50,
+            feedbackInfoBackground: palette.grey900,
+            brand: palette.brand,
+            brandHigh: palette.brand70,
             inverse: palette.white,
             negative: palette.white,
-            neutralHigh: palette.grey6,
+            neutralHigh: palette.grey900,
             neutralHighNegative: palette.white,
-            neutralHighBrand: palette.grey6,
-            neutralMedium: palette.grey5,
-            neutralMediumInverse: palette.grey5,
-            neutralMediumNegative: palette.grey5,
-            neutralMediumBrand: palette.grey5,
-            neutralLow: palette.grey1,
-            neutralLowAlternative: palette.grey2,
-            textPrimary: palette.grey6,
-            textPrimaryInverse: palette.grey6,
+            neutralHighBrand: palette.white,
+            neutralMedium: palette.grey400,
+            neutralMediumInverse: palette.grey400,
+            neutralMediumNegative: palette.grey400,
+            neutralMediumBrand: palette.grey400,
+            neutralLow: palette.brand10,
+            neutralLowAlternative: palette.grey100,
+            textPrimary: palette.grey900,
+            textPrimaryInverse: palette.white,
             textPrimaryNegative: palette.white,
-            textPrimaryBrand: palette.grey6,
+            textPrimaryBrand: palette.white,
             textPrimaryMedia: palette.white,
-            textSecondary: palette.grey5,
-            textSecondaryInverse: palette.grey6,
-            textSecondaryNegative: palette.primary20,
-            textSecondaryBrand: palette.grey6,
+            textSecondary: palette.grey500,
+            textSecondaryInverse: palette.white,
+            textSecondaryNegative: palette.white,
+            textSecondaryBrand: palette.white,
             textSecondaryMedia: palette.white,
-            error: palette.red,
-            textError: palette.red,
-            textErrorInverse: palette.grey6,
+            error: palette.red50,
+            textError: palette.red50,
+            textErrorInverse: palette.white,
             textErrorNegative: palette.white,
-            textErrorBrand: palette.grey6,
-            success: palette.green70,
-            warning: palette.yellow65,
-            promo: palette.accent,
-            highlight: palette.primary,
-            successLow: palette.green10,
-            warningLow: palette.yellow10,
+            textErrorBrand: palette.white,
+            success: palette.teal,
+            warning: palette.yellow60,
+            promo: palette.purple,
+            highlight: palette.red20,
+            successLow: palette.teal10,
+            warningLow: palette.yellow15,
             errorLow: palette.red10,
-            promoLow: palette.accent10,
-            brandLow: palette.primary20,
-            successHigh: palette.green70,
-            warningHigh: palette.yellow70,
-            errorHigh: palette.red70,
-            promoHigh: palette.accent,
-            successHighInverse: palette.green70,
-            successHighNegative: palette.green70,
-            successHighBrand: palette.green70,
-            warningHighInverse: palette.yellow70,
-            warningHighNegative: palette.yellow70,
-            warningHighBrand: palette.yellow70,
-            errorHighInverse: palette.red70,
-            errorHighNegative: palette.red70,
-            errorHighBrand: palette.red70,
-            promoHighInverse: palette.accent,
-            promoHighNegative: palette.accent,
-            promoHighBrand: palette.accent,
-            textNavigationBarPrimary: palette.grey6,
-            textNavigationBarSecondary: palette.grey6,
-            textNavigationSearchBarHint: palette.grey6,
-            textNavigationSearchBarText: palette.grey6,
-            textAppBar: palette.grey5,
-            textAppBarSelected: palette.secondary60,
-            iosGlassAppBar: palette.grey6,
-            iosGlassAppBarSelected: palette.secondary60,
-            customTabsBackground: palette.primary,
-            tagTextPromo: palette.accent,
-            tagTextActive: palette.secondary,
-            tagTextInactive: palette.grey5,
-            tagTextInfo: palette.secondary,
-            tagTextSuccess: palette.green70,
-            tagTextWarning: palette.yellow70,
-            tagTextError: palette.red70,
-            tagBackgroundPromo: palette.accent10,
-            tagBackgroundActive: palette.primary20,
-            tagBackgroundInactive: palette.grey1,
-            tagBackgroundInfo: palette.primary20,
-            tagBackgroundSuccess: palette.green10,
-            tagBackgroundWarning: palette.yellow10,
+            promoLow: palette.purple10,
+            brandLow: palette.brand15,
+            successHigh: palette.teal70,
+            warningHigh: palette.yellow60,
+            errorHigh: palette.red60,
+            promoHigh: palette.purple70,
+            successHighInverse: palette.teal70,
+            successHighNegative: palette.teal70,
+            successHighBrand: palette.teal70,
+            warningHighInverse: palette.yellow60,
+            warningHighNegative: palette.yellow60,
+            warningHighBrand: palette.yellow60,
+            errorHighInverse: palette.red60,
+            errorHighNegative: palette.red60,
+            errorHighBrand: palette.red60,
+            promoHighInverse: palette.purple70,
+            promoHighNegative: palette.purple70,
+            promoHighBrand: palette.purple70,
+            textNavigationBarPrimary: palette.white,
+            textNavigationBarSecondary: palette.brand10,
+            textNavigationSearchBarHint: palette.brand10,
+            textNavigationSearchBarText: palette.white,
+            textAppBar: palette.grey300,
+            textAppBarSelected: palette.brand70,
+            iosGlassAppBar: palette.grey900,
+            iosGlassAppBarSelected: palette.brand70,
+            customTabsBackground: palette.brand70,
+            tagTextPromo: palette.purple80,
+            tagTextActive: palette.brand70,
+            tagTextInactive: palette.grey500,
+            tagTextInfo: palette.brand70,
+            tagTextSuccess: palette.teal80,
+            tagTextWarning: palette.yellow80,
+            tagTextError: palette.red60,
+            tagBackgroundPromo: palette.purple10,
+            tagBackgroundActive: palette.brand10,
+            tagBackgroundInactive: palette.brand10,
+            tagBackgroundInfo: palette.brand15,
+            tagBackgroundSuccess: palette.teal20,
+            tagBackgroundWarning: palette.yellow15,
             tagBackgroundError: palette.red10,
-            tagTextPromoInverse: palette.accent,
-            tagTextPromoNegative: palette.accent,
-            tagTextPromoBrand: palette.accent,
-            tagTextActiveInverse: palette.secondary,
-            tagTextActiveNegative: palette.secondary,
-            tagTextActiveBrand: palette.secondary,
-            tagTextInactiveInverse: palette.grey5,
-            tagTextInactiveNegative: palette.grey5,
-            tagTextInactiveBrand: palette.grey5,
-            tagTextInfoInverse: palette.secondary,
-            tagTextInfoNegative: palette.secondary,
-            tagTextInfoBrand: palette.secondary,
-            tagTextSuccessInverse: palette.green70,
-            tagTextSuccessNegative: palette.green70,
-            tagTextSuccessBrand: palette.green70,
-            tagTextWarningInverse: palette.yellow70,
-            tagTextWarningNegative: palette.yellow70,
-            tagTextWarningBrand: palette.yellow70,
-            tagTextErrorInverse: palette.red70,
-            tagTextErrorNegative: palette.red70,
-            tagTextErrorBrand: palette.red70,
-            tagBackgroundPromoInverse: palette.accent10,
-            tagBackgroundPromoNegative: palette.accent10,
-            tagBackgroundPromoBrand: palette.accent10,
-            tagBackgroundActiveInverse: palette.primary20,
-            tagBackgroundActiveNegative: palette.primary20,
-            tagBackgroundActiveBrand: palette.primary20,
-            tagBackgroundInactiveInverse: palette.grey1,
-            tagBackgroundInactiveNegative: palette.grey1,
-            tagBackgroundInactiveBrand: palette.grey1,
-            tagBackgroundInfoInverse: palette.primary20,
-            tagBackgroundInfoNegative: palette.primary20,
-            tagBackgroundInfoBrand: palette.primary20,
-            tagBackgroundSuccessInverse: palette.green10,
-            tagBackgroundSuccessNegative: palette.green10,
-            tagBackgroundSuccessBrand: palette.green10,
-            tagBackgroundWarningInverse: palette.yellow10,
-            tagBackgroundWarningNegative: palette.yellow10,
-            tagBackgroundWarningBrand: palette.yellow10,
+            tagTextPromoInverse: palette.purple80,
+            tagTextPromoNegative: palette.purple80,
+            tagTextPromoBrand: palette.purple80,
+            tagTextActiveInverse: palette.brand70,
+            tagTextActiveNegative: palette.brand70,
+            tagTextActiveBrand: palette.brand70,
+            tagTextInactiveInverse: palette.grey500,
+            tagTextInactiveNegative: palette.grey500,
+            tagTextInactiveBrand: palette.grey500,
+            tagTextInfoInverse: palette.brand70,
+            tagTextInfoNegative: palette.brand70,
+            tagTextInfoBrand: palette.brand70,
+            tagTextSuccessInverse: palette.teal80,
+            tagTextSuccessNegative: palette.teal80,
+            tagTextSuccessBrand: palette.teal80,
+            tagTextWarningInverse: palette.yellow80,
+            tagTextWarningNegative: palette.yellow80,
+            tagTextWarningBrand: palette.yellow80,
+            tagTextErrorInverse: palette.red60,
+            tagTextErrorNegative: palette.red60,
+            tagTextErrorBrand: palette.red60,
+            tagBackgroundPromoInverse: palette.purple10,
+            tagBackgroundPromoNegative: palette.purple10,
+            tagBackgroundPromoBrand: palette.purple10,
+            tagBackgroundActiveInverse: palette.brand10,
+            tagBackgroundActiveNegative: palette.brand10,
+            tagBackgroundActiveBrand: palette.brand10,
+            tagBackgroundInactiveInverse: palette.brand10,
+            tagBackgroundInactiveNegative: palette.brand10,
+            tagBackgroundInactiveBrand: palette.brand10,
+            tagBackgroundInfoInverse: palette.brand15,
+            tagBackgroundInfoNegative: palette.brand15,
+            tagBackgroundInfoBrand: palette.brand15,
+            tagBackgroundSuccessInverse: palette.teal10,
+            tagBackgroundSuccessNegative: palette.teal10,
+            tagBackgroundSuccessBrand: palette.teal10,
+            tagBackgroundWarningInverse: palette.yellow15,
+            tagBackgroundWarningNegative: palette.yellow15,
+            tagBackgroundWarningBrand: palette.yellow15,
             tagBackgroundErrorInverse: palette.red10,
             tagBackgroundErrorNegative: palette.red10,
             tagBackgroundErrorBrand: palette.red10,
-            cardContentOverlay: `linear-gradient(180deg, ${applyAlpha(palette.grey6, 0)} 0%, ${applyAlpha(palette.grey6, 0.4)} 30%, ${applyAlpha(palette.grey6, 0.7)} 100%)`,
-            cardFooterOverlay: applyAlpha(palette.grey6, 0.7),
+            cardContentOverlay: `linear-gradient(180deg, ${applyAlpha(palette.black, 0)} 0%, ${applyAlpha(palette.black, 0.4)} 30%, ${applyAlpha(palette.black, 0.7)} 100%)`,
+            cardFooterOverlay: applyAlpha(palette.black, 0.7),
         },
         darkModeColors: {
             background: palette.darkModeBlack,
@@ -345,8 +368,8 @@ export const getCyberSkin = (): Skin => {
             backgroundBrandSecondary: palette.darkModeBlack,
             backgroundContainer: palette.darkModeGrey,
             backgroundContainerError: palette.darkModeGrey,
-            backgroundContainerHover: applyAlpha(palette.white, 0.05),
-            backgroundContainerPressed: applyAlpha(palette.white, 0.08),
+            backgroundContainerHover: applyAlpha(palette.brand70, 0.05),
+            backgroundContainerPressed: applyAlpha(palette.brand70, 0.08),
             backgroundContainerBrand: palette.darkModeGrey,
             backgroundContainerBrandHover: applyAlpha(palette.white, 0.03),
             backgroundContainerBrandPressed: applyAlpha(palette.white, 0.05),
@@ -355,67 +378,63 @@ export const getCyberSkin = (): Skin => {
             backgroundContainerBrandOverBrand: palette.darkModeGrey,
             backgroundContainerAlternative: palette.darkModeGrey,
             backgroundOverlay: applyAlpha(palette.darkModeGrey, 0.8),
-            backgroundSkeleton: palette.darkModeGrey,
-            backgroundSkeletonInverse: palette.darkModeGrey,
-            backgroundSkeletonNegative: palette.darkModeGrey,
-            backgroundSkeletonBrand: palette.darkModeGrey,
+            backgroundSkeleton: palette.grey700,
+            backgroundSkeletonInverse: palette.grey700,
+            backgroundSkeletonNegative: palette.grey700,
+            backgroundSkeletonBrand: palette.grey700,
             backgroundBrandTop: palette.darkModeBlack,
             backgroundBrandBottom: palette.darkModeBlack,
             appBarBackground: palette.darkModeGrey,
             navigationBarBackground: palette.darkModeBlack,
-            backgroundDropZoneHover: applyAlpha(palette.white, 0.05),
-            backgroundDropZoneDragover: applyAlpha(palette.white, 0.08),
+            backgroundDropZoneHover: applyAlpha(palette.brand70, 0.05),
+            backgroundDropZoneDragover: applyAlpha(palette.brand70, 0.07),
             backgroundDropZoneBrandHover: applyAlpha(palette.white, 0.03),
             backgroundDropZoneBrandDragover: applyAlpha(palette.white, 0.05),
-            backgroundDropZoneNegativeHover: applyAlpha(palette.white, 0.15),
-            backgroundDropZoneNegativeDragover: applyAlpha(palette.white, 0.15),
+            backgroundDropZoneNegativeHover: applyAlpha(palette.white, 0.03),
+            backgroundDropZoneNegativeDragover: applyAlpha(palette.white, 0.05),
             backgroundDropZoneMediaHover: applyAlpha(palette.white, 0.03),
             backgroundDropZoneMediaDragover: applyAlpha(palette.white, 0.05),
-            skeletonWave: palette.grey5,
+            skeletonWave: palette.grey700,
             borderLow: palette.darkModeBlack,
-            border: palette.darkModeGrey,
-            borderHigh: palette.grey5,
-            borderSelected: palette.secondary60,
-            completedStep: palette.secondary,
-            completedStepInverse: palette.secondary,
-            completedStepNegative: palette.secondary,
-            completedStepBrand: palette.secondary,
+            border: palette.grey800,
+            borderHigh: palette.grey400,
+            borderSelected: palette.darkModeBrand,
             coverBackgroundHover: applyAlpha(palette.darkModeBlack, 0.25),
             coverBackgroundPressed: applyAlpha(palette.darkModeBlack, 0.35),
-            buttonDangerBackground: palette.red,
-            buttonDangerBackgroundPressed: palette.red70,
-            buttonDangerBackgroundHover: palette.red70,
-            buttonLinkDangerBackgroundInverse: applyAlpha(palette.white, 0),
-            buttonLinkDangerBackgroundNegative: applyAlpha(palette.white, 0),
-            buttonLinkDangerBackgroundBrand: applyAlpha(palette.white, 0),
+            buttonDangerBackground: palette.red50,
+            buttonDangerBackgroundPressed: palette.red60,
+            buttonDangerBackgroundHover: palette.red60,
+            buttonLinkDangerBackgroundInverse: applyAlpha(palette.red50, 0.16),
+            buttonLinkDangerBackgroundNegative: applyAlpha(palette.red50, 0.16),
+            buttonLinkDangerBackgroundBrand: applyAlpha(palette.red50, 0.16),
             buttonLinkDangerBackgroundMedia: palette.white,
-            buttonLinkDangerBackgroundPressed: applyAlpha(palette.red, 0.3),
-            buttonLinkDangerBackgroundInversePressed: applyAlpha(palette.accent, 0.3),
-            buttonLinkDangerBackgroundNegativePressed: applyAlpha(palette.accent, 0.3),
-            buttonLinkDangerBackgroundBrandPressed: applyAlpha(palette.accent, 0.3),
+            buttonLinkDangerBackgroundPressed: applyAlpha(palette.red50, 0.16),
+            buttonLinkDangerBackgroundInversePressed: applyAlpha(palette.red50, 0.16),
+            buttonLinkDangerBackgroundNegativePressed: applyAlpha(palette.red50, 0.16),
+            buttonLinkDangerBackgroundBrandPressed: applyAlpha(palette.red50, 0.16),
             buttonLinkDangerBackgroundMediaPressed: palette.red10,
-            buttonLinkBackgroundPressed: applyAlpha(palette.accent, 0.3),
-            buttonLinkBackgroundInversePressed: applyAlpha(palette.accent, 0.3),
-            buttonLinkBackgroundNegativePressed: applyAlpha(palette.accent, 0.3),
-            buttonLinkBackgroundBrandPressed: applyAlpha(palette.accent, 0.3),
-            buttonLinkBackgroundMediaPressed: applyAlpha(palette.white, 0.15),
-            buttonPrimaryBackground: palette.secondary,
-            buttonPrimaryBackgroundInverse: palette.secondary,
-            buttonPrimaryBackgroundNegative: palette.secondary,
-            buttonPrimaryBackgroundBrand: palette.secondary,
+            buttonLinkBackgroundPressed: applyAlpha(palette.brand30, 0.16),
+            buttonLinkBackgroundInversePressed: applyAlpha(palette.brand30, 0.16),
+            buttonLinkBackgroundNegativePressed: applyAlpha(palette.brand30, 0.16),
+            buttonLinkBackgroundBrandPressed: applyAlpha(palette.brand30, 0.16),
+            buttonLinkBackgroundMediaPressed: applyAlpha(palette.white, 0.08),
+            buttonPrimaryBackground: palette.brand,
+            buttonPrimaryBackgroundInverse: palette.white,
+            buttonPrimaryBackgroundNegative: palette.white,
+            buttonPrimaryBackgroundBrand: palette.white,
             buttonPrimaryBackgroundMedia: palette.white,
-            buttonPrimaryBackgroundHover: palette.secondary60,
-            buttonPrimaryBackgroundInverseHover: palette.secondary60,
-            buttonPrimaryBackgroundNegativeHover: palette.secondary60,
-            buttonPrimaryBackgroundBrandHover: palette.secondary60,
-            buttonPrimaryBackgroundMediaHover: palette.primary20,
-            buttonPrimaryBackgroundPressed: palette.secondary60,
-            buttonPrimaryBackgroundInversePressed: palette.secondary60,
-            buttonPrimaryBackgroundNegativePressed: palette.secondary60,
-            buttonPrimaryBackgroundBrandPressed: palette.secondary60,
-            buttonPrimaryBackgroundMediaPressed: palette.primary30,
+            buttonPrimaryBackgroundHover: palette.brand70,
+            buttonPrimaryBackgroundInverseHover: palette.brand15,
+            buttonPrimaryBackgroundNegativeHover: palette.brand15,
+            buttonPrimaryBackgroundBrandHover: palette.brand15,
+            buttonPrimaryBackgroundMediaHover: palette.brand15,
+            buttonPrimaryBackgroundPressed: palette.brand70,
+            buttonPrimaryBackgroundInversePressed: palette.brand15,
+            buttonPrimaryBackgroundNegativePressed: palette.brand15,
+            buttonPrimaryBackgroundBrandPressed: palette.brand15,
+            buttonPrimaryBackgroundMediaPressed: palette.brand15,
             buttonSecondaryBackgroundBrand: applyAlpha(palette.white, 0),
-            buttonSecondaryBorder: palette.white,
+            buttonSecondaryBorder: palette.darkModeBrand,
             buttonSecondaryBorderInverse: palette.white,
             buttonSecondaryBorderNegative: palette.white,
             buttonSecondaryBorderBrand: palette.white,
@@ -429,199 +448,671 @@ export const getCyberSkin = (): Skin => {
             buttonSecondaryBackgroundInverseHover: applyAlpha(palette.white, 0.15),
             buttonSecondaryBackgroundNegativeHover: applyAlpha(palette.white, 0.15),
             buttonSecondaryBackgroundBrandHover: applyAlpha(palette.white, 0.15),
-            buttonSecondaryBackgroundMediaHover: applyAlpha(palette.white, 0.2),
+            buttonSecondaryBackgroundMediaHover: applyAlpha(palette.white, 0.1),
             buttonSecondaryBackgroundPressed: applyAlpha(palette.white, 0.15),
             buttonSecondaryBackgroundInversePressed: applyAlpha(palette.white, 0.15),
             buttonSecondaryBackgroundNegativePressed: applyAlpha(palette.white, 0.15),
             buttonSecondaryBackgroundBrandPressed: applyAlpha(palette.white, 0.15),
-            buttonSecondaryBackgroundMediaPressed: applyAlpha(palette.white, 0.2),
-            textButtonPrimary: palette.grey2,
-            textButtonPrimaryInverse: palette.grey2,
-            textButtonPrimaryNegative: palette.grey2,
-            textButtonPrimaryBrand: palette.grey2,
-            textButtonPrimaryMedia: palette.secondary,
-            textButtonPrimaryInversePressed: palette.grey2,
-            textButtonPrimaryNegativePressed: palette.grey2,
-            textButtonPrimaryBrandPressed: palette.grey2,
-            textButtonPrimaryMediaPressed: palette.secondary60,
-            textButtonSecondary: palette.grey2,
-            textButtonSecondaryInverse: palette.grey2,
-            textButtonSecondaryNegative: palette.grey2,
-            textButtonSecondaryBrand: palette.grey2,
+            buttonSecondaryBackgroundMediaPressed: applyAlpha(palette.white, 0.1),
+            textButtonPrimary: palette.white,
+            textButtonPrimaryInverse: palette.brand,
+            textButtonPrimaryNegative: palette.brand,
+            textButtonPrimaryBrand: palette.brand,
+            textButtonPrimaryMedia: palette.brand,
+            textButtonPrimaryInversePressed: palette.brand70,
+            textButtonPrimaryNegativePressed: palette.brand70,
+            textButtonPrimaryBrandPressed: palette.brand70,
+            textButtonPrimaryMediaPressed: palette.brand70,
+            textButtonSecondary: palette.white,
+            textButtonSecondaryInverse: palette.white,
+            textButtonSecondaryNegative: palette.white,
+            textButtonSecondaryBrand: palette.white,
             textButtonSecondaryMedia: palette.white,
-            textButtonSecondaryPressed: palette.grey2,
-            textButtonSecondaryInversePressed: palette.grey2,
-            textButtonSecondaryNegativePressed: palette.grey2,
-            textButtonSecondaryBrandPressed: palette.grey2,
+            textButtonSecondaryPressed: palette.white,
+            textButtonSecondaryInversePressed: palette.white,
+            textButtonSecondaryNegativePressed: palette.white,
+            textButtonSecondaryBrandPressed: palette.white,
             textButtonSecondaryMediaPressed: palette.white,
-            textLink: palette.accent30,
-            textLinkInverse: palette.accent30,
-            textLinkNegative: palette.accent30,
-            textLinkBrand: palette.accent30,
+            textLink: palette.darkModeBrand,
+            textLinkInverse: palette.darkModeBrand,
+            textLinkNegative: palette.darkModeBrand,
+            textLinkBrand: palette.darkModeBrand,
             textLinkMedia: palette.white,
-            textLinkDanger: palette.red40,
-            textLinkDangerMedia: palette.red,
-            textLinkSnackbar: palette.accent30,
-            textActivated: palette.primary,
-            textBrand: palette.primary,
-            inputBorder: palette.darkModeGrey5,
-            inputBorderInverse: palette.darkModeGrey5,
-            inputBorderNegative: palette.darkModeGrey5,
-            inputBorderBrand: palette.darkModeGrey5,
-            control: palette.grey4,
-            controlActivated: palette.secondary,
-            controlInverse: palette.grey4,
-            controlNegative: palette.grey4,
-            controlBrand: palette.grey4,
-            controlActivatedInverse: palette.secondary,
-            controlActivatedNegative: palette.secondary,
-            controlActivatedBrand: palette.secondary,
-            controlError: palette.red,
-            chevronIndicator: palette.grey4,
-            barTrack: palette.grey5,
-            barTrackInverse: palette.grey5,
-            barTrackNegative: palette.grey5,
-            barTrackBrand: palette.grey5,
-            loadingBar: palette.primary,
-            loadingBarBackground: palette.grey5,
-            toggleAndroidInactive: palette.grey3,
-            toggleAndroidBackgroundActive: palette.primary30,
-            toggleAndroidActiveBrand: palette.secondary60,
-            toggleAndroidInactiveBrand: palette.grey3,
-            toggleAndroidBackgroundActiveBrand: palette.primary30,
-            toggleAndroidBackgroundInactiveBrand: palette.grey4,
-            iosControlKnob: palette.grey2,
-            controlKnobInverse: palette.grey2,
-            controlKnobNegative: palette.grey2,
-            controlKnobBrand: palette.grey2,
-            divider: applyAlpha(palette.white, 0.09),
+            textLinkDanger: palette.red30,
+            textLinkDangerMedia: palette.red50,
+            textLinkSnackbar: palette.darkModeBrand,
+            textActivated: palette.brand30,
+            textBrand: palette.brand30,
+            inputBorder: palette.grey400,
+            inputBorderInverse: palette.grey400,
+            inputBorderNegative: palette.grey400,
+            inputBorderBrand: palette.grey400,
+            completedStep: palette.brand,
+            completedStepInverse: palette.brand,
+            completedStepNegative: palette.brand,
+            completedStepBrand: palette.brand,
+            control: palette.grey400,
+            controlActivated: palette.darkModeBrand,
+            controlInverse: palette.grey400,
+            controlNegative: palette.grey400,
+            controlBrand: palette.grey400,
+            controlActivatedInverse: palette.darkModeBrand,
+            controlActivatedNegative: palette.darkModeBrand,
+            controlActivatedBrand: palette.darkModeBrand,
+            controlError: palette.red30,
+            chevronIndicator: palette.grey400,
+            barTrack: palette.brandDark,
+            barTrackInverse: palette.brandDark,
+            barTrackNegative: palette.brandDark,
+            barTrackBrand: palette.brandDark,
+            loadingBar: palette.darkModeBrand,
+            loadingBarBackground: palette.grey500,
+            toggleAndroidInactive: palette.grey100,
+            toggleAndroidBackgroundActive: palette.brand20,
+            toggleAndroidActiveBrand: palette.darkModeBrand,
+            toggleAndroidInactiveBrand: palette.grey100,
+            toggleAndroidBackgroundActiveBrand: palette.brand20,
+            toggleAndroidBackgroundInactiveBrand: palette.grey400,
+            iosControlKnob: palette.brand10,
+            controlKnobInverse: palette.brand10,
+            controlKnobNegative: palette.brand10,
+            controlKnobBrand: palette.brand10,
+            divider: applyAlpha(palette.white, 0.2),
             dividerInverse: applyAlpha(palette.white, 0.05),
             dividerNegative: applyAlpha(palette.white, 0.05),
             dividerBrand: applyAlpha(palette.white, 0.05),
             navigationBarDivider: palette.darkModeBlack,
-            badge: palette.red,
-            feedbackErrorBackground: palette.red,
+            badge: palette.red50,
+            feedbackErrorBackground: palette.red60,
             feedbackInfoBackground: palette.darkModeGrey,
-            brand: palette.primary,
+            brand: palette.darkModeBrand,
             brandHigh: applyAlpha(palette.white, 0.05),
-            inverse: palette.grey2,
-            negative: palette.grey2,
-            neutralHigh: palette.grey2,
-            neutralHighNegative: palette.grey2,
-            neutralHighBrand: palette.grey2,
-            neutralMedium: palette.grey4,
-            neutralMediumInverse: palette.grey4,
-            neutralMediumNegative: palette.grey4,
-            neutralMediumBrand: palette.grey4,
-            neutralLow: palette.darkModeGrey6,
-            neutralLowAlternative: palette.darkModeGrey6,
-            textPrimary: palette.grey2,
-            textPrimaryInverse: palette.grey2,
-            textPrimaryNegative: palette.grey2,
-            textPrimaryBrand: palette.grey2,
+            inverse: palette.brand10,
+            negative: palette.brand10,
+            neutralHigh: palette.grey100,
+            neutralHighBrand: palette.grey100,
+            neutralHighNegative: palette.grey100,
+            neutralMedium: palette.grey400,
+            neutralMediumInverse: palette.grey400,
+            neutralMediumNegative: palette.grey400,
+            neutralMediumBrand: palette.grey400,
+            neutralLow: palette.grey700,
+            neutralLowAlternative: palette.grey700,
+            textPrimary: palette.brand10,
+            textPrimaryInverse: palette.brand10,
+            textPrimaryNegative: palette.brand10,
+            textPrimaryBrand: palette.brand10,
             textPrimaryMedia: palette.white,
-            textSecondary: palette.grey4,
-            textSecondaryInverse: palette.grey4,
-            textSecondaryNegative: palette.grey4,
-            textSecondaryBrand: palette.grey4,
+            textSecondary: palette.grey200,
+            textSecondaryInverse: palette.grey200,
+            textSecondaryNegative: palette.grey200,
+            textSecondaryBrand: palette.grey200,
             textSecondaryMedia: palette.white,
-            error: palette.red,
-            textError: palette.red40,
-            textErrorInverse: palette.red40,
-            textErrorNegative: palette.red40,
-            textErrorBrand: palette.red40,
-            success: palette.green,
-            warning: palette.yellow,
-            promo: palette.accent,
-            highlight: palette.primary,
-            successLow: palette.darkModeGrey6,
-            warningLow: palette.darkModeGrey6,
-            errorLow: palette.darkModeGrey6,
-            promoLow: palette.darkModeGrey6,
-            brandLow: palette.darkModeGrey6,
-            successHigh: palette.green30,
+            error: palette.red30,
+            textError: palette.red20,
+            textErrorInverse: palette.red30,
+            textErrorNegative: palette.red30,
+            textErrorBrand: palette.red30,
+            success: palette.teal,
+            warning: palette.yellow60,
+            promo: palette.purple,
+            highlight: palette.red20,
+            successLow: palette.brandDark,
+            warningLow: palette.brandDark,
+            errorLow: palette.brandDark,
+            promoLow: palette.brandDark,
+            brandLow: palette.brandDark,
+            successHigh: palette.teal40,
             warningHigh: palette.yellow40,
-            errorHigh: palette.red40,
-            promoHigh: palette.accent30,
-            successHighInverse: palette.green70,
-            successHighNegative: palette.green70,
-            successHighBrand: palette.green70,
-            warningHighInverse: palette.yellow70,
-            warningHighNegative: palette.yellow70,
-            warningHighBrand: palette.yellow70,
-            errorHighInverse: palette.red70,
-            errorHighNegative: palette.red70,
-            errorHighBrand: palette.red70,
-            promoHighInverse: palette.accent,
-            promoHighNegative: palette.accent,
-            promoHighBrand: palette.accent,
-            textNavigationBarPrimary: palette.grey2,
-            textNavigationBarSecondary: palette.grey4,
-            textNavigationSearchBarHint: palette.grey4,
-            textNavigationSearchBarText: palette.grey2,
-            textAppBar: palette.grey5,
-            textAppBarSelected: palette.grey2,
+            errorHigh: palette.red20,
+            promoHigh: palette.purple40,
+            successHighInverse: palette.teal70,
+            successHighNegative: palette.teal70,
+            successHighBrand: palette.teal70,
+            warningHighInverse: palette.yellow60,
+            warningHighNegative: palette.yellow60,
+            warningHighBrand: palette.yellow60,
+            errorHighInverse: palette.red60,
+            errorHighNegative: palette.red60,
+            errorHighBrand: palette.red60,
+            promoHighInverse: palette.purple70,
+            promoHighNegative: palette.purple70,
+            promoHighBrand: palette.purple70,
+            textNavigationBarPrimary: palette.white,
+            textNavigationBarSecondary: palette.grey300,
+            textNavigationSearchBarHint: palette.grey300,
+            textNavigationSearchBarText: palette.white,
+            textAppBar: palette.grey100,
+            textAppBarSelected: palette.white,
             iosGlassAppBar: palette.white,
             iosGlassAppBarSelected: palette.white,
             customTabsBackground: palette.darkModeBlack,
-            tagTextPromo: palette.accent30,
-            tagTextActive: palette.primary,
-            tagTextInactive: palette.grey3,
-            tagTextInfo: palette.primary,
-            tagTextSuccess: palette.green30,
+            tagTextPromo: palette.purple40,
+            tagTextActive: palette.brand20,
+            tagTextInactive: palette.grey200,
+            tagTextInfo: palette.brand20,
+            tagTextSuccess: palette.teal40,
             tagTextWarning: palette.yellow40,
-            tagTextError: palette.red40,
-            tagBackgroundPromo: palette.darkModeGrey6,
-            tagBackgroundActive: palette.darkModeGrey6,
-            tagBackgroundInactive: palette.darkModeGrey6,
-            tagBackgroundInfo: palette.darkModeGrey6,
-            tagBackgroundSuccess: palette.darkModeGrey6,
-            tagBackgroundWarning: palette.darkModeGrey6,
-            tagBackgroundError: palette.darkModeGrey6,
-            tagTextPromoInverse: palette.accent30,
-            tagTextPromoNegative: palette.accent30,
-            tagTextPromoBrand: palette.accent30,
-            tagTextActiveInverse: palette.primary,
-            tagTextActiveNegative: palette.primary,
-            tagTextActiveBrand: palette.primary,
-            tagTextInactiveInverse: palette.grey3,
-            tagTextInactiveNegative: palette.grey3,
-            tagTextInactiveBrand: palette.grey3,
-            tagTextInfoInverse: palette.primary,
-            tagTextInfoNegative: palette.primary,
-            tagTextInfoBrand: palette.primary,
-            tagTextSuccessInverse: palette.green30,
-            tagTextSuccessNegative: palette.green30,
-            tagTextSuccessBrand: palette.green30,
+            tagTextError: palette.red20,
+            tagBackgroundPromo: palette.purple80,
+            tagBackgroundActive: palette.brand80,
+            tagBackgroundInactive: palette.grey700,
+            tagBackgroundInfo: palette.brand80,
+            tagBackgroundSuccess: palette.teal80,
+            tagBackgroundWarning: palette.yellow80,
+            tagBackgroundError: palette.red90,
+            tagTextPromoInverse: palette.purple40,
+            tagTextPromoNegative: palette.purple40,
+            tagTextPromoBrand: palette.purple40,
+            tagTextActiveInverse: palette.brand20,
+            tagTextActiveNegative: palette.brand20,
+            tagTextActiveBrand: palette.brand20,
+            tagTextInactiveInverse: palette.grey200,
+            tagTextInactiveNegative: palette.grey200,
+            tagTextInactiveBrand: palette.grey200,
+            tagTextInfoInverse: palette.brand20,
+            tagTextInfoNegative: palette.brand20,
+            tagTextInfoBrand: palette.brand20,
+            tagTextSuccessInverse: palette.teal40,
+            tagTextSuccessNegative: palette.teal40,
+            tagTextSuccessBrand: palette.teal40,
             tagTextWarningInverse: palette.yellow40,
             tagTextWarningNegative: palette.yellow40,
             tagTextWarningBrand: palette.yellow40,
-            tagTextErrorInverse: palette.red40,
-            tagTextErrorNegative: palette.red40,
-            tagTextErrorBrand: palette.red40,
-            tagBackgroundPromoInverse: palette.darkModeGrey6,
-            tagBackgroundPromoNegative: palette.darkModeGrey6,
-            tagBackgroundPromoBrand: palette.darkModeGrey6,
-            tagBackgroundActiveInverse: palette.darkModeGrey6,
-            tagBackgroundActiveNegative: palette.darkModeGrey6,
-            tagBackgroundActiveBrand: palette.darkModeGrey6,
-            tagBackgroundInactiveInverse: palette.darkModeGrey6,
-            tagBackgroundInactiveNegative: palette.darkModeGrey6,
-            tagBackgroundInactiveBrand: palette.darkModeGrey6,
-            tagBackgroundInfoInverse: palette.darkModeGrey6,
-            tagBackgroundInfoNegative: palette.darkModeGrey6,
-            tagBackgroundInfoBrand: palette.darkModeGrey6,
-            tagBackgroundSuccessInverse: palette.darkModeGrey6,
-            tagBackgroundSuccessNegative: palette.darkModeGrey6,
-            tagBackgroundSuccessBrand: palette.darkModeGrey6,
-            tagBackgroundWarningInverse: palette.darkModeGrey6,
-            tagBackgroundWarningNegative: palette.darkModeGrey6,
-            tagBackgroundWarningBrand: palette.darkModeGrey6,
-            tagBackgroundErrorInverse: palette.darkModeGrey6,
-            tagBackgroundErrorNegative: palette.darkModeGrey6,
-            tagBackgroundErrorBrand: palette.darkModeGrey6,
-            cardContentOverlay: `linear-gradient(180deg, ${applyAlpha(palette.grey6, 0)} 0%, ${applyAlpha(palette.grey6, 0.4)} 30%, ${applyAlpha(palette.grey6, 0.7)} 100%)`,
-            cardFooterOverlay: applyAlpha(palette.grey6, 0.7),
+            tagTextErrorInverse: palette.red20,
+            tagTextErrorNegative: palette.red20,
+            tagTextErrorBrand: palette.red20,
+            tagBackgroundPromoInverse: palette.purple80,
+            tagBackgroundPromoNegative: palette.purple80,
+            tagBackgroundPromoBrand: palette.purple80,
+            tagBackgroundActiveInverse: palette.brand80,
+            tagBackgroundActiveNegative: palette.brand80,
+            tagBackgroundActiveBrand: palette.brand80,
+            tagBackgroundInactiveInverse: palette.grey700,
+            tagBackgroundInactiveNegative: palette.grey700,
+            tagBackgroundInactiveBrand: palette.grey700,
+            tagBackgroundInfoInverse: palette.brand80,
+            tagBackgroundInfoNegative: palette.brand80,
+            tagBackgroundInfoBrand: palette.brand80,
+            tagBackgroundSuccessInverse: palette.teal80,
+            tagBackgroundSuccessNegative: palette.teal80,
+            tagBackgroundSuccessBrand: palette.teal80,
+            tagBackgroundWarningInverse: palette.yellow80,
+            tagBackgroundWarningNegative: palette.yellow80,
+            tagBackgroundWarningBrand: palette.yellow80,
+            tagBackgroundErrorInverse: palette.red90,
+            tagBackgroundErrorNegative: palette.red90,
+            tagBackgroundErrorBrand: palette.red90,
+            cardContentOverlay: `linear-gradient(180deg, ${applyAlpha(palette.black, 0)} 0%, ${applyAlpha(palette.black, 0.4)} 30%, ${applyAlpha(palette.black, 0.7)} 100%)`,
+            cardFooterOverlay: applyAlpha(palette.black, 0.7),
+        },
+        borderRadii: {
+            avatar: '50%',
+            bar: '0px',
+            button: '32px',
+            checkbox: '2px',
+            container: '20px',
+            indicator: '24px',
+            chip: '24px',
+            tag: '24px',
+            input: '12px',
+            legacyDisplay: '0px',
+            popup: '4px',
+            sheet: '0px',
+            mediaSmall: '2px',
+        },
+        textPresets: {
+            cardTitle: {
+                weight: 'medium',
+            },
+            drawerTitle: {
+                weight: 'regular',
+                size: {
+                    mobile: 20,
+                    desktop: 28,
+                },
+                lineHeight: {
+                    mobile: 24,
+                    desktop: 32,
+                },
+            },
+            rowTitle: {
+                weight: 'regular',
+            },
+            button: {
+                weight: 'medium',
+            },
+            tabsLabel: {
+                weight: 'medium',
+                size: {
+                    mobile: 16,
+                    desktop: 18,
+                },
+                lineHeight: {
+                    mobile: 24,
+                    desktop: 24,
+                },
+            },
+            link: {
+                weight: 'medium',
+            },
+            title1: {
+                weight: 'medium',
+                size: {
+                    mobile: 12,
+                    desktop: 14,
+                },
+                lineHeight: {
+                    mobile: 16,
+                    desktop: 20,
+                },
+            },
+            title2: {
+                weight: 'regular',
+                size: {
+                    mobile: 16,
+                    desktop: 18,
+                },
+                lineHeight: {
+                    mobile: 24,
+                    desktop: 24,
+                },
+            },
+            title3: {
+                weight: 'regular',
+                size: {
+                    mobile: 20,
+                    desktop: 28,
+                },
+                lineHeight: {
+                    mobile: 24,
+                    desktop: 32,
+                },
+            },
+            title4: {
+                weight: 'regular',
+                size: {
+                    mobile: 24,
+                    desktop: 32,
+                },
+                lineHeight: {
+                    mobile: 32,
+                    desktop: 40,
+                },
+            },
+            indicator: {
+                weight: 'medium',
+            },
+            navigationBar: {
+                weight: 'medium',
+            },
+            text5: {
+                weight: 'regular',
+                size: {
+                    mobile: 20,
+                    desktop: 28,
+                },
+                lineHeight: {
+                    mobile: 24,
+                    desktop: 32,
+                },
+            },
+            text6: {
+                weight: 'regular',
+                size: {
+                    mobile: 24,
+                    desktop: 32,
+                },
+                lineHeight: {
+                    mobile: 32,
+                    desktop: 40,
+                },
+            },
+            text7: {
+                weight: 'regular',
+                size: {
+                    mobile: 28,
+                    desktop: 40,
+                },
+                lineHeight: {
+                    mobile: 32,
+                    desktop: 48,
+                },
+            },
+            text8: {
+                weight: 'regular',
+                size: {
+                    mobile: 32,
+                    desktop: 48,
+                },
+                lineHeight: {
+                    mobile: 40,
+                    desktop: 56,
+                },
+            },
+            text9: {
+                weight: 'regular',
+                size: {
+                    mobile: 40,
+                    desktop: 56,
+                },
+                lineHeight: {
+                    mobile: 48,
+                    desktop: 64,
+                },
+            },
+            text10: {
+                weight: 'regular',
+                size: {
+                    mobile: 48,
+                    desktop: 64,
+                },
+                lineHeight: {
+                    mobile: 56,
+                    desktop: 72,
+                },
+            },
+            chipLabel: {
+                weight: 'medium',
+                size: {
+                    mobile: 14,
+                    desktop: 16,
+                },
+                lineHeight: {
+                    mobile: 20,
+                    desktop: 24,
+                },
+            },
+            cardPretitleSnap: {
+                size: {
+                    mobile: 14,
+                    desktop: 16,
+                },
+                lineHeight: {
+                    mobile: 20,
+                    desktop: 24,
+                },
+            },
+            cardTitleSnap: {
+                size: {
+                    mobile: 14,
+                    desktop: 16,
+                },
+                lineHeight: {
+                    mobile: 20,
+                    desktop: 24,
+                },
+            },
+            cardSubtitleSnap: {
+                size: {
+                    mobile: 14,
+                    desktop: 16,
+                },
+                lineHeight: {
+                    mobile: 20,
+                    desktop: 24,
+                },
+            },
+            cardDescriptionSnap: {
+                size: {
+                    mobile: 14,
+                    desktop: 16,
+                },
+                lineHeight: {
+                    mobile: 20,
+                    desktop: 24,
+                },
+            },
+            cardPretitleDefault: {
+                size: {
+                    mobile: 14,
+                    desktop: 16,
+                },
+                lineHeight: {
+                    mobile: 20,
+                    desktop: 24,
+                },
+            },
+            cardTitleDefault: {
+                size: {
+                    mobile: 18,
+                    desktop: 20,
+                },
+                lineHeight: {
+                    mobile: 24,
+                    desktop: 28,
+                },
+            },
+            cardSubtitleDefault: {
+                size: {
+                    mobile: 14,
+                    desktop: 16,
+                },
+                lineHeight: {
+                    mobile: 20,
+                    desktop: 24,
+                },
+            },
+            cardDescriptionDefault: {
+                size: {
+                    mobile: 14,
+                    desktop: 16,
+                },
+                lineHeight: {
+                    mobile: 20,
+                    desktop: 24,
+                },
+            },
+            text1: {
+                size: {
+                    mobile: 12,
+                    desktop: 14,
+                },
+                lineHeight: {
+                    mobile: 16,
+                    desktop: 20,
+                },
+            },
+            text2: {
+                size: {
+                    mobile: 14,
+                    desktop: 16,
+                },
+                lineHeight: {
+                    mobile: 20,
+                    desktop: 24,
+                },
+            },
+            text3: {
+                size: {
+                    mobile: 16,
+                    desktop: 18,
+                },
+                lineHeight: {
+                    mobile: 24,
+                    desktop: 24,
+                },
+            },
+            text4: {
+                size: {
+                    mobile: 18,
+                    desktop: 20,
+                },
+                lineHeight: {
+                    mobile: 24,
+                    desktop: 28,
+                },
+            },
+            inputLabel: {
+                size: {
+                    mobile: 12,
+                    desktop: 14,
+                },
+                lineHeight: {
+                    mobile: 16,
+                    desktop: 20,
+                },
+            },
+            inputValue: {
+                size: {
+                    mobile: 16,
+                    desktop: 18,
+                },
+                lineHeight: {
+                    mobile: 24,
+                    desktop: 24,
+                },
+            },
+            inputHelperText: {
+                size: {
+                    mobile: 12,
+                    desktop: 14,
+                },
+                lineHeight: {
+                    mobile: 16,
+                    desktop: 20,
+                },
+            },
+            stepperStepLabel: {
+                size: {
+                    mobile: 14,
+                    desktop: 16,
+                },
+                lineHeight: {
+                    mobile: 20,
+                    desktop: 24,
+                },
+            },
+            loadingScreenTitle: {
+                size: {
+                    mobile: 18,
+                    desktop: 20,
+                },
+                lineHeight: {
+                    mobile: 24,
+                    desktop: 28,
+                },
+            },
+        },
+        themeVariants: {
+            successFeedback: 'inverse',
+            brandLoadingScreen: 'inverse',
+        },
+        spacing: {
+            buttonDefaultPadding: {
+                left: {
+                    mobile: 20,
+                    desktop: 20,
+                },
+                right: {
+                    mobile: 20,
+                    desktop: 20,
+                },
+            },
+            buttonSmallPadding: {
+                left: {
+                    mobile: 14,
+                    desktop: 14,
+                },
+                right: {
+                    mobile: 14,
+                    desktop: 14,
+                },
+            },
+            cardDefaultPadding: {
+                top: {
+                    mobile: 16,
+                    desktop: 24,
+                },
+                bottom: {
+                    mobile: 16,
+                    desktop: 24,
+                },
+                left: {
+                    mobile: 16,
+                    desktop: 24,
+                },
+                right: {
+                    mobile: 16,
+                    desktop: 24,
+                },
+            },
+            inputPadding: {
+                top: {
+                    mobile: 8,
+                    desktop: 8,
+                },
+                bottom: {
+                    mobile: 8,
+                    desktop: 8,
+                },
+            },
+            tagPadding: {
+                top: {
+                    mobile: 4,
+                    desktop: 4,
+                },
+                bottom: {
+                    mobile: 4,
+                    desktop: 4,
+                },
+            },
+            feedbackScreenPadding: {
+                top: {
+                    mobile: 64,
+                    desktop: 64,
+                },
+                bottom: {
+                    mobile: 16,
+                    desktop: 64,
+                },
+                left: {
+                    mobile: 16,
+                    desktop: 64,
+                },
+                right: {
+                    mobile: 16,
+                    desktop: 64,
+                },
+            },
+            heroPadding: {
+                top: {
+                    mobile: 24,
+                    desktop: 56,
+                },
+                bottom: {
+                    mobile: 24,
+                    desktop: 56,
+                },
+            },
+            headerPadding: {
+                top: {
+                    mobile: 24,
+                    desktop: 48,
+                },
+                bottom: {
+                    mobile: 24,
+                    desktop: 48,
+                },
+            },
+            drawerPadding: {
+                top: {
+                    mobile: 32,
+                    desktop: 40,
+                },
+                bottom: {
+                    mobile: 16,
+                    desktop: 24,
+                },
+                left: {
+                    mobile: 16,
+                    desktop: 40,
+                },
+                right: {
+                    mobile: 16,
+                    desktop: 40,
+                },
+            },
         },
     };
     return skin;