@ornikar/kitt-universal 26.3.1-late-ocean.ea9938a3219bcd82e7bbea585f5b7083975351b2.0 → 27.0.1-canary.01819bc93ab006bfbaa4e1335cd8afa2380068a0.0

package/dist/linaria-themes-node-22.17.es.mjs

@@ -7,117 +7,81 @@ const hex2rgba = (hex, alpha = 1) => {
 
 const createColorScale = colorScale => colorScale;
 const colorScales = {
-  eggshell: createColorScale({
-    1: '#faf9f8',
-    2: '#f4f3ef',
-    3: '#F0EEE9',
-    4: '#dedad2',
-    5: '#d1cdc5',
-    6: '#bab8ae',
-    7: '#aeaba3',
-    8: '#9c9a92',
-    9: '#8e8c83',
-    10: '#74726a',
-    11: '#3e3d3a',
-    12: '#282826'
+  deepPurple: createColorScale({
+    5: '#936C93',
+    6: '#7A587A',
+    7: '#6E4D6E',
+    8: '#563B56',
+    9: '#452F45'
   }),
-  violine: createColorScale({
-    1: '#f8f7ff',
-    2: '#f2f0ff',
-    3: '#ebe8ff',
-    4: '#d5cfff',
-    5: '#bfb5ff',
-    6: '#a99cff',
-    7: '#9180ff',
-    8: '#7b66ff',
-    9: '#624af7',
-    10: '#5139e1',
-    11: '#3a26b5',
-    12: '#0a0428'
+  beige: createColorScale({
+    1: '#F7F4EE',
+    2: '#F1ECE4',
+    3: '#EAE3D6',
+    4: '#E5DCCA',
+    5: '#DDD0B8',
+    6: '#C1B59F'
   }),
-  lavender: createColorScale({
-    1: '#fdf7ff',
-    2: '#fcf2ff',
-    3: '#FAEBFF',
-    4: '#f8e3ff',
-    5: '#f4d6ff',
-    6: '#efc2ff',
-    7: '#d298ff',
-    8: '#b97aff',
-    9: '#ac5ff9',
-    10: '#9d4ced',
-    11: '#6b347e',
-    12: '#290a34'
+  lightning: createColorScale({
+    5: '#FFF500',
+    7: '#43390A'
+  }),
+  rainbow: createColorScale({
+    pink: '#E4A4F9',
+    brick: '#951D12',
+    orange: '#DB6E2E',
+    gold: '#9A7600',
+    sun: '#EFD346',
+    'green-pine': '#1C5D47',
+    'green-grass': '#4DA00A',
+    'green-apple': '#DEF985',
+    'blue-electric': '#2850C4',
+    'blue-sky': '#B2F0FD'
+  }),
+  grey: createColorScale({
+    0: '#ffffff',
+    1: '#ECECEC',
+    2: '#CDCED0',
+    3: '#A8A8A8',
+    5: '#838383',
+    7: '#505050',
+    9: '#101010'
   }),
   blue: createColorScale({
-    1: '#f7faff',
-    2: '#f0f5ff',
-    3: '#e8f0ff',
-    4: '#d4e0ff',
-    5: '#baceff',
-    6: '#a1bbff',
-    7: '#87a9ff',
-    8: '#6e96ff',
-    9: '#5383ff',
-    10: '#4170eb',
-    11: '#0e4381',
-    12: '#061c36'
+    1: '#E9F4FC',
+    2: '#BCDFF6',
+    6: '#1772AB'
   }),
-  raspberry: createColorScale({
-    1: '#fff7fa',
-    2: '#fff0f5',
-    3: '#ffe8ef',
-    4: '#f0c7d4',
-    5: '#f0afc4',
-    6: '#f097b3',
-    7: '#f07fa3',
-    8: '#d95d84',
-    9: '#cf2a60',
-    10: '#c12558',
-    11: '#61192e',
-    12: '#29040f'
+  green: createColorScale({
+    1: '#ECFEDD',
+    2: '#DBFAC1',
+    6: '#438D06'
   }),
-  coral: createColorScale({
-    1: '#fff7f7',
-    2: '#fff0f0',
-    3: '#ffe8e8',
-    4: '#ffcfcf',
-    5: '#ffb5b5',
-    6: '#ff9c9c',
-    7: '#f57d7d',
-    8: '#eb6565',
-    9: '#e55050',
-    10: '#da3d3d',
-    11: '#8a2b1e',
-    12: '#330c07'
+  yellow: createColorScale({
+    1: '#FDF8E7',
+    2: '#FAEBB8',
+    6: '#EFC11F'
   }),
-  sun: createColorScale({
-    1: '#fffdf7',
-    2: '#fffbf0',
-    3: '#fff6de',
-    4: '#ffefc4',
-    5: '#ffe8ab',
-    6: '#ffe191',
-    7: '#ffda78',
-    8: '#ffd35e',
-    9: '#fdc32d',
-    10: '#f3a40c',
-    11: '#9f5600',
-    12: '#341c00'
+  red: createColorScale({
+    1: '#FDE4E3',
+    2: '#FAB8B8',
+    6: '#F14847'
   }),
-  green: createColorScale({
-    1: '#f9fff9',
-    2: '#e9ffeb',
-    3: '#d3fbd7',
-    4: '#bffbc5',
-    5: '#96f4b0',
-    6: '#7fefac',
-    7: '#21e8a3',
-    8: '#08d48e',
-    9: '#00c381',
-    10: '#00ac72',
-    11: '#0e8159',
-    12: '#03291c'
+  'beige-alpha': createColorScale({
+    '25': '#C1B59F40',
+    '40': '#C1B59F66',
+    '50': '#C1B59F80'
+  }),
+  'grey-alpha': createColorScale({
+    '25': '#10101040',
+    '35': '#10101059',
+    '50': '#10101080'
+  }),
+  'white-alpha': createColorScale({
+    '10': '#FFFFFF1A',
+    '20': '#FFFFFF33',
+    '80': '#FFFFFFCC',
+    '90': '#FFFFFFE5'
   })
 };
 const transformColorScalesToTokens = () => {
@@ -127,90 +91,44 @@ const transformColorScalesToTokens = () => {
     });
   }));
 };
-const lateOceanColorPalette = {
+const deepPurpleColorPalette = {
   ...transformColorScalesToTokens(),
-  /** @deprecated use violine.9 instead */
-  lateOcean: colorScales.violine[9],
-  /** @deprecated use violine.8 instead */
-  lateOceanLight1: colorScales.violine[8],
-  /** @deprecated use violine.6 instead */
-  lateOceanLight2: colorScales.violine[6],
-  /** @deprecated use lavender.6 instead */
-  lateOceanLight3: colorScales.lavender[6],
-  /** @deprecated use violine.12 instead */
-  lateOceanDark1: colorScales.violine[12],
-  /** @deprecated use lavender.5 instead */
-  warmEmbrace: colorScales.lavender[5],
-  /** @deprecated use lavender.3 instead */
-  warmEmbraceLight1: colorScales.lavender[3],
   white: '#FFFFFF',
   black: '#000000',
-  /** @deprecated use black instead */
-  black1000: '#000000',
-  /** @deprecated use eggshell.11 instead */
-  black800: colorScales.eggshell[11],
-  /** @deprecated use eggshell.10 instead */
-  black555: colorScales.eggshell[10],
-  /** @deprecated use eggshell.7 instead */
-  black400: colorScales.eggshell[7],
-  /** @deprecated use eggshell.4 instead */
-  black200: colorScales.eggshell[4],
-  /** @deprecated use eggshell.3 instead */
-  black100: colorScales.eggshell[3],
-  /** @deprecated use eggshell.2 instead */
-  black50: colorScales.eggshell[2],
-  /** @deprecated use eggshell.1 instead */
-  black25: colorScales.eggshell[1],
-  /** @deprecated use green.8 instead */
-  viride: colorScales.green[8],
-  /** @deprecated use coral.7 instead */
-  englishVermillon: colorScales.coral[7],
-  /** @deprecated use sun.8 instead */
-  goldCrayola: colorScales.sun[8],
-  /** @deprecated use blue.8 instead */
-  aero: colorScales.blue[8],
-  /** @deprecated use eggshell.1 instead */
-  seaShell: colorScales.eggshell[1],
-  transparent: 'transparent',
-  /** @deprecated use violine.4 instead */
-  moonPurple: colorScales.violine[4],
-  /** @deprecated use violine.2 instead */
-  moonPurpleLight1: colorScales.violine[2]
+  transparent: 'transparent'
 };
 
 const colors = {
-  primary: lateOceanColorPalette['violine.9'],
-  primaryLight: lateOceanColorPalette['violine.8'],
-  accent: lateOceanColorPalette['lavender.5'],
-  accentLight: lateOceanColorPalette['lavender.3'],
-  success: lateOceanColorPalette['green.8'],
-  correct: lateOceanColorPalette['green.8'],
-  danger: lateOceanColorPalette['coral.8'],
-  info: lateOceanColorPalette['blue.8'],
-  warning: lateOceanColorPalette['sun.8'],
-  separator: lateOceanColorPalette['eggshell.3'],
-  hover: lateOceanColorPalette['eggshell.3'],
-  white: lateOceanColorPalette.white,
-  black: lateOceanColorPalette.black,
-  blackDisabled: lateOceanColorPalette['eggshell.7'],
-  blackLight: lateOceanColorPalette['eggshell.10'],
-  blackAnthracite: lateOceanColorPalette['eggshell.11'],
-  uiBackground: lateOceanColorPalette['eggshell.1'],
-  uiBackgroundLight: lateOceanColorPalette.white,
-  transparent: lateOceanColorPalette.transparent,
-  disabled: lateOceanColorPalette['eggshell.2'],
+  primary: deepPurpleColorPalette['deepPurple.8'],
+  primaryLight: deepPurpleColorPalette['deepPurple.8'],
+  accent: deepPurpleColorPalette['beige.1'],
+  accentLight: deepPurpleColorPalette['beige.1'],
+  success: deepPurpleColorPalette['green.6'],
+  correct: deepPurpleColorPalette['green.6'],
+  danger: deepPurpleColorPalette['red.6'],
+  info: deepPurpleColorPalette['blue.6'],
+  warning: deepPurpleColorPalette['yellow.6'],
+  separator: deepPurpleColorPalette['beige.3'],
+  white: deepPurpleColorPalette['grey.0'],
+  black: deepPurpleColorPalette['grey.9'],
+  blackLight: deepPurpleColorPalette['grey.5'],
+  blackAnthracite: deepPurpleColorPalette['grey.7'],
+  uiBackground: deepPurpleColorPalette['beige.1'],
+  uiBackgroundLight: deepPurpleColorPalette['grey.0'],
+  transparent: deepPurpleColorPalette.transparent,
+  disabled: deepPurpleColorPalette['grey.1'],
   overlay: {
-    dark: 'rgba(41, 48, 51, 0.25)',
-    light: 'rgba(255, 255, 255, 0.90)'
+    dark: deepPurpleColorPalette['grey-alpha.50'],
+    light: deepPurpleColorPalette['white-alpha.80']
   }
 };
 
 const actionCard = {
-  borderRadius: 20,
+  borderRadius: 8,
   primary: {
     default: {
       backgroundColor: colors.uiBackgroundLight,
-      borderColor: lateOceanColorPalette['eggshell.3'],
+      borderColor: deepPurpleColorPalette['beige.2'],
       borderWidth: 1,
       shadow: {
         color: '',
@@ -222,8 +140,8 @@ const actionCard = {
       translateY: 0
     },
     hovered: {
-      backgroundColor: lateOceanColorPalette['eggshell.2'],
-      borderColor: lateOceanColorPalette['eggshell.3'],
+      backgroundColor: deepPurpleColorPalette['beige.1'],
+      borderColor: deepPurpleColorPalette['beige.2'],
       borderWidth: 1,
       shadow: {
         color: '',
@@ -235,8 +153,8 @@ const actionCard = {
       translateY: 0
     },
     disabled: {
-      backgroundColor: lateOceanColorPalette['eggshell.2'],
-      borderColor: lateOceanColorPalette['eggshell.3'],
+      backgroundColor: deepPurpleColorPalette['grey.1'],
+      borderColor: deepPurpleColorPalette['grey.1'],
       borderWidth: 1,
       shadow: {
         color: '',
@@ -248,8 +166,8 @@ const actionCard = {
       translateY: 0
     },
     focused: {
-      backgroundColor: lateOceanColorPalette['eggshell.2'],
-      borderColor: lateOceanColorPalette['eggshell.3'],
+      backgroundColor: deepPurpleColorPalette['beige.1'],
+      borderColor: deepPurpleColorPalette['beige.2'],
       borderWidth: 1,
       shadow: {
         color: '',
@@ -261,8 +179,8 @@ const actionCard = {
       translateY: 0
     },
     pressed: {
-      backgroundColor: lateOceanColorPalette['eggshell.2'],
-      borderColor: lateOceanColorPalette['eggshell.3'],
+      backgroundColor: deepPurpleColorPalette['beige.1'],
+      borderColor: deepPurpleColorPalette['beige.2'],
       borderWidth: 1,
       shadow: {
         color: '',
@@ -277,10 +195,10 @@ const actionCard = {
   'primary-border-soft': {
     default: {
       backgroundColor: colors.uiBackgroundLight,
-      borderColor: lateOceanColorPalette['violine.4'],
+      borderColor: deepPurpleColorPalette['beige.3'],
       borderWidth: 1,
       shadow: {
-        color: lateOceanColorPalette['violine.4'],
+        color: deepPurpleColorPalette['beige.3'],
         offsetX: 0,
         offsetY: 4,
         opacity: 1,
@@ -289,11 +207,11 @@ const actionCard = {
       translateY: 0
     },
     hovered: {
-      backgroundColor: lateOceanColorPalette['eggshell.2'],
-      borderColor: lateOceanColorPalette['violine.4'],
+      backgroundColor: deepPurpleColorPalette['beige.1'],
+      borderColor: deepPurpleColorPalette['beige.3'],
       borderWidth: 1,
       shadow: {
-        color: lateOceanColorPalette['violine.4'],
+        color: deepPurpleColorPalette['beige.3'],
         offsetX: 0,
         offsetY: 4,
         opacity: 1,
@@ -302,8 +220,8 @@ const actionCard = {
       translateY: 0
     },
     disabled: {
-      backgroundColor: lateOceanColorPalette['eggshell.2'],
-      borderColor: lateOceanColorPalette['eggshell.3'],
+      backgroundColor: deepPurpleColorPalette['grey.1'],
+      borderColor: deepPurpleColorPalette['grey.1'],
       borderWidth: 1,
       shadow: {
         color: '',
@@ -315,11 +233,11 @@ const actionCard = {
       translateY: 0
     },
     focused: {
-      backgroundColor: lateOceanColorPalette['eggshell.2'],
-      borderColor: lateOceanColorPalette['violine.4'],
+      backgroundColor: deepPurpleColorPalette['beige.1'],
+      borderColor: deepPurpleColorPalette['beige.3'],
       borderWidth: 1,
       shadow: {
-        color: lateOceanColorPalette['violine.4'],
+        color: deepPurpleColorPalette['beige.3'],
         offsetX: 0,
         offsetY: 4,
         opacity: 1,
@@ -328,8 +246,8 @@ const actionCard = {
       translateY: 0
     },
     pressed: {
-      backgroundColor: lateOceanColorPalette['eggshell.2'],
-      borderColor: lateOceanColorPalette['violine.4'],
+      backgroundColor: deepPurpleColorPalette['beige.1'],
+      borderColor: deepPurpleColorPalette['beige.3'],
       borderWidth: 1,
       shadow: {
         color: '',
@@ -344,10 +262,10 @@ const actionCard = {
   'primary-border-hard': {
     default: {
       backgroundColor: colors.uiBackgroundLight,
-      borderColor: lateOceanColorPalette['violine.9'],
+      borderColor: deepPurpleColorPalette['deepPurple.8'],
       borderWidth: 1,
       shadow: {
-        color: lateOceanColorPalette['violine.9'],
+        color: deepPurpleColorPalette['deepPurple.8'],
         offsetX: 0,
         offsetY: 4,
         opacity: 1,
@@ -356,11 +274,11 @@ const actionCard = {
       translateY: 0
     },
     hovered: {
-      backgroundColor: lateOceanColorPalette['eggshell.2'],
-      borderColor: lateOceanColorPalette['violine.9'],
+      backgroundColor: deepPurpleColorPalette['beige.1'],
+      borderColor: deepPurpleColorPalette['deepPurple.8'],
       borderWidth: 1,
       shadow: {
-        color: lateOceanColorPalette['violine.9'],
+        color: deepPurpleColorPalette['deepPurple.8'],
         offsetX: 0,
         offsetY: 4,
         opacity: 1,
@@ -369,8 +287,8 @@ const actionCard = {
       translateY: 0
     },
     disabled: {
-      backgroundColor: lateOceanColorPalette['eggshell.2'],
-      borderColor: lateOceanColorPalette['eggshell.3'],
+      backgroundColor: deepPurpleColorPalette['grey.1'],
+      borderColor: deepPurpleColorPalette['grey.1'],
       borderWidth: 1,
       shadow: {
         color: '',
@@ -382,11 +300,11 @@ const actionCard = {
       translateY: 0
     },
     focused: {
-      backgroundColor: lateOceanColorPalette['eggshell.2'],
-      borderColor: lateOceanColorPalette['violine.9'],
+      backgroundColor: deepPurpleColorPalette['beige.1'],
+      borderColor: deepPurpleColorPalette['deepPurple.8'],
       borderWidth: 1,
       shadow: {
-        color: lateOceanColorPalette['violine.9'],
+        color: deepPurpleColorPalette['deepPurple.8'],
         offsetX: 0,
         offsetY: 4,
         opacity: 1,
@@ -395,8 +313,8 @@ const actionCard = {
       translateY: 0
     },
     pressed: {
-      backgroundColor: lateOceanColorPalette['eggshell.2'],
-      borderColor: lateOceanColorPalette['violine.9'],
+      backgroundColor: deepPurpleColorPalette['beige.1'],
+      borderColor: deepPurpleColorPalette['deepPurple.8'],
       borderWidth: 1,
       shadow: {
         color: '',
@@ -410,8 +328,8 @@ const actionCard = {
   },
   secondary: {
     default: {
-      backgroundColor: lateOceanColorPalette['eggshell.2'],
-      borderColor: lateOceanColorPalette.transparent,
+      backgroundColor: deepPurpleColorPalette['beige.1'],
+      borderColor: deepPurpleColorPalette.transparent,
       borderWidth: 0,
       shadow: {
         color: '',
@@ -423,8 +341,8 @@ const actionCard = {
       translateY: 0
     },
     disabled: {
-      backgroundColor: lateOceanColorPalette['eggshell.2'],
-      borderColor: lateOceanColorPalette['eggshell.3'],
+      backgroundColor: deepPurpleColorPalette['grey.1'],
+      borderColor: deepPurpleColorPalette['grey.1'],
       borderWidth: 1,
       shadow: {
         color: '',
@@ -436,8 +354,8 @@ const actionCard = {
       translateY: 0
     },
     hovered: {
-      backgroundColor: lateOceanColorPalette['eggshell.3'],
-      borderColor: lateOceanColorPalette.transparent,
+      backgroundColor: deepPurpleColorPalette['beige.2'],
+      borderColor: deepPurpleColorPalette.transparent,
       borderWidth: 0,
       shadow: {
         color: '',
@@ -449,8 +367,8 @@ const actionCard = {
       translateY: 0
     },
     focused: {
-      backgroundColor: lateOceanColorPalette['eggshell.3'],
-      borderColor: lateOceanColorPalette.transparent,
+      backgroundColor: deepPurpleColorPalette['beige.2'],
+      borderColor: deepPurpleColorPalette.transparent,
       borderWidth: 0,
       shadow: {
         color: '',
@@ -462,8 +380,8 @@ const actionCard = {
       translateY: 0
     },
     pressed: {
-      backgroundColor: lateOceanColorPalette['eggshell.3'],
-      borderColor: lateOceanColorPalette.transparent,
+      backgroundColor: deepPurpleColorPalette['beige.2'],
+      borderColor: deepPurpleColorPalette.transparent,
       borderWidth: 0,
       shadow: {
         color: '',
@@ -477,11 +395,11 @@ const actionCard = {
   },
   highlight: {
     default: {
-      backgroundColor: lateOceanColorPalette['violine.2'],
-      borderColor: lateOceanColorPalette['violine.4'],
+      backgroundColor: deepPurpleColorPalette['beige.1'],
+      borderColor: deepPurpleColorPalette['beige.3'],
       borderWidth: 1,
       shadow: {
-        color: lateOceanColorPalette['violine.4'],
+        color: deepPurpleColorPalette['beige.3'],
         offsetX: 0,
         offsetY: 4,
         opacity: 1,
@@ -490,8 +408,8 @@ const actionCard = {
       translateY: 0
     },
     disabled: {
-      backgroundColor: lateOceanColorPalette['eggshell.2'],
-      borderColor: lateOceanColorPalette['eggshell.3'],
+      backgroundColor: deepPurpleColorPalette['grey.1'],
+      borderColor: deepPurpleColorPalette['grey.1'],
       borderWidth: 1,
       shadow: {
         color: '',
@@ -503,11 +421,11 @@ const actionCard = {
       translateY: 0
     },
     hovered: {
-      backgroundColor: hex2rgba(lateOceanColorPalette['violine.2'], 0.6),
-      borderColor: lateOceanColorPalette['violine.4'],
+      backgroundColor: hex2rgba(deepPurpleColorPalette['beige.1'], 0.6),
+      borderColor: deepPurpleColorPalette['beige.3'],
       borderWidth: 1,
       shadow: {
-        color: lateOceanColorPalette['violine.4'],
+        color: deepPurpleColorPalette['beige.3'],
         offsetX: 0,
         offsetY: 4,
         opacity: 1,
@@ -516,11 +434,11 @@ const actionCard = {
       translateY: 0
     },
     focused: {
-      backgroundColor: hex2rgba(lateOceanColorPalette['violine.2'], 0.6),
-      borderColor: lateOceanColorPalette['violine.4'],
+      backgroundColor: hex2rgba(deepPurpleColorPalette['beige.1'], 0.6),
+      borderColor: deepPurpleColorPalette['beige.3'],
       borderWidth: 1,
       shadow: {
-        color: lateOceanColorPalette['violine.4'],
+        color: deepPurpleColorPalette['beige.3'],
         offsetX: 0,
         offsetY: 4,
         opacity: 1,
@@ -529,8 +447,8 @@ const actionCard = {
       translateY: 0
     },
     pressed: {
-      backgroundColor: hex2rgba(lateOceanColorPalette['violine.2'], 0.6),
-      borderColor: lateOceanColorPalette['violine.4'],
+      backgroundColor: hex2rgba(deepPurpleColorPalette['beige.1'], 0.6),
+      borderColor: deepPurpleColorPalette['beige.3'],
       borderWidth: 1,
       shadow: {
         color: '',
@@ -548,42 +466,28 @@ const defaultAvatarSize = 40;
 const defaultAvatarIconSize = 20;
 const largeAvatarSize = 120;
 const largeAvatarIconSize = 30;
-
-// export interface AvatarThemeBackgroundColorVariant {
-//   default: string;
-//   light: string;
-//   dark: string;
-//   disabled: string;
-// }
-
-// export interface AvatarThemeColorVariant {
-//   default: string;
-//   light: string;
-//   disabled: string;
-// }
-
 const avatar = {
-  borderRadius: 10,
+  borderRadius: 4,
   size: defaultAvatarSize,
   iconSize: defaultAvatarIconSize,
   default: {
-    color: lateOceanColorPalette.white,
-    backgroundColor: colors.primary
+    color: deepPurpleColorPalette['white-alpha.80'],
+    backgroundColor: deepPurpleColorPalette['deepPurple.8']
   },
   light: {
-    color: lateOceanColorPalette.black,
-    backgroundColor: lateOceanColorPalette['eggshell.3']
+    color: deepPurpleColorPalette['beige.6'],
+    backgroundColor: deepPurpleColorPalette['beige.1']
   },
   dark: {
-    color: lateOceanColorPalette.white,
-    backgroundColor: lateOceanColorPalette['eggshell.12']
+    color: deepPurpleColorPalette['white-alpha.80'],
+    backgroundColor: deepPurpleColorPalette['grey.9']
   },
   disabled: {
-    color: lateOceanColorPalette['eggshell.5'],
-    backgroundColor: lateOceanColorPalette['eggshell.3']
+    color: deepPurpleColorPalette['grey.3'],
+    backgroundColor: deepPurpleColorPalette['grey.1']
   },
   large: {
-    borderRadius: 30,
+    borderRadius: 8,
     size: largeAvatarSize,
     iconSize: largeAvatarIconSize
   }
@@ -596,7 +500,7 @@ const bottomSheet = {
     padding: spacing * 4
   },
   handle: {
-    backgroundColor: lateOceanColorPalette.black200
+    backgroundColor: deepPurpleColorPalette['beige.3']
   }
 };
 
@@ -664,9 +568,9 @@ const button = {
       pressedBackgroundColor: 'rgba(255, 255, 255, 0.05)',
       hoverBackgroundColor: 'rgba(255, 255, 255, 0.05)',
       focusBorderColor: 'rgba(255, 255, 255, 0.4)',
-      color: lateOceanColorPalette.white,
-      hoverColor: lateOceanColorPalette.white,
-      activeColor: lateOceanColorPalette.white
+      color: deepPurpleColorPalette.white,
+      hoverColor: deepPurpleColorPalette.white,
+      activeColor: deepPurpleColorPalette.white
     }
   },
   primary: {
@@ -679,11 +583,11 @@ const button = {
     ghost: {
       backgroundColor: colors.uiBackgroundLight,
       pressedBackgroundColor: colors.uiBackground,
-      hoverBackgroundColor: colors.hover,
+      hoverBackgroundColor: deepPurpleColorPalette['beige.2'],
       focusBorderColor: 'rgba(255,255,255, 0.4)',
       color: colors.primary,
-      hoverColor: colors.hover,
-      activeColor: colors.hover
+      hoverColor: deepPurpleColorPalette['beige.2'],
+      activeColor: deepPurpleColorPalette['beige.2']
     }
   },
   dark: {
@@ -696,19 +600,19 @@ const button = {
   },
   danger: {
     default: {
-      backgroundColor: lateOceanColorPalette['coral.3'],
-      pressedBackgroundColor: lateOceanColorPalette['coral.4'],
-      hoverBackgroundColor: lateOceanColorPalette['coral.4'],
-      focusBorderColor: lateOceanColorPalette['coral.4']
+      backgroundColor: deepPurpleColorPalette['red.1'],
+      pressedBackgroundColor: deepPurpleColorPalette['red.2'],
+      hoverBackgroundColor: deepPurpleColorPalette['red.2'],
+      focusBorderColor: deepPurpleColorPalette['red.2']
     },
     ghost: {
       backgroundColor: colors.uiBackgroundLight,
       pressedBackgroundColor: colors.uiBackground,
-      hoverBackgroundColor: colors.hover,
+      hoverBackgroundColor: deepPurpleColorPalette['beige.2'],
       focusBorderColor: 'rgba(255, 255, 255, 0.4)',
-      color: lateOceanColorPalette['coral.9'],
-      hoverColor: lateOceanColorPalette['coral.9'],
-      activeColor: lateOceanColorPalette['coral.9']
+      color: deepPurpleColorPalette['red.6'],
+      hoverColor: deepPurpleColorPalette['red.6'],
+      activeColor: deepPurpleColorPalette['red.6']
     }
   },
   subtle: {
@@ -749,14 +653,14 @@ const button = {
       backgroundColor: colors.disabled,
       pressedBackgroundColor: colors.disabled,
       hoverBackgroundColor: colors.disabled,
-      focusBorderColor: lateOceanColorPalette.black100,
-      borderColor: lateOceanColorPalette.black100
+      focusBorderColor: deepPurpleColorPalette['beige.2'],
+      borderColor: deepPurpleColorPalette['beige.2']
     }
   }
 };
 
 const buttonBadge = {
-  backgroundColor: lateOceanColorPalette['coral.10'],
+  backgroundColor: deepPurpleColorPalette['red.6'],
   dimensions: {
     withBadge: {
       width: 10,
@@ -785,7 +689,7 @@ const card = {
     borderColor: colors.separator
   },
   subtle: {
-    backgroundColor: lateOceanColorPalette.black50,
+    backgroundColor: deepPurpleColorPalette['beige.1'],
     borderColor: colors.separator
   }
 };
@@ -845,17 +749,17 @@ const choices = {
       small: 24
     },
     backgroundColor: {
-      default: lateOceanColorPalette.black50,
+      default: deepPurpleColorPalette['beige.1'],
       disabled: colors.disabled,
       selected: colors.primary,
-      pressed: lateOceanColorPalette.lateOceanLight1,
-      hover: lateOceanColorPalette.black100,
-      hoverWhenSelected: lateOceanColorPalette.lateOceanLight1
+      pressed: deepPurpleColorPalette['deepPurple.7'],
+      hover: deepPurpleColorPalette['beige.2'],
+      hoverWhenSelected: deepPurpleColorPalette['deepPurple.7']
     },
     disabled: {
       border: {
         width: 2,
-        color: lateOceanColorPalette.black100
+        color: deepPurpleColorPalette['beige.2']
       }
     },
     transition: {
@@ -920,19 +824,19 @@ const autocomplete = {
       backgroundColor: colors.white
     },
     hovered: {
-      backgroundColor: lateOceanColorPalette.black50
+      backgroundColor: deepPurpleColorPalette['beige.1']
     },
     focused: {
-      backgroundColor: lateOceanColorPalette.black50
+      backgroundColor: deepPurpleColorPalette['beige.1']
     },
     selected: {
-      backgroundColor: lateOceanColorPalette.black50
+      backgroundColor: deepPurpleColorPalette['beige.1']
     },
     highlighted: {
-      backgroundColor: lateOceanColorPalette.black50
+      backgroundColor: deepPurpleColorPalette['beige.1']
     },
     pressed: {
-      backgroundColor: lateOceanColorPalette.black100
+      backgroundColor: deepPurpleColorPalette['beige.1']
     }
   },
   optionsContainer: {
@@ -1000,37 +904,37 @@ const datePicker = {
 
 const inputStatesStyle = {
   default: {
-    backgroundColor: lateOceanColorPalette.white,
-    borderColor: lateOceanColorPalette['eggshell.4'],
-    color: lateOceanColorPalette.black
+    backgroundColor: deepPurpleColorPalette.white,
+    borderColor: deepPurpleColorPalette['beige.3'],
+    color: deepPurpleColorPalette.black
   },
   pending: {
-    backgroundColor: lateOceanColorPalette.white,
-    borderColor: lateOceanColorPalette['eggshell.3'],
-    color: lateOceanColorPalette.black
+    backgroundColor: deepPurpleColorPalette.white,
+    borderColor: deepPurpleColorPalette['beige.2'],
+    color: deepPurpleColorPalette.black
   },
   valid: {
-    backgroundColor: lateOceanColorPalette.white,
-    borderColor: lateOceanColorPalette['eggshell.4'],
-    color: lateOceanColorPalette.black
+    backgroundColor: deepPurpleColorPalette.white,
+    borderColor: deepPurpleColorPalette['beige.3'],
+    color: deepPurpleColorPalette.black
   },
   hover: {
-    backgroundColor: lateOceanColorPalette['eggshell.1'],
-    borderColor: lateOceanColorPalette['eggshell.5'],
-    color: lateOceanColorPalette.black
+    backgroundColor: deepPurpleColorPalette['beige.1'],
+    borderColor: deepPurpleColorPalette['beige.4'],
+    color: deepPurpleColorPalette.black
   },
   focus: {
-    borderColor: lateOceanColorPalette['violine.9'],
-    color: lateOceanColorPalette.black
+    borderColor: deepPurpleColorPalette['deepPurple.8'],
+    color: deepPurpleColorPalette.black
   },
   disabled: {
-    backgroundColor: lateOceanColorPalette['eggshell.2'],
-    borderColor: lateOceanColorPalette['eggshell.4'],
-    color: lateOceanColorPalette['eggshell.6']
+    backgroundColor: deepPurpleColorPalette['grey.1'],
+    borderColor: deepPurpleColorPalette['grey.1'],
+    color: deepPurpleColorPalette['grey.3']
   },
   invalid: {
-    borderColor: lateOceanColorPalette['eggshell.3'],
-    color: lateOceanColorPalette.black
+    borderColor: deepPurpleColorPalette['beige.2'],
+    color: deepPurpleColorPalette.black
   }
 };
 const webAnimationDuration = '200ms';
@@ -1039,11 +943,11 @@ const webAnimationProperties = ['border-color', 'background-color'];
 const input = {
   minHeight: 40,
   color: {
-    selection: lateOceanColorPalette['violine.9'],
-    placeholder: lateOceanColorPalette['eggshell.9']
+    selection: deepPurpleColorPalette['deepPurple.8'],
+    placeholder: deepPurpleColorPalette['beige.6']
   },
   borderWidth: 1,
-  borderRadius: 8,
+  borderRadius: 4,
   icon: {
     size: 20
   },
@@ -1080,7 +984,7 @@ const inputTag = {
     labelColor: colors.uiBackgroundLight
   },
   default: {
-    backgroundColor: lateOceanColorPalette.black50,
+    backgroundColor: deepPurpleColorPalette['beige.1'],
     labelColor: colors.black
   },
   borderRadius: 10,
@@ -1090,9 +994,9 @@ const inputTag = {
 const radio = {
   size: 24,
   unchecked: {
-    borderWidth: 2,
+    borderWidth: 1,
     backgroundColor: colors.uiBackgroundLight,
-    borderColor: lateOceanColorPalette.black200
+    borderColor: deepPurpleColorPalette['beige.3']
   },
   checked: {
     backgroundColor: colors.primary,
@@ -1109,8 +1013,9 @@ const radio = {
     borderColor: colors.primary
   },
   disabled: {
-    backgroundColor: colors.disabled,
-    borderColor: colors.separator
+    backgroundColor: deepPurpleColorPalette['grey.3'],
+    borderColor: colors.transparent,
+    innerBackgroundColor: deepPurpleColorPalette['grey.1']
   },
   transition: {
     duration: '200ms',
@@ -1121,14 +1026,19 @@ const radio = {
 const radioButtonGroup = {
   item: {
     minHeight: 40,
-    borderWidth: 2,
-    borderRadius: 20,
+    borderWidth: 1,
+    borderRadius: 4,
+    font: {
+      color: {
+        disabled: deepPurpleColorPalette['grey.3']
+      }
+    },
     borderColor: {
       default: colors.separator,
       hover: colors.primary,
       pressed: colors.primary,
       active: colors.primary,
-      disabled: colors.separator
+      disabled: colors.disabled
     },
     backgroundColor: {
       default: colors.uiBackgroundLight,
@@ -1169,17 +1079,17 @@ const toggle = {
           medium: 50,
           large: 66
         },
-        labelColor: lateOceanColorPalette.black,
+        labelColor: deepPurpleColorPalette.black,
         backgroundColor: {
-          checked: lateOceanColorPalette['violine.9'],
-          unchecked: lateOceanColorPalette['eggshell.4']
+          checked: deepPurpleColorPalette['deepPurple.8'],
+          unchecked: deepPurpleColorPalette['beige.3']
         },
         border: {
           color: 'transparent',
           width: 1
         },
         circle: {
-          backgroundColor: lateOceanColorPalette.white,
+          backgroundColor: deepPurpleColorPalette.white,
           width: {
             medium: 18,
             large: 24
@@ -1207,17 +1117,17 @@ const toggle = {
           medium: 50,
           large: 66
         },
-        labelColor: lateOceanColorPalette.black,
+        labelColor: deepPurpleColorPalette.black,
         backgroundColor: {
-          checked: lateOceanColorPalette['violine.8'],
-          unchecked: lateOceanColorPalette['eggshell.7']
+          checked: deepPurpleColorPalette['deepPurple.7'],
+          unchecked: deepPurpleColorPalette['beige.4']
         },
         border: {
           color: 'transparent',
           width: 1
         },
         circle: {
-          backgroundColor: lateOceanColorPalette.white,
+          backgroundColor: deepPurpleColorPalette.white,
           width: {
             medium: 18,
             large: 24
@@ -1245,17 +1155,17 @@ const toggle = {
           medium: 50,
           large: 66
         },
-        labelColor: lateOceanColorPalette.black,
+        labelColor: deepPurpleColorPalette.black,
         backgroundColor: {
-          checked: lateOceanColorPalette['violine.9'],
-          unchecked: lateOceanColorPalette['eggshell.4']
+          checked: deepPurpleColorPalette['deepPurple.8'],
+          unchecked: deepPurpleColorPalette['beige.3']
         },
         border: {
-          color: lateOceanColorPalette.white,
+          color: deepPurpleColorPalette.white,
           width: 1
         },
         circle: {
-          backgroundColor: lateOceanColorPalette.white,
+          backgroundColor: deepPurpleColorPalette.white,
           width: {
             medium: 18,
             large: 24
@@ -1270,7 +1180,7 @@ const toggle = {
           }
         },
         wrapperBorder: {
-          color: lateOceanColorPalette.black,
+          color: deepPurpleColorPalette.black,
           width: 1
         }
       },
@@ -1283,17 +1193,17 @@ const toggle = {
           medium: 50,
           large: 66
         },
-        labelColor: lateOceanColorPalette.black,
+        labelColor: deepPurpleColorPalette.black,
         backgroundColor: {
-          checked: lateOceanColorPalette['violine.9'],
-          unchecked: lateOceanColorPalette['eggshell.4']
+          checked: deepPurpleColorPalette['deepPurple.8'],
+          unchecked: deepPurpleColorPalette['beige.3']
         },
         border: {
-          color: lateOceanColorPalette.white,
+          color: deepPurpleColorPalette.white,
           width: 1
         },
         circle: {
-          backgroundColor: lateOceanColorPalette.white,
+          backgroundColor: deepPurpleColorPalette.white,
           width: {
             medium: 18,
             large: 24
@@ -1308,7 +1218,7 @@ const toggle = {
           }
         },
         wrapperBorder: {
-          color: lateOceanColorPalette.black,
+          color: deepPurpleColorPalette.black,
           width: 1
         }
       }
@@ -1323,17 +1233,17 @@ const toggle = {
           medium: 50,
           large: 66
         },
-        labelColor: lateOceanColorPalette['eggshell.3'],
+        labelColor: deepPurpleColorPalette['beige.2'],
         backgroundColor: {
-          checked: lateOceanColorPalette['eggshell.3'],
-          unchecked: lateOceanColorPalette['eggshell.3']
+          checked: deepPurpleColorPalette['grey.1'],
+          unchecked: deepPurpleColorPalette['grey.1']
         },
         border: {
           color: 'transparent',
           width: 1
         },
         circle: {
-          backgroundColor: lateOceanColorPalette['eggshell.5'],
+          backgroundColor: deepPurpleColorPalette['grey.3'],
           width: {
             medium: 18,
             large: 24
@@ -1361,17 +1271,17 @@ const toggle = {
           medium: 50,
           large: 66
         },
-        labelColor: lateOceanColorPalette['eggshell.3'],
+        labelColor: deepPurpleColorPalette['beige.2'],
         backgroundColor: {
-          checked: lateOceanColorPalette['eggshell.3'],
-          unchecked: lateOceanColorPalette['eggshell.3']
+          checked: deepPurpleColorPalette['grey.1'],
+          unchecked: deepPurpleColorPalette['grey.1']
         },
         border: {
           color: 'transparent',
           width: 1
         },
         circle: {
-          backgroundColor: lateOceanColorPalette['eggshell.5'],
+          backgroundColor: deepPurpleColorPalette['grey.3'],
           width: {
             medium: 18,
             large: 24
@@ -1399,17 +1309,17 @@ const toggle = {
           medium: 50,
           large: 66
         },
-        labelColor: lateOceanColorPalette['eggshell.3'],
+        labelColor: deepPurpleColorPalette['beige.2'],
         backgroundColor: {
-          checked: lateOceanColorPalette['eggshell.3'],
-          unchecked: lateOceanColorPalette['eggshell.3']
+          checked: deepPurpleColorPalette['grey.1'],
+          unchecked: deepPurpleColorPalette['grey.1']
         },
         border: {
           color: 'transparent',
           width: 1
         },
         circle: {
-          backgroundColor: lateOceanColorPalette['eggshell.5'],
+          backgroundColor: deepPurpleColorPalette['grey.3'],
           width: {
             medium: 18,
             large: 24
@@ -1424,7 +1334,7 @@ const toggle = {
           }
         },
         wrapperBorder: {
-          color: lateOceanColorPalette.black,
+          color: deepPurpleColorPalette.black,
           width: 1
         }
       },
@@ -1437,17 +1347,17 @@ const toggle = {
           medium: 50,
           large: 66
         },
-        labelColor: lateOceanColorPalette['eggshell.3'],
+        labelColor: deepPurpleColorPalette['beige.2'],
         backgroundColor: {
-          checked: lateOceanColorPalette['eggshell.3'],
-          unchecked: lateOceanColorPalette['eggshell.3']
+          checked: deepPurpleColorPalette['grey.1'],
+          unchecked: deepPurpleColorPalette['grey.1']
         },
         border: {
           color: 'transparent',
           width: 1
         },
         circle: {
-          backgroundColor: lateOceanColorPalette['eggshell.5'],
+          backgroundColor: deepPurpleColorPalette['grey.3'],
           width: {
             medium: 18,
             large: 24
@@ -1462,7 +1372,7 @@ const toggle = {
           }
         },
         wrapperBorder: {
-          color: lateOceanColorPalette.black,
+          color: deepPurpleColorPalette.black,
           width: 1
         }
       }
@@ -1479,17 +1389,17 @@ const toggle = {
           medium: 50,
           large: 66
         },
-        labelColor: lateOceanColorPalette.white,
+        labelColor: deepPurpleColorPalette.white,
         backgroundColor: {
-          checked: lateOceanColorPalette['violine.12'],
-          unchecked: lateOceanColorPalette['violine.4']
+          checked: deepPurpleColorPalette['deepPurple.9'],
+          unchecked: deepPurpleColorPalette['beige.3']
         },
         border: {
           color: 'transparent',
           width: 1
         },
         circle: {
-          backgroundColor: lateOceanColorPalette.white,
+          backgroundColor: deepPurpleColorPalette.white,
           width: {
             medium: 18,
             large: 24
@@ -1517,17 +1427,17 @@ const toggle = {
           medium: 50,
           large: 66
         },
-        labelColor: lateOceanColorPalette.white,
+        labelColor: deepPurpleColorPalette.white,
         backgroundColor: {
-          checked: lateOceanColorPalette['violine.12'],
-          unchecked: lateOceanColorPalette['violine.4']
+          checked: deepPurpleColorPalette['deepPurple.9'],
+          unchecked: deepPurpleColorPalette['beige.3']
         },
         border: {
           color: 'transparent',
           width: 1
         },
         circle: {
-          backgroundColor: lateOceanColorPalette.white,
+          backgroundColor: deepPurpleColorPalette.white,
           width: {
             medium: 18,
             large: 24
@@ -1555,17 +1465,17 @@ const toggle = {
           medium: 50,
           large: 66
         },
-        labelColor: lateOceanColorPalette.white,
+        labelColor: deepPurpleColorPalette.white,
         backgroundColor: {
-          checked: lateOceanColorPalette['violine.12'],
-          unchecked: lateOceanColorPalette['violine.4']
+          checked: deepPurpleColorPalette['deepPurple.9'],
+          unchecked: deepPurpleColorPalette['beige.3']
         },
         border: {
-          color: lateOceanColorPalette['violine.8'],
+          color: deepPurpleColorPalette['deepPurple.7'],
           width: 1
         },
         circle: {
-          backgroundColor: lateOceanColorPalette.white,
+          backgroundColor: deepPurpleColorPalette.white,
           width: {
             medium: 18,
             large: 24
@@ -1580,7 +1490,7 @@ const toggle = {
           }
         },
         wrapperBorder: {
-          color: lateOceanColorPalette.white,
+          color: deepPurpleColorPalette.white,
           width: 1
         }
       },
@@ -1593,17 +1503,17 @@ const toggle = {
           medium: 50,
           large: 66
         },
-        labelColor: lateOceanColorPalette.white,
+        labelColor: deepPurpleColorPalette.white,
         backgroundColor: {
-          checked: lateOceanColorPalette['violine.12'],
-          unchecked: lateOceanColorPalette['violine.4']
+          checked: deepPurpleColorPalette['deepPurple.9'],
+          unchecked: deepPurpleColorPalette['beige.3']
         },
         border: {
-          color: lateOceanColorPalette['violine.8'],
+          color: deepPurpleColorPalette['deepPurple.7'],
           width: 1
         },
         circle: {
-          backgroundColor: lateOceanColorPalette.white,
+          backgroundColor: deepPurpleColorPalette.white,
           width: {
             medium: 18,
             large: 24
@@ -1618,7 +1528,7 @@ const toggle = {
           }
         },
         wrapperBorder: {
-          color: lateOceanColorPalette.white,
+          color: deepPurpleColorPalette.white,
           width: 1
         }
       }
@@ -1633,17 +1543,17 @@ const toggle = {
           medium: 50,
           large: 66
         },
-        labelColor: lateOceanColorPalette['violine.6'],
+        labelColor: deepPurpleColorPalette['beige.5'],
         backgroundColor: {
-          checked: lateOceanColorPalette['violine.6'],
-          unchecked: lateOceanColorPalette['violine.6']
+          checked: deepPurpleColorPalette['beige.5'],
+          unchecked: deepPurpleColorPalette['beige.5']
         },
         border: {
           color: 'transparent',
           width: 1
         },
         circle: {
-          backgroundColor: lateOceanColorPalette['violine.8'],
+          backgroundColor: deepPurpleColorPalette['deepPurple.7'],
           width: {
             medium: 18,
             large: 24
@@ -1671,17 +1581,17 @@ const toggle = {
           medium: 50,
           large: 66
         },
-        labelColor: lateOceanColorPalette['violine.6'],
+        labelColor: deepPurpleColorPalette['beige.5'],
         backgroundColor: {
-          checked: lateOceanColorPalette['violine.6'],
-          unchecked: lateOceanColorPalette['violine.6']
+          checked: deepPurpleColorPalette['beige.5'],
+          unchecked: deepPurpleColorPalette['beige.5']
         },
         border: {
           color: 'transparent',
           width: 1
         },
         circle: {
-          backgroundColor: lateOceanColorPalette['violine.8'],
+          backgroundColor: deepPurpleColorPalette['deepPurple.7'],
           width: {
             medium: 18,
             large: 24
@@ -1709,17 +1619,17 @@ const toggle = {
           medium: 50,
           large: 66
         },
-        labelColor: lateOceanColorPalette['violine.6'],
+        labelColor: deepPurpleColorPalette['beige.5'],
         backgroundColor: {
-          checked: lateOceanColorPalette['violine.6'],
-          unchecked: lateOceanColorPalette['violine.6']
+          checked: deepPurpleColorPalette['beige.5'],
+          unchecked: deepPurpleColorPalette['beige.5']
         },
         border: {
-          color: lateOceanColorPalette['violine.8'],
+          color: deepPurpleColorPalette['deepPurple.7'],
           width: 1
         },
         circle: {
-          backgroundColor: lateOceanColorPalette['violine.8'],
+          backgroundColor: deepPurpleColorPalette['deepPurple.7'],
           width: {
             medium: 18,
             large: 24
@@ -1734,7 +1644,7 @@ const toggle = {
           }
         },
         wrapperBorder: {
-          color: lateOceanColorPalette.white,
+          color: deepPurpleColorPalette.white,
           width: 1
         }
       },
@@ -1747,17 +1657,17 @@ const toggle = {
           medium: 50,
           large: 66
         },
-        labelColor: lateOceanColorPalette['violine.6'],
+        labelColor: deepPurpleColorPalette['beige.5'],
         backgroundColor: {
-          checked: lateOceanColorPalette['violine.6'],
-          unchecked: lateOceanColorPalette['violine.6']
+          checked: deepPurpleColorPalette['beige.5'],
+          unchecked: deepPurpleColorPalette['beige.5']
         },
         border: {
-          color: lateOceanColorPalette['violine.8'],
+          color: deepPurpleColorPalette['deepPurple.7'],
           width: 1
         },
         circle: {
-          backgroundColor: lateOceanColorPalette['violine.8'],
+          backgroundColor: deepPurpleColorPalette['deepPurple.7'],
           width: {
             medium: 18,
             large: 24
@@ -1772,7 +1682,7 @@ const toggle = {
           }
         },
         wrapperBorder: {
-          color: lateOceanColorPalette.white,
+          color: deepPurpleColorPalette.white,
           width: 1
         }
       }
@@ -1834,50 +1744,50 @@ const highlight = {
   },
   primary: {
     default: {
-      backgroundColor: lateOceanColorPalette['lavender.3']
+      backgroundColor: deepPurpleColorPalette['beige.2']
     },
     hover: {
-      backgroundColor: lateOceanColorPalette['lavender.5']
+      backgroundColor: deepPurpleColorPalette['beige.4']
     }
   },
   secondary: {
     default: {
-      backgroundColor: lateOceanColorPalette['violine.2']
+      backgroundColor: deepPurpleColorPalette['beige.1']
     },
     hover: {
-      backgroundColor: lateOceanColorPalette['violine.4']
+      backgroundColor: deepPurpleColorPalette['beige.3']
     }
   },
   ghost: {
     default: {
-      backgroundColor: lateOceanColorPalette.white
+      backgroundColor: deepPurpleColorPalette.white
     },
     hover: {
-      backgroundColor: lateOceanColorPalette['eggshell.2']
+      backgroundColor: deepPurpleColorPalette['beige.1']
     }
   },
   dark: {
     default: {
-      backgroundColor: lateOceanColorPalette['eggshell.3']
+      backgroundColor: deepPurpleColorPalette['beige.2']
     },
     hover: {
-      backgroundColor: lateOceanColorPalette['eggshell.2']
+      backgroundColor: deepPurpleColorPalette['beige.1']
     }
   },
   success: {
     default: {
-      backgroundColor: lateOceanColorPalette['green.3']
+      backgroundColor: deepPurpleColorPalette['green.1']
     },
     hover: {
-      backgroundColor: lateOceanColorPalette['green.5']
+      backgroundColor: deepPurpleColorPalette['green.2']
     }
   },
   warning: {
     default: {
-      backgroundColor: lateOceanColorPalette['sun.3']
+      backgroundColor: deepPurpleColorPalette['yellow.1']
     },
     hover: {
-      backgroundColor: lateOceanColorPalette['sun.5']
+      backgroundColor: deepPurpleColorPalette['yellow.2']
     }
   },
   padding: {
@@ -1917,14 +1827,6 @@ const icon = {
     header4: createTypographyIconSizeConfig(18, 24),
     // also known as xxsmall
     header5: createTypographyIconSizeConfig(18, 18),
-    'header-impact-xxl': createTypographyIconSizeConfig(56, 56),
-    'header-impact-xl': createTypographyIconSizeConfig(48, 48),
-    'header-impact-l': createTypographyIconSizeConfig(40, 40),
-    'header-impact-m': createTypographyIconSizeConfig(32, 32),
-    'header-impact-s': createTypographyIconSizeConfig(24, 24),
-    'header-impact-xs': createTypographyIconSizeConfig(18, 18),
-    'header-impact-xxs': createTypographyIconSizeConfig(16, 16),
-    'header-impact-xxxs': createTypographyIconSizeConfig(14, 14),
     'body-large': createTypographyIconSizeConfig(18, 24),
     'body-medium': createTypographyIconSizeConfig(18, 18),
     body: createTypographyIconSizeConfig(16, 16),
@@ -1969,7 +1871,7 @@ const iconButton = {
     pressedBackgroundColor: button.default.ghost.pressedBackgroundColor
   },
   primary: {
-    pressedBackgroundColor: lateOceanColorPalette.moonPurpleLight1
+    pressedBackgroundColor: deepPurpleColorPalette['beige.1']
   },
   'primary-plain': {
     pressedBackgroundColor: colors.primaryLight,
@@ -2044,149 +1946,198 @@ const pageLoader = {
   }
 };
 
-const calcLineHeight = (fontSize, lineHeightMultiplier) => Math.round(fontSize * lineHeightMultiplier);
-/** @deprecated legacy typography type config is deprecated. */
-const createLegacyTypographyTypeConfig = (lineHeightMultiplierBaseAndSmall, baseAndSmallFontSize, mediumAndWideFontSize = baseAndSmallFontSize, lineHeightMultiplierMediumAndWide = lineHeightMultiplierBaseAndSmall) => ({
-  baseAndSmall: {
-    fontSize: baseAndSmallFontSize,
-    lineHeight: calcLineHeight(baseAndSmallFontSize, lineHeightMultiplierBaseAndSmall)
-  },
-  mediumAndWide: {
-    fontSize: mediumAndWideFontSize,
-    lineHeight: calcLineHeight(mediumAndWideFontSize, lineHeightMultiplierMediumAndWide)
-  }
-});
-const createTypographyConfig = (fontSize, lineHeightMultiplier) => {
-  const config = {
-    fontSize,
-    lineHeight: calcLineHeight(fontSize, lineHeightMultiplier)
-  };
-  return {
-    baseAndSmall: config,
-    mediumAndWide: config
-  };
-};
 const typography = {
   colors: {
     black: colors.black,
     'black-anthracite': colors.blackAnthracite,
-    'black-disabled': lateOceanColorPalette.black400,
-    'black-light': lateOceanColorPalette.black555,
+    'black-disabled': deepPurpleColorPalette['grey.3'],
+    'black-light': deepPurpleColorPalette['grey.5'],
     white: colors.white,
     'white-light': colors.white,
     primary: colors.primary,
     'primary-light': colors.primaryLight,
     accent: colors.accent,
     success: colors.success,
-    danger: lateOceanColorPalette['coral.9'],
+    danger: deepPurpleColorPalette['red.6'],
     warning: colors.warning
   },
   types: {
     headings: {
       fontFamily: {
         native: {
-          regular: 'Moderat-Bold',
-          bold: 'Moderat-Bold'
+          regular: 'GTStandardRegular',
+          semibold: 'GTStandardSemibold',
+          bold: 'GTStandardBold'
         },
         web: {
-          regular: 'Moderat',
-          bold: 'Moderat'
+          regular: 'GTStandard',
+          semibold: 'GTStandard',
+          bold: 'GTStandard'
         }
       },
       fontWeight: {
-        regular: 400,
+        regular: 500,
+        semibold: 600,
         bold: 700
       },
       fontStyle: 'normal',
       configs: {
-        /* legacy */
-        header1: createLegacyTypographyTypeConfig(1.1, 40, 56),
-        header2: createLegacyTypographyTypeConfig(1.15, 32, 48, 1.1),
-        header3: createLegacyTypographyTypeConfig(1.15, 24, 40, 1.1),
-        header4: createLegacyTypographyTypeConfig(1.15, 18, 24, 1.2),
-        header5: createLegacyTypographyTypeConfig(1.15, 18, 18),
-        /* latest */
-        'heading-xxl': createTypographyConfig(56, 1.1),
-        'heading-xl': createTypographyConfig(48, 1.1),
-        'heading-l': createTypographyConfig(40, 1.1),
-        'heading-m': createTypographyConfig(32, 1.15),
-        'heading-s': createTypographyConfig(24, 1.15),
-        'heading-xs': createTypographyConfig(18, 1.15),
-        'heading-xxs': createTypographyConfig(16, 1.15)
+        'heading-xxl': {
+          fontSize: 56,
+          lineHeight: 64,
+          allowedFontWeights: ['semibold']
+        },
+        'heading-xl': {
+          fontSize: 48,
+          lineHeight: 56,
+          allowedFontWeights: ['semibold']
+        },
+        'heading-l': {
+          fontSize: 40,
+          lineHeight: 48,
+          allowedFontWeights: ['semibold']
+        },
+        'heading-m': {
+          fontSize: 28,
+          lineHeight: 32,
+          allowedFontWeights: ['semibold']
+        },
+        'heading-s': {
+          fontSize: 18,
+          lineHeight: 20,
+          allowedFontWeights: ['regular', 'bold']
+        },
+        'heading-xs': {
+          fontSize: 16,
+          lineHeight: 18,
+          allowedFontWeights: ['regular', 'bold']
+        }
       }
     },
-    'headings-impact': {
+    bodies: {
       fontFamily: {
         native: {
-          regular: 'Transducer-Black',
-          bold: 'Transducer-Black'
+          regular: 'GTStandardRegular',
+          bold: 'GTStandardBold'
         },
         web: {
-          regular: 'TransducerBlack',
-          bold: 'TransducerBlack'
+          regular: 'GTStandard',
+          bold: 'GTStandard'
         }
       },
-      fontWeight: 600,
-      fontStyle: 'normal',
+      fontWeight: {
+        regular: 500,
+        bold: 700
+      },
+      fontStyle: {
+        regular: 'normal',
+        bold: 'normal'
+      },
       configs: {
-        /* legacy */
-        'header-impact-xxl': createLegacyTypographyTypeConfig(1.1, 56, 56),
-        'header-impact-xl': createLegacyTypographyTypeConfig(1.1, 48, 48),
-        'header-impact-l': createLegacyTypographyTypeConfig(1.1, 40, 40),
-        'header-impact-m': createLegacyTypographyTypeConfig(1.1, 32, 32),
-        'header-impact-s': createLegacyTypographyTypeConfig(1.1, 24, 24),
-        'header-impact-xs': createLegacyTypographyTypeConfig(1.1, 18, 18),
-        'header-impact-xxs': createLegacyTypographyTypeConfig(1.1, 16, 16),
-        'header-impact-xxxs': createLegacyTypographyTypeConfig(1.1, 14, 14),
-        /* latest */
-        'heading-impact-xxl': createTypographyConfig(56, 1.1),
-        'heading-impact-xl': createTypographyConfig(48, 1.1),
-        'heading-impact-l': createTypographyConfig(40, 1.1),
-        'heading-impact-m': createTypographyConfig(32, 1.1),
-        'heading-impact-s': createTypographyConfig(24, 1.1),
-        'heading-impact-xs': createTypographyConfig(18, 1.1),
-        'heading-impact-xxs': createTypographyConfig(16, 1.1),
-        'heading-impact-xxxs': createTypographyConfig(14, 1.1)
+        'body-xl': {
+          fontSize: 24,
+          lineHeight: 32,
+          allowedFontWeights: ['regular', 'bold']
+        },
+        'body-l': {
+          fontSize: 18,
+          lineHeight: 26,
+          allowedFontWeights: ['regular', 'bold']
+        },
+        'body-m': {
+          fontSize: 16,
+          lineHeight: 24,
+          allowedFontWeights: ['regular', 'bold']
+        },
+        'body-s': {
+          fontSize: 14,
+          lineHeight: 20,
+          allowedFontWeights: ['regular', 'bold']
+        },
+        'body-xs': {
+          fontSize: 12,
+          lineHeight: 16,
+          allowedFontWeights: ['regular', 'bold']
+        }
       }
     },
-    bodies: {
+    labels: {
       fontFamily: {
-        web: {
-          regular: 'Moderat',
-          bold: 'Moderat'
+        native: {
+          semibold: 'GTStandardSemibold'
         },
+        web: {
+          semibold: 'GTStandard'
+        }
+      },
+      fontWeight: {
+        semibold: 600
+      },
+      fontStyle: 'normal',
+      configs: {
+        'label-large': {
+          fontSize: 16,
+          lineHeight: 24,
+          allowedFontWeights: ['semibold']
+        },
+        'label-medium': {
+          fontSize: 14,
+          lineHeight: 20,
+          allowedFontWeights: ['semibold']
+        }
+      }
+    },
+    contentCaps: {
+      fontFamily: {
         native: {
-          regular: 'Moderat-Regular',
-          bold: 'Moderat-Bold'
+          bold: 'GTStandardNarrowBold'
+        },
+        web: {
+          bold: 'GTStandardNarrow'
         }
       },
       fontWeight: {
-        regular: 400,
         bold: 700
       },
-      fontStyle: {
-        regular: 'normal',
-        bold: 'normal'
-      },
+      fontStyle: 'normal',
       configs: {
-        /* legacy */
-        'body-large': createLegacyTypographyTypeConfig(1.3, 18, 24),
-        'body-medium': createLegacyTypographyTypeConfig(1.3, 18, 18),
-        body: createLegacyTypographyTypeConfig(1.3, 16, 16),
-        'body-small': createLegacyTypographyTypeConfig(1.15, 14, 14),
-        'body-xsmall': createLegacyTypographyTypeConfig(1.15, 12, 12),
-        /* latest */
-        'body-xl': createTypographyConfig(24, 1.3),
-        'body-l': createTypographyConfig(18, 1.3),
-        'body-m': createTypographyConfig(16, 1.3),
-        'body-s': createTypographyConfig(14, 1.15),
-        'body-xs': createTypographyConfig(12, 1.15)
+        'content-caps-xxxl': {
+          fontSize: 40,
+          lineHeight: 40,
+          allowedFontWeights: ['bold']
+        },
+        'content-caps-xxl': {
+          fontSize: 32,
+          lineHeight: 40,
+          allowedFontWeights: ['bold']
+        },
+        'content-caps-xl': {
+          fontSize: 24,
+          lineHeight: 28,
+          allowedFontWeights: ['bold']
+        },
+        'content-caps-l': {
+          fontSize: 18,
+          lineHeight: 20,
+          allowedFontWeights: ['bold']
+        },
+        'content-caps-m': {
+          fontSize: 16,
+          lineHeight: 18,
+          allowedFontWeights: ['bold']
+        },
+        'content-caps-s': {
+          fontSize: 14,
+          lineHeight: 16,
+          allowedFontWeights: ['bold']
+        },
+        'content-caps-xs': {
+          fontSize: 12,
+          lineHeight: 14,
+          allowedFontWeights: ['bold']
+        }
       }
     }
-  },
-  link: {
-    /** @deprecated not used in kitt anymore, use Typography instead */
-    disabledColor: colors.blackDisabled
   }
 };
 
@@ -2195,7 +2146,7 @@ const picker = {
   ios: {
     default: {
       fontFamily: typography.types.bodies.fontFamily.native.regular,
-      ...typography.types.bodies.configs.body.baseAndSmall,
+      ...typography.types.bodies.configs['body-m'],
       fontSize: 16,
       color: typography.colors['black-light'],
       // Default height is hard coded in module because of iOS constraint (https://github.com/react-native-picker/picker/blob/abd5f9076baa3ef2277ea7e711fa5823683c110e/js/PickerIOS.ios.js#L156)
@@ -2228,19 +2179,19 @@ const picker = {
         backgroundColor: colors.transparent
       },
       hovered: {
-        backgroundColor: lateOceanColorPalette.black50
+        backgroundColor: deepPurpleColorPalette['beige.1']
       },
       focused: {
-        backgroundColor: lateOceanColorPalette.black50
+        backgroundColor: deepPurpleColorPalette['beige.1']
       },
       selected: {
-        backgroundColor: lateOceanColorPalette.black50
+        backgroundColor: deepPurpleColorPalette['beige.1']
       },
       highlighted: {
-        backgroundColor: lateOceanColorPalette.black50
+        backgroundColor: deepPurpleColorPalette['beige.1']
       },
       pressed: {
-        backgroundColor: lateOceanColorPalette.black100
+        backgroundColor: deepPurpleColorPalette['beige.2']
       }
     }
   },
@@ -2324,8 +2275,8 @@ const shadows = {
   }
 };
 
-const skeletonBackgroundColor = lateOceanColorPalette.black100;
-const skeletonFlareColor = lateOceanColorPalette.black200;
+const skeletonBackgroundColor = deepPurpleColorPalette['beige.2'];
+const skeletonFlareColor = deepPurpleColorPalette['beige.3'];
 const skeleton = {
   backgroundColor: skeletonBackgroundColor,
   flareColor: skeletonFlareColor,
@@ -2348,20 +2299,6 @@ const skeleton = {
 
 const tag = {
   borderRadius: 16,
-  variant: {
-    contrast: {
-      borderWidth: 0
-    },
-    fill: {
-      borderWidth: 0
-    },
-    outline: {
-      borderWidth: 1
-    },
-    subtle: {
-      borderWidth: 0
-    }
-  },
   icon: {
     small: 16,
     medium: 16,
@@ -2437,14 +2374,14 @@ const verticalSteps = {
   },
   done: {
     icon: {
-      backgroundColor: lateOceanColorPalette.moonPurple,
-      textColor: colors.primary
+      backgroundColor: colors.primary,
+      textColor: colors.white
     }
   },
   default: {
     icon: {
       backgroundColor: colors.disabled,
-      textColor: colors.blackDisabled
+      textColor: deepPurpleColorPalette['grey.3']
     }
   }
 };
@@ -2478,7 +2415,7 @@ const theme = {
   getSpacing: multiplier => spacing * multiplier,
   colors,
   palettes: {
-    lateOcean: lateOceanColorPalette
+    deepPurple: deepPurpleColorPalette
   },
   avatar,
   breakpoints,