@telefonica/mistica 16.71.0 → 17.0.0

package/src/skins/o2.tsx

@@ -4,48 +4,52 @@ import {applyAlpha} from '../utils/color';
 import type {GetKnownSkin, KnownSkin} from './types';
 
 export const palette = {
-    o2BluePrimary: '#0019A5',
-    o2BluePrimary70: '#000066',
-    o2BluePrimary90: '#000033',
-    o2BluePrimary30: '#808CD2',
-    o2BluePrimary15: '#CCD1ED',
-    o2BluePrimary10: '#E5E8F6',
-    o2BlueMid: '#0090D0',
-    o2BlueLight: '#41B6E6',
-    o2BlueLight30: '#C6E9F7',
-    o2BlueLight35: '#8DD3F0',
-    o2Teal: '#01B7B4',
-    o2Green: '#91C90E',
-    o2Green10: '#F4FAE7',
-    o2Green40: '#B2D956',
-    o2Green80: '#415A06',
-    o2Yellow: '#FEDB00',
-    o2Orange: '#FF7F41',
-    o2Orange10: '#FFF2EC',
-    o2Orange40: '#FFA57A',
-    o2Orange75: '#A6522A',
-    o2Pink: '#E45DBF',
-    o2Purple: '#952D98',
-    o2Purple10: '#F4EAF5',
-    o2Purple30: '#CA9ACB',
-    pepper: '#F4364C',
-    pepper10: '#FEEBED',
-    pepper20: '#FCC3C9',
-    pepper40: '#FF7380',
-    pepper60: '#C32B3D',
-    grey1: '#F6F6F6',
-    grey2: '#EEEEEE',
-    grey3: '#DDDDDD',
-    grey4: '#999999',
-    grey5: '#707070',
-    grey6: '#000033',
+    beyondBlue: '#0050FF',
+    beyondBlue10: '#E5EDFF',
+    beyondBlue15: '#CCDCFF',
+    beyondBlue30: '#80A7FF',
+    beyondBlue40: '#4D84FF',
+    beyondBlue45: '#0A73EB',
+    beyondBlue55: '#0044D9',
+    beyondBlue70: '#0038B2',
+    beyondBlue90: '#001033',
+    darkBlue: '#00008C',
+    o2BlueLight: '#82DCFA',
+    o2BlueLight30: '#C0EEFD',
+    o2BlueLight35: '#B4EAFC',
+    o2Green: '#00DC7D',
+    o2Green10: '#E5FBF2',
+    o2Green40: '#4CE7A4',
+    o2Green80: '#006338',
+    o2Yellow: '#FADC00',
+    o2Orange: '#FFA55A',
+    o2Orange10: '#FFF6EE',
+    o2Orange40: '#FFC08B',
+    o2Orange60: '#F06C00',
+    o2Orange75: '#996336',
+    o2Pink: '#FA96FF',
+    o2Pink15: '#FEEAFF',
+    o2Pink30: '#FDCAFF',
+    o2Pink80: '#704373',
+    o2Red: '#FF5A5A',
+    o2Red10: '#FFEEEE',
+    o2Red20: '#FFCDCD',
+    o2Red40: '#FF8B8B',
+    o2Red45: '#FF7B7B',
+    o2Red60: '#CC4848',
+    o2Red65: '#BF4444',
+    grey20: '#F3F3F5',
+    grey30: '#D9D9DD',
+    grey40: '#B4B4BE',
+    grey45: '#8A8A98',
+    grey60: '#6E6E77',
+    grey80: '#3C3C46',
+    black: '#00001E',
     white: '#FFFFFF',
-    black: '#000000',
-    darkModeBlack: '#191919',
-    darkModeGrey: '#242424',
-    darkModeGrey6: '#313235',
-    darkModeO2BluePrimary: '#0020D6',
-    darkModeO2BluePrimaryDark: '#000099',
+    darkModeBlack: '#00001C',
+    darkModeGrey: '#08132B',
+    darkModeGrey6: '#14213D',
+    darkModeBeyondBlue: '#1A62FF',
 };
 
 export const getO2Skin: GetKnownSkin = () => {
@@ -53,287 +57,287 @@ export const getO2Skin: GetKnownSkin = () => {
         name: O2_SKIN,
         colors: {
             background: palette.white,
-            backgroundAlternative: palette.grey1,
-            backgroundBrand: palette.o2BluePrimary,
-            backgroundNegative: palette.o2BluePrimary70,
-            backgroundBrandSecondary: palette.o2BluePrimary,
+            backgroundAlternative: palette.grey20,
+            backgroundBrand: `linear-gradient(180deg, ${palette.darkBlue} 0%, ${palette.beyondBlue} 64%, ${palette.beyondBlue45} 100%)`,
+            backgroundNegative: palette.beyondBlue,
+            backgroundBrandSecondary: palette.beyondBlue,
             backgroundContainer: palette.white,
-            backgroundContainerError: palette.pepper10,
+            backgroundContainerError: palette.o2Red10,
             backgroundContainerHover: applyAlpha(palette.darkModeBlack, 0.05),
             backgroundContainerPressed: applyAlpha(palette.darkModeBlack, 0.08),
-            backgroundContainerBrand: palette.o2BluePrimary,
+            backgroundContainerBrand: `linear-gradient(180deg, ${palette.darkBlue} 0%, ${palette.beyondBlue} 64%, ${palette.beyondBlue45} 100%)`,
             backgroundContainerBrandHover: applyAlpha(palette.darkModeBlack, 0.2),
             backgroundContainerBrandPressed: applyAlpha(palette.darkModeBlack, 0.4),
-            backgroundContainerBrandOverInverse: palette.o2BluePrimary70,
+            backgroundContainerBrandOverInverse: palette.beyondBlue70,
             backgroundContainerNegative: applyAlpha(palette.darkModeBlack, 0.4),
-            backgroundContainerBrandOverBrand: palette.o2BluePrimary70,
-            backgroundContainerAlternative: palette.grey1,
-            backgroundOverlay: applyAlpha(palette.grey6, 0.6),
-            backgroundSkeleton: palette.grey2,
-            backgroundSkeletonInverse: palette.o2BluePrimary70,
-            backgroundSkeletonNegative: applyAlpha(palette.grey6, 0.2),
-            backgroundSkeletonBrand: palette.o2BluePrimary70,
-            backgroundBrandTop: palette.o2BluePrimary,
-            backgroundBrandBottom: palette.o2BluePrimary,
+            backgroundContainerBrandOverBrand: palette.beyondBlue70,
+            backgroundContainerAlternative: palette.grey20,
+            backgroundOverlay: applyAlpha(palette.black, 0.6),
+            backgroundSkeleton: palette.grey30,
+            backgroundSkeletonInverse: palette.beyondBlue70,
+            backgroundSkeletonNegative: applyAlpha(palette.black, 0.2),
+            backgroundSkeletonBrand: palette.beyondBlue70,
+            backgroundBrandTop: palette.darkBlue,
+            backgroundBrandBottom: palette.beyondBlue45,
             appBarBackground: palette.white,
-            navigationBarBackground: palette.o2BluePrimary,
-            backgroundDropZoneHover: applyAlpha(palette.o2BluePrimary90, 0.05),
-            backgroundDropZoneDragover: applyAlpha(palette.o2BluePrimary90, 0.08),
-            backgroundDropZoneBrandHover: applyAlpha(palette.o2BluePrimary90, 0.4),
-            backgroundDropZoneBrandDragover: applyAlpha(palette.o2BluePrimary90, 0.8),
+            navigationBarBackground: palette.darkBlue,
+            backgroundDropZoneHover: applyAlpha(palette.beyondBlue, 0.05),
+            backgroundDropZoneDragover: applyAlpha(palette.beyondBlue, 0.08),
+            backgroundDropZoneBrandHover: applyAlpha(palette.beyondBlue90, 0.2),
+            backgroundDropZoneBrandDragover: applyAlpha(palette.beyondBlue90, 0.4),
             backgroundDropZoneNegativeHover: applyAlpha(palette.white, 0.1),
             backgroundDropZoneNegativeDragover: applyAlpha(palette.white, 0.17),
-            backgroundDropZoneMediaHover: applyAlpha(palette.o2BluePrimary90, 0.4),
-            backgroundDropZoneMediaDragover: applyAlpha(palette.o2BluePrimary90, 0.8),
-            skeletonWave: palette.grey2,
-            borderLow: palette.grey1,
-            border: palette.grey3,
-            borderHigh: palette.grey5,
-            borderSelected: palette.o2BluePrimary,
+            backgroundDropZoneMediaHover: applyAlpha(palette.beyondBlue90, 0.2),
+            backgroundDropZoneMediaDragover: applyAlpha(palette.beyondBlue90, 0.4),
+            skeletonWave: palette.grey30,
+            borderLow: palette.grey20,
+            border: palette.grey30,
+            borderHigh: palette.grey80,
+            borderSelected: palette.beyondBlue,
             coverBackgroundHover: applyAlpha(palette.darkModeBlack, 0.25),
             coverBackgroundPressed: applyAlpha(palette.darkModeBlack, 0.35),
-            buttonDangerBackground: palette.pepper,
-            buttonDangerBackgroundPressed: palette.pepper60,
-            buttonDangerBackgroundHover: palette.pepper60,
+            buttonDangerBackground: palette.o2Red60,
+            buttonDangerBackgroundPressed: palette.o2Red65,
+            buttonDangerBackgroundHover: palette.o2Red65,
             buttonLinkDangerBackgroundInverse: palette.white,
             buttonLinkDangerBackgroundNegative: palette.white,
             buttonLinkDangerBackgroundBrand: palette.white,
             buttonLinkDangerBackgroundMedia: palette.white,
-            buttonLinkDangerBackgroundPressed: palette.pepper10,
-            buttonLinkDangerBackgroundInversePressed: palette.pepper10,
-            buttonLinkDangerBackgroundNegativePressed: palette.pepper10,
-            buttonLinkDangerBackgroundBrandPressed: palette.pepper10,
-            buttonLinkDangerBackgroundMediaPressed: palette.pepper10,
-            buttonLinkBackgroundPressed: palette.o2BluePrimary10,
+            buttonLinkDangerBackgroundPressed: palette.o2Red10,
+            buttonLinkDangerBackgroundInversePressed: palette.o2Red10,
+            buttonLinkDangerBackgroundNegativePressed: palette.o2Red10,
+            buttonLinkDangerBackgroundBrandPressed: palette.o2Red10,
+            buttonLinkDangerBackgroundMediaPressed: palette.o2Red10,
+            buttonLinkBackgroundPressed: palette.beyondBlue10,
             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.o2BluePrimary,
+            buttonPrimaryBackground: palette.beyondBlue,
             buttonPrimaryBackgroundInverse: palette.white,
             buttonPrimaryBackgroundNegative: palette.white,
             buttonPrimaryBackgroundBrand: palette.white,
             buttonPrimaryBackgroundMedia: palette.white,
-            buttonPrimaryBackgroundHover: palette.o2BluePrimary70,
-            buttonPrimaryBackgroundInverseHover: palette.o2BluePrimary30,
-            buttonPrimaryBackgroundNegativeHover: palette.o2BluePrimary30,
-            buttonPrimaryBackgroundBrandHover: palette.o2BluePrimary30,
-            buttonPrimaryBackgroundMediaHover: palette.o2BluePrimary30,
-            buttonPrimaryBackgroundPressed: palette.o2BluePrimary70,
-            buttonPrimaryBackgroundInversePressed: palette.o2BluePrimary30,
-            buttonPrimaryBackgroundNegativePressed: palette.o2BluePrimary30,
-            buttonPrimaryBackgroundBrandPressed: palette.o2BluePrimary30,
-            buttonPrimaryBackgroundMediaPressed: palette.o2BluePrimary30,
+            buttonPrimaryBackgroundHover: palette.beyondBlue70,
+            buttonPrimaryBackgroundInverseHover: palette.beyondBlue10,
+            buttonPrimaryBackgroundNegativeHover: palette.beyondBlue10,
+            buttonPrimaryBackgroundBrandHover: palette.beyondBlue10,
+            buttonPrimaryBackgroundMediaHover: palette.beyondBlue10,
+            buttonPrimaryBackgroundPressed: palette.beyondBlue70,
+            buttonPrimaryBackgroundInversePressed: palette.beyondBlue15,
+            buttonPrimaryBackgroundNegativePressed: palette.beyondBlue15,
+            buttonPrimaryBackgroundBrandPressed: palette.beyondBlue15,
+            buttonPrimaryBackgroundMediaPressed: palette.beyondBlue15,
             buttonSecondaryBackgroundBrand: applyAlpha(palette.white, 0),
-            buttonSecondaryBorder: palette.o2BluePrimary,
+            buttonSecondaryBorder: palette.beyondBlue,
             buttonSecondaryBorderInverse: palette.white,
             buttonSecondaryBorderNegative: palette.white,
             buttonSecondaryBorderBrand: palette.white,
             buttonSecondaryBorderMedia: palette.white,
-            buttonSecondaryBorderPressed: palette.o2BluePrimary70,
-            buttonSecondaryBorderInversePressed: palette.o2BluePrimary30,
-            buttonSecondaryBorderNegativePressed: palette.o2BluePrimary30,
-            buttonSecondaryBorderBrandPressed: palette.o2BluePrimary30,
-            buttonSecondaryBorderMediaPressed: palette.o2BluePrimary30,
-            buttonSecondaryBackgroundHover: palette.o2BluePrimary10,
+            buttonSecondaryBorderPressed: palette.beyondBlue70,
+            buttonSecondaryBorderInversePressed: palette.beyondBlue30,
+            buttonSecondaryBorderNegativePressed: palette.beyondBlue30,
+            buttonSecondaryBorderBrandPressed: palette.beyondBlue30,
+            buttonSecondaryBorderMediaPressed: palette.beyondBlue30,
+            buttonSecondaryBackgroundHover: palette.beyondBlue10,
             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.o2BluePrimary10,
+            buttonSecondaryBackgroundPressed: palette.beyondBlue10,
             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.o2BluePrimary,
-            textButtonPrimaryNegative: palette.o2BluePrimary,
-            textButtonPrimaryBrand: palette.o2BluePrimary,
-            textButtonPrimaryMedia: palette.o2BluePrimary,
-            textButtonPrimaryInversePressed: palette.o2BluePrimary70,
-            textButtonPrimaryNegativePressed: palette.o2BluePrimary70,
-            textButtonPrimaryBrandPressed: palette.o2BluePrimary70,
-            textButtonPrimaryMediaPressed: palette.o2BluePrimary70,
-            textButtonSecondary: palette.o2BluePrimary,
+            textButtonPrimaryInverse: palette.beyondBlue,
+            textButtonPrimaryNegative: palette.beyondBlue,
+            textButtonPrimaryBrand: palette.beyondBlue,
+            textButtonPrimaryMedia: palette.beyondBlue,
+            textButtonPrimaryInversePressed: palette.beyondBlue70,
+            textButtonPrimaryNegativePressed: palette.beyondBlue70,
+            textButtonPrimaryBrandPressed: palette.beyondBlue70,
+            textButtonPrimaryMediaPressed: palette.beyondBlue70,
+            textButtonSecondary: palette.beyondBlue,
             textButtonSecondaryInverse: palette.white,
             textButtonSecondaryNegative: palette.white,
             textButtonSecondaryBrand: palette.white,
             textButtonSecondaryMedia: palette.white,
-            textButtonSecondaryPressed: palette.o2BluePrimary70,
+            textButtonSecondaryPressed: palette.beyondBlue70,
             textButtonSecondaryInversePressed: palette.white,
             textButtonSecondaryNegativePressed: palette.white,
             textButtonSecondaryBrandPressed: palette.white,
             textButtonSecondaryMediaPressed: palette.white,
-            textLink: palette.o2BluePrimary,
+            textLink: palette.beyondBlue,
             textLinkInverse: palette.white,
             textLinkNegative: palette.white,
             textLinkBrand: palette.white,
             textLinkMedia: palette.white,
-            textLinkDanger: palette.pepper,
-            textLinkDangerMedia: palette.pepper,
-            textLinkSnackbar: palette.o2BluePrimary30,
-            textActivated: palette.o2BluePrimary,
-            textBrand: palette.o2BluePrimary,
-            inputBorder: palette.grey3,
+            textLinkDanger: palette.o2Red65,
+            textLinkDangerMedia: palette.o2Red65,
+            textLinkSnackbar: palette.beyondBlue30,
+            textActivated: palette.beyondBlue,
+            textBrand: palette.beyondBlue,
+            inputBorder: palette.grey45,
             inputBorderInverse: palette.white,
             inputBorderNegative: palette.white,
             inputBorderBrand: palette.white,
-            completedStep: palette.o2BluePrimary,
-            completedStepInverse: palette.o2BluePrimary70,
-            completedStepNegative: palette.o2BluePrimary70,
-            completedStepBrand: palette.o2BluePrimary70,
-            control: palette.grey3,
-            controlActivated: palette.o2BluePrimary,
-            controlInverse: palette.o2BluePrimary30,
-            controlNegative: palette.o2BluePrimary30,
-            controlBrand: palette.o2BluePrimary30,
+            completedStep: palette.beyondBlue,
+            completedStepInverse: palette.beyondBlue70,
+            completedStepNegative: palette.beyondBlue70,
+            completedStepBrand: palette.beyondBlue70,
+            control: palette.grey45,
+            controlActivated: palette.beyondBlue,
+            controlInverse: palette.white,
+            controlNegative: palette.white,
+            controlBrand: palette.white,
             controlActivatedInverse: palette.white,
             controlActivatedNegative: palette.white,
             controlActivatedBrand: palette.white,
-            controlError: palette.pepper,
-            chevronIndicator: palette.grey5,
-            barTrack: palette.grey3,
+            controlError: palette.o2Red60,
+            chevronIndicator: palette.grey60,
+            barTrack: palette.grey30,
             barTrackInverse: applyAlpha(palette.white, 0.3),
             barTrackNegative: applyAlpha(palette.white, 0.3),
             barTrackBrand: applyAlpha(palette.white, 0.3),
-            loadingBar: palette.o2BluePrimary,
-            loadingBarBackground: palette.grey1,
-            toggleAndroidInactive: palette.grey2,
-            toggleAndroidBackgroundActive: palette.o2BluePrimary15,
+            loadingBar: palette.beyondBlue,
+            loadingBarBackground: palette.grey20,
+            toggleAndroidInactive: palette.grey30,
+            toggleAndroidBackgroundActive: palette.beyondBlue15,
             toggleAndroidActiveBrand: palette.white,
-            toggleAndroidInactiveBrand: palette.grey2,
-            toggleAndroidBackgroundActiveBrand: palette.o2BluePrimary15,
-            toggleAndroidBackgroundInactiveBrand: palette.o2BluePrimary30,
+            toggleAndroidInactiveBrand: palette.grey30,
+            toggleAndroidBackgroundActiveBrand: palette.beyondBlue15,
+            toggleAndroidBackgroundInactiveBrand: palette.white,
             iosControlKnob: palette.white,
-            controlKnobInverse: palette.o2BluePrimary,
-            controlKnobNegative: palette.o2BluePrimary,
-            controlKnobBrand: palette.o2BluePrimary,
-            divider: palette.grey2,
+            controlKnobInverse: palette.beyondBlue,
+            controlKnobNegative: palette.beyondBlue,
+            controlKnobBrand: palette.beyondBlue,
+            divider: palette.grey30,
             dividerInverse: applyAlpha(palette.white, 0.2),
             dividerNegative: applyAlpha(palette.white, 0.2),
             dividerBrand: applyAlpha(palette.white, 0.2),
-            navigationBarDivider: palette.o2BluePrimary,
-            badge: palette.pepper60,
-            feedbackErrorBackground: palette.pepper,
-            feedbackInfoBackground: palette.grey6,
-            brand: palette.o2BluePrimary,
-            brandHigh: palette.o2BluePrimary70,
+            navigationBarDivider: palette.darkBlue,
+            badge: palette.o2Red65,
+            feedbackErrorBackground: palette.o2Red60,
+            feedbackInfoBackground: palette.black,
+            brand: palette.beyondBlue,
+            brandHigh: palette.beyondBlue70,
             inverse: palette.white,
             negative: palette.white,
-            neutralHigh: palette.grey6,
-            neutralHighBrand: palette.white,
+            neutralHigh: palette.black,
             neutralHighNegative: palette.white,
-            neutralMedium: palette.grey5,
-            neutralMediumInverse: palette.grey5,
-            neutralMediumNegative: palette.grey5,
-            neutralMediumBrand: palette.grey5,
-            neutralLow: palette.grey1,
-            neutralLowAlternative: palette.grey2,
-            textPrimary: palette.grey6,
+            neutralHighBrand: palette.white,
+            neutralMedium: palette.grey60,
+            neutralMediumInverse: palette.grey60,
+            neutralMediumNegative: palette.grey60,
+            neutralMediumBrand: palette.grey60,
+            neutralLow: palette.grey20,
+            neutralLowAlternative: palette.grey30,
+            textPrimary: palette.black,
             textPrimaryInverse: palette.white,
             textPrimaryNegative: palette.white,
             textPrimaryBrand: palette.white,
             textPrimaryMedia: palette.white,
-            textSecondary: palette.grey5,
-            textSecondaryInverse: palette.o2BluePrimary15,
-            textSecondaryNegative: palette.o2BluePrimary15,
-            textSecondaryBrand: palette.o2BluePrimary15,
+            textSecondary: palette.grey60,
+            textSecondaryInverse: palette.beyondBlue10,
+            textSecondaryNegative: palette.beyondBlue10,
+            textSecondaryBrand: palette.beyondBlue10,
             textSecondaryMedia: palette.white,
             success: palette.o2Green,
-            warning: palette.o2Orange,
-            error: palette.pepper,
-            textError: palette.pepper,
+            warning: palette.o2Orange60,
+            error: palette.o2Red65,
+            textError: palette.o2Red65,
             textErrorInverse: palette.white,
             textErrorNegative: palette.white,
             textErrorBrand: palette.white,
-            promo: palette.o2Purple,
-            highlight: palette.o2Pink,
+            promo: palette.o2Pink,
+            highlight: palette.o2Pink80,
             successLow: palette.o2Green10,
             warningLow: palette.o2Orange10,
-            errorLow: palette.pepper10,
-            promoLow: palette.o2Purple10,
-            brandLow: palette.o2BluePrimary10,
+            errorLow: palette.o2Red10,
+            promoLow: palette.o2Pink15,
+            brandLow: palette.beyondBlue10,
             successHigh: palette.o2Green80,
             warningHigh: palette.o2Orange75,
-            errorHigh: palette.pepper60,
-            promoHigh: palette.o2Purple,
+            errorHigh: palette.o2Red65,
+            promoHigh: palette.o2Pink80,
             successHighInverse: palette.o2Green80,
             successHighNegative: palette.o2Green80,
             successHighBrand: palette.o2Green80,
             warningHighInverse: palette.o2Orange75,
             warningHighNegative: palette.o2Orange75,
             warningHighBrand: palette.o2Orange75,
-            errorHighInverse: palette.pepper60,
-            errorHighNegative: palette.pepper60,
-            errorHighBrand: palette.pepper60,
-            promoHighInverse: palette.o2Purple,
-            promoHighNegative: palette.o2Purple,
-            promoHighBrand: palette.o2Purple,
+            errorHighInverse: palette.o2Red65,
+            errorHighNegative: palette.o2Red65,
+            errorHighBrand: palette.o2Red65,
+            promoHighInverse: palette.o2Pink80,
+            promoHighNegative: palette.o2Pink80,
+            promoHighBrand: palette.o2Pink80,
             textNavigationBarPrimary: palette.white,
-            textNavigationBarSecondary: palette.o2BluePrimary30,
-            textNavigationSearchBarHint: palette.o2BluePrimary30,
+            textNavigationBarSecondary: palette.beyondBlue30,
+            textNavigationSearchBarHint: palette.beyondBlue30,
             textNavigationSearchBarText: palette.white,
-            textAppBar: palette.grey4,
-            textAppBarSelected: palette.o2BluePrimary,
-            iosGlassAppBar: palette.grey6,
-            iosGlassAppBarSelected: palette.o2BluePrimary,
-            customTabsBackground: palette.o2BluePrimary,
-            tagTextPromo: palette.o2Purple,
-            tagTextActive: palette.o2BluePrimary,
-            tagTextInactive: palette.grey5,
-            tagTextInfo: palette.o2BluePrimary,
+            textAppBar: palette.grey60,
+            textAppBarSelected: palette.beyondBlue,
+            iosGlassAppBar: palette.black,
+            iosGlassAppBarSelected: palette.beyondBlue55,
+            customTabsBackground: palette.beyondBlue,
+            tagTextPromo: palette.o2Pink80,
+            tagTextActive: palette.beyondBlue,
+            tagTextInactive: palette.grey60,
+            tagTextInfo: palette.beyondBlue,
             tagTextSuccess: palette.o2Green80,
             tagTextWarning: palette.o2Orange75,
-            tagTextError: palette.pepper60,
-            tagBackgroundPromo: palette.o2Purple10,
-            tagBackgroundActive: palette.o2BluePrimary10,
-            tagBackgroundInactive: palette.grey1,
-            tagBackgroundInfo: palette.o2BluePrimary10,
+            tagTextError: palette.o2Red65,
+            tagBackgroundPromo: palette.o2Pink15,
+            tagBackgroundActive: palette.beyondBlue10,
+            tagBackgroundInactive: palette.grey20,
+            tagBackgroundInfo: palette.beyondBlue10,
             tagBackgroundSuccess: palette.o2Green10,
             tagBackgroundWarning: palette.o2Orange10,
-            tagBackgroundError: palette.pepper10,
-            tagTextPromoInverse: palette.o2Purple,
-            tagTextPromoNegative: palette.o2Purple,
-            tagTextPromoBrand: palette.o2Purple,
-            tagTextActiveInverse: palette.o2BluePrimary,
-            tagTextActiveNegative: palette.o2BluePrimary,
-            tagTextActiveBrand: palette.o2BluePrimary,
-            tagTextInactiveInverse: palette.grey5,
-            tagTextInactiveNegative: palette.grey5,
-            tagTextInactiveBrand: palette.grey5,
-            tagTextInfoInverse: palette.o2BluePrimary,
-            tagTextInfoNegative: palette.o2BluePrimary,
-            tagTextInfoBrand: palette.o2BluePrimary,
+            tagBackgroundError: palette.o2Red10,
+            tagTextPromoInverse: palette.o2Pink80,
+            tagTextPromoNegative: palette.o2Pink80,
+            tagTextPromoBrand: palette.o2Pink80,
+            tagTextActiveInverse: palette.beyondBlue,
+            tagTextActiveNegative: palette.beyondBlue,
+            tagTextActiveBrand: palette.beyondBlue,
+            tagTextInactiveInverse: palette.grey60,
+            tagTextInactiveNegative: palette.grey60,
+            tagTextInactiveBrand: palette.grey60,
+            tagTextInfoInverse: palette.beyondBlue,
+            tagTextInfoNegative: palette.beyondBlue,
+            tagTextInfoBrand: palette.beyondBlue,
             tagTextSuccessInverse: palette.o2Green80,
             tagTextSuccessNegative: palette.o2Green80,
             tagTextSuccessBrand: palette.o2Green80,
             tagTextWarningInverse: palette.o2Orange75,
             tagTextWarningNegative: palette.o2Orange75,
             tagTextWarningBrand: palette.o2Orange75,
-            tagTextErrorInverse: palette.pepper60,
-            tagTextErrorNegative: palette.pepper60,
-            tagTextErrorBrand: palette.pepper60,
-            tagBackgroundPromoInverse: palette.o2Purple10,
-            tagBackgroundPromoNegative: palette.o2Purple10,
-            tagBackgroundPromoBrand: palette.o2Purple10,
-            tagBackgroundActiveInverse: palette.o2BluePrimary10,
-            tagBackgroundActiveNegative: palette.o2BluePrimary10,
-            tagBackgroundActiveBrand: palette.o2BluePrimary10,
-            tagBackgroundInactiveInverse: palette.grey1,
-            tagBackgroundInactiveNegative: palette.grey1,
-            tagBackgroundInactiveBrand: palette.grey1,
-            tagBackgroundInfoInverse: palette.o2BluePrimary10,
-            tagBackgroundInfoNegative: palette.o2BluePrimary10,
-            tagBackgroundInfoBrand: palette.o2BluePrimary10,
+            tagTextErrorInverse: palette.o2Red65,
+            tagTextErrorNegative: palette.o2Red65,
+            tagTextErrorBrand: palette.o2Red65,
+            tagBackgroundPromoInverse: palette.o2Pink15,
+            tagBackgroundPromoNegative: palette.o2Pink15,
+            tagBackgroundPromoBrand: palette.o2Pink15,
+            tagBackgroundActiveInverse: palette.beyondBlue10,
+            tagBackgroundActiveNegative: palette.beyondBlue10,
+            tagBackgroundActiveBrand: palette.beyondBlue10,
+            tagBackgroundInactiveInverse: palette.grey20,
+            tagBackgroundInactiveNegative: palette.grey20,
+            tagBackgroundInactiveBrand: palette.grey20,
+            tagBackgroundInfoInverse: palette.beyondBlue10,
+            tagBackgroundInfoNegative: palette.beyondBlue10,
+            tagBackgroundInfoBrand: palette.beyondBlue10,
             tagBackgroundSuccessInverse: palette.o2Green10,
             tagBackgroundSuccessNegative: palette.o2Green10,
             tagBackgroundSuccessBrand: palette.o2Green10,
             tagBackgroundWarningInverse: palette.o2Orange10,
             tagBackgroundWarningNegative: palette.o2Orange10,
             tagBackgroundWarningBrand: palette.o2Orange10,
-            tagBackgroundErrorInverse: palette.pepper10,
-            tagBackgroundErrorNegative: palette.pepper10,
-            tagBackgroundErrorBrand: palette.pepper10,
+            tagBackgroundErrorInverse: palette.o2Red10,
+            tagBackgroundErrorNegative: palette.o2Red10,
+            tagBackgroundErrorBrand: palette.o2Red10,
             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),
         },
@@ -362,25 +366,25 @@ export const getO2Skin: GetKnownSkin = () => {
             backgroundBrandTop: palette.darkModeBlack,
             backgroundBrandBottom: palette.darkModeBlack,
             appBarBackground: palette.darkModeGrey,
-            navigationBarBackground: palette.darkModeBlack,
-            backgroundDropZoneHover: applyAlpha(palette.white, 0.03),
-            backgroundDropZoneDragover: applyAlpha(palette.white, 0.05),
+            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,
+            navigationBarBackground: palette.darkModeBlack,
+            skeletonWave: palette.grey80,
             borderLow: palette.darkModeBlack,
             border: palette.darkModeGrey,
-            borderHigh: palette.grey5,
-            borderSelected: palette.o2BluePrimary30,
+            borderHigh: palette.grey45,
+            borderSelected: palette.beyondBlue30,
             coverBackgroundHover: applyAlpha(palette.darkModeBlack, 0.25),
             coverBackgroundPressed: applyAlpha(palette.darkModeBlack, 0.35),
-            buttonDangerBackground: palette.pepper,
-            buttonDangerBackgroundPressed: palette.pepper60,
-            buttonDangerBackgroundHover: palette.pepper60,
+            buttonDangerBackground: palette.o2Red60,
+            buttonDangerBackgroundPressed: palette.o2Red65,
+            buttonDangerBackgroundHover: palette.o2Red65,
             buttonLinkDangerBackgroundInverse: applyAlpha(palette.white, 0),
             buttonLinkDangerBackgroundNegative: applyAlpha(palette.white, 0),
             buttonLinkDangerBackgroundBrand: applyAlpha(palette.white, 0),
@@ -389,27 +393,27 @@ export const getO2Skin: GetKnownSkin = () => {
             buttonLinkDangerBackgroundInversePressed: applyAlpha(palette.white, 0.08),
             buttonLinkDangerBackgroundNegativePressed: applyAlpha(palette.white, 0.08),
             buttonLinkDangerBackgroundBrandPressed: applyAlpha(palette.white, 0.08),
-            buttonLinkDangerBackgroundMediaPressed: palette.pepper10,
+            buttonLinkDangerBackgroundMediaPressed: palette.o2Red10,
             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.08),
-            buttonPrimaryBackground: palette.darkModeO2BluePrimary,
-            buttonPrimaryBackgroundInverse: palette.darkModeO2BluePrimary,
-            buttonPrimaryBackgroundNegative: palette.darkModeO2BluePrimary,
-            buttonPrimaryBackgroundBrand: palette.darkModeO2BluePrimary,
+            buttonPrimaryBackground: palette.darkModeBeyondBlue,
+            buttonPrimaryBackgroundInverse: palette.darkModeBeyondBlue,
+            buttonPrimaryBackgroundNegative: palette.darkModeBeyondBlue,
+            buttonPrimaryBackgroundBrand: palette.darkModeBeyondBlue,
             buttonPrimaryBackgroundMedia: palette.white,
-            buttonPrimaryBackgroundHover: palette.darkModeO2BluePrimaryDark,
-            buttonPrimaryBackgroundInverseHover: palette.darkModeO2BluePrimaryDark,
-            buttonPrimaryBackgroundNegativeHover: palette.darkModeO2BluePrimaryDark,
-            buttonPrimaryBackgroundBrandHover: palette.darkModeO2BluePrimaryDark,
-            buttonPrimaryBackgroundMediaHover: palette.o2BluePrimary30,
-            buttonPrimaryBackgroundPressed: palette.darkModeO2BluePrimaryDark,
-            buttonPrimaryBackgroundInversePressed: palette.darkModeO2BluePrimaryDark,
-            buttonPrimaryBackgroundNegativePressed: palette.darkModeO2BluePrimaryDark,
-            buttonPrimaryBackgroundBrandPressed: palette.darkModeO2BluePrimaryDark,
-            buttonPrimaryBackgroundMediaPressed: palette.o2BluePrimary30,
+            buttonPrimaryBackgroundHover: palette.beyondBlue55,
+            buttonPrimaryBackgroundInverseHover: palette.beyondBlue55,
+            buttonPrimaryBackgroundNegativeHover: palette.beyondBlue55,
+            buttonPrimaryBackgroundBrandHover: palette.beyondBlue55,
+            buttonPrimaryBackgroundMediaHover: palette.beyondBlue10,
+            buttonPrimaryBackgroundPressed: palette.beyondBlue55,
+            buttonPrimaryBackgroundInversePressed: palette.beyondBlue55,
+            buttonPrimaryBackgroundNegativePressed: palette.beyondBlue55,
+            buttonPrimaryBackgroundBrandPressed: palette.beyondBlue55,
+            buttonPrimaryBackgroundMediaPressed: palette.beyondBlue15,
             buttonSecondaryBackgroundBrand: applyAlpha(palette.white, 0),
             buttonSecondaryBorder: palette.white,
             buttonSecondaryBorderInverse: palette.white,
@@ -420,7 +424,7 @@ export const getO2Skin: GetKnownSkin = () => {
             buttonSecondaryBorderInversePressed: palette.white,
             buttonSecondaryBorderNegativePressed: palette.white,
             buttonSecondaryBorderBrandPressed: palette.white,
-            buttonSecondaryBorderMediaPressed: palette.o2BluePrimary30,
+            buttonSecondaryBorderMediaPressed: palette.beyondBlue30,
             buttonSecondaryBackgroundHover: applyAlpha(palette.white, 0.15),
             buttonSecondaryBackgroundInverseHover: applyAlpha(palette.white, 0.15),
             buttonSecondaryBackgroundNegativeHover: applyAlpha(palette.white, 0.15),
@@ -431,108 +435,108 @@ export const getO2Skin: GetKnownSkin = () => {
             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.o2BluePrimary,
-            textButtonPrimaryInversePressed: palette.grey2,
-            textButtonPrimaryNegativePressed: palette.grey2,
-            textButtonPrimaryBrandPressed: palette.grey2,
-            textButtonPrimaryMediaPressed: palette.o2BluePrimary70,
-            textButtonSecondary: palette.grey2,
-            textButtonSecondaryInverse: palette.grey2,
-            textButtonSecondaryNegative: palette.grey2,
-            textButtonSecondaryBrand: palette.grey2,
+            textButtonPrimary: palette.white,
+            textButtonPrimaryInverse: palette.white,
+            textButtonPrimaryNegative: palette.white,
+            textButtonPrimaryBrand: palette.white,
+            textButtonPrimaryMedia: palette.beyondBlue,
+            textButtonPrimaryInversePressed: palette.white,
+            textButtonPrimaryNegativePressed: palette.white,
+            textButtonPrimaryBrandPressed: palette.white,
+            textButtonPrimaryMediaPressed: palette.beyondBlue70,
+            textButtonSecondary: palette.grey30,
+            textButtonSecondaryInverse: palette.grey30,
+            textButtonSecondaryNegative: palette.grey30,
+            textButtonSecondaryBrand: palette.grey30,
             textButtonSecondaryMedia: palette.white,
-            textButtonSecondaryPressed: palette.grey2,
-            textButtonSecondaryInversePressed: palette.grey2,
-            textButtonSecondaryNegativePressed: palette.grey2,
-            textButtonSecondaryBrandPressed: palette.grey2,
+            textButtonSecondaryPressed: palette.grey30,
+            textButtonSecondaryInversePressed: palette.grey30,
+            textButtonSecondaryNegativePressed: palette.grey30,
+            textButtonSecondaryBrandPressed: palette.grey30,
             textButtonSecondaryMediaPressed: palette.white,
-            textLink: palette.o2BluePrimary30,
-            textLinkInverse: palette.o2BluePrimary30,
-            textLinkNegative: palette.o2BluePrimary30,
-            textLinkBrand: palette.o2BluePrimary30,
+            textLink: palette.beyondBlue40,
+            textLinkInverse: palette.beyondBlue40,
+            textLinkNegative: palette.beyondBlue40,
+            textLinkBrand: palette.beyondBlue40,
             textLinkMedia: palette.white,
-            textLinkDanger: palette.pepper,
-            textLinkDangerMedia: palette.pepper,
-            textLinkSnackbar: palette.o2BluePrimary30,
-            textActivated: palette.o2BluePrimary30,
-            textBrand: palette.o2BluePrimary30,
-            inputBorder: palette.darkModeGrey6,
-            inputBorderInverse: palette.darkModeGrey6,
-            inputBorderNegative: palette.darkModeGrey6,
-            inputBorderBrand: palette.darkModeGrey6,
-            completedStep: palette.darkModeO2BluePrimary,
-            completedStepInverse: palette.darkModeO2BluePrimary,
-            completedStepNegative: palette.darkModeO2BluePrimary,
-            completedStepBrand: palette.darkModeO2BluePrimary,
-            control: palette.darkModeGrey6,
-            controlActivated: palette.o2BluePrimary30,
-            controlInverse: palette.darkModeGrey6,
-            controlNegative: palette.darkModeGrey6,
-            controlBrand: palette.darkModeGrey6,
-            controlActivatedInverse: palette.o2BluePrimary30,
-            controlActivatedNegative: palette.o2BluePrimary30,
-            controlActivatedBrand: palette.o2BluePrimary30,
-            controlError: palette.pepper,
-            chevronIndicator: palette.grey5,
+            textLinkDanger: palette.o2Red45,
+            textLinkDangerMedia: palette.o2Red65,
+            textLinkSnackbar: palette.beyondBlue30,
+            textActivated: palette.beyondBlue30,
+            textBrand: palette.beyondBlue30,
+            inputBorder: palette.grey45,
+            inputBorderInverse: palette.grey45,
+            inputBorderNegative: palette.grey45,
+            inputBorderBrand: palette.grey45,
+            completedStep: palette.darkModeBeyondBlue,
+            completedStepInverse: palette.darkModeBeyondBlue,
+            completedStepNegative: palette.darkModeBeyondBlue,
+            completedStepBrand: palette.darkModeBeyondBlue,
+            control: palette.grey45,
+            controlActivated: palette.darkModeBeyondBlue,
+            controlInverse: palette.grey45,
+            controlNegative: palette.grey45,
+            controlBrand: palette.grey45,
+            controlActivatedInverse: palette.darkModeBeyondBlue,
+            controlActivatedNegative: palette.darkModeBeyondBlue,
+            controlActivatedBrand: palette.darkModeBeyondBlue,
+            controlError: palette.o2Red45,
+            chevronIndicator: palette.grey60,
             barTrack: palette.darkModeGrey6,
             barTrackInverse: palette.darkModeGrey6,
             barTrackNegative: palette.darkModeGrey6,
             barTrackBrand: palette.darkModeGrey6,
-            loadingBar: palette.darkModeO2BluePrimary,
+            loadingBar: palette.darkModeBeyondBlue,
             loadingBarBackground: palette.darkModeGrey6,
-            toggleAndroidInactive: palette.grey4,
-            toggleAndroidBackgroundActive: palette.o2BlueLight30,
-            toggleAndroidActiveBrand: palette.o2BluePrimary30,
-            toggleAndroidInactiveBrand: palette.grey4,
-            toggleAndroidBackgroundActiveBrand: palette.o2BlueLight30,
-            toggleAndroidBackgroundInactiveBrand: palette.darkModeGrey6,
-            iosControlKnob: palette.grey2,
-            controlKnobInverse: palette.grey2,
-            controlKnobNegative: palette.grey2,
-            controlKnobBrand: palette.grey2,
-            badge: palette.pepper60,
-            feedbackErrorBackground: palette.pepper,
+            toggleAndroidInactive: palette.grey20,
+            toggleAndroidBackgroundActive: palette.beyondBlue15,
+            toggleAndroidActiveBrand: palette.darkModeBeyondBlue,
+            toggleAndroidInactiveBrand: palette.grey20,
+            toggleAndroidBackgroundActiveBrand: palette.beyondBlue15,
+            toggleAndroidBackgroundInactiveBrand: palette.grey45,
+            iosControlKnob: palette.grey30,
+            controlKnobInverse: palette.grey30,
+            controlKnobNegative: palette.grey30,
+            controlKnobBrand: palette.grey30,
+            badge: palette.o2Red65,
+            feedbackErrorBackground: palette.o2Red60,
             feedbackInfoBackground: palette.darkModeGrey6,
-            divider: applyAlpha(palette.white, 0.05),
-            dividerInverse: applyAlpha(palette.white, 0.05),
-            dividerNegative: applyAlpha(palette.white, 0.05),
-            dividerBrand: applyAlpha(palette.white, 0.05),
+            divider: applyAlpha(palette.white, 0.1),
+            dividerInverse: applyAlpha(palette.white, 0.1),
+            dividerNegative: applyAlpha(palette.white, 0.1),
+            dividerBrand: applyAlpha(palette.white, 0.1),
             navigationBarDivider: palette.darkModeBlack,
-            brand: palette.o2BluePrimary30,
+            brand: palette.beyondBlue30,
             brandHigh: applyAlpha(palette.white, 0.05),
-            inverse: palette.grey2,
-            negative: palette.grey2,
-            neutralHigh: palette.grey2,
-            neutralHighNegative: palette.grey2,
-            neutralHighBrand: palette.grey2,
-            neutralMedium: palette.grey5,
-            neutralMediumInverse: palette.grey5,
-            neutralMediumNegative: palette.grey5,
-            neutralMediumBrand: palette.grey5,
+            inverse: palette.grey30,
+            negative: palette.grey30,
+            neutralHigh: palette.grey30,
+            neutralHighBrand: palette.grey30,
+            neutralHighNegative: palette.grey30,
+            neutralMedium: palette.grey60,
+            neutralMediumInverse: palette.grey60,
+            neutralMediumNegative: palette.grey60,
+            neutralMediumBrand: palette.grey60,
             neutralLow: palette.darkModeGrey6,
             neutralLowAlternative: palette.darkModeGrey6,
-            textPrimary: palette.grey2,
-            textPrimaryInverse: palette.grey2,
-            textPrimaryNegative: palette.grey2,
-            textPrimaryBrand: palette.grey2,
+            textPrimary: palette.grey30,
+            textPrimaryInverse: palette.grey30,
+            textPrimaryNegative: palette.grey30,
+            textPrimaryBrand: palette.grey30,
             textPrimaryMedia: palette.white,
-            textSecondary: palette.grey4,
-            textSecondaryInverse: palette.grey4,
-            textSecondaryNegative: palette.grey4,
-            textSecondaryBrand: palette.grey4,
+            textSecondary: palette.grey45,
+            textSecondaryInverse: palette.grey45,
+            textSecondaryNegative: palette.grey45,
+            textSecondaryBrand: palette.grey45,
             textSecondaryMedia: palette.white,
             success: palette.o2Green,
             warning: palette.o2Orange,
-            error: palette.pepper,
-            textError: palette.pepper,
-            textErrorInverse: palette.pepper,
-            textErrorNegative: palette.pepper,
-            textErrorBrand: palette.pepper,
-            promo: palette.o2Purple,
+            error: palette.o2Red45,
+            textError: palette.o2Red45,
+            textErrorInverse: palette.o2Red45,
+            textErrorNegative: palette.o2Red45,
+            textErrorBrand: palette.o2Red45,
+            promo: palette.o2Pink,
             highlight: palette.o2Pink,
             successLow: palette.darkModeGrey6,
             warningLow: palette.darkModeGrey6,
@@ -541,36 +545,36 @@ export const getO2Skin: GetKnownSkin = () => {
             brandLow: palette.darkModeGrey6,
             successHigh: palette.o2Green40,
             warningHigh: palette.o2Orange40,
-            errorHigh: palette.pepper40,
-            promoHigh: palette.o2Purple30,
+            errorHigh: palette.o2Red40,
+            promoHigh: palette.o2Pink30,
             successHighInverse: palette.o2Green80,
             successHighNegative: palette.o2Green80,
             successHighBrand: palette.o2Green80,
             warningHighInverse: palette.o2Orange75,
             warningHighNegative: palette.o2Orange75,
             warningHighBrand: palette.o2Orange75,
-            errorHighInverse: palette.pepper60,
-            errorHighNegative: palette.pepper60,
-            errorHighBrand: palette.pepper60,
-            promoHighInverse: palette.o2Purple,
-            promoHighNegative: palette.o2Purple,
-            promoHighBrand: palette.o2Purple,
-            textNavigationBarPrimary: palette.grey2,
-            textNavigationBarSecondary: palette.grey4,
-            textNavigationSearchBarHint: palette.grey4,
-            textNavigationSearchBarText: palette.grey2,
-            textAppBar: palette.grey5,
-            textAppBarSelected: palette.grey2,
+            errorHighInverse: palette.o2Red65,
+            errorHighNegative: palette.o2Red65,
+            errorHighBrand: palette.o2Red65,
+            promoHighInverse: palette.o2Pink,
+            promoHighNegative: palette.o2Pink,
+            promoHighBrand: palette.o2Pink,
+            textNavigationBarPrimary: palette.grey30,
+            textNavigationBarSecondary: palette.grey45,
+            textNavigationSearchBarHint: palette.grey45,
+            textNavigationSearchBarText: palette.grey30,
+            textAppBar: palette.grey45,
+            textAppBarSelected: palette.beyondBlue40,
             iosGlassAppBar: palette.white,
-            iosGlassAppBarSelected: palette.white,
+            iosGlassAppBarSelected: palette.beyondBlue15,
             customTabsBackground: palette.darkModeBlack,
-            tagTextPromo: palette.o2Purple30,
-            tagTextActive: palette.o2BluePrimary30,
-            tagTextInactive: palette.grey5,
-            tagTextInfo: palette.o2BluePrimary30,
-            tagTextSuccess: palette.o2Green40,
-            tagTextWarning: palette.o2Orange40,
-            tagTextError: palette.pepper40,
+            tagTextPromo: palette.o2Pink,
+            tagTextActive: palette.beyondBlue30,
+            tagTextInactive: palette.grey40,
+            tagTextInfo: palette.beyondBlue30,
+            tagTextSuccess: palette.o2Green,
+            tagTextWarning: palette.o2Orange,
+            tagTextError: palette.o2Red45,
             tagBackgroundPromo: palette.darkModeGrey6,
             tagBackgroundActive: palette.darkModeGrey6,
             tagBackgroundInactive: palette.darkModeGrey6,
@@ -578,27 +582,27 @@ export const getO2Skin: GetKnownSkin = () => {
             tagBackgroundSuccess: palette.darkModeGrey6,
             tagBackgroundWarning: palette.darkModeGrey6,
             tagBackgroundError: palette.darkModeGrey6,
-            tagTextPromoInverse: palette.o2Purple30,
-            tagTextPromoNegative: palette.o2Purple30,
-            tagTextPromoBrand: palette.o2Purple30,
-            tagTextActiveInverse: palette.o2BluePrimary30,
-            tagTextActiveNegative: palette.o2BluePrimary30,
-            tagTextActiveBrand: palette.o2BluePrimary30,
-            tagTextInactiveInverse: palette.grey5,
-            tagTextInactiveNegative: palette.grey5,
-            tagTextInactiveBrand: palette.grey5,
-            tagTextInfoInverse: palette.o2BluePrimary30,
-            tagTextInfoNegative: palette.o2BluePrimary30,
-            tagTextInfoBrand: palette.o2BluePrimary30,
-            tagTextSuccessInverse: palette.o2Green40,
-            tagTextSuccessNegative: palette.o2Green40,
-            tagTextSuccessBrand: palette.o2Green40,
-            tagTextWarningInverse: palette.o2Orange40,
-            tagTextWarningNegative: palette.o2Orange40,
-            tagTextWarningBrand: palette.o2Orange40,
-            tagTextErrorInverse: palette.pepper40,
-            tagTextErrorNegative: palette.pepper40,
-            tagTextErrorBrand: palette.pepper40,
+            tagTextPromoInverse: palette.o2Pink,
+            tagTextPromoNegative: palette.o2Pink,
+            tagTextPromoBrand: palette.o2Pink,
+            tagTextActiveInverse: palette.beyondBlue30,
+            tagTextActiveNegative: palette.beyondBlue30,
+            tagTextActiveBrand: palette.beyondBlue30,
+            tagTextInactiveInverse: palette.grey40,
+            tagTextInactiveNegative: palette.grey40,
+            tagTextInactiveBrand: palette.grey40,
+            tagTextInfoInverse: palette.beyondBlue30,
+            tagTextInfoNegative: palette.beyondBlue30,
+            tagTextInfoBrand: palette.beyondBlue30,
+            tagTextSuccessInverse: palette.o2Green,
+            tagTextSuccessNegative: palette.o2Green,
+            tagTextSuccessBrand: palette.o2Green,
+            tagTextWarningInverse: palette.o2Orange,
+            tagTextWarningNegative: palette.o2Orange,
+            tagTextWarningBrand: palette.o2Orange,
+            tagTextErrorInverse: palette.o2Red45,
+            tagTextErrorNegative: palette.o2Red45,
+            tagTextErrorBrand: palette.o2Red45,
             tagBackgroundPromoInverse: palette.darkModeGrey6,
             tagBackgroundPromoNegative: palette.darkModeGrey6,
             tagBackgroundPromoBrand: palette.darkModeGrey6,
@@ -626,16 +630,15 @@ export const getO2Skin: GetKnownSkin = () => {
         borderRadii: {
             avatar: '50%',
             bar: '999px',
-            button: '4px',
+            button: '32px',
             checkbox: '2px',
-            container: '8px',
+            container: '16px',
             indicator: '24px',
             chip: '24px',
             tag: '24px',
-            input: '8px',
-            legacyDisplay: '16px',
+            input: '12px',
             popup: '8px',
-            sheet: '8px',
+            sheet: '16px',
             mediaSmall: '8px',
         },
         textPresets: {
@@ -646,7 +649,7 @@ export const getO2Skin: GetKnownSkin = () => {
             cardPretitleSnap: {lineHeight: {desktop: 24, mobile: 20}, size: {desktop: 16, mobile: 14}},
             cardSubtitleDefault: {lineHeight: {desktop: 24, mobile: 20}, size: {desktop: 16, mobile: 14}},
             cardSubtitleSnap: {lineHeight: {desktop: 24, mobile: 20}, size: {desktop: 16, mobile: 14}},
-            cardTitle: {weight: 'regular'},
+            cardTitle: {weight: 'medium'},
             cardTitleDefault: {lineHeight: {desktop: 28, mobile: 24}, size: {desktop: 20, mobile: 18}},
             cardTitleSnap: {lineHeight: {desktop: 24, mobile: 20}, size: {desktop: 16, mobile: 14}},
             chipLabel: {
@@ -657,7 +660,7 @@ export const getO2Skin: GetKnownSkin = () => {
             drawerTitle: {
                 lineHeight: {desktop: 32, mobile: 24},
                 size: {desktop: 28, mobile: 20},
-                weight: 'light',
+                weight: 'bold',
             },
             indicator: {weight: 'medium'},
             inputHelperText: {lineHeight: {desktop: 20, mobile: 16}, size: {desktop: 14, mobile: 12}},
@@ -677,20 +680,20 @@ export const getO2Skin: GetKnownSkin = () => {
             text2: {lineHeight: {desktop: 24, mobile: 20}, size: {desktop: 16, mobile: 14}},
             text3: {lineHeight: {desktop: 24, mobile: 24}, size: {desktop: 18, mobile: 16}},
             text4: {lineHeight: {desktop: 28, mobile: 24}, size: {desktop: 20, mobile: 18}},
-            text5: {lineHeight: {desktop: 32, mobile: 24}, size: {desktop: 28, mobile: 20}, weight: 'light'},
-            text6: {lineHeight: {desktop: 40, mobile: 32}, size: {desktop: 32, mobile: 24}, weight: 'light'},
-            text7: {lineHeight: {desktop: 48, mobile: 32}, size: {desktop: 40, mobile: 28}, weight: 'light'},
-            text8: {lineHeight: {desktop: 56, mobile: 40}, size: {desktop: 48, mobile: 32}, weight: 'light'},
-            text9: {lineHeight: {desktop: 64, mobile: 48}, size: {desktop: 56, mobile: 40}, weight: 'light'},
-            text10: {lineHeight: {desktop: 72, mobile: 56}, size: {desktop: 64, mobile: 48}, weight: 'light'},
+            text5: {lineHeight: {desktop: 32, mobile: 24}, size: {desktop: 28, mobile: 20}, weight: 'bold'},
+            text6: {lineHeight: {desktop: 40, mobile: 32}, size: {desktop: 32, mobile: 24}, weight: 'bold'},
+            text7: {lineHeight: {desktop: 48, mobile: 32}, size: {desktop: 40, mobile: 28}, weight: 'bold'},
+            text8: {lineHeight: {desktop: 56, mobile: 40}, size: {desktop: 48, mobile: 32}, weight: 'bold'},
+            text9: {lineHeight: {desktop: 64, mobile: 48}, size: {desktop: 56, mobile: 40}, weight: 'bold'},
+            text10: {lineHeight: {desktop: 72, mobile: 56}, size: {desktop: 64, mobile: 48}, weight: 'bold'},
             title1: {
                 lineHeight: {desktop: 20, mobile: 16},
                 size: {desktop: 14, mobile: 12},
                 weight: 'medium',
             },
-            title2: {lineHeight: {desktop: 24, mobile: 24}, size: {desktop: 18, mobile: 16}, weight: 'light'},
-            title3: {lineHeight: {desktop: 32, mobile: 24}, size: {desktop: 28, mobile: 20}, weight: 'light'},
-            title4: {lineHeight: {desktop: 40, mobile: 32}, size: {desktop: 32, mobile: 24}, weight: 'light'},
+            title2: {lineHeight: {desktop: 24, mobile: 24}, size: {desktop: 18, mobile: 16}, weight: 'bold'},
+            title3: {lineHeight: {desktop: 32, mobile: 24}, size: {desktop: 28, mobile: 20}, weight: 'bold'},
+            title4: {lineHeight: {desktop: 40, mobile: 32}, size: {desktop: 32, mobile: 24}, weight: 'bold'},
         },
         themeVariants: {
             successFeedback: 'inverse',