@telefonica/mistica 17.0.0 → 17.1.0

package/src/skins/vivo-evolution.tsx

@@ -4,618 +4,704 @@ import {applyAlpha} from '../utils/color';
 import type {GetKnownSkin, KnownSkin} from './types';
 
 export const palette = {
-    vivoPurple: '#660099',
-    vivoPurpleDark: '#461E5F',
-    vivoPurpleLight10: '#EFE5F4',
-    vivoPurpleLight20: '#E0CCEB',
-    vivoPurpleLight50: '#B280CC',
-    vivoPurpleLight80: '#8433AD',
-    vivoPurpleLight90: '#751AA3',
-    vivoGreen: '#99CC33',
-    vivoGreenDark: '#225C3D',
-    vivoGreenLight10: '#EDF8E8',
-    vivoGreen25: '#D6EBAD',
-    vivoGreenLight30: '#91AE9E',
-    vivoBlue: '#00ABDB',
-    orange: '#FF9900',
-    orange25: '#FFD699',
-    orangeDark: '#972A1D',
-    orangeLight10: '#FFEFE1',
-    orangeLight40: '#FFB84C',
-    pink: '#EB3D7D',
-    pepper: '#CC1F59',
-    pepperDark: '#B71D63',
-    pepperDark80: '#8F2052',
-    pepperLight10: '#FCE4EF',
-    pepperLight30: '#F7B1CB',
-    pepperLight40: '#DB628B',
-    grey1: '#F6F6F6',
-    grey2: '#EEEEEE',
-    grey3: '#DDDDDD',
-    grey4: '#8A8C90',
-    grey5: '#666666',
-    grey6: '#000000',
-    white: '#FFFFFF',
-    darkModeBlack: '#191919',
-    darkModeGrey: '#242424',
-    darkModeGrey5: '#6D7D88',
-    darkModeGrey6: '#313235',
+    vivoNeutral0: '#FFFFFF',
+    vivoNeutral25: '#F1EFF6',
+    vivoNeutral50: '#F0EDF5',
+    vivoNeutral100: '#EAE6F0',
+    vivoNeutral150: '#E3DEEB',
+    vivoNeutral200: '#DCD8E5',
+    vivoNeutral300: '#C7C1D6',
+    vivoNeutral400: '#B9AFCC',
+    vivoNeutral500: '#9187A8',
+    vivoNeutral600: '#665D7A',
+    vivoNeutral700: '#423B52',
+    vivoNeutral800: '#2D2A3D',
+    vivoNeutral900: '#252233',
+    vivoNeutral925: '#1D1A29',
+    vivoNeutral950: '#16131E',
+    vivoNeutral975: '#0E0C14',
+    vivoPurple25: '#F5F0FA',
+    vivoPurple50: '#EEE7F3',
+    vivoPurple75: '#E6D9F0',
+    vivoPurple100: '#DCC3EA',
+    vivoPurple200: '#C89DE2',
+    vivoPurple300: '#B77DDB',
+    vivoPurple400: '#A85ED4',
+    vivoPurple500: '#9147C3',
+    vivoPurple600: '#7A2FB3',
+    vivoPurple650: '#7020A6',
+    vivoPurple700: '#660099',
+    vivoPurple750: '#5B008A',
+    vivoPurple800: '#4F007A',
+    vivoPurple825: '#440069',
+    vivoPurple850: '#400063',
+    vivoPurple875: '#3C005D',
+    vivoPurple900: '#380057',
+    vivoPurple925: '#2D0048',
+    vivoPurple950: '#210034',
+    vivoPurple975: '#160026',
+    vivoGreen25: '#EDF8E8',
+    vivoGreen50: '#E4F3D8',
+    vivoGreen100: '#D6EBAD',
+    vivoGreen200: '#C3DF8C',
+    vivoGreen300: '#B7DA73',
+    vivoGreen400: '#AEDA5F',
+    vivoGreen500: '#A6D94D',
+    vivoGreen600: '#99CC33',
+    vivoGreen700: '#7FB029',
+    vivoGreen800: '#5F8C2F',
+    vivoGreen850: '#3F6E35',
+    vivoGreen900: '#225C3D',
+    vivoGreen925: '#1B4A31',
+    vivoGreen950: '#143824',
+    vivoGreen975: '#0D2618',
+    vivoOrange25: '#FFF7E8',
+    vivoOrange50: '#FFEFE1',
+    vivoOrange100: '#FFD699',
+    vivoOrange200: '#FFC266',
+    vivoOrange300: '#FFAD33',
+    vivoOrange400: '#FFA31A',
+    vivoOrange500: '#FF9F0F',
+    vivoOrange600: '#FF9900',
+    vivoOrange700: '#E68500',
+    vivoOrange800: '#CC7000',
+    vivoOrange850: '#B3540F',
+    vivoOrange900: '#972A1D',
+    vivoOrange925: '#7A2117',
+    vivoOrange950: '#5C1911',
+    vivoOrange975: '#3D0F0A',
+    vivoPepper25: '#FCE4EF',
+    vivoPepper50: '#FAD6E6',
+    vivoPepper100: '#F7C6DA',
+    vivoPepper200: '#F7B1CB',
+    vivoPepper300: '#E98FB0',
+    vivoPepper400: '#DB628B',
+    vivoPepper500: '#D64578',
+    vivoPepper600: '#CC1F59',
+    vivoPepper700: '#B71D63',
+    vivoPepper800: '#8F2052',
+    vivoPepper900: '#741A43',
+    vivoPepper925: '#5C1435',
+    vivoPepper950: '#430E27',
+    vivoPepper975: '#2B0819',
 };
 
 export const getVivoEvolutionSkin: GetKnownSkin = () => {
     const skin: KnownSkin = {
         name: VIVO_EVOLUTION_SKIN,
         colors: {
-            background: palette.white,
-            backgroundAlternative: palette.grey1,
-            backgroundBrand: palette.vivoPurple,
-            backgroundNegative: palette.vivoPurpleDark,
-            backgroundBrandSecondary: palette.vivoPurpleLight80,
-            backgroundContainer: palette.white,
-            backgroundContainerError: palette.pepperLight10,
-            backgroundContainerHover: applyAlpha(palette.darkModeBlack, 0.05),
-            backgroundContainerPressed: applyAlpha(palette.darkModeBlack, 0.08),
-            backgroundContainerBrand: palette.vivoPurple,
-            backgroundContainerBrandHover: applyAlpha(palette.darkModeBlack, 0.2),
-            backgroundContainerBrandPressed: applyAlpha(palette.darkModeBlack, 0.4),
-            backgroundContainerBrandOverInverse: palette.vivoPurpleDark,
-            backgroundContainerNegative: applyAlpha(palette.darkModeBlack, 0.4),
-            backgroundContainerBrandOverBrand: palette.vivoPurpleDark,
-            backgroundContainerAlternative: palette.grey1,
-            backgroundOverlay: applyAlpha(palette.grey6, 0.6),
-            backgroundSkeleton: palette.grey3,
-            backgroundSkeletonInverse: palette.vivoPurpleDark,
-            backgroundSkeletonNegative: applyAlpha(palette.grey6, 0.2),
-            backgroundSkeletonBrand: palette.vivoPurpleDark,
-            backgroundBrandTop: palette.vivoPurple,
-            backgroundBrandBottom: palette.vivoPurple,
-            appBarBackground: palette.white,
-            navigationBarBackground: palette.vivoPurple,
-            backgroundDropZoneHover: applyAlpha(palette.vivoPurple, 0.06),
-            backgroundDropZoneDragover: palette.vivoPurpleLight10,
-            backgroundDropZoneBrandHover: applyAlpha(palette.vivoPurpleDark, 0.3),
-            backgroundDropZoneBrandDragover: applyAlpha(palette.vivoPurpleDark, 0.5),
-            backgroundDropZoneNegativeHover: applyAlpha(palette.white, 0.1),
-            backgroundDropZoneNegativeDragover: applyAlpha(palette.white, 0.17),
-            backgroundDropZoneMediaHover: applyAlpha(palette.vivoPurpleDark, 0.3),
-            backgroundDropZoneMediaDragover: applyAlpha(palette.vivoPurpleDark, 0.5),
-            skeletonWave: palette.grey2,
-            borderLow: palette.grey1,
-            border: palette.grey3,
-            borderHigh: palette.grey5,
-            borderSelected: palette.vivoPurple,
-            coverBackgroundHover: applyAlpha(palette.darkModeBlack, 0.25),
-            coverBackgroundPressed: applyAlpha(palette.darkModeBlack, 0.35),
-            buttonDangerBackground: palette.pepper,
-            buttonDangerBackgroundPressed: palette.pepperDark,
-            buttonDangerBackgroundHover: palette.pepperDark,
-            buttonLinkDangerBackgroundInverse: palette.white,
-            buttonLinkDangerBackgroundNegative: palette.white,
-            buttonLinkDangerBackgroundBrand: palette.white,
-            buttonLinkDangerBackgroundMedia: palette.white,
-            buttonLinkDangerBackgroundPressed: palette.pepperLight10,
-            buttonLinkDangerBackgroundInversePressed: palette.pepperLight10,
-            buttonLinkDangerBackgroundNegativePressed: palette.pepperLight10,
-            buttonLinkDangerBackgroundBrandPressed: palette.pepperLight10,
-            buttonLinkDangerBackgroundMediaPressed: palette.pepperLight10,
-            buttonLinkBackgroundPressed: palette.vivoPurpleLight10,
-            buttonLinkBackgroundInversePressed: applyAlpha(palette.white, 0.1),
-            buttonLinkBackgroundNegativePressed: applyAlpha(palette.white, 0.1),
-            buttonLinkBackgroundBrandPressed: applyAlpha(palette.white, 0.1),
-            buttonLinkBackgroundMediaPressed: applyAlpha(palette.white, 0.1),
-            buttonPrimaryBackground: palette.vivoPurple,
-            buttonPrimaryBackgroundInverse: palette.white,
-            buttonPrimaryBackgroundNegative: palette.white,
-            buttonPrimaryBackgroundBrand: palette.white,
-            buttonPrimaryBackgroundMedia: palette.white,
-            buttonPrimaryBackgroundHover: palette.vivoPurpleDark,
-            buttonPrimaryBackgroundInverseHover: palette.vivoPurpleLight10,
-            buttonPrimaryBackgroundNegativeHover: palette.vivoPurpleLight10,
-            buttonPrimaryBackgroundBrandHover: palette.vivoPurpleLight10,
-            buttonPrimaryBackgroundMediaHover: palette.vivoPurpleLight10,
-            buttonPrimaryBackgroundPressed: palette.vivoPurpleDark,
-            buttonPrimaryBackgroundInversePressed: palette.vivoPurpleLight20,
-            buttonPrimaryBackgroundNegativePressed: palette.vivoPurpleLight20,
-            buttonPrimaryBackgroundBrandPressed: palette.vivoPurpleLight20,
-            buttonPrimaryBackgroundMediaPressed: palette.vivoPurpleLight20,
-            buttonSecondaryBackgroundBrand: applyAlpha(palette.white, 0),
-            buttonSecondaryBorder: palette.vivoPurple,
-            buttonSecondaryBorderInverse: palette.white,
-            buttonSecondaryBorderNegative: palette.white,
-            buttonSecondaryBorderBrand: palette.white,
-            buttonSecondaryBorderMedia: palette.white,
-            buttonSecondaryBorderPressed: palette.vivoPurpleDark,
-            buttonSecondaryBorderInversePressed: palette.white,
-            buttonSecondaryBorderNegativePressed: palette.white,
-            buttonSecondaryBorderBrandPressed: palette.white,
-            buttonSecondaryBorderMediaPressed: palette.white,
-            buttonSecondaryBackgroundHover: palette.vivoPurpleLight10,
-            buttonSecondaryBackgroundInverseHover: applyAlpha(palette.white, 0.15),
-            buttonSecondaryBackgroundNegativeHover: applyAlpha(palette.white, 0.15),
-            buttonSecondaryBackgroundBrandHover: applyAlpha(palette.white, 0.15),
-            buttonSecondaryBackgroundMediaHover: applyAlpha(palette.white, 0.15),
-            buttonSecondaryBackgroundPressed: palette.vivoPurpleLight10,
-            buttonSecondaryBackgroundInversePressed: applyAlpha(palette.white, 0.15),
-            buttonSecondaryBackgroundNegativePressed: applyAlpha(palette.white, 0.15),
-            buttonSecondaryBackgroundBrandPressed: applyAlpha(palette.white, 0.15),
-            buttonSecondaryBackgroundMediaPressed: applyAlpha(palette.white, 0.15),
-            textButtonPrimary: palette.white,
-            textButtonPrimaryInverse: palette.vivoPurple,
-            textButtonPrimaryNegative: palette.vivoPurple,
-            textButtonPrimaryBrand: palette.vivoPurple,
-            textButtonPrimaryMedia: palette.vivoPurple,
-            textButtonPrimaryInversePressed: palette.vivoPurple,
-            textButtonPrimaryNegativePressed: palette.vivoPurple,
-            textButtonPrimaryBrandPressed: palette.vivoPurple,
-            textButtonPrimaryMediaPressed: palette.vivoPurple,
-            textButtonSecondary: palette.vivoPurple,
-            textButtonSecondaryInverse: palette.white,
-            textButtonSecondaryNegative: palette.white,
-            textButtonSecondaryBrand: palette.white,
-            textButtonSecondaryMedia: palette.white,
-            textButtonSecondaryPressed: palette.vivoPurpleDark,
-            textButtonSecondaryInversePressed: palette.white,
-            textButtonSecondaryNegativePressed: palette.white,
-            textButtonSecondaryBrandPressed: palette.white,
-            textButtonSecondaryMediaPressed: palette.white,
-            textLink: palette.vivoPurple,
-            textLinkInverse: palette.white,
-            textLinkNegative: palette.white,
-            textLinkBrand: palette.white,
-            textLinkMedia: palette.white,
-            textLinkDanger: palette.pepper,
-            textLinkDangerMedia: palette.pepper,
-            textLinkSnackbar: palette.vivoPurpleLight20,
-            textActivated: palette.vivoPurple,
-            textBrand: palette.vivoPurple,
-            inputBorder: palette.grey4,
-            inputBorderInverse: palette.white,
-            inputBorderNegative: palette.white,
-            inputBorderBrand: palette.white,
-            completedStep: palette.vivoPurple,
-            completedStepInverse: palette.vivoPurpleDark,
-            completedStepNegative: palette.vivoPurpleDark,
-            completedStepBrand: palette.vivoPurpleDark,
-            control: palette.grey4,
-            controlActivated: palette.vivoPurple,
-            controlInverse: palette.vivoPurpleLight50,
-            controlNegative: palette.vivoPurpleLight50,
-            controlBrand: palette.vivoPurpleLight50,
-            controlActivatedInverse: palette.white,
-            controlActivatedNegative: palette.white,
-            controlActivatedBrand: palette.white,
-            controlError: palette.pepper,
-            chevronIndicator: palette.grey5,
-            barTrack: palette.grey3,
-            barTrackInverse: applyAlpha(palette.white, 0.5),
-            barTrackNegative: applyAlpha(palette.white, 0.5),
-            barTrackBrand: applyAlpha(palette.white, 0.5),
-            loadingBar: palette.vivoPurple,
-            loadingBarBackground: palette.vivoPurpleLight10,
-            toggleAndroidInactive: palette.grey2,
-            toggleAndroidBackgroundActive: palette.vivoPurpleLight20,
-            toggleAndroidActiveBrand: palette.white,
-            toggleAndroidInactiveBrand: palette.grey2,
-            toggleAndroidBackgroundActiveBrand: palette.vivoPurpleLight20,
-            toggleAndroidBackgroundInactiveBrand: palette.vivoPurpleLight50,
-            iosControlKnob: palette.white,
-            controlKnobInverse: palette.vivoPurple,
-            controlKnobNegative: palette.vivoPurple,
-            controlKnobBrand: palette.vivoPurple,
-            divider: palette.grey3,
-            dividerInverse: applyAlpha(palette.white, 0.2),
-            dividerNegative: applyAlpha(palette.white, 0.2),
-            dividerBrand: applyAlpha(palette.white, 0.2),
-            navigationBarDivider: palette.vivoPurple,
-            badge: palette.pepperDark,
-            feedbackErrorBackground: palette.pepper,
-            feedbackInfoBackground: palette.vivoPurpleDark,
-            brand: palette.vivoPurple,
-            brandHigh: palette.vivoPurpleDark,
-            inverse: palette.white,
-            negative: palette.white,
-            neutralHigh: palette.grey6,
-            neutralHighNegative: palette.white,
-            neutralHighBrand: palette.white,
-            neutralMedium: palette.grey5,
-            neutralMediumInverse: palette.grey5,
-            neutralMediumNegative: palette.grey5,
-            neutralMediumBrand: palette.grey5,
-            neutralLow: palette.grey1,
-            neutralLowAlternative: palette.grey2,
-            textPrimary: palette.grey6,
-            textPrimaryInverse: palette.white,
-            textPrimaryNegative: palette.white,
-            textPrimaryBrand: palette.white,
-            textPrimaryMedia: palette.white,
-            textSecondary: palette.grey5,
-            textSecondaryInverse: palette.vivoPurpleLight20,
-            textSecondaryNegative: palette.vivoPurpleLight20,
-            textSecondaryBrand: palette.vivoPurpleLight20,
-            textSecondaryMedia: palette.white,
-            success: palette.vivoGreen,
-            warning: palette.orange,
-            error: palette.pepper,
-            textError: palette.pepper,
-            textErrorInverse: palette.white,
-            textErrorNegative: palette.white,
-            textErrorBrand: palette.white,
-            promo: palette.vivoPurple,
-            highlight: palette.pink,
-            successLow: palette.vivoGreenLight10,
-            warningLow: palette.orangeLight10,
-            errorLow: palette.pepperLight10,
-            promoLow: palette.vivoPurpleLight10,
-            brandLow: palette.vivoPurpleLight10,
-            successHigh: palette.vivoGreenDark,
-            warningHigh: palette.orangeDark,
-            errorHigh: palette.pepperDark80,
-            promoHigh: palette.vivoPurple,
-            successHighInverse: palette.vivoGreenDark,
-            successHighNegative: palette.vivoGreenDark,
-            successHighBrand: palette.vivoGreenDark,
-            warningHighInverse: palette.orangeDark,
-            warningHighNegative: palette.orangeDark,
-            warningHighBrand: palette.orangeDark,
-            errorHighInverse: palette.pepperDark80,
-            errorHighNegative: palette.pepperDark80,
-            errorHighBrand: palette.pepperDark80,
-            promoHighInverse: palette.vivoPurple,
-            promoHighNegative: palette.vivoPurple,
-            promoHighBrand: palette.vivoPurple,
-            textNavigationBarPrimary: palette.white,
-            textNavigationBarSecondary: palette.vivoPurpleLight50,
-            textNavigationSearchBarHint: palette.vivoPurpleLight50,
-            textNavigationSearchBarText: palette.white,
-            textAppBar: palette.grey5,
-            textAppBarSelected: palette.vivoPurple,
-            iosGlassAppBar: palette.grey6,
-            iosGlassAppBarSelected: palette.vivoPurple,
-            customTabsBackground: palette.white,
-            tagTextPromo: palette.vivoPurple,
-            tagTextActive: palette.vivoPurple,
-            tagTextInactive: palette.grey5,
-            tagTextInfo: palette.vivoPurple,
-            tagTextSuccess: palette.vivoGreenDark,
-            tagTextWarning: palette.orangeDark,
-            tagTextError: palette.pepperDark80,
-            tagBackgroundPromo: palette.vivoPurpleLight10,
-            tagBackgroundActive: palette.grey1,
-            tagBackgroundInactive: palette.grey1,
-            tagBackgroundInfo: palette.vivoPurpleLight10,
-            tagBackgroundSuccess: palette.vivoGreenLight10,
-            tagBackgroundWarning: palette.orangeLight10,
-            tagBackgroundError: palette.pepperLight10,
-            tagTextPromoInverse: palette.vivoPurple,
-            tagTextPromoNegative: palette.vivoPurple,
-            tagTextPromoBrand: palette.vivoPurple,
-            tagTextActiveInverse: palette.vivoPurple,
-            tagTextActiveNegative: palette.vivoPurple,
-            tagTextActiveBrand: palette.vivoPurple,
-            tagTextInactiveInverse: palette.grey5,
-            tagTextInactiveNegative: palette.grey5,
-            tagTextInactiveBrand: palette.grey5,
-            tagTextInfoInverse: palette.vivoPurple,
-            tagTextInfoNegative: palette.vivoPurple,
-            tagTextInfoBrand: palette.vivoPurple,
-            tagTextSuccessInverse: palette.vivoGreenDark,
-            tagTextSuccessNegative: palette.vivoGreenDark,
-            tagTextSuccessBrand: palette.vivoGreenDark,
-            tagTextWarningInverse: palette.orangeDark,
-            tagTextWarningNegative: palette.orangeDark,
-            tagTextWarningBrand: palette.orangeDark,
-            tagTextErrorInverse: palette.pepperDark80,
-            tagTextErrorNegative: palette.pepperDark80,
-            tagTextErrorBrand: palette.pepperDark80,
-            tagBackgroundPromoInverse: palette.vivoPurpleLight10,
-            tagBackgroundPromoNegative: palette.vivoPurpleLight10,
-            tagBackgroundPromoBrand: palette.vivoPurpleLight10,
-            tagBackgroundActiveInverse: palette.vivoPurpleLight10,
-            tagBackgroundActiveNegative: palette.vivoPurpleLight10,
-            tagBackgroundActiveBrand: palette.vivoPurpleLight10,
-            tagBackgroundInactiveInverse: palette.grey1,
-            tagBackgroundInactiveNegative: palette.grey1,
-            tagBackgroundInactiveBrand: palette.grey1,
-            tagBackgroundInfoInverse: palette.vivoPurpleLight10,
-            tagBackgroundInfoNegative: palette.vivoPurpleLight10,
-            tagBackgroundInfoBrand: palette.vivoPurpleLight10,
-            tagBackgroundSuccessInverse: palette.vivoGreenLight10,
-            tagBackgroundSuccessNegative: palette.vivoGreenLight10,
-            tagBackgroundSuccessBrand: palette.vivoGreenLight10,
-            tagBackgroundWarningInverse: palette.orangeLight10,
-            tagBackgroundWarningNegative: palette.orangeLight10,
-            tagBackgroundWarningBrand: palette.orangeLight10,
-            tagBackgroundErrorInverse: palette.pepperLight10,
-            tagBackgroundErrorNegative: palette.pepperLight10,
-            tagBackgroundErrorBrand: palette.pepperLight10,
-            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),
+            background: palette.vivoNeutral0,
+            backgroundAlternative: palette.vivoNeutral25,
+            backgroundSelected: applyAlpha(palette.vivoPurple700, 0.08),
+            backgroundSelectedHover: applyAlpha(palette.vivoPurple700, 0.12),
+            backgroundSelectedPressed: applyAlpha(palette.vivoPurple700, 0.16),
+            backgroundSelectedBrand: applyAlpha(palette.vivoNeutral950, 0.16),
+            backgroundSelectedBrandHover: applyAlpha(palette.vivoNeutral950, 0.24),
+            backgroundSelectedBrandPressed: applyAlpha(palette.vivoNeutral950, 0.32),
+            backgroundSelectedNegative: applyAlpha(palette.vivoNeutral0, 0.2),
+            backgroundSelectedNegativeHover: applyAlpha(palette.vivoNeutral0, 0.28),
+            backgroundSelectedNegativePressed: applyAlpha(palette.vivoNeutral0, 0.35),
+            backgroundBrand: palette.vivoPurple700,
+            backgroundNegative: palette.vivoPurple900,
+            backgroundBrandSecondary: palette.vivoPurple600,
+            backgroundContainer: palette.vivoNeutral0,
+            backgroundContainerError: palette.vivoPepper25,
+            backgroundContainerHover: applyAlpha(palette.vivoNeutral950, 0.05),
+            backgroundContainerPressed: applyAlpha(palette.vivoNeutral950, 0.08),
+            backgroundContainerBrand: palette.vivoPurple700,
+            backgroundContainerBrandHover: applyAlpha(palette.vivoNeutral950, 0.2),
+            backgroundContainerBrandPressed: applyAlpha(palette.vivoNeutral950, 0.4),
+            backgroundContainerBrandOverInverse: palette.vivoPurple900,
+            backgroundContainerNegative: applyAlpha(palette.vivoNeutral950, 0.4),
+            backgroundContainerBrandOverBrand: palette.vivoPurple650,
+            backgroundContainerAlternative: palette.vivoNeutral25,
+            backgroundOverlay: applyAlpha(palette.vivoNeutral975, 0.6),
+            backgroundSkeleton: palette.vivoNeutral200,
+            backgroundSkeletonInverse: palette.vivoPurple900,
+            backgroundSkeletonNegative: applyAlpha(palette.vivoNeutral975, 0.2),
+            backgroundSkeletonBrand: palette.vivoPurple900,
+            backgroundBrandTop: palette.vivoPurple700,
+            backgroundBrandBottom: palette.vivoPurple700,
+            appBarBackground: palette.vivoNeutral0,
+            navigationBarBackground: palette.vivoPurple700,
+            backgroundDropZoneHover: applyAlpha(palette.vivoPurple700, 0.06),
+            backgroundDropZoneDragover: palette.vivoPurple50,
+            backgroundDropZoneBrandHover: applyAlpha(palette.vivoPurple900, 0.3),
+            backgroundDropZoneBrandDragover: applyAlpha(palette.vivoPurple900, 0.5),
+            backgroundDropZoneNegativeHover: applyAlpha(palette.vivoNeutral0, 0.1),
+            backgroundDropZoneNegativeDragover: applyAlpha(palette.vivoNeutral0, 0.17),
+            backgroundDropZoneMediaHover: applyAlpha(palette.vivoPurple900, 0.3),
+            backgroundDropZoneMediaDragover: applyAlpha(palette.vivoPurple900, 0.5),
+            skeletonWave: palette.vivoNeutral100,
+            borderLow: palette.vivoNeutral25,
+            border: palette.vivoNeutral200,
+            borderHigh: palette.vivoNeutral600,
+            borderSelected: palette.vivoPurple700,
+            coverBackgroundHover: applyAlpha(palette.vivoNeutral950, 0.25),
+            coverBackgroundPressed: applyAlpha(palette.vivoNeutral950, 0.35),
+            buttonDangerBackground: palette.vivoPepper600,
+            buttonDangerBackgroundPressed: palette.vivoPepper700,
+            buttonDangerBackgroundHover: palette.vivoPepper700,
+            buttonLinkDangerBackgroundInverse: palette.vivoNeutral0,
+            buttonLinkDangerBackgroundNegative: palette.vivoNeutral0,
+            buttonLinkDangerBackgroundBrand: palette.vivoNeutral0,
+            buttonLinkDangerBackgroundMedia: palette.vivoNeutral0,
+            buttonLinkDangerBackgroundPressed: palette.vivoPepper25,
+            buttonLinkDangerBackgroundInversePressed: palette.vivoPepper25,
+            buttonLinkDangerBackgroundNegativePressed: palette.vivoPepper25,
+            buttonLinkDangerBackgroundBrandPressed: palette.vivoPepper25,
+            buttonLinkDangerBackgroundMediaPressed: palette.vivoPepper25,
+            buttonLinkBackgroundPressed: palette.vivoPurple50,
+            buttonLinkBackgroundInversePressed: applyAlpha(palette.vivoNeutral0, 0.1),
+            buttonLinkBackgroundNegativePressed: applyAlpha(palette.vivoNeutral0, 0.1),
+            buttonLinkBackgroundBrandPressed: applyAlpha(palette.vivoNeutral0, 0.1),
+            buttonLinkBackgroundMediaPressed: applyAlpha(palette.vivoNeutral0, 0.1),
+            buttonLinkNeutralBackgroundPressed: palette.vivoNeutral100,
+            buttonLinkNeutralBackgroundBrand: palette.vivoNeutral0,
+            buttonLinkNeutralBackgroundBrandPressed: palette.vivoNeutral25,
+            buttonLinkNeutralBackgroundNegative: palette.vivoNeutral0,
+            buttonLinkNeutralBackgroundNegativePressed: palette.vivoNeutral25,
+            buttonLinkNeutralBackgroundMedia: palette.vivoNeutral0,
+            buttonLinkNeutralBackgroundMediaPressed: palette.vivoNeutral25,
+            buttonPrimaryBackground: palette.vivoPurple700,
+            buttonPrimaryBackgroundInverse: palette.vivoNeutral0,
+            buttonPrimaryBackgroundNegative: palette.vivoNeutral0,
+            buttonPrimaryBackgroundBrand: palette.vivoNeutral0,
+            buttonPrimaryBackgroundMedia: palette.vivoNeutral0,
+            buttonPrimaryBackgroundHover: palette.vivoPurple900,
+            buttonPrimaryBackgroundInverseHover: palette.vivoPurple50,
+            buttonPrimaryBackgroundNegativeHover: palette.vivoPurple50,
+            buttonPrimaryBackgroundBrandHover: palette.vivoPurple50,
+            buttonPrimaryBackgroundMediaHover: palette.vivoPurple50,
+            buttonPrimaryBackgroundPressed: palette.vivoPurple900,
+            buttonPrimaryBackgroundInversePressed: palette.vivoPurple100,
+            buttonPrimaryBackgroundNegativePressed: palette.vivoPurple100,
+            buttonPrimaryBackgroundBrandPressed: palette.vivoPurple100,
+            buttonPrimaryBackgroundMediaPressed: palette.vivoPurple100,
+            buttonSecondaryBackgroundBrand: applyAlpha(palette.vivoNeutral0, 0),
+            buttonSecondaryBorder: palette.vivoPurple700,
+            buttonSecondaryBorderInverse: palette.vivoNeutral0,
+            buttonSecondaryBorderNegative: palette.vivoNeutral0,
+            buttonSecondaryBorderBrand: palette.vivoNeutral0,
+            buttonSecondaryBorderMedia: palette.vivoNeutral0,
+            buttonSecondaryBorderPressed: palette.vivoPurple900,
+            buttonSecondaryBorderInversePressed: palette.vivoNeutral0,
+            buttonSecondaryBorderNegativePressed: palette.vivoNeutral0,
+            buttonSecondaryBorderBrandPressed: palette.vivoNeutral0,
+            buttonSecondaryBorderMediaPressed: palette.vivoNeutral0,
+            buttonSecondaryBackgroundHover: palette.vivoPurple50,
+            buttonSecondaryBackgroundInverseHover: applyAlpha(palette.vivoNeutral0, 0.15),
+            buttonSecondaryBackgroundNegativeHover: applyAlpha(palette.vivoNeutral0, 0.15),
+            buttonSecondaryBackgroundBrandHover: applyAlpha(palette.vivoNeutral0, 0.15),
+            buttonSecondaryBackgroundMediaHover: applyAlpha(palette.vivoNeutral0, 0.15),
+            buttonSecondaryBackgroundPressed: palette.vivoPurple50,
+            buttonSecondaryBackgroundInversePressed: applyAlpha(palette.vivoNeutral0, 0.15),
+            buttonSecondaryBackgroundNegativePressed: applyAlpha(palette.vivoNeutral0, 0.15),
+            buttonSecondaryBackgroundBrandPressed: applyAlpha(palette.vivoNeutral0, 0.15),
+            buttonSecondaryBackgroundMediaPressed: applyAlpha(palette.vivoNeutral0, 0.15),
+            textButtonPrimary: palette.vivoNeutral0,
+            textButtonPrimaryInverse: palette.vivoPurple700,
+            textButtonPrimaryNegative: palette.vivoPurple700,
+            textButtonPrimaryBrand: palette.vivoPurple700,
+            textButtonPrimaryMedia: palette.vivoPurple700,
+            textButtonPrimaryInversePressed: palette.vivoPurple700,
+            textButtonPrimaryNegativePressed: palette.vivoPurple700,
+            textButtonPrimaryBrandPressed: palette.vivoPurple700,
+            textButtonPrimaryMediaPressed: palette.vivoPurple700,
+            textButtonSecondary: palette.vivoPurple700,
+            textButtonSecondaryInverse: palette.vivoNeutral0,
+            textButtonSecondaryNegative: palette.vivoNeutral0,
+            textButtonSecondaryBrand: palette.vivoNeutral0,
+            textButtonSecondaryMedia: palette.vivoNeutral0,
+            textButtonSecondaryPressed: palette.vivoPurple900,
+            textButtonSecondaryInversePressed: palette.vivoNeutral0,
+            textButtonSecondaryNegativePressed: palette.vivoNeutral0,
+            textButtonSecondaryBrandPressed: palette.vivoNeutral0,
+            textButtonSecondaryMediaPressed: palette.vivoNeutral0,
+            textLink: palette.vivoPurple700,
+            textLinkInverse: palette.vivoNeutral0,
+            textLinkNegative: palette.vivoNeutral0,
+            textLinkBrand: palette.vivoNeutral0,
+            textLinkMedia: palette.vivoNeutral0,
+            textLinkDanger: palette.vivoPepper600,
+            textLinkDangerMedia: palette.vivoPepper600,
+            textLinkSnackbar: palette.vivoPurple100,
+            textLinkNeutral: palette.vivoNeutral975,
+            textLinkNeutralBrand: palette.vivoNeutral975,
+            textLinkNeutralNegative: palette.vivoNeutral975,
+            textLinkNeutralAlternative: palette.vivoNeutral975,
+            textLinkNeutralMedia: palette.vivoNeutral975,
+            textActivated: palette.vivoPurple700,
+            textBrand: palette.vivoPurple700,
+            inputBorder: palette.vivoNeutral500,
+            inputBorderInverse: palette.vivoNeutral0,
+            inputBorderNegative: palette.vivoNeutral0,
+            inputBorderBrand: palette.vivoNeutral0,
+            completedStep: palette.vivoPurple700,
+            completedStepInverse: palette.vivoPurple900,
+            completedStepNegative: palette.vivoPurple900,
+            completedStepBrand: palette.vivoPurple900,
+            control: palette.vivoNeutral500,
+            controlActivated: palette.vivoPurple700,
+            controlInverse: palette.vivoPurple300,
+            controlNegative: palette.vivoPurple300,
+            controlBrand: palette.vivoPurple300,
+            controlActivatedInverse: palette.vivoNeutral0,
+            controlActivatedNegative: palette.vivoNeutral0,
+            controlActivatedBrand: palette.vivoNeutral0,
+            controlError: palette.vivoPepper600,
+            chevronIndicator: palette.vivoNeutral600,
+            barTrack: palette.vivoNeutral200,
+            barTrackInverse: applyAlpha(palette.vivoNeutral0, 0.5),
+            barTrackNegative: applyAlpha(palette.vivoNeutral0, 0.5),
+            barTrackBrand: applyAlpha(palette.vivoNeutral0, 0.5),
+            loadingBar: palette.vivoPurple700,
+            loadingBarBackground: palette.vivoPurple50,
+            toggleAndroidInactive: palette.vivoNeutral100,
+            toggleAndroidBackgroundActive: palette.vivoPurple100,
+            toggleAndroidActiveBrand: palette.vivoNeutral0,
+            toggleAndroidInactiveBrand: palette.vivoNeutral100,
+            toggleAndroidBackgroundActiveBrand: palette.vivoPurple100,
+            toggleAndroidBackgroundInactiveBrand: palette.vivoPurple300,
+            iosControlKnob: palette.vivoNeutral0,
+            controlKnobInverse: palette.vivoPurple700,
+            controlKnobNegative: palette.vivoPurple700,
+            controlKnobBrand: palette.vivoPurple700,
+            divider: palette.vivoNeutral200,
+            dividerInverse: applyAlpha(palette.vivoNeutral0, 0.2),
+            dividerNegative: applyAlpha(palette.vivoNeutral0, 0.2),
+            dividerBrand: applyAlpha(palette.vivoNeutral0, 0.2),
+            navigationBarDivider: palette.vivoPurple700,
+            badge: palette.vivoPepper700,
+            feedbackErrorBackground: palette.vivoPepper600,
+            feedbackInfoBackground: palette.vivoPurple900,
+            brand: palette.vivoPurple700,
+            brandHigh: palette.vivoPurple900,
+            inverse: palette.vivoNeutral0,
+            negative: palette.vivoNeutral0,
+            neutralHigh: palette.vivoNeutral975,
+            neutralHighNegative: palette.vivoNeutral0,
+            neutralHighBrand: palette.vivoNeutral0,
+            neutralMedium: palette.vivoNeutral600,
+            neutralMediumInverse: palette.vivoNeutral600,
+            neutralMediumNegative: palette.vivoNeutral600,
+            neutralMediumBrand: palette.vivoNeutral600,
+            neutralLow: palette.vivoNeutral25,
+            neutralLowAlternative: palette.vivoNeutral100,
+            textPrimary: palette.vivoNeutral975,
+            textPrimaryInverse: palette.vivoNeutral0,
+            textPrimaryNegative: palette.vivoNeutral0,
+            textPrimaryBrand: palette.vivoNeutral0,
+            textPrimaryMedia: palette.vivoNeutral0,
+            textSecondary: palette.vivoNeutral600,
+            textSecondaryInverse: palette.vivoPurple100,
+            textSecondaryNegative: palette.vivoPurple100,
+            textSecondaryBrand: palette.vivoPurple100,
+            textSecondaryMedia: palette.vivoNeutral0,
+            success: palette.vivoGreen600,
+            warning: palette.vivoOrange600,
+            error: palette.vivoPepper600,
+            textError: palette.vivoPepper600,
+            textErrorInverse: palette.vivoNeutral0,
+            textErrorNegative: palette.vivoNeutral0,
+            textErrorBrand: palette.vivoNeutral0,
+            promo: palette.vivoPurple700,
+            highlight: palette.vivoPepper500,
+            successLow: palette.vivoGreen25,
+            warningLow: palette.vivoOrange50,
+            errorLow: palette.vivoPepper25,
+            promoLow: palette.vivoPurple50,
+            brandLow: palette.vivoPurple50,
+            successHigh: palette.vivoGreen900,
+            warningHigh: palette.vivoOrange900,
+            errorHigh: palette.vivoPepper800,
+            promoHigh: palette.vivoPurple700,
+            successHighInverse: palette.vivoGreen900,
+            successHighNegative: palette.vivoGreen900,
+            successHighBrand: palette.vivoGreen900,
+            warningHighInverse: palette.vivoOrange900,
+            warningHighNegative: palette.vivoOrange900,
+            warningHighBrand: palette.vivoOrange900,
+            errorHighInverse: palette.vivoPepper800,
+            errorHighNegative: palette.vivoPepper800,
+            errorHighBrand: palette.vivoPepper800,
+            promoHighInverse: palette.vivoPurple700,
+            promoHighNegative: palette.vivoPurple700,
+            promoHighBrand: palette.vivoPurple700,
+            textNavigationBarPrimary: palette.vivoNeutral0,
+            textNavigationBarSecondary: palette.vivoPurple300,
+            textNavigationSearchBarHint: palette.vivoPurple300,
+            textNavigationSearchBarText: palette.vivoNeutral0,
+            textAppBar: palette.vivoNeutral600,
+            textAppBarSelected: palette.vivoPurple700,
+            iosGlassAppBar: palette.vivoNeutral975,
+            iosGlassAppBarSelected: palette.vivoPurple700,
+            customTabsBackground: palette.vivoNeutral0,
+            tagTextPromo: palette.vivoPurple700,
+            tagTextActive: palette.vivoPurple700,
+            tagTextInactive: palette.vivoNeutral600,
+            tagTextInfo: palette.vivoPurple700,
+            tagTextSuccess: palette.vivoGreen900,
+            tagTextWarning: palette.vivoOrange900,
+            tagTextError: palette.vivoPepper800,
+            tagBackgroundPromo: palette.vivoPurple50,
+            tagBackgroundActive: palette.vivoNeutral25,
+            tagBackgroundInactive: palette.vivoNeutral25,
+            tagBackgroundInfo: palette.vivoPurple50,
+            tagBackgroundSuccess: palette.vivoGreen25,
+            tagBackgroundWarning: palette.vivoOrange50,
+            tagBackgroundError: palette.vivoPepper25,
+            tagTextPromoInverse: palette.vivoPurple700,
+            tagTextPromoNegative: palette.vivoPurple700,
+            tagTextPromoBrand: palette.vivoPurple700,
+            tagTextActiveInverse: palette.vivoPurple700,
+            tagTextActiveNegative: palette.vivoPurple700,
+            tagTextActiveBrand: palette.vivoPurple700,
+            tagTextInactiveInverse: palette.vivoNeutral600,
+            tagTextInactiveNegative: palette.vivoNeutral600,
+            tagTextInactiveBrand: palette.vivoNeutral600,
+            tagTextInfoInverse: palette.vivoPurple700,
+            tagTextInfoNegative: palette.vivoPurple700,
+            tagTextInfoBrand: palette.vivoPurple700,
+            tagTextSuccessInverse: palette.vivoGreen900,
+            tagTextSuccessNegative: palette.vivoGreen900,
+            tagTextSuccessBrand: palette.vivoGreen900,
+            tagTextWarningInverse: palette.vivoOrange900,
+            tagTextWarningNegative: palette.vivoOrange900,
+            tagTextWarningBrand: palette.vivoOrange900,
+            tagTextErrorInverse: palette.vivoPepper800,
+            tagTextErrorNegative: palette.vivoPepper800,
+            tagTextErrorBrand: palette.vivoPepper800,
+            tagBackgroundPromoInverse: palette.vivoPurple50,
+            tagBackgroundPromoNegative: palette.vivoPurple50,
+            tagBackgroundPromoBrand: palette.vivoPurple50,
+            tagBackgroundActiveInverse: palette.vivoPurple50,
+            tagBackgroundActiveNegative: palette.vivoPurple50,
+            tagBackgroundActiveBrand: palette.vivoPurple50,
+            tagBackgroundInactiveInverse: palette.vivoNeutral25,
+            tagBackgroundInactiveNegative: palette.vivoNeutral25,
+            tagBackgroundInactiveBrand: palette.vivoNeutral25,
+            tagBackgroundInfoInverse: palette.vivoPurple50,
+            tagBackgroundInfoNegative: palette.vivoPurple50,
+            tagBackgroundInfoBrand: palette.vivoPurple50,
+            tagBackgroundSuccessInverse: palette.vivoGreen25,
+            tagBackgroundSuccessNegative: palette.vivoGreen25,
+            tagBackgroundSuccessBrand: palette.vivoGreen25,
+            tagBackgroundWarningInverse: palette.vivoOrange50,
+            tagBackgroundWarningNegative: palette.vivoOrange50,
+            tagBackgroundWarningBrand: palette.vivoOrange50,
+            tagBackgroundErrorInverse: palette.vivoPepper25,
+            tagBackgroundErrorNegative: palette.vivoPepper25,
+            tagBackgroundErrorBrand: palette.vivoPepper25,
+            cardContentOverlay: `linear-gradient(180deg, ${applyAlpha(palette.vivoNeutral975, 0)} 0%, ${applyAlpha(palette.vivoNeutral975, 0.4)} 30%, ${applyAlpha(palette.vivoNeutral975, 0.7)} 100%)`,
+            cardFooterOverlay: applyAlpha(palette.vivoNeutral975, 0.7),
         },
         darkModeColors: {
-            background: palette.darkModeBlack,
-            backgroundAlternative: palette.darkModeBlack,
-            backgroundBrand: palette.darkModeBlack,
-            backgroundNegative: palette.darkModeBlack,
-            backgroundBrandSecondary: palette.darkModeBlack,
-            backgroundContainer: palette.darkModeGrey,
-            backgroundContainerError: palette.darkModeGrey,
-            backgroundContainerHover: applyAlpha(palette.white, 0.05),
-            backgroundContainerPressed: applyAlpha(palette.white, 0.08),
-            backgroundContainerBrand: palette.darkModeGrey,
-            backgroundContainerBrandHover: applyAlpha(palette.white, 0.03),
-            backgroundContainerBrandPressed: applyAlpha(palette.white, 0.05),
-            backgroundContainerBrandOverInverse: palette.darkModeGrey,
-            backgroundContainerNegative: palette.darkModeGrey,
-            backgroundContainerBrandOverBrand: palette.darkModeGrey,
-            backgroundContainerAlternative: palette.darkModeGrey,
-            backgroundOverlay: applyAlpha(palette.darkModeGrey, 0.8),
-            backgroundSkeleton: palette.darkModeGrey6,
-            backgroundSkeletonInverse: palette.darkModeGrey6,
-            backgroundSkeletonNegative: palette.darkModeGrey6,
-            backgroundSkeletonBrand: palette.darkModeGrey6,
-            backgroundBrandTop: palette.darkModeBlack,
-            backgroundBrandBottom: palette.darkModeBlack,
-            appBarBackground: palette.darkModeGrey,
-            navigationBarBackground: palette.darkModeBlack,
-            backgroundDropZoneHover: applyAlpha(palette.white, 0.05),
-            backgroundDropZoneDragover: applyAlpha(palette.white, 0.08),
-            backgroundDropZoneBrandHover: applyAlpha(palette.white, 0.03),
-            backgroundDropZoneBrandDragover: applyAlpha(palette.white, 0.05),
-            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,
-            borderLow: palette.darkModeBlack,
-            border: palette.darkModeGrey,
-            borderHigh: palette.grey5,
-            borderSelected: palette.vivoPurple,
-            coverBackgroundHover: applyAlpha(palette.darkModeBlack, 0.25),
-            coverBackgroundPressed: applyAlpha(palette.darkModeBlack, 0.35),
-            buttonDangerBackground: palette.pepper,
-            buttonDangerBackgroundPressed: palette.pepperDark,
-            buttonDangerBackgroundHover: palette.pepperDark,
-            buttonLinkDangerBackgroundInverse: applyAlpha(palette.white, 0),
-            buttonLinkDangerBackgroundNegative: applyAlpha(palette.white, 0),
-            buttonLinkDangerBackgroundBrand: applyAlpha(palette.white, 0),
-            buttonLinkDangerBackgroundMedia: palette.white,
-            buttonLinkDangerBackgroundPressed: applyAlpha(palette.white, 0.08),
-            buttonLinkDangerBackgroundInversePressed: applyAlpha(palette.white, 0.08),
-            buttonLinkDangerBackgroundNegativePressed: applyAlpha(palette.white, 0.08),
-            buttonLinkDangerBackgroundBrandPressed: applyAlpha(palette.white, 0.08),
-            buttonLinkDangerBackgroundMediaPressed: palette.pepperLight10,
-            buttonLinkBackgroundPressed: applyAlpha(palette.white, 0.08),
-            buttonLinkBackgroundInversePressed: applyAlpha(palette.white, 0.08),
-            buttonLinkBackgroundNegativePressed: applyAlpha(palette.white, 0.08),
-            buttonLinkBackgroundBrandPressed: applyAlpha(palette.white, 0.08),
-            buttonLinkBackgroundMediaPressed: applyAlpha(palette.white, 0.1),
-            buttonPrimaryBackground: palette.vivoPurpleLight80,
-            buttonPrimaryBackgroundInverse: palette.vivoPurpleLight80,
-            buttonPrimaryBackgroundNegative: palette.vivoPurpleLight80,
-            buttonPrimaryBackgroundBrand: palette.vivoPurpleLight80,
-            buttonPrimaryBackgroundMedia: palette.white,
-            buttonPrimaryBackgroundHover: palette.vivoPurpleDark,
-            buttonPrimaryBackgroundInverseHover: palette.vivoPurpleDark,
-            buttonPrimaryBackgroundNegativeHover: palette.vivoPurpleDark,
-            buttonPrimaryBackgroundBrandHover: palette.vivoPurpleDark,
-            buttonPrimaryBackgroundMediaHover: palette.vivoPurpleLight10,
-            buttonPrimaryBackgroundPressed: palette.vivoPurpleDark,
-            buttonPrimaryBackgroundInversePressed: palette.vivoPurpleDark,
-            buttonPrimaryBackgroundNegativePressed: palette.vivoPurpleDark,
-            buttonPrimaryBackgroundBrandPressed: palette.vivoPurpleDark,
-            buttonPrimaryBackgroundMediaPressed: palette.vivoPurpleLight20,
-            buttonSecondaryBackgroundBrand: applyAlpha(palette.white, 0),
-            buttonSecondaryBorder: palette.white,
-            buttonSecondaryBorderInverse: palette.white,
-            buttonSecondaryBorderNegative: palette.white,
-            buttonSecondaryBorderBrand: palette.white,
-            buttonSecondaryBorderMedia: palette.white,
-            buttonSecondaryBorderPressed: palette.white,
-            buttonSecondaryBorderInversePressed: palette.white,
-            buttonSecondaryBorderNegativePressed: palette.white,
-            buttonSecondaryBorderBrandPressed: palette.white,
-            buttonSecondaryBorderMediaPressed: palette.white,
-            buttonSecondaryBackgroundHover: applyAlpha(palette.white, 0.15),
-            buttonSecondaryBackgroundInverseHover: applyAlpha(palette.white, 0.15),
-            buttonSecondaryBackgroundNegativeHover: applyAlpha(palette.white, 0.15),
-            buttonSecondaryBackgroundBrandHover: applyAlpha(palette.white, 0.15),
-            buttonSecondaryBackgroundMediaHover: applyAlpha(palette.white, 0.15),
-            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.15),
-            textButtonPrimary: palette.grey2,
-            textButtonPrimaryInverse: palette.grey2,
-            textButtonPrimaryNegative: palette.grey2,
-            textButtonPrimaryBrand: palette.grey2,
-            textButtonPrimaryMedia: palette.vivoPurple,
-            textButtonPrimaryInversePressed: palette.grey2,
-            textButtonPrimaryNegativePressed: palette.grey2,
-            textButtonPrimaryBrandPressed: palette.grey2,
-            textButtonPrimaryMediaPressed: palette.vivoPurple,
-            textButtonSecondary: palette.grey2,
-            textButtonSecondaryInverse: palette.grey2,
-            textButtonSecondaryNegative: palette.grey2,
-            textButtonSecondaryBrand: palette.grey2,
-            textButtonSecondaryMedia: palette.white,
-            textButtonSecondaryPressed: palette.grey2,
-            textButtonSecondaryInversePressed: palette.grey2,
-            textButtonSecondaryNegativePressed: palette.grey2,
-            textButtonSecondaryBrandPressed: palette.grey2,
-            textButtonSecondaryMediaPressed: palette.white,
-            textLink: palette.vivoPurpleLight50,
-            textLinkInverse: palette.vivoPurpleLight50,
-            textLinkNegative: palette.vivoPurpleLight50,
-            textLinkBrand: palette.vivoPurpleLight50,
-            textLinkMedia: palette.white,
-            textLinkDanger: palette.pepper,
-            textLinkDangerMedia: palette.pepper,
-            textLinkSnackbar: palette.vivoPurpleLight50,
-            textActivated: palette.vivoPurpleLight80,
-            textBrand: palette.vivoPurpleLight80,
-            inputBorder: palette.darkModeGrey5,
-            inputBorderInverse: palette.darkModeGrey5,
-            inputBorderNegative: palette.darkModeGrey5,
-            inputBorderBrand: palette.darkModeGrey5,
-            completedStep: palette.vivoPurpleLight80,
-            completedStepInverse: palette.vivoPurpleLight80,
-            completedStepNegative: palette.vivoPurpleLight80,
-            completedStepBrand: palette.vivoPurpleLight80,
-            control: palette.darkModeGrey6,
-            controlActivated: palette.vivoPurpleLight80,
-            controlInverse: palette.darkModeGrey6,
-            controlNegative: palette.darkModeGrey6,
-            controlBrand: palette.darkModeGrey6,
-            controlActivatedInverse: palette.vivoPurpleLight80,
-            controlActivatedNegative: palette.vivoPurpleLight80,
-            controlActivatedBrand: palette.vivoPurpleLight80,
-            controlError: palette.pepper,
-            chevronIndicator: palette.grey5,
-            barTrack: palette.darkModeGrey6,
-            barTrackInverse: palette.darkModeGrey6,
-            barTrackNegative: palette.darkModeGrey6,
-            barTrackBrand: palette.darkModeGrey6,
-            loadingBar: palette.vivoPurpleLight80,
-            loadingBarBackground: palette.darkModeGrey6,
-            toggleAndroidInactive: palette.grey4,
-            toggleAndroidBackgroundActive: palette.vivoPurpleLight50,
-            toggleAndroidActiveBrand: palette.vivoPurpleLight80,
-            toggleAndroidInactiveBrand: palette.grey4,
-            toggleAndroidBackgroundActiveBrand: palette.vivoPurpleLight50,
-            toggleAndroidBackgroundInactiveBrand: palette.darkModeGrey6,
-            iosControlKnob: palette.grey2,
-            controlKnobInverse: palette.grey2,
-            controlKnobNegative: palette.grey2,
-            controlKnobBrand: palette.grey2,
-            divider: applyAlpha(palette.white, 0.05),
-            dividerInverse: applyAlpha(palette.white, 0.05),
-            dividerNegative: applyAlpha(palette.white, 0.05),
-            dividerBrand: applyAlpha(palette.white, 0.05),
-            navigationBarDivider: palette.darkModeBlack,
-            badge: palette.pepperDark,
-            feedbackErrorBackground: palette.pepper,
-            feedbackInfoBackground: palette.grey6,
-            brand: palette.vivoPurpleLight80,
-            brandHigh: applyAlpha(palette.white, 0.05),
-            inverse: palette.grey2,
-            negative: palette.grey2,
-            neutralHigh: palette.grey2,
-            neutralHighBrand: palette.grey2,
-            neutralHighNegative: palette.grey2,
-            neutralMedium: palette.grey5,
-            neutralMediumInverse: palette.grey5,
-            neutralMediumNegative: palette.grey5,
-            neutralMediumBrand: palette.grey5,
-            neutralLow: palette.darkModeGrey6,
-            neutralLowAlternative: palette.darkModeGrey6,
-            textPrimary: palette.grey2,
-            textPrimaryInverse: palette.grey2,
-            textPrimaryNegative: palette.grey2,
-            textPrimaryBrand: palette.grey2,
-            textPrimaryMedia: palette.white,
-            textSecondary: palette.grey3,
-            textSecondaryInverse: palette.grey3,
-            textSecondaryNegative: palette.grey3,
-            textSecondaryBrand: palette.grey3,
-            textSecondaryMedia: palette.white,
-            success: palette.vivoGreen,
-            warning: palette.orange,
-            error: palette.pepper,
-            textError: palette.pepper,
-            textErrorInverse: palette.pepper,
-            textErrorNegative: palette.pepper,
-            textErrorBrand: palette.pepper,
-            promo: palette.vivoPurpleLight80,
-            highlight: palette.pink,
-            successLow: palette.darkModeGrey6,
-            warningLow: palette.darkModeGrey6,
-            errorLow: palette.darkModeGrey6,
-            promoLow: palette.darkModeGrey6,
-            brandLow: palette.darkModeGrey6,
-            successHigh: palette.vivoGreenLight30,
-            warningHigh: palette.orangeLight40,
-            errorHigh: palette.pepperLight40,
-            promoHigh: palette.vivoPurpleLight50,
-            successHighInverse: palette.vivoGreenDark,
-            successHighNegative: palette.vivoGreenDark,
-            successHighBrand: palette.vivoGreenDark,
-            warningHighInverse: palette.orangeDark,
-            warningHighNegative: palette.orangeDark,
-            warningHighBrand: palette.orangeDark,
-            errorHighInverse: palette.pepperDark80,
-            errorHighNegative: palette.pepperDark80,
-            errorHighBrand: palette.pepperDark80,
-            promoHighInverse: palette.vivoPurple,
-            promoHighNegative: palette.vivoPurple,
-            promoHighBrand: palette.vivoPurple,
-            textNavigationBarPrimary: palette.grey2,
-            textNavigationBarSecondary: palette.grey4,
-            textNavigationSearchBarHint: palette.grey4,
-            textNavigationSearchBarText: palette.grey2,
-            textAppBar: palette.grey5,
-            textAppBarSelected: palette.grey2,
-            iosGlassAppBar: palette.white,
-            iosGlassAppBarSelected: palette.vivoPurpleLight20,
-            customTabsBackground: palette.darkModeBlack,
-            tagTextPromo: palette.vivoPurpleLight50,
-            tagTextActive: palette.vivoPurpleLight80,
-            tagTextInactive: palette.grey5,
-            tagTextInfo: palette.vivoPurpleLight80,
-            tagTextSuccess: palette.vivoGreenLight30,
-            tagTextWarning: palette.orangeLight40,
-            tagTextError: palette.pepperLight40,
-            tagBackgroundPromo: palette.darkModeGrey6,
-            tagBackgroundActive: palette.darkModeGrey6,
-            tagBackgroundInactive: palette.darkModeGrey6,
-            tagBackgroundInfo: palette.darkModeGrey6,
-            tagBackgroundSuccess: palette.darkModeGrey6,
-            tagBackgroundWarning: palette.darkModeGrey6,
-            tagBackgroundError: palette.darkModeGrey6,
-            tagTextPromoInverse: palette.vivoPurpleLight50,
-            tagTextPromoNegative: palette.vivoPurpleLight50,
-            tagTextPromoBrand: palette.vivoPurpleLight50,
-            tagTextActiveInverse: palette.vivoPurpleLight80,
-            tagTextActiveNegative: palette.vivoPurpleLight80,
-            tagTextActiveBrand: palette.vivoPurpleLight80,
-            tagTextInactiveInverse: palette.grey5,
-            tagTextInactiveNegative: palette.grey5,
-            tagTextInactiveBrand: palette.grey5,
-            tagTextInfoInverse: palette.vivoPurpleLight80,
-            tagTextInfoNegative: palette.vivoPurpleLight80,
-            tagTextInfoBrand: palette.vivoPurpleLight80,
-            tagTextSuccessInverse: palette.vivoGreenLight30,
-            tagTextSuccessNegative: palette.vivoGreenLight30,
-            tagTextSuccessBrand: palette.vivoGreenLight30,
-            tagTextWarningInverse: palette.orangeLight40,
-            tagTextWarningNegative: palette.orangeLight40,
-            tagTextWarningBrand: palette.orangeLight40,
-            tagTextErrorInverse: palette.pepperLight40,
-            tagTextErrorNegative: palette.pepperLight40,
-            tagTextErrorBrand: palette.pepperLight40,
-            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),
+            background: palette.vivoNeutral950,
+            backgroundAlternative: palette.vivoNeutral950,
+            backgroundSelected: applyAlpha(palette.vivoPurple600, 0.18),
+            backgroundSelectedHover: applyAlpha(palette.vivoPurple600, 0.25),
+            backgroundSelectedPressed: applyAlpha(palette.vivoPurple600, 0.33),
+            backgroundSelectedBrand: applyAlpha(palette.vivoPurple600, 0.18),
+            backgroundSelectedBrandHover: applyAlpha(palette.vivoPurple600, 0.25),
+            backgroundSelectedBrandPressed: applyAlpha(palette.vivoPurple600, 0.33),
+            backgroundSelectedNegative: applyAlpha(palette.vivoPurple600, 0.18),
+            backgroundSelectedNegativeHover: applyAlpha(palette.vivoPurple600, 0.25),
+            backgroundSelectedNegativePressed: applyAlpha(palette.vivoPurple600, 0.33),
+            backgroundBrand: palette.vivoNeutral950,
+            backgroundNegative: palette.vivoNeutral950,
+            backgroundBrandSecondary: palette.vivoNeutral950,
+            backgroundContainer: palette.vivoNeutral900,
+            backgroundContainerError: palette.vivoNeutral900,
+            backgroundContainerHover: applyAlpha(palette.vivoNeutral0, 0.05),
+            backgroundContainerPressed: applyAlpha(palette.vivoNeutral0, 0.08),
+            backgroundContainerBrand: palette.vivoNeutral900,
+            backgroundContainerBrandHover: applyAlpha(palette.vivoNeutral0, 0.03),
+            backgroundContainerBrandPressed: applyAlpha(palette.vivoNeutral0, 0.05),
+            backgroundContainerBrandOverInverse: palette.vivoNeutral900,
+            backgroundContainerNegative: palette.vivoNeutral900,
+            backgroundContainerBrandOverBrand: palette.vivoNeutral900,
+            backgroundContainerAlternative: palette.vivoNeutral900,
+            backgroundOverlay: applyAlpha(palette.vivoNeutral900, 0.8),
+            backgroundSkeleton: palette.vivoNeutral800,
+            backgroundSkeletonInverse: palette.vivoNeutral800,
+            backgroundSkeletonNegative: palette.vivoNeutral800,
+            backgroundSkeletonBrand: palette.vivoNeutral800,
+            backgroundBrandTop: palette.vivoNeutral950,
+            backgroundBrandBottom: palette.vivoNeutral950,
+            appBarBackground: palette.vivoNeutral900,
+            navigationBarBackground: palette.vivoNeutral950,
+            backgroundDropZoneHover: applyAlpha(palette.vivoNeutral0, 0.05),
+            backgroundDropZoneDragover: applyAlpha(palette.vivoNeutral0, 0.08),
+            backgroundDropZoneBrandHover: applyAlpha(palette.vivoNeutral0, 0.03),
+            backgroundDropZoneBrandDragover: applyAlpha(palette.vivoNeutral0, 0.05),
+            backgroundDropZoneNegativeHover: applyAlpha(palette.vivoNeutral0, 0.03),
+            backgroundDropZoneNegativeDragover: applyAlpha(palette.vivoNeutral0, 0.05),
+            backgroundDropZoneMediaHover: applyAlpha(palette.vivoNeutral0, 0.03),
+            backgroundDropZoneMediaDragover: applyAlpha(palette.vivoNeutral0, 0.05),
+            skeletonWave: palette.vivoNeutral600,
+            borderLow: palette.vivoNeutral950,
+            border: palette.vivoNeutral900,
+            borderHigh: palette.vivoNeutral600,
+            borderSelected: palette.vivoPurple700,
+            coverBackgroundHover: applyAlpha(palette.vivoNeutral950, 0.25),
+            coverBackgroundPressed: applyAlpha(palette.vivoNeutral950, 0.35),
+            buttonDangerBackground: palette.vivoPepper600,
+            buttonDangerBackgroundPressed: palette.vivoPepper700,
+            buttonDangerBackgroundHover: palette.vivoPepper700,
+            buttonLinkDangerBackgroundInverse: applyAlpha(palette.vivoNeutral0, 0),
+            buttonLinkDangerBackgroundNegative: applyAlpha(palette.vivoNeutral0, 0),
+            buttonLinkDangerBackgroundBrand: applyAlpha(palette.vivoNeutral0, 0),
+            buttonLinkDangerBackgroundMedia: palette.vivoNeutral0,
+            buttonLinkDangerBackgroundPressed: applyAlpha(palette.vivoNeutral0, 0.08),
+            buttonLinkDangerBackgroundInversePressed: applyAlpha(palette.vivoNeutral0, 0.08),
+            buttonLinkDangerBackgroundNegativePressed: applyAlpha(palette.vivoNeutral0, 0.08),
+            buttonLinkDangerBackgroundBrandPressed: applyAlpha(palette.vivoNeutral0, 0.08),
+            buttonLinkDangerBackgroundMediaPressed: palette.vivoPepper25,
+            buttonLinkBackgroundPressed: applyAlpha(palette.vivoNeutral0, 0.08),
+            buttonLinkBackgroundInversePressed: applyAlpha(palette.vivoNeutral0, 0.08),
+            buttonLinkBackgroundNegativePressed: applyAlpha(palette.vivoNeutral0, 0.08),
+            buttonLinkBackgroundBrandPressed: applyAlpha(palette.vivoNeutral0, 0.08),
+            buttonLinkBackgroundMediaPressed: applyAlpha(palette.vivoNeutral0, 0.1),
+            buttonLinkNeutralBackgroundPressed: applyAlpha(palette.vivoNeutral0, 0.08),
+            buttonLinkNeutralBackgroundBrand: applyAlpha(palette.vivoNeutral0, 0),
+            buttonLinkNeutralBackgroundBrandPressed: applyAlpha(palette.vivoNeutral0, 0.08),
+            buttonLinkNeutralBackgroundNegative: applyAlpha(palette.vivoNeutral0, 0),
+            buttonLinkNeutralBackgroundNegativePressed: applyAlpha(palette.vivoNeutral0, 0.08),
+            buttonLinkNeutralBackgroundMedia: applyAlpha(palette.vivoNeutral0, 0),
+            buttonLinkNeutralBackgroundMediaPressed: applyAlpha(palette.vivoNeutral0, 0.08),
+            buttonPrimaryBackground: palette.vivoPurple600,
+            buttonPrimaryBackgroundInverse: palette.vivoPurple600,
+            buttonPrimaryBackgroundNegative: palette.vivoPurple600,
+            buttonPrimaryBackgroundBrand: palette.vivoPurple600,
+            buttonPrimaryBackgroundMedia: palette.vivoNeutral0,
+            buttonPrimaryBackgroundHover: palette.vivoPurple900,
+            buttonPrimaryBackgroundInverseHover: palette.vivoPurple900,
+            buttonPrimaryBackgroundNegativeHover: palette.vivoPurple900,
+            buttonPrimaryBackgroundBrandHover: palette.vivoPurple900,
+            buttonPrimaryBackgroundMediaHover: palette.vivoPurple50,
+            buttonPrimaryBackgroundPressed: palette.vivoPurple900,
+            buttonPrimaryBackgroundInversePressed: palette.vivoPurple900,
+            buttonPrimaryBackgroundNegativePressed: palette.vivoPurple900,
+            buttonPrimaryBackgroundBrandPressed: palette.vivoPurple900,
+            buttonPrimaryBackgroundMediaPressed: palette.vivoPurple100,
+            buttonSecondaryBackgroundBrand: applyAlpha(palette.vivoNeutral0, 0),
+            buttonSecondaryBorder: palette.vivoNeutral0,
+            buttonSecondaryBorderInverse: palette.vivoNeutral0,
+            buttonSecondaryBorderNegative: palette.vivoNeutral0,
+            buttonSecondaryBorderBrand: palette.vivoNeutral0,
+            buttonSecondaryBorderMedia: palette.vivoNeutral0,
+            buttonSecondaryBorderPressed: palette.vivoNeutral0,
+            buttonSecondaryBorderInversePressed: palette.vivoNeutral0,
+            buttonSecondaryBorderNegativePressed: palette.vivoNeutral0,
+            buttonSecondaryBorderBrandPressed: palette.vivoNeutral0,
+            buttonSecondaryBorderMediaPressed: palette.vivoNeutral0,
+            buttonSecondaryBackgroundHover: applyAlpha(palette.vivoNeutral0, 0.15),
+            buttonSecondaryBackgroundInverseHover: applyAlpha(palette.vivoNeutral0, 0.15),
+            buttonSecondaryBackgroundNegativeHover: applyAlpha(palette.vivoNeutral0, 0.15),
+            buttonSecondaryBackgroundBrandHover: applyAlpha(palette.vivoNeutral0, 0.15),
+            buttonSecondaryBackgroundMediaHover: applyAlpha(palette.vivoNeutral0, 0.15),
+            buttonSecondaryBackgroundPressed: applyAlpha(palette.vivoNeutral0, 0.15),
+            buttonSecondaryBackgroundInversePressed: applyAlpha(palette.vivoNeutral0, 0.15),
+            buttonSecondaryBackgroundNegativePressed: applyAlpha(palette.vivoNeutral0, 0.15),
+            buttonSecondaryBackgroundBrandPressed: applyAlpha(palette.vivoNeutral0, 0.15),
+            buttonSecondaryBackgroundMediaPressed: applyAlpha(palette.vivoNeutral0, 0.15),
+            textButtonPrimary: palette.vivoNeutral100,
+            textButtonPrimaryInverse: palette.vivoNeutral100,
+            textButtonPrimaryNegative: palette.vivoNeutral100,
+            textButtonPrimaryBrand: palette.vivoNeutral100,
+            textButtonPrimaryMedia: palette.vivoPurple700,
+            textButtonPrimaryInversePressed: palette.vivoNeutral100,
+            textButtonPrimaryNegativePressed: palette.vivoNeutral100,
+            textButtonPrimaryBrandPressed: palette.vivoNeutral100,
+            textButtonPrimaryMediaPressed: palette.vivoPurple700,
+            textButtonSecondary: palette.vivoNeutral100,
+            textButtonSecondaryInverse: palette.vivoNeutral100,
+            textButtonSecondaryNegative: palette.vivoNeutral100,
+            textButtonSecondaryBrand: palette.vivoNeutral100,
+            textButtonSecondaryMedia: palette.vivoNeutral0,
+            textButtonSecondaryPressed: palette.vivoNeutral100,
+            textButtonSecondaryInversePressed: palette.vivoNeutral100,
+            textButtonSecondaryNegativePressed: palette.vivoNeutral100,
+            textButtonSecondaryBrandPressed: palette.vivoNeutral100,
+            textButtonSecondaryMediaPressed: palette.vivoNeutral0,
+            textLink: palette.vivoPurple300,
+            textLinkInverse: palette.vivoPurple300,
+            textLinkNegative: palette.vivoPurple300,
+            textLinkBrand: palette.vivoPurple300,
+            textLinkMedia: palette.vivoNeutral0,
+            textLinkDanger: palette.vivoPepper600,
+            textLinkDangerMedia: palette.vivoPepper600,
+            textLinkSnackbar: palette.vivoPurple300,
+            textLinkNeutral: palette.vivoNeutral100,
+            textLinkNeutralBrand: palette.vivoNeutral100,
+            textLinkNeutralNegative: palette.vivoNeutral100,
+            textLinkNeutralAlternative: palette.vivoNeutral100,
+            textLinkNeutralMedia: palette.vivoNeutral0,
+            textActivated: palette.vivoPurple600,
+            textBrand: palette.vivoPurple600,
+            inputBorder: palette.vivoNeutral600,
+            inputBorderInverse: palette.vivoNeutral600,
+            inputBorderNegative: palette.vivoNeutral600,
+            inputBorderBrand: palette.vivoNeutral600,
+            completedStep: palette.vivoPurple600,
+            completedStepInverse: palette.vivoPurple600,
+            completedStepNegative: palette.vivoPurple600,
+            completedStepBrand: palette.vivoPurple600,
+            control: palette.vivoNeutral800,
+            controlActivated: palette.vivoPurple600,
+            controlInverse: palette.vivoNeutral800,
+            controlNegative: palette.vivoNeutral800,
+            controlBrand: palette.vivoNeutral800,
+            controlActivatedInverse: palette.vivoPurple600,
+            controlActivatedNegative: palette.vivoPurple600,
+            controlActivatedBrand: palette.vivoPurple600,
+            controlError: palette.vivoPepper600,
+            chevronIndicator: palette.vivoNeutral600,
+            barTrack: palette.vivoNeutral800,
+            barTrackInverse: palette.vivoNeutral800,
+            barTrackNegative: palette.vivoNeutral800,
+            barTrackBrand: palette.vivoNeutral800,
+            loadingBar: palette.vivoPurple600,
+            loadingBarBackground: palette.vivoNeutral800,
+            toggleAndroidInactive: palette.vivoNeutral500,
+            toggleAndroidBackgroundActive: palette.vivoPurple300,
+            toggleAndroidActiveBrand: palette.vivoPurple600,
+            toggleAndroidInactiveBrand: palette.vivoNeutral500,
+            toggleAndroidBackgroundActiveBrand: palette.vivoPurple300,
+            toggleAndroidBackgroundInactiveBrand: palette.vivoNeutral800,
+            iosControlKnob: palette.vivoNeutral100,
+            controlKnobInverse: palette.vivoNeutral100,
+            controlKnobNegative: palette.vivoNeutral100,
+            controlKnobBrand: palette.vivoNeutral100,
+            divider: applyAlpha(palette.vivoNeutral0, 0.05),
+            dividerInverse: applyAlpha(palette.vivoNeutral0, 0.05),
+            dividerNegative: applyAlpha(palette.vivoNeutral0, 0.05),
+            dividerBrand: applyAlpha(palette.vivoNeutral0, 0.05),
+            navigationBarDivider: palette.vivoNeutral950,
+            badge: palette.vivoPepper700,
+            feedbackErrorBackground: palette.vivoPepper600,
+            feedbackInfoBackground: palette.vivoNeutral975,
+            brand: palette.vivoPurple600,
+            brandHigh: applyAlpha(palette.vivoNeutral0, 0.05),
+            inverse: palette.vivoNeutral100,
+            negative: palette.vivoNeutral100,
+            neutralHigh: palette.vivoNeutral100,
+            neutralHighBrand: palette.vivoNeutral100,
+            neutralHighNegative: palette.vivoNeutral100,
+            neutralMedium: palette.vivoNeutral600,
+            neutralMediumInverse: palette.vivoNeutral600,
+            neutralMediumNegative: palette.vivoNeutral600,
+            neutralMediumBrand: palette.vivoNeutral600,
+            neutralLow: palette.vivoNeutral800,
+            neutralLowAlternative: palette.vivoNeutral800,
+            textPrimary: palette.vivoNeutral100,
+            textPrimaryInverse: palette.vivoNeutral100,
+            textPrimaryNegative: palette.vivoNeutral100,
+            textPrimaryBrand: palette.vivoNeutral100,
+            textPrimaryMedia: palette.vivoNeutral0,
+            textSecondary: palette.vivoNeutral200,
+            textSecondaryInverse: palette.vivoNeutral200,
+            textSecondaryNegative: palette.vivoNeutral200,
+            textSecondaryBrand: palette.vivoNeutral200,
+            textSecondaryMedia: palette.vivoNeutral0,
+            success: palette.vivoGreen600,
+            warning: palette.vivoOrange600,
+            error: palette.vivoPepper600,
+            textError: palette.vivoPepper600,
+            textErrorInverse: palette.vivoPepper600,
+            textErrorNegative: palette.vivoPepper600,
+            textErrorBrand: palette.vivoPepper600,
+            promo: palette.vivoPurple600,
+            highlight: palette.vivoPepper500,
+            successLow: palette.vivoNeutral800,
+            warningLow: palette.vivoNeutral800,
+            errorLow: palette.vivoNeutral800,
+            promoLow: palette.vivoNeutral800,
+            brandLow: palette.vivoNeutral800,
+            successHigh: palette.vivoGreen700,
+            warningHigh: palette.vivoOrange200,
+            errorHigh: palette.vivoPepper400,
+            promoHigh: palette.vivoPurple300,
+            successHighInverse: palette.vivoGreen900,
+            successHighNegative: palette.vivoGreen900,
+            successHighBrand: palette.vivoGreen900,
+            warningHighInverse: palette.vivoOrange900,
+            warningHighNegative: palette.vivoOrange900,
+            warningHighBrand: palette.vivoOrange900,
+            errorHighInverse: palette.vivoPepper800,
+            errorHighNegative: palette.vivoPepper800,
+            errorHighBrand: palette.vivoPepper800,
+            promoHighInverse: palette.vivoPurple700,
+            promoHighNegative: palette.vivoPurple700,
+            promoHighBrand: palette.vivoPurple700,
+            textNavigationBarPrimary: palette.vivoNeutral100,
+            textNavigationBarSecondary: palette.vivoNeutral500,
+            textNavigationSearchBarHint: palette.vivoNeutral500,
+            textNavigationSearchBarText: palette.vivoNeutral100,
+            textAppBar: palette.vivoNeutral600,
+            textAppBarSelected: palette.vivoNeutral100,
+            iosGlassAppBar: palette.vivoNeutral0,
+            iosGlassAppBarSelected: palette.vivoPurple100,
+            customTabsBackground: palette.vivoNeutral950,
+            tagTextPromo: palette.vivoPurple300,
+            tagTextActive: palette.vivoPurple600,
+            tagTextInactive: palette.vivoNeutral600,
+            tagTextInfo: palette.vivoPurple600,
+            tagTextSuccess: palette.vivoGreen700,
+            tagTextWarning: palette.vivoOrange200,
+            tagTextError: palette.vivoPepper400,
+            tagBackgroundPromo: palette.vivoNeutral800,
+            tagBackgroundActive: palette.vivoNeutral800,
+            tagBackgroundInactive: palette.vivoNeutral800,
+            tagBackgroundInfo: palette.vivoNeutral800,
+            tagBackgroundSuccess: palette.vivoNeutral800,
+            tagBackgroundWarning: palette.vivoNeutral800,
+            tagBackgroundError: palette.vivoNeutral800,
+            tagTextPromoInverse: palette.vivoPurple300,
+            tagTextPromoNegative: palette.vivoPurple300,
+            tagTextPromoBrand: palette.vivoPurple300,
+            tagTextActiveInverse: palette.vivoPurple600,
+            tagTextActiveNegative: palette.vivoPurple600,
+            tagTextActiveBrand: palette.vivoPurple600,
+            tagTextInactiveInverse: palette.vivoNeutral600,
+            tagTextInactiveNegative: palette.vivoNeutral600,
+            tagTextInactiveBrand: palette.vivoNeutral600,
+            tagTextInfoInverse: palette.vivoPurple600,
+            tagTextInfoNegative: palette.vivoPurple600,
+            tagTextInfoBrand: palette.vivoPurple600,
+            tagTextSuccessInverse: palette.vivoGreen700,
+            tagTextSuccessNegative: palette.vivoGreen700,
+            tagTextSuccessBrand: palette.vivoGreen700,
+            tagTextWarningInverse: palette.vivoOrange200,
+            tagTextWarningNegative: palette.vivoOrange200,
+            tagTextWarningBrand: palette.vivoOrange200,
+            tagTextErrorInverse: palette.vivoPepper400,
+            tagTextErrorNegative: palette.vivoPepper400,
+            tagTextErrorBrand: palette.vivoPepper400,
+            tagBackgroundPromoInverse: palette.vivoNeutral800,
+            tagBackgroundPromoNegative: palette.vivoNeutral800,
+            tagBackgroundPromoBrand: palette.vivoNeutral800,
+            tagBackgroundActiveInverse: palette.vivoNeutral800,
+            tagBackgroundActiveNegative: palette.vivoNeutral800,
+            tagBackgroundActiveBrand: palette.vivoNeutral800,
+            tagBackgroundInactiveInverse: palette.vivoNeutral800,
+            tagBackgroundInactiveNegative: palette.vivoNeutral800,
+            tagBackgroundInactiveBrand: palette.vivoNeutral800,
+            tagBackgroundInfoInverse: palette.vivoNeutral800,
+            tagBackgroundInfoNegative: palette.vivoNeutral800,
+            tagBackgroundInfoBrand: palette.vivoNeutral800,
+            tagBackgroundSuccessInverse: palette.vivoNeutral800,
+            tagBackgroundSuccessNegative: palette.vivoNeutral800,
+            tagBackgroundSuccessBrand: palette.vivoNeutral800,
+            tagBackgroundWarningInverse: palette.vivoNeutral800,
+            tagBackgroundWarningNegative: palette.vivoNeutral800,
+            tagBackgroundWarningBrand: palette.vivoNeutral800,
+            tagBackgroundErrorInverse: palette.vivoNeutral800,
+            tagBackgroundErrorNegative: palette.vivoNeutral800,
+            tagBackgroundErrorBrand: palette.vivoNeutral800,
+            cardContentOverlay: `linear-gradient(180deg, ${applyAlpha(palette.vivoNeutral975, 0)} 0%, ${applyAlpha(palette.vivoNeutral975, 0.4)} 30%, ${applyAlpha(palette.vivoNeutral975, 0.7)} 100%)`,
+            cardFooterOverlay: applyAlpha(palette.vivoNeutral975, 0.7),
         },
         borderRadii: {
             avatar: '50%',
@@ -634,14 +720,14 @@ export const getVivoEvolutionSkin: GetKnownSkin = () => {
         textPresets: {
             button: {weight: 'medium'},
             cardDescriptionDefault: {lineHeight: {desktop: 24, mobile: 20}, size: {desktop: 16, mobile: 14}},
-            cardDescriptionSnap: {lineHeight: {desktop: 24, mobile: 20}, size: {desktop: 16, mobile: 14}},
+            cardDescriptionSnap: {lineHeight: {desktop: 24, mobile: 20}, size: {desktop: 14, mobile: 12}},
             cardPretitleDefault: {lineHeight: {desktop: 24, mobile: 20}, size: {desktop: 16, mobile: 14}},
-            cardPretitleSnap: {lineHeight: {desktop: 24, mobile: 20}, size: {desktop: 16, mobile: 14}},
+            cardPretitleSnap: {lineHeight: {desktop: 24, mobile: 20}, size: {desktop: 14, mobile: 12}},
             cardSubtitleDefault: {lineHeight: {desktop: 24, mobile: 20}, size: {desktop: 16, mobile: 14}},
-            cardSubtitleSnap: {lineHeight: {desktop: 24, mobile: 20}, size: {desktop: 16, mobile: 14}},
+            cardSubtitleSnap: {lineHeight: {desktop: 24, mobile: 20}, size: {desktop: 14, mobile: 12}},
             cardTitle: {weight: 'medium'},
             cardTitleDefault: {lineHeight: {desktop: 28, mobile: 24}, size: {desktop: 24, mobile: 18}},
-            cardTitleSnap: {lineHeight: {desktop: 24, mobile: 20}, size: {desktop: 16, mobile: 14}},
+            cardTitleSnap: {lineHeight: {desktop: 24, mobile: 20}, size: {desktop: 18, mobile: 16}},
             chipLabel: {
                 lineHeight: {desktop: 24, mobile: 20},
                 size: {desktop: 16, mobile: 14},
@@ -659,7 +745,7 @@ export const getVivoEvolutionSkin: GetKnownSkin = () => {
             link: {weight: 'medium'},
             loadingScreenTitle: {lineHeight: {desktop: 28, mobile: 24}, size: {desktop: 24, mobile: 18}},
             navigationBar: {weight: 'regular'},
-            rowTitle: {weight: 'regular'},
+            rowTitle: {weight: 'medium'},
             stepperStepLabel: {lineHeight: {desktop: 24, mobile: 20}, size: {desktop: 16, mobile: 14}},
             tabsLabel: {
                 lineHeight: {desktop: 24, mobile: 24},
@@ -713,6 +799,15 @@ export const getVivoEvolutionSkin: GetKnownSkin = () => {
             successFeedback: 'inverse',
             brandLoadingScreen: 'inverse',
         },
+        componentProperties: {
+            showBoxedBorder: {
+                default: true,
+                brand: true,
+                negative: true,
+                alternative: false,
+                media: true,
+            },
+        },
         spacing: {
             buttonDefaultPadding: {left: {mobile: 16, desktop: 16}, right: {mobile: 16, desktop: 16}},
             buttonSmallPadding: {left: {mobile: 12, desktop: 12}, right: {mobile: 12, desktop: 12}},
@@ -738,6 +833,8 @@ export const getVivoEvolutionSkin: GetKnownSkin = () => {
                 left: {mobile: 16, desktop: 40},
                 right: {mobile: 16, desktop: 40},
             },
+            boxedDefaultPadding: {left: {mobile: 16, desktop: 24}, right: {mobile: 16, desktop: 24}},
+            responsiveLayoutMargin: {mobile: 8, desktop: 48},
         },
     };
     return skin;