@ornikar/kitt-universal 26.3.1-late-ocean.ea9938a3219bcd82e7bbea585f5b7083975351b2.0 → 27.0.0

package/dist/index-node-22.17.cjs.js

@@ -64,117 +64,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 = () => {
@@ -184,90 +148,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: '',
@@ -279,8 +197,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: '',
@@ -292,8 +210,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: '',
@@ -305,8 +223,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: '',
@@ -318,8 +236,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: '',
@@ -334,10 +252,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,
@@ -346,11 +264,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,
@@ -359,8 +277,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: '',
@@ -372,11 +290,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,
@@ -385,8 +303,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: '',
@@ -401,10 +319,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,
@@ -413,11 +331,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,
@@ -426,8 +344,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: '',
@@ -439,11 +357,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,
@@ -452,8 +370,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: '',
@@ -467,8 +385,8 @@ const actionCard = {
   },
   secondary: {
     default: {
-      backgroundColor: lateOceanColorPalette['eggshell.2'],
-      borderColor: lateOceanColorPalette.transparent,
+      backgroundColor: deepPurpleColorPalette['beige.1'],
+      borderColor: deepPurpleColorPalette.transparent,
       borderWidth: 0,
       shadow: {
         color: '',
@@ -480,8 +398,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: '',
@@ -493,8 +411,8 @@ const actionCard = {
       translateY: 0
     },
     hovered: {
-      backgroundColor: lateOceanColorPalette['eggshell.3'],
-      borderColor: lateOceanColorPalette.transparent,
+      backgroundColor: deepPurpleColorPalette['beige.2'],
+      borderColor: deepPurpleColorPalette.transparent,
       borderWidth: 0,
       shadow: {
         color: '',
@@ -506,8 +424,8 @@ const actionCard = {
       translateY: 0
     },
     focused: {
-      backgroundColor: lateOceanColorPalette['eggshell.3'],
-      borderColor: lateOceanColorPalette.transparent,
+      backgroundColor: deepPurpleColorPalette['beige.2'],
+      borderColor: deepPurpleColorPalette.transparent,
       borderWidth: 0,
       shadow: {
         color: '',
@@ -519,8 +437,8 @@ const actionCard = {
       translateY: 0
     },
     pressed: {
-      backgroundColor: lateOceanColorPalette['eggshell.3'],
-      borderColor: lateOceanColorPalette.transparent,
+      backgroundColor: deepPurpleColorPalette['beige.2'],
+      borderColor: deepPurpleColorPalette.transparent,
       borderWidth: 0,
       shadow: {
         color: '',
@@ -534,11 +452,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,
@@ -547,8 +465,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: '',
@@ -560,11 +478,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,
@@ -573,11 +491,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,
@@ -586,8 +504,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: '',
@@ -605,42 +523,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
   }
@@ -653,7 +557,7 @@ const bottomSheet = {
     padding: spacing * 4
   },
   handle: {
-    backgroundColor: lateOceanColorPalette.black200
+    backgroundColor: deepPurpleColorPalette['beige.3']
   }
 };
 
@@ -721,9 +625,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: {
@@ -736,11 +640,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: {
@@ -753,19 +657,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: {
@@ -806,14 +710,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,
@@ -842,7 +746,7 @@ const card = {
     borderColor: colors.separator
   },
   subtle: {
-    backgroundColor: lateOceanColorPalette.black50,
+    backgroundColor: deepPurpleColorPalette['beige.1'],
     borderColor: colors.separator
   }
 };
@@ -902,17 +806,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: {
@@ -977,19 +881,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: {
@@ -1057,37 +961,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';
@@ -1096,11 +1000,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
   },
@@ -1137,7 +1041,7 @@ const inputTag = {
     labelColor: colors.uiBackgroundLight
   },
   default: {
-    backgroundColor: lateOceanColorPalette.black50,
+    backgroundColor: deepPurpleColorPalette['beige.1'],
     labelColor: colors.black
   },
   borderRadius: 10,
@@ -1147,9 +1051,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,
@@ -1166,8 +1070,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',
@@ -1178,14 +1083,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,
@@ -1226,17 +1136,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
@@ -1264,17 +1174,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
@@ -1302,17 +1212,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
@@ -1327,7 +1237,7 @@ const toggle = {
           }
         },
         wrapperBorder: {
-          color: lateOceanColorPalette.black,
+          color: deepPurpleColorPalette.black,
           width: 1
         }
       },
@@ -1340,17 +1250,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
@@ -1365,7 +1275,7 @@ const toggle = {
           }
         },
         wrapperBorder: {
-          color: lateOceanColorPalette.black,
+          color: deepPurpleColorPalette.black,
           width: 1
         }
       }
@@ -1380,17 +1290,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
@@ -1418,17 +1328,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
@@ -1456,17 +1366,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
@@ -1481,7 +1391,7 @@ const toggle = {
           }
         },
         wrapperBorder: {
-          color: lateOceanColorPalette.black,
+          color: deepPurpleColorPalette.black,
           width: 1
         }
       },
@@ -1494,17 +1404,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
@@ -1519,7 +1429,7 @@ const toggle = {
           }
         },
         wrapperBorder: {
-          color: lateOceanColorPalette.black,
+          color: deepPurpleColorPalette.black,
           width: 1
         }
       }
@@ -1536,17 +1446,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
@@ -1574,17 +1484,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
@@ -1612,17 +1522,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
@@ -1637,7 +1547,7 @@ const toggle = {
           }
         },
         wrapperBorder: {
-          color: lateOceanColorPalette.white,
+          color: deepPurpleColorPalette.white,
           width: 1
         }
       },
@@ -1650,17 +1560,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
@@ -1675,7 +1585,7 @@ const toggle = {
           }
         },
         wrapperBorder: {
-          color: lateOceanColorPalette.white,
+          color: deepPurpleColorPalette.white,
           width: 1
         }
       }
@@ -1690,17 +1600,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
@@ -1728,17 +1638,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
@@ -1766,17 +1676,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
@@ -1791,7 +1701,7 @@ const toggle = {
           }
         },
         wrapperBorder: {
-          color: lateOceanColorPalette.white,
+          color: deepPurpleColorPalette.white,
           width: 1
         }
       },
@@ -1804,17 +1714,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
@@ -1829,7 +1739,7 @@ const toggle = {
           }
         },
         wrapperBorder: {
-          color: lateOceanColorPalette.white,
+          color: deepPurpleColorPalette.white,
           width: 1
         }
       }
@@ -1891,50 +1801,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: {
@@ -1974,14 +1884,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),
@@ -2026,7 +1928,7 @@ const iconButton = {
     pressedBackgroundColor: button.default.ghost.pressedBackgroundColor
   },
   primary: {
-    pressedBackgroundColor: lateOceanColorPalette.moonPurpleLight1
+    pressedBackgroundColor: deepPurpleColorPalette['beige.1']
   },
   'primary-plain': {
     pressedBackgroundColor: colors.primaryLight,
@@ -2101,149 +2003,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
   }
 };
 
@@ -2252,7 +2203,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)
@@ -2285,19 +2236,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']
       }
     }
   },
@@ -2381,8 +2332,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,
@@ -2405,20 +2356,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,
@@ -2494,14 +2431,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']
     }
   }
 };
@@ -2535,7 +2472,7 @@ const theme = {
   getSpacing: multiplier => spacing * multiplier,
   colors,
   palettes: {
-    lateOcean: lateOceanColorPalette
+    deepPurple: deepPurpleColorPalette
   },
   avatar,
   breakpoints,
@@ -2952,11 +2889,13 @@ function getTypographyColorValue(colorName) {
   return colorName;
 }
 
-const isTypeHeadings = type => type.startsWith('header') || type.startsWith('heading');
-const isTypeHeadingsImpact = type => type.startsWith('heading-impact') || type.startsWith('header-impact');
+const isTypeHeadings = type => type.startsWith('heading');
+const isTypeLabels = type => type.startsWith('label');
+const isTypeContentCaps = type => type.startsWith('content-caps');
 const getTypographyFamily = type => {
-  if (isTypeHeadingsImpact(type)) return 'headings-impact';
   if (isTypeHeadings(type)) return 'headings';
+  if (isTypeLabels(type)) return 'labels';
+  if (isTypeContentCaps(type)) return 'contentCaps';
   return 'bodies';
 };
 const getTypographyFamilyWithAncestorValue = (type, typographyFamilyInContext) => {
@@ -2978,9 +2917,6 @@ const TypographyDefaultColorContext = /*#__PURE__*/React.createContext(undefined
 function useTypographyDefaultColor() {
   return React.useContext(TypographyDefaultColorContext);
 }
-function getTypographyTypeConfigKeyFromTypeName(breakpointName) {
-  return breakpointName === KittBreakpointNameEnum.BASE || breakpointName === KittBreakpointNameEnum.SMALL ? 'baseAndSmall' : 'mediumAndWide';
-}
 
 // TODO[native-base@>=3.4.19] this currently does not work. Retest when updating native-base.
 // & {
@@ -2997,11 +2933,88 @@ function createNativeBaseFontSize(type) {
   [KittBreakpointNameEnum.BASE, KittBreakpointNameEnum.SMALL, KittBreakpointNameEnum.MEDIUM, KittBreakpointNameEnum.LARGE, KittBreakpointNameEnum.WIDE].forEach(typeName => {
     const value = typeWithMediumForced[typeName];
     if (value) {
-      fontSizeForNativeBase[typeName] = `${getTypographyTypeConfigKeyFromTypeName(typeName)}.${value}`;
+      fontSizeForNativeBase[typeName] = value;
     }
   });
   return fontSizeForNativeBase;
 }
+function ThrowErrorIfInvalidVariant(variant, value, fontWeight) {
+  if (process.env.NODE_ENV !== 'production' && variant && variant !== fontWeight) {
+    throw new Error(`Invalid variant "${variant}" for value "${value}" only "${fontWeight}" is allowed.`);
+  }
+}
+function getTypographyWeights(typographyFamily) {
+  const boldTypoTypes = new Set();
+  const semiboldTypoTypes = new Set();
+  const regularTypoTypes = new Set();
+  const typographyConfig = typography.types[typographyFamily].configs;
+  Object.keys(typographyConfig).forEach(typographyType => {
+    const {
+      allowedFontWeights
+    } = typographyConfig[typographyType];
+    if (allowedFontWeights.includes('bold')) {
+      boldTypoTypes.add(typographyType);
+    }
+    if (allowedFontWeights.includes('semibold')) {
+      semiboldTypoTypes.add(typographyType);
+    }
+    if (allowedFontWeights.includes('regular')) {
+      regularTypoTypes.add(typographyType);
+    }
+  });
+  return {
+    boldTypoTypes,
+    semiboldTypoTypes,
+    regularTypoTypes
+  };
+}
+function getUniversalFontWeight(type, variant, typographyFamily) {
+  const {
+    boldTypoTypes,
+    semiboldTypoTypes,
+    regularTypoTypes
+  } = getTypographyWeights(typographyFamily || 'bodies');
+  const webFontWeight = {};
+  const nativeFontFamily = {};
+  const breakpoints = [KittBreakpointNameEnum.BASE, KittBreakpointNameEnum.SMALL, KittBreakpointNameEnum.MEDIUM, KittBreakpointNameEnum.LARGE, KittBreakpointNameEnum.WIDE];
+  breakpoints.forEach(typeName => {
+    const value = type[typeName];
+    if (!value) return;
+    const inBold = boldTypoTypes.has(value);
+    const inSemi = semiboldTypoTypes.has(value);
+    const inRegular = regularTypoTypes.has(value);
+    const presenceCount = [inBold, inSemi, inRegular].filter(Boolean).length;
+    let resolvedVariant;
+    if (presenceCount > 1) {
+      // if present in multiple weight
+
+      if (process.env.NODE_ENV !== 'production' && variant && !(variant === 'bold' && inBold || variant === 'semibold' && inSemi || variant === 'regular' && inRegular)) {
+        throw new Error(`Invalid variant "${variant}" for value "${value}". Only ${inBold ? '"bold"' : ' '}${inSemi ? '"semibold"' : ' '}${inRegular ? '"regular"' : ' '}" is allowed.`);
+      }
+
+      // always fallback on regular if no variant specified
+      resolvedVariant = variant || 'regular';
+    } else if (inBold) {
+      // bold
+      ThrowErrorIfInvalidVariant(variant, value, 'bold');
+      resolvedVariant = 'bold';
+    } else if (inSemi) {
+      // semibold
+      ThrowErrorIfInvalidVariant(variant, value, 'semibold');
+      resolvedVariant = 'semibold';
+    } else {
+      // regular
+      ThrowErrorIfInvalidVariant(variant, value, 'regular');
+      resolvedVariant = 'regular';
+    }
+    webFontWeight[typeName] = resolvedVariant;
+    nativeFontFamily[typeName] = `${typographyFamily}.${resolvedVariant}`;
+  });
+  return {
+    webFontWeight,
+    nativeFontFamily
+  };
+}
 function Typography({
   accessibilityRole,
   base: legacyBase,
@@ -3018,21 +3031,26 @@ function Typography({
   },
   variant,
   color,
+  underline,
   ...otherProps
 }) {
   const sx = nativeBase.useSx();
   const typographyFamilyInContext = React.useContext(TypographyFamilyContext);
   const defaultColor = useTypographyDefaultColor();
   const hasTypographyAncestor = typographyFamilyInContext !== null;
-  const baseOrDefaultToBody = hasTypographyAncestor ? type.base : type.base ?? 'body';
+  const baseOrDefaultToBody = hasTypographyAncestor ? type.base : type.base ?? 'body-m';
   const typographyFamily = getTypographyFamilyWithAncestorValue(baseOrDefaultToBody, typographyFamilyInContext);
-
-  // force bold for headings, default to regular for bodies
-  const nonNullableVariant = variant ?? (typographyFamily === 'headings' || typographyFamily === 'headings-impact' ? 'bold' : 'regular');
   const fontSizeForNativeBase = createNativeBaseFontSize({
     ...type,
     base: baseOrDefaultToBody
   });
+  const {
+    webFontWeight,
+    nativeFontFamily
+  } = getUniversalFontWeight({
+    ...type,
+    base: baseOrDefaultToBody
+  }, variant, typographyFamily);
   const currentColor = !color && !hasTypographyAncestor ? defaultColor : color;
   const currentColorValue = getTypographyColorValue(currentColor);
   const colorStyles = sx({
@@ -3050,10 +3068,17 @@ function Typography({
     accessibilityRole: accessibilityRole || undefined,
     fontSize: fontSizeForNativeBase,
     lineHeight: hasTypographyAncestor ? undefined : fontSizeForNativeBase,
-    fontWeight: `${typographyFamily}.${nonNullableVariant}`,
-    fontFamily: `${typographyFamily}.${nonNullableVariant}`,
+    fontWeight: webFontWeight,
+    fontFamily: nativeFontFamily,
+    borderBottomWidth: underline ? 1 : undefined,
+    borderBottomColor: underline ? currentColorValue : undefined,
+    textTransform: typographyFamily === 'contentCaps' ? 'uppercase' : undefined,
     ...colorStyles,
-    ...otherProps
+    ...otherProps,
+    // The property text-underline-offset is not on native.
+    // To add an underline with an offset, we use a custom borderBottomWidth and color.
+    // and we set underline to undefined to avoid a double underline
+    underline: undefined
   });
   const content = baseOrDefaultToBody ? /*#__PURE__*/jsxRuntime.jsx(TypographyFamilyContext.Provider, {
     value: typographyFamily,
@@ -3103,17 +3128,6 @@ Typography.Header4 = createHeading(4);
 Typography.Header5 = createHeading(5);
 Typography.Header6 = createHeading(6);
 
-/** @deprecated use Typography.Header1 */
-Typography.h1 = createHeading(1, 'header1');
-/** @deprecated use Typography.Header2 */
-Typography.h2 = createHeading(2, 'header2');
-/** @deprecated use Typography.Header3 */
-Typography.h3 = createHeading(3, 'header3');
-/** @deprecated use Typography.Header4 */
-Typography.h4 = createHeading(4, 'header4');
-/** @deprecated use Typography.Header6 */
-Typography.h5 = createHeading(5, 'header5');
-
 function ButtonBadge({
   withBadge,
   badgeCount
@@ -3311,7 +3325,7 @@ function ButtonContentChildren({
       textAlign: "center",
       _android: sharedNativeStyle,
       _ios: sharedNativeStyle,
-      base: "body",
+      base: "body-m",
       variant: "bold",
       color: color,
       children: children
@@ -3837,7 +3851,7 @@ function AvatarContent({
   };
   if (firstname && lastname) {
     return /*#__PURE__*/jsxRuntime.jsx(Typography.Text, {
-      base: sizeVariant === 'large' ? 'body-large' : 'body-small',
+      base: sizeVariant === 'large' ? 'body-l' : 'body-s',
       variant: sizeVariant === 'large' ? 'bold' : 'regular',
       color: getFontColor(),
       children: getInitials(firstname, lastname)
@@ -5109,7 +5123,7 @@ const InputText = /*#__PURE__*/React.forwardRef(({
 }, ref) => {
   const theme = useTheme();
   const fontSizeForNativeBase = createNativeBaseFontSize({
-    base: 'body'
+    base: 'body-m'
   });
   const shouldHandleSingleLineOnIOS = reactNative.Platform.OS === 'ios' && !multiline;
   return /*#__PURE__*/jsxRuntime.jsxs(InputTextContainer, {
@@ -6160,7 +6174,7 @@ function ModalTitle({
 }) {
   return /*#__PURE__*/jsxRuntime.jsx(CardModal.Header, {
     children: /*#__PURE__*/jsxRuntime.jsx(Typography.Text, {
-      base: "body",
+      base: "body-m",
       variant: "bold",
       children: children
     })
@@ -6474,7 +6488,7 @@ function BottomSheetActionsItem({
       withPadding: true,
       children: /*#__PURE__*/jsxRuntime.jsx(Typography.Text, {
         variant: "bold",
-        base: "body",
+        base: "body-m",
         children: title
       })
     })
@@ -7034,7 +7048,7 @@ function InputFeedback({
   children
 }) {
   return /*#__PURE__*/jsxRuntime.jsx(Typography.Text, {
-    base: "body-small",
+    base: "body-s",
     color: getColorFromState(state),
     testID: testID,
     children: children
@@ -7195,7 +7209,7 @@ function InputTag({
         color: "black"
       })
     }) : null, /*#__PURE__*/jsxRuntime.jsx(Typography.Text, {
-      base: "body-small",
+      base: "body-s",
       color: "black",
       children: children
     })]
@@ -7209,7 +7223,7 @@ function Label({
 }) {
   const isWeb = reactNative.Platform.OS === 'web';
   return /*#__PURE__*/jsxRuntime.jsx(Typography.Text, {
-    base: "body",
+    base: "body-m",
     id: isWeb ? undefined : id,
     children: isWeb ? /*#__PURE__*/jsxRuntime.jsx("label", {
       id: id,
@@ -7220,7 +7234,8 @@ function Label({
 }
 
 function InnerCircle({
-  isChecked
+  isChecked,
+  isDisabled
 }) {
   const theme = useTheme();
   const sharedTransform = [{
@@ -7230,7 +7245,7 @@ function InnerCircle({
     width: "kitt.forms.radio.innerCircle.size",
     height: "kitt.forms.radio.innerCircle.size",
     borderRadius: "kitt.forms.radio.innerCircle.borderRadius",
-    backgroundColor: "kitt.forms.radio.innerCircle.backgroundColor",
+    backgroundColor: isDisabled ? 'kitt.forms.radio.disabled.innerBackgroundColor' : 'kitt.forms.radio.innerCircle.backgroundColor',
     _web: {
       style: {
         transform: `scale(${isChecked ? 1 : 0}))`,
@@ -7365,12 +7380,13 @@ function Radio({
         isFocused: isFocused,
         isPressed: isPressed,
         children: /*#__PURE__*/jsxRuntime.jsx(InnerCircle, {
-          isChecked: checked
+          isChecked: checked,
+          isDisabled: disabled
         })
       }), children ? /*#__PURE__*/jsxRuntime.jsx(Typography.SetDefaultColor, {
         value: disabled ? 'black-light' : 'black',
         children: /*#__PURE__*/jsxRuntime.jsx(Typography.Text, {
-          base: "body",
+          base: "body-m",
           children: children
         })
       }) : null]
@@ -7492,7 +7508,7 @@ function getCurrentTextColor({
   isHovered,
   isFocused
 }) {
-  if (isDisabled) return 'black-light';
+  if (isDisabled) return 'kitt.forms.radioButtonGroup.font.disabled.color';
   if (isSelected) return 'white';
   if (isPressed) return 'white';
   if (isFocused) return 'white';
@@ -7664,7 +7680,7 @@ const TextArea = /*#__PURE__*/React.forwardRef(({
       marginTop: "kitt.1",
       children: [helper ? /*#__PURE__*/jsxRuntime.jsx(Typography.Text, {
         base: "body-s",
-        color: lateOceanColorPalette['eggshell.10'],
+        color: deepPurpleColorPalette['grey.5'],
         children: helper
       }) : null, shouldDisplayLimit ? /*#__PURE__*/jsxRuntime.jsx(Animated__default.View, {
         style: limitContainerAnimatedStyle,
@@ -7674,14 +7690,14 @@ const TextArea = /*#__PURE__*/React.forwardRef(({
           children: [/*#__PURE__*/jsxRuntime.jsxs(Typography.Text, {
             base: "body-xs",
             variant: "bold",
-            color: lateOceanColorPalette['eggshell.10'],
+            color: deepPurpleColorPalette['grey.5'],
             children: [props.value?.length || 0, "/", limit]
           }), /*#__PURE__*/jsxRuntime.jsx(Animated__default.View, {
             style: checkIconAnimatedStyle,
             children: /*#__PURE__*/jsxRuntime.jsx(TypographyIcon, {
               icon: /*#__PURE__*/jsxRuntime.jsx(phosphor.CheckCircleFillIcon, {}),
               size: 13,
-              color: lateOceanColorPalette['eggshell.10']
+              color: deepPurpleColorPalette['grey.5']
             })
           })]
         })
@@ -7789,7 +7805,7 @@ function ToggleAnimated({
 }
 
 const getLabelTypographyType = size => {
-  return size === 'medium' ? 'body' : 'body-medium';
+  return size === 'medium' ? 'body-m' : 'body-l';
 };
 function Toggle({
   isDisabled = false,
@@ -8356,7 +8372,7 @@ function Highlight({
             marginBottom: highlightStyle[size].marginBottom,
             children: /*#__PURE__*/jsxRuntime.jsx(Typography.Text, {
               variant: "bold",
-              base: "body",
+              base: "body-m",
               ellipsizeMode: "clip",
               children: title
             })
@@ -8392,7 +8408,7 @@ function Highlight({
             width: "100%",
             children: /*#__PURE__*/jsxRuntime.jsx(Typography.Text, {
               variant: "bold",
-              base: "body",
+              base: "body-m",
               ellipsizeMode: "clip",
               children: title
             })
@@ -8695,8 +8711,8 @@ function InfoCard({
       flexShrink: 1,
       flexBasis: "auto",
       children: /*#__PURE__*/jsxRuntime.jsx(Typography.Text, {
-        base: "body-small",
-        medium: "body",
+        base: "body-s",
+        medium: "body-m",
         style: {
           userSelect: 'none'
         },
@@ -9022,7 +9038,7 @@ function BaseMessage({
         flexGrow: 1,
         flexShrink: 1,
         textAlign: centeredText ? 'center' : 'left',
-        base: "body",
+        base: "body-m",
         color: color,
         children: children
       })]
@@ -9305,6 +9321,11 @@ function createKittNativeBaseCustomTheme(theme, appTheme) {
             item: {
               borderColor: theme.forms.radioButtonGroup.item.borderColor,
               backgroundColor: theme.forms.radioButtonGroup.item.backgroundColor
+            },
+            font: {
+              disabled: {
+                color: theme.forms.radioButtonGroup.item.font.color.disabled
+              }
             }
           },
           checkbox: {
@@ -9619,7 +9640,8 @@ function createKittNativeBaseCustomTheme(theme, appTheme) {
             },
             disabled: {
               backgroundColor: theme.forms.radio.disabled.backgroundColor,
-              borderColor: theme.forms.radio.disabled.borderColor
+              borderColor: theme.forms.radio.disabled.borderColor,
+              innerBackgroundColor: theme.forms.radio.disabled.innerBackgroundColor
             },
             default: {
               backgroundColor: theme.forms.radio.unchecked.backgroundColor,
@@ -10174,22 +10196,6 @@ function createKittNativeBaseCustomTheme(theme, appTheme) {
         },
         listItem: {
           borderWidth: theme.listItem.borderWidth
-        },
-        tag: {
-          variant: {
-            subtle: {
-              borderWidth: theme.tag.variant.subtle.borderWidth
-            },
-            fill: {
-              borderWidth: theme.tag.variant.fill.borderWidth
-            },
-            outline: {
-              borderWidth: theme.tag.variant.outline.borderWidth
-            },
-            contrast: {
-              borderWidth: theme.tag.variant.contrast.borderWidth
-            }
-          }
         }
       },
       app: appTheme?.borderWidths
@@ -10816,196 +10822,71 @@ function createKittNativeBaseCustomTheme(theme, appTheme) {
       ...appBreakpoints
     },
     fontSizes: {
-      baseAndSmall: {
-        /* legacy */
-        header1: `${theme.typography.types.headings.configs.header1.baseAndSmall.fontSize}px`,
-        header2: `${theme.typography.types.headings.configs.header2.baseAndSmall.fontSize}px`,
-        header3: `${theme.typography.types.headings.configs.header3.baseAndSmall.fontSize}px`,
-        header4: `${theme.typography.types.headings.configs.header4.baseAndSmall.fontSize}px`,
-        header5: `${theme.typography.types.headings.configs.header5.baseAndSmall.fontSize}px`,
-        'body-large': `${theme.typography.types.bodies.configs['body-large'].baseAndSmall.fontSize}px`,
-        'body-medium': `${theme.typography.types.bodies.configs['body-medium'].baseAndSmall.fontSize}px`,
-        body: `${theme.typography.types.bodies.configs.body.baseAndSmall.fontSize}px`,
-        'body-small': `${theme.typography.types.bodies.configs['body-small'].baseAndSmall.fontSize}px`,
-        'body-xsmall': `${theme.typography.types.bodies.configs['body-xsmall'].baseAndSmall.fontSize}px`,
-        'header-impact-xxl': `${theme.typography.types['headings-impact'].configs['header-impact-xxl'].baseAndSmall.fontSize}px`,
-        'header-impact-xl': `${theme.typography.types['headings-impact'].configs['header-impact-xl'].baseAndSmall.fontSize}px`,
-        'header-impact-l': `${theme.typography.types['headings-impact'].configs['header-impact-l'].baseAndSmall.fontSize}px`,
-        'header-impact-m': `${theme.typography.types['headings-impact'].configs['header-impact-m'].baseAndSmall.fontSize}px`,
-        'header-impact-s': `${theme.typography.types['headings-impact'].configs['header-impact-s'].baseAndSmall.fontSize}px`,
-        'header-impact-xs': `${theme.typography.types['headings-impact'].configs['header-impact-xs'].baseAndSmall.fontSize}px`,
-        'header-impact-xxs': `${theme.typography.types['headings-impact'].configs['header-impact-xxs'].baseAndSmall.fontSize}px`,
-        'header-impact-xxxs': `${theme.typography.types['headings-impact'].configs['header-impact-xxxs'].baseAndSmall.fontSize}px`,
-        /* latest */
-        'heading-impact-xxl': `${theme.typography.types['headings-impact'].configs['heading-impact-xxl'].baseAndSmall.fontSize}px`,
-        'heading-impact-xl': `${theme.typography.types['headings-impact'].configs['heading-impact-xl'].baseAndSmall.fontSize}px`,
-        'heading-impact-l': `${theme.typography.types['headings-impact'].configs['heading-impact-l'].baseAndSmall.fontSize}px`,
-        'heading-impact-m': `${theme.typography.types['headings-impact'].configs['heading-impact-m'].baseAndSmall.fontSize}px`,
-        'heading-impact-s': `${theme.typography.types['headings-impact'].configs['heading-impact-s'].baseAndSmall.fontSize}px`,
-        'heading-impact-xs': `${theme.typography.types['headings-impact'].configs['heading-impact-xs'].baseAndSmall.fontSize}px`,
-        'heading-impact-xxs': `${theme.typography.types['headings-impact'].configs['heading-impact-xxs'].baseAndSmall.fontSize}px`,
-        'heading-impact-xxxs': `${theme.typography.types['headings-impact'].configs['heading-impact-xxxs'].baseAndSmall.fontSize}px`,
-        'heading-xxl': `${theme.typography.types.headings.configs['heading-xxl'].baseAndSmall.fontSize}px`,
-        'heading-xl': `${theme.typography.types.headings.configs['heading-xl'].baseAndSmall.fontSize}px`,
-        'heading-l': `${theme.typography.types.headings.configs['heading-l'].baseAndSmall.fontSize}px`,
-        'heading-m': `${theme.typography.types.headings.configs['heading-m'].baseAndSmall.fontSize}px`,
-        'heading-s': `${theme.typography.types.headings.configs['heading-s'].baseAndSmall.fontSize}px`,
-        'heading-xs': `${theme.typography.types.headings.configs['heading-xs'].baseAndSmall.fontSize}px`,
-        'heading-xxs': `${theme.typography.types.headings.configs['heading-xxs'].baseAndSmall.fontSize}px`,
-        'body-xl': `${theme.typography.types.bodies.configs['body-xl'].baseAndSmall.fontSize}px`,
-        'body-l': `${theme.typography.types.bodies.configs['body-l'].baseAndSmall.fontSize}px`,
-        'body-m': `${theme.typography.types.bodies.configs['body-m'].baseAndSmall.fontSize}px`,
-        'body-s': `${theme.typography.types.bodies.configs['body-s'].baseAndSmall.fontSize}px`,
-        'body-xs': `${theme.typography.types.bodies.configs['body-xs'].baseAndSmall.fontSize}px`
-      },
-      mediumAndWide: {
-        /* legacy */
-        header1: `${theme.typography.types.headings.configs.header1.mediumAndWide.fontSize}px`,
-        header2: `${theme.typography.types.headings.configs.header2.mediumAndWide.fontSize}px`,
-        header3: `${theme.typography.types.headings.configs.header3.mediumAndWide.fontSize}px`,
-        header4: `${theme.typography.types.headings.configs.header4.mediumAndWide.fontSize}px`,
-        header5: `${theme.typography.types.headings.configs.header5.mediumAndWide.fontSize}px`,
-        'body-large': `${theme.typography.types.bodies.configs['body-large'].mediumAndWide.fontSize}px`,
-        'body-medium': `${theme.typography.types.bodies.configs['body-medium'].mediumAndWide.fontSize}px`,
-        body: `${theme.typography.types.bodies.configs.body.mediumAndWide.fontSize}px`,
-        'body-small': `${theme.typography.types.bodies.configs['body-small'].mediumAndWide.fontSize}px`,
-        'body-xsmall': `${theme.typography.types.bodies.configs['body-xsmall'].mediumAndWide.fontSize}px`,
-        'header-impact-xxl': `${theme.typography.types['headings-impact'].configs['header-impact-xxl'].mediumAndWide.fontSize}px`,
-        'header-impact-xl': `${theme.typography.types['headings-impact'].configs['header-impact-xl'].mediumAndWide.fontSize}px`,
-        'header-impact-l': `${theme.typography.types['headings-impact'].configs['header-impact-l'].mediumAndWide.fontSize}px`,
-        'header-impact-m': `${theme.typography.types['headings-impact'].configs['header-impact-m'].mediumAndWide.fontSize}px`,
-        'header-impact-s': `${theme.typography.types['headings-impact'].configs['header-impact-s'].mediumAndWide.fontSize}px`,
-        'header-impact-xs': `${theme.typography.types['headings-impact'].configs['header-impact-xs'].mediumAndWide.fontSize}px`,
-        'header-impact-xxs': `${theme.typography.types['headings-impact'].configs['header-impact-xxs'].mediumAndWide.fontSize}px`,
-        'header-impact-xxxs': `${theme.typography.types['headings-impact'].configs['header-impact-xxxs'].mediumAndWide.fontSize}px`,
-        /* latest */
-        'heading-impact-xxl': `${theme.typography.types['headings-impact'].configs['heading-impact-xxl'].mediumAndWide.fontSize}px`,
-        'heading-impact-xl': `${theme.typography.types['headings-impact'].configs['heading-impact-xl'].mediumAndWide.fontSize}px`,
-        'heading-impact-l': `${theme.typography.types['headings-impact'].configs['heading-impact-l'].mediumAndWide.fontSize}px`,
-        'heading-impact-m': `${theme.typography.types['headings-impact'].configs['heading-impact-m'].mediumAndWide.fontSize}px`,
-        'heading-impact-s': `${theme.typography.types['headings-impact'].configs['heading-impact-s'].mediumAndWide.fontSize}px`,
-        'heading-impact-xs': `${theme.typography.types['headings-impact'].configs['heading-impact-xs'].mediumAndWide.fontSize}px`,
-        'heading-impact-xxs': `${theme.typography.types['headings-impact'].configs['heading-impact-xxs'].mediumAndWide.fontSize}px`,
-        'heading-impact-xxxs': `${theme.typography.types['headings-impact'].configs['heading-impact-xxxs'].mediumAndWide.fontSize}px`,
-        'heading-xxl': `${theme.typography.types.headings.configs['heading-xxl'].mediumAndWide.fontSize}px`,
-        'heading-xl': `${theme.typography.types.headings.configs['heading-xl'].mediumAndWide.fontSize}px`,
-        'heading-l': `${theme.typography.types.headings.configs['heading-l'].mediumAndWide.fontSize}px`,
-        'heading-m': `${theme.typography.types.headings.configs['heading-m'].mediumAndWide.fontSize}px`,
-        'heading-s': `${theme.typography.types.headings.configs['heading-s'].mediumAndWide.fontSize}px`,
-        'heading-xs': `${theme.typography.types.headings.configs['heading-xs'].mediumAndWide.fontSize}px`,
-        'heading-xxs': `${theme.typography.types.headings.configs['heading-xxs'].mediumAndWide.fontSize}px`,
-        'body-xl': `${theme.typography.types.bodies.configs['body-xl'].mediumAndWide.fontSize}px`,
-        'body-l': `${theme.typography.types.bodies.configs['body-l'].mediumAndWide.fontSize}px`,
-        'body-m': `${theme.typography.types.bodies.configs['body-m'].mediumAndWide.fontSize}px`,
-        'body-s': `${theme.typography.types.bodies.configs['body-s'].mediumAndWide.fontSize}px`,
-        'body-xs': `${theme.typography.types.bodies.configs['body-xs'].mediumAndWide.fontSize}px`
-      }
+      'heading-xxl': `${theme.typography.types.headings.configs['heading-xxl'].fontSize}px`,
+      'heading-xl': `${theme.typography.types.headings.configs['heading-xl'].fontSize}px`,
+      'heading-l': `${theme.typography.types.headings.configs['heading-l'].fontSize}px`,
+      'heading-m': `${theme.typography.types.headings.configs['heading-m'].fontSize}px`,
+      'heading-s': `${theme.typography.types.headings.configs['heading-s'].fontSize}px`,
+      'heading-xs': `${theme.typography.types.headings.configs['heading-xs'].fontSize}px`,
+      'body-xl': `${theme.typography.types.bodies.configs['body-xl'].fontSize}px`,
+      'body-l': `${theme.typography.types.bodies.configs['body-l'].fontSize}px`,
+      'body-m': `${theme.typography.types.bodies.configs['body-m'].fontSize}px`,
+      'body-s': `${theme.typography.types.bodies.configs['body-s'].fontSize}px`,
+      'body-xs': `${theme.typography.types.bodies.configs['body-xs'].fontSize}px`,
+      'label-large': `${theme.typography.types.labels.configs['label-large'].fontSize}px`,
+      'label-medium': `${theme.typography.types.labels.configs['label-medium'].fontSize}px`,
+      'content-caps-xxxl': `${theme.typography.types.contentCaps.configs['content-caps-xxxl'].fontSize}px`,
+      'content-caps-xxl': `${theme.typography.types.contentCaps.configs['content-caps-xxl'].fontSize}px`,
+      'content-caps-xl': `${theme.typography.types.contentCaps.configs['content-caps-xl'].fontSize}px`,
+      'content-caps-l': `${theme.typography.types.contentCaps.configs['content-caps-l'].fontSize}px`,
+      'content-caps-m': `${theme.typography.types.contentCaps.configs['content-caps-m'].fontSize}px`,
+      'content-caps-s': `${theme.typography.types.contentCaps.configs['content-caps-s'].fontSize}px`,
+      'content-caps-xs': `${theme.typography.types.contentCaps.configs['content-caps-xs'].fontSize}px`
     },
     lineHeights: {
-      baseAndSmall: {
-        /* legacy */
-        header1: theme.typography.types.headings.configs.header1.baseAndSmall.lineHeight,
-        header2: theme.typography.types.headings.configs.header2.baseAndSmall.lineHeight,
-        header3: theme.typography.types.headings.configs.header3.baseAndSmall.lineHeight,
-        header4: theme.typography.types.headings.configs.header4.baseAndSmall.lineHeight,
-        header5: theme.typography.types.headings.configs.header5.baseAndSmall.lineHeight,
-        'body-large': theme.typography.types.bodies.configs['body-large'].baseAndSmall.lineHeight,
-        'body-medium': theme.typography.types.bodies.configs['body-medium'].baseAndSmall.lineHeight,
-        body: theme.typography.types.bodies.configs.body.baseAndSmall.lineHeight,
-        'body-small': theme.typography.types.bodies.configs['body-small'].baseAndSmall.lineHeight,
-        'body-xsmall': theme.typography.types.bodies.configs['body-xsmall'].baseAndSmall.lineHeight,
-        'header-impact-xxl': theme.typography.types['headings-impact'].configs['header-impact-xxl'].baseAndSmall.lineHeight,
-        'header-impact-xl': theme.typography.types['headings-impact'].configs['header-impact-xl'].baseAndSmall.lineHeight,
-        'header-impact-l': theme.typography.types['headings-impact'].configs['header-impact-l'].baseAndSmall.lineHeight,
-        'header-impact-m': theme.typography.types['headings-impact'].configs['header-impact-m'].baseAndSmall.lineHeight,
-        'header-impact-s': theme.typography.types['headings-impact'].configs['header-impact-s'].baseAndSmall.lineHeight,
-        'header-impact-xs': theme.typography.types['headings-impact'].configs['header-impact-xs'].baseAndSmall.lineHeight,
-        'header-impact-xxs': theme.typography.types['headings-impact'].configs['header-impact-xxs'].baseAndSmall.lineHeight,
-        'header-impact-xxxs': theme.typography.types['headings-impact'].configs['header-impact-xxxs'].baseAndSmall.lineHeight,
-        /* latest */
-        'heading-impact-xxl': `${theme.typography.types['headings-impact'].configs['heading-impact-xxl'].baseAndSmall.lineHeight}px`,
-        'heading-impact-xl': `${theme.typography.types['headings-impact'].configs['heading-impact-xl'].baseAndSmall.lineHeight}px`,
-        'heading-impact-l': `${theme.typography.types['headings-impact'].configs['heading-impact-l'].baseAndSmall.lineHeight}px`,
-        'heading-impact-m': `${theme.typography.types['headings-impact'].configs['heading-impact-m'].baseAndSmall.lineHeight}px`,
-        'heading-impact-s': `${theme.typography.types['headings-impact'].configs['heading-impact-s'].baseAndSmall.lineHeight}px`,
-        'heading-impact-xs': `${theme.typography.types['headings-impact'].configs['heading-impact-xs'].baseAndSmall.lineHeight}px`,
-        'heading-impact-xxs': `${theme.typography.types['headings-impact'].configs['heading-impact-xxs'].baseAndSmall.lineHeight}px`,
-        'heading-impact-xxxs': `${theme.typography.types['headings-impact'].configs['heading-impact-xxxs'].baseAndSmall.lineHeight}px`,
-        'heading-xxl': `${theme.typography.types.headings.configs['heading-xxl'].baseAndSmall.lineHeight}px`,
-        'heading-xl': `${theme.typography.types.headings.configs['heading-xl'].baseAndSmall.lineHeight}px`,
-        'heading-l': `${theme.typography.types.headings.configs['heading-l'].baseAndSmall.lineHeight}px`,
-        'heading-m': `${theme.typography.types.headings.configs['heading-m'].baseAndSmall.lineHeight}px`,
-        'heading-s': `${theme.typography.types.headings.configs['heading-s'].baseAndSmall.lineHeight}px`,
-        'heading-xs': `${theme.typography.types.headings.configs['heading-xs'].baseAndSmall.lineHeight}px`,
-        'heading-xxs': `${theme.typography.types.headings.configs['heading-xxs'].baseAndSmall.lineHeight}px`,
-        'body-xl': `${theme.typography.types.bodies.configs['body-xl'].baseAndSmall.lineHeight}px`,
-        'body-l': `${theme.typography.types.bodies.configs['body-l'].baseAndSmall.lineHeight}px`,
-        'body-m': `${theme.typography.types.bodies.configs['body-m'].baseAndSmall.lineHeight}px`,
-        'body-s': `${theme.typography.types.bodies.configs['body-s'].baseAndSmall.lineHeight}px`,
-        'body-xs': `${theme.typography.types.bodies.configs['body-xs'].baseAndSmall.lineHeight}px`
-      },
-      mediumAndWide: {
-        /* legacy */
-        header1: theme.typography.types.headings.configs.header1.mediumAndWide.lineHeight,
-        header2: theme.typography.types.headings.configs.header2.mediumAndWide.lineHeight,
-        header3: theme.typography.types.headings.configs.header3.mediumAndWide.lineHeight,
-        header4: theme.typography.types.headings.configs.header4.mediumAndWide.lineHeight,
-        header5: theme.typography.types.headings.configs.header5.mediumAndWide.lineHeight,
-        'body-large': theme.typography.types.bodies.configs['body-large'].mediumAndWide.lineHeight,
-        'body-medium': theme.typography.types.bodies.configs['body-medium'].mediumAndWide.lineHeight,
-        body: theme.typography.types.bodies.configs.body.mediumAndWide.lineHeight,
-        'body-small': theme.typography.types.bodies.configs['body-small'].mediumAndWide.lineHeight,
-        'body-xsmall': theme.typography.types.bodies.configs['body-xsmall'].mediumAndWide.lineHeight,
-        'header-impact-xxl': theme.typography.types['headings-impact'].configs['header-impact-xxl'].mediumAndWide.lineHeight,
-        'header-impact-xl': theme.typography.types['headings-impact'].configs['header-impact-xl'].mediumAndWide.lineHeight,
-        'header-impact-l': theme.typography.types['headings-impact'].configs['header-impact-l'].mediumAndWide.lineHeight,
-        'header-impact-m': theme.typography.types['headings-impact'].configs['header-impact-m'].mediumAndWide.lineHeight,
-        'header-impact-s': theme.typography.types['headings-impact'].configs['header-impact-s'].mediumAndWide.lineHeight,
-        'header-impact-xs': theme.typography.types['headings-impact'].configs['header-impact-xs'].mediumAndWide.lineHeight,
-        'header-impact-xxs': theme.typography.types['headings-impact'].configs['header-impact-xxs'].mediumAndWide.lineHeight,
-        'header-impact-xxxs': theme.typography.types['headings-impact'].configs['header-impact-xxxs'].mediumAndWide.lineHeight,
-        /* latest */
-        'heading-impact-xxl': `${theme.typography.types['headings-impact'].configs['heading-impact-xxl'].mediumAndWide.lineHeight}px`,
-        'heading-impact-xl': `${theme.typography.types['headings-impact'].configs['heading-impact-xl'].mediumAndWide.lineHeight}px`,
-        'heading-impact-l': `${theme.typography.types['headings-impact'].configs['heading-impact-l'].mediumAndWide.lineHeight}px`,
-        'heading-impact-m': `${theme.typography.types['headings-impact'].configs['heading-impact-m'].mediumAndWide.lineHeight}px`,
-        'heading-impact-s': `${theme.typography.types['headings-impact'].configs['heading-impact-s'].mediumAndWide.lineHeight}px`,
-        'heading-impact-xs': `${theme.typography.types['headings-impact'].configs['heading-impact-xs'].mediumAndWide.lineHeight}px`,
-        'heading-impact-xxs': `${theme.typography.types['headings-impact'].configs['heading-impact-xxs'].mediumAndWide.lineHeight}px`,
-        'heading-impact-xxxs': `${theme.typography.types['headings-impact'].configs['heading-impact-xxxs'].mediumAndWide.lineHeight}px`,
-        'heading-xxl': `${theme.typography.types.headings.configs['heading-xxl'].mediumAndWide.lineHeight}px`,
-        'heading-xl': `${theme.typography.types.headings.configs['heading-xl'].mediumAndWide.lineHeight}px`,
-        'heading-l': `${theme.typography.types.headings.configs['heading-l'].mediumAndWide.lineHeight}px`,
-        'heading-m': `${theme.typography.types.headings.configs['heading-m'].mediumAndWide.lineHeight}px`,
-        'heading-s': `${theme.typography.types.headings.configs['heading-s'].mediumAndWide.lineHeight}px`,
-        'heading-xs': `${theme.typography.types.headings.configs['heading-xs'].mediumAndWide.lineHeight}px`,
-        'heading-xxs': `${theme.typography.types.headings.configs['heading-xxs'].mediumAndWide.lineHeight}px`,
-        'body-xl': `${theme.typography.types.bodies.configs['body-xl'].mediumAndWide.lineHeight}px`,
-        'body-l': `${theme.typography.types.bodies.configs['body-l'].mediumAndWide.lineHeight}px`,
-        'body-m': `${theme.typography.types.bodies.configs['body-m'].mediumAndWide.lineHeight}px`,
-        'body-s': `${theme.typography.types.bodies.configs['body-s'].mediumAndWide.lineHeight}px`,
-        'body-xs': `${theme.typography.types.bodies.configs['body-xs'].mediumAndWide.lineHeight}px`
-      }
+      'heading-xxl': `${theme.typography.types.headings.configs['heading-xxl'].lineHeight}px`,
+      'heading-xl': `${theme.typography.types.headings.configs['heading-xl'].lineHeight}px`,
+      'heading-l': `${theme.typography.types.headings.configs['heading-l'].lineHeight}px`,
+      'heading-m': `${theme.typography.types.headings.configs['heading-m'].lineHeight}px`,
+      'heading-s': `${theme.typography.types.headings.configs['heading-s'].lineHeight}px`,
+      'heading-xs': `${theme.typography.types.headings.configs['heading-xs'].lineHeight}px`,
+      'body-xl': `${theme.typography.types.bodies.configs['body-xl'].lineHeight}px`,
+      'body-l': `${theme.typography.types.bodies.configs['body-l'].lineHeight}px`,
+      'body-m': `${theme.typography.types.bodies.configs['body-m'].lineHeight}px`,
+      'body-s': `${theme.typography.types.bodies.configs['body-s'].lineHeight}px`,
+      'body-xs': `${theme.typography.types.bodies.configs['body-xs'].lineHeight}px`,
+      'label-large': `${theme.typography.types.labels.configs['label-large'].lineHeight}px`,
+      'label-medium': `${theme.typography.types.labels.configs['label-medium'].lineHeight}px`,
+      'content-caps-xxxl': `${theme.typography.types.contentCaps.configs['content-caps-xxxl'].lineHeight}px`,
+      'content-caps-xxl': `${theme.typography.types.contentCaps.configs['content-caps-xxl'].lineHeight}px`,
+      'content-caps-xl': `${theme.typography.types.contentCaps.configs['content-caps-xl'].lineHeight}px`,
+      'content-caps-l': `${theme.typography.types.contentCaps.configs['content-caps-l'].lineHeight}px`,
+      'content-caps-m': `${theme.typography.types.contentCaps.configs['content-caps-m'].lineHeight}px`,
+      'content-caps-s': `${theme.typography.types.contentCaps.configs['content-caps-s'].lineHeight}px`,
+      'content-caps-xs': `${theme.typography.types.contentCaps.configs['content-caps-xs'].lineHeight}px`
     },
     fontWeights: {
       headings: {
         regular: theme.typography.types.headings.fontWeight.regular,
         bold: theme.typography.types.headings.fontWeight.bold
       },
-      'headings-impact': {
-        regular: theme.typography.types['headings-impact'].fontWeight,
-        bold: theme.typography.types['headings-impact'].fontWeight
-      },
       bodies: {
         regular: theme.typography.types.bodies.fontWeight.regular,
         // TODO [https://ornikar.atlassian.net/browse/CME-767] This quick fix should be replaced by a 700 in every case, and native font weights should be handled by expo-fonts
         bold: reactNative.Platform.OS === 'android' ? 400 : theme.typography.types.bodies.fontWeight.bold
+      },
+      labels: {
+        semibold: theme.typography.types.labels.fontWeight.semibold
+      },
+      contentCaps: {
+        bold: theme.typography.types.contentCaps.fontWeight.bold
       }
     },
     fonts: {
       headings: reactNative.Platform.OS === 'web' ? theme.typography.types.headings.fontFamily.web : theme.typography.types.headings.fontFamily.native,
-      'headings-impact': reactNative.Platform.OS === 'web' ? theme.typography.types['headings-impact'].fontFamily.web : theme.typography.types['headings-impact'].fontFamily.native,
-      bodies: reactNative.Platform.OS === 'web' ? theme.typography.types.bodies.fontFamily.web : theme.typography.types.bodies.fontFamily.native
+      bodies: reactNative.Platform.OS === 'web' ? theme.typography.types.bodies.fontFamily.web : theme.typography.types.bodies.fontFamily.native,
+      labels: reactNative.Platform.OS === 'web' ? theme.typography.types.labels.fontFamily.web : theme.typography.types.labels.fontFamily.native,
+      contentCaps: reactNative.Platform.OS === 'web' ? theme.typography.types.contentCaps.fontFamily.web : theme.typography.types.contentCaps.fontFamily.native
     },
     shadows: {
       kitt: {
@@ -11500,7 +11381,7 @@ function createKittNativeBaseCustomTheme(theme, appTheme) {
             _disabled: {
               placeholderTextColor: theme.forms.input.states.disabled.color,
               color: theme.forms.input.states.disabled.color,
-              borderColor: theme.forms.input.states.disabled.borderColor,
+              borderColor: theme.forms.input.states.disabled.backgroundColor,
               bg: theme.forms.input.states.disabled.backgroundColor
             }
           }
@@ -11530,7 +11411,7 @@ function createKittNativeBaseCustomTheme(theme, appTheme) {
           fontStyle: theme.typography.types.bodies.fontStyle.regular,
           fontWeight: theme.typography.types.bodies.fontWeight.regular,
           fontSize: undefined,
-          lineHeight: theme.typography.types.bodies.configs.body.baseAndSmall.lineHeight
+          lineHeight: theme.typography.types.bodies.configs['body-m'].lineHeight
         }
       }
     }
@@ -11944,7 +11825,7 @@ function PickerOption({
 }) {
   return /*#__PURE__*/jsxRuntime.jsx(Typography.Text, {
     testID: testID,
-    base: "body",
+    base: "body-m",
     children: typeof children === 'function' ? children({
       isHighlighted,
       isSelected
@@ -12084,7 +11965,7 @@ function Picker({
             onPress: handleClose
           }),
           children: /*#__PURE__*/jsxRuntime.jsx(Typography.Text, {
-            base: "body",
+            base: "body-m",
             variant: "bold",
             children: title
           })
@@ -12175,8 +12056,9 @@ function SegmentedProgressBar({
   colorVariant = 'primary',
   withCurrentInProgress
 }) {
+  const kittTheme = useKittTheme();
   const height = size === 'small' ? 'kitt.2' : 'kitt.4';
-  const fillColor = colorVariant === 'validated' ? 'kitt.palettes.lateOcean.viride' : 'kitt.palettes.lateOcean.lateOceanLight1';
+  const fillColor = colorVariant === 'validated' ? kittTheme.kitt.palettes.deepPurple['green.6'] : kittTheme.kitt.palettes.deepPurple['deepPurple.8'];
   const steps = [...Array.from({
     length: stepsCount
   }).keys()];
@@ -12187,13 +12069,13 @@ function SegmentedProgressBar({
     overflow: "hidden",
     children: steps.map(stepNumber => {
       const isSegmentCurrentInProgress = withCurrentInProgress && stepNumber === currentStep - 1;
-      const color = stepNumber < currentStep ? fillColor : 'kitt.palettes.lateOcean.black50';
+      const color = stepNumber < currentStep ? fillColor : kittTheme.kitt.palettes.deepPurple['beige.1'];
       return /*#__PURE__*/jsxRuntime.jsx(nativeBase.View, {
         height: "100%",
         flexGrow: 1,
         flexShrink: 1,
         flexBasis: 0,
-        backgroundColor: isSegmentCurrentInProgress ? 'kitt.palettes.lateOcean.lateOceanLight3' : color,
+        backgroundColor: isSegmentCurrentInProgress ? kittTheme.kitt.palettes.deepPurple['deepPurple.5'] : color,
         borderRadius: 2,
         overflow: "hidden",
         alignItems: "center",
@@ -12554,9 +12436,9 @@ const getBackgroundColorFromBlockColor = (theme, color = 'transparent') => {
     case 'white':
       return '#ffffff';
     case 'light':
-      return theme.kitt.palettes.lateOcean['eggshell.2'];
+      return theme.kitt.palettes.deepPurple['beige.1'];
     case 'primary':
-      return theme.kitt.palettes.lateOcean['violine.9'];
+      return theme.kitt.palettes.deepPurple['deepPurple.8'];
     default:
       return 'transparent';
   }
@@ -12606,8 +12488,7 @@ function StoryTitle({
   return /*#__PURE__*/jsxRuntime.jsx(View, {
     marginBottom: 30,
     children: /*#__PURE__*/jsxRuntime.jsx(Typography.Header1, {
-      variant: "bold",
-      base: "header1",
+      base: "heading-xl",
       color: useStoryBlockColor(color),
       numberOfLines: numberOfLines,
       children: children
@@ -12622,8 +12503,7 @@ function StoryTitleLevel2({
   return /*#__PURE__*/jsxRuntime.jsx(View, {
     marginBottom: 30,
     children: /*#__PURE__*/jsxRuntime.jsx(Typography.Header2, {
-      variant: "bold",
-      base: "header2",
+      base: "heading-l",
       color: useStoryBlockColor(color),
       numberOfLines: numberOfLines,
       children: children
@@ -12639,9 +12519,7 @@ function StoryTitleLevel3({
   return /*#__PURE__*/jsxRuntime.jsx(View, {
     marginBottom: 10,
     children: /*#__PURE__*/jsxRuntime.jsx(Typography.Header3, {
-      variant: "bold",
-      base: "header3",
-      medium: "header4",
+      base: "heading-m",
       color: useStoryBlockColor(color),
       numberOfLines: numberOfLines,
       children: children
@@ -12657,9 +12535,7 @@ function StoryTitleLevel4({
   return /*#__PURE__*/jsxRuntime.jsx(View, {
     marginBottom: 10,
     children: /*#__PURE__*/jsxRuntime.jsx(Typography.Header4, {
-      variant: "bold",
-      base: "header4",
-      medium: "header5",
+      base: "heading-s",
       color: useStoryBlockColor(color),
       numberOfLines: numberOfLines,
       children: children
@@ -12851,15 +12727,15 @@ function useTabBarItemColor(color, isActive) {
   switch (color) {
     case 'black':
       {
-        return isActive ? kittTheme.palettes.lateOcean.black : kittTheme.palettes.lateOcean['eggshell.10'];
+        return isActive ? kittTheme.colors.primary : kittTheme.colors.blackLight;
       }
     case 'white':
       {
-        return kittTheme.palettes.lateOcean.white;
+        return isActive ? kittTheme.palettes.deepPurple.white : kittTheme.palettes.deepPurple['white-alpha.80'];
       }
     default:
       {
-        return isActive ? kittTheme.palettes.lateOcean.black : kittTheme.palettes.lateOcean['eggshell.10'];
+        return isActive ? kittTheme.colors.primary : kittTheme.colors.blackLight;
       }
   }
 }
@@ -12870,15 +12746,15 @@ function useTabBarIndicatorColor(color, isActive) {
   switch (color) {
     case 'black':
       {
-        return isActive ? kittTheme.palettes.lateOcean.black : kittTheme.palettes.lateOcean.transparent;
+        return isActive ? kittTheme.colors.primary : kittTheme.palettes.deepPurple.transparent;
       }
     case 'white':
       {
-        return isActive ? kittTheme.palettes.lateOcean.white : kittTheme.palettes.lateOcean.transparent;
+        return isActive ? kittTheme.palettes.deepPurple.white : kittTheme.palettes.deepPurple.transparent;
       }
     default:
       {
-        return isActive ? kittTheme.palettes.lateOcean.black : kittTheme.palettes.lateOcean['eggshell.10'];
+        return isActive ? kittTheme.colors.primary : kittTheme.palettes.deepPurple.transparent;
       }
   }
 }
@@ -12946,7 +12822,7 @@ function TabBar({
     paddingRight: align === 'center' ? 'kitt.2' : 'kitt.12',
     minWidth: '100%',
     borderBottomWidth: 1,
-    borderBottomColor: kittTheme.palettes.lateOcean['eggshell.3']
+    borderBottomColor: kittTheme.palettes.deepPurple['beige.2']
   });
   return /*#__PURE__*/jsxRuntime.jsx(ScrollView, {
     horizontal: true,
@@ -12986,36 +12862,39 @@ const getTypography = size => {
       return 'body-m';
   }
 };
-const typeToColor$1 = (color, type) => {
-  if (color) return color;
-  switch (type) {
-    case 'primary':
-      return 'violine';
-    case 'warn':
-      return 'sun';
-    case 'danger':
-      return 'coral';
-    case 'default':
-    default:
-      return 'eggshell';
-  }
-};
 function Tag({
   label,
   icon,
-  color,
-  type,
+  color = 'beige',
   size = 'medium',
-  variant = 'fill',
-  withWhiteBorder = false
+  withWhiteBorder
 }) {
   const kittTheme = useKittTheme();
-  const tagColor = typeToColor$1(color, type);
-  const getFontColor = () => {
-    if (variant === 'contrast') {
-      return kittTheme.kitt.palettes.lateOcean[`${tagColor}.${tagColor === 'sun' ? 12 : 2}`];
+  const colorMatching = {
+    beige: {
+      background: kittTheme.kitt.palettes.deepPurple['beige.2'],
+      font: kittTheme.kitt.palettes.deepPurple['deepPurple.8']
+    },
+    yellow: {
+      background: kittTheme.kitt.palettes.deepPurple['yellow.6'],
+      font: kittTheme.kitt.palettes.deepPurple['grey.9']
+    },
+    red: {
+      background: kittTheme.kitt.palettes.deepPurple['red.6'],
+      font: kittTheme.kitt.palettes.deepPurple['grey.0']
+    },
+    blue: {
+      background: kittTheme.kitt.palettes.deepPurple['blue.6'],
+      font: kittTheme.kitt.palettes.deepPurple['grey.0']
+    },
+    green: {
+      background: kittTheme.kitt.palettes.deepPurple['green.6'],
+      font: kittTheme.kitt.palettes.deepPurple['grey.0']
+    },
+    deepPurple: {
+      background: kittTheme.kitt.palettes.deepPurple['deepPurple.8'],
+      font: kittTheme.kitt.palettes.deepPurple['beige.1']
     }
-    return 'black';
   };
   return /*#__PURE__*/jsxRuntime.jsxs(HStack, {
     alignSelf: "flex-start",
@@ -13023,31 +12902,21 @@ function Tag({
     height: `kitt.tag.${size}.height`,
     paddingLeft: `kitt.tag.${icon ? 'withIcon' : 'withoutIcon'}.${size}.paddingLeft`,
     paddingRight: `kitt.tag.${icon ? 'withIcon' : 'withoutIcon'}.${size}.paddingRight`,
-    backgroundColor: variant === 'fill' || variant === 'contrast' ? (() => {
-      if (variant === 'subtle') {
-        return 'transparent';
-      }
-      if (variant === 'contrast') {
-        return kittTheme.kitt.palettes.lateOcean[`${tagColor}.9`];
-      }
-      return kittTheme.kitt.palettes.lateOcean[`${tagColor}.4`];
-    })() : 'kitt.transparent',
-    borderColor: withWhiteBorder ? 'kitt.white' : (() => {
-      return kittTheme.kitt.palettes.lateOcean[`${tagColor}.6`];
-    })(),
-    borderWidth: withWhiteBorder ? 1 : `kitt.tag.variant.${variant}.borderWidth`,
+    backgroundColor: colorMatching[color].background,
+    borderWidth: withWhiteBorder ? 1 : 0,
+    borderColor: withWhiteBorder ? 'kitt.white' : undefined,
     space: "kitt.1",
     alignItems: "center",
     maxWidth: "100%",
     children: [icon ? /*#__PURE__*/jsxRuntime.jsx(TypographyIcon, {
       icon: icon,
       size: `kitt.tag.${size}.iconSize`,
-      color: getFontColor()
+      color: colorMatching[color].font
     }) : null, /*#__PURE__*/jsxRuntime.jsx(View, {
       flexShrink: 1,
       children: /*#__PURE__*/jsxRuntime.jsx(Typography.Text, {
         base: getTypography(size),
-        color: getFontColor(),
+        color: colorMatching[color].font,
         numberOfLines: 1,
         ellipsizeMode: "tail",
         children: label
@@ -13266,7 +13135,7 @@ function ToastContent({
     flexGrow: 1,
     flexShrink: 1,
     children: [title ? /*#__PURE__*/jsxRuntime.jsx(Typography.Text, {
-      base: "heading-xxs",
+      base: "heading-xs",
       color: "white",
       children: title
     }) : null, description ? /*#__PURE__*/jsxRuntime.jsx(Typography.Text, {
@@ -13282,7 +13151,7 @@ function ToastContent({
       borderColor: "white",
       onPress: onPress,
       children: /*#__PURE__*/jsxRuntime.jsx(Typography.Text, {
-        base: "heading-xxs",
+        base: "heading-xs",
         color: "white",
         children: actionLabel
       })
@@ -13295,9 +13164,9 @@ const typeToColor = type => {
     case 'success':
       return 'green';
     case 'danger':
-      return 'coral';
+      return 'red';
     case 'warning':
-      return 'sun';
+      return 'yellow';
     default:
       return 'blue';
   }
@@ -13355,7 +13224,7 @@ function ToastComponent({
   }, [handleHideToast, outro, width, toastTimeout]);
   return /*#__PURE__*/jsxRuntime.jsxs(View, {
     alignSelf: stretch ? 'flex-start' : 'auto',
-    backgroundColor: kittTheme.kitt.palettes.lateOcean['eggshell.12'],
+    backgroundColor: kittTheme.kitt.palettes.deepPurple['grey.9'],
     borderRadius: "kitt.2",
     maxWidth: {
       base: '100%',
@@ -13369,7 +13238,7 @@ function ToastComponent({
       children: [/*#__PURE__*/jsxRuntime.jsx(TypographyIcon, {
         icon: icon,
         size: "kitt.5",
-        color: kittTheme.kitt.palettes.lateOcean[`${color}.8`]
+        color: kittTheme.kitt.palettes.deepPurple[`${color}.6`]
       }), /*#__PURE__*/jsxRuntime.jsx(ToastContent, {
         title: title,
         description: description,
@@ -13387,7 +13256,7 @@ function ToastComponent({
       }) : null]
     }), outro === 'timer' ? /*#__PURE__*/jsxRuntime.jsx(AnimatedView$1, {
       alignSelf: "flex-end",
-      backgroundColor: kittTheme.kitt.palettes.lateOcean[`${color}.8`],
+      backgroundColor: kittTheme.kitt.palettes.deepPurple[`${color}.6`],
       height: "kitt.1",
       style: animatedStyle
     }) : null]
@@ -13444,7 +13313,7 @@ function TooltipContent({
     paddingY: "kitt.tooltip.verticalPadding",
     paddingX: "kitt.tooltip.horizontalPadding",
     children: /*#__PURE__*/jsxRuntime.jsx(Typography.Text, {
-      base: "body-small",
+      base: "body-s",
       color: "white-light",
       children: children
     })
@@ -13647,12 +13516,12 @@ function calcSizesFromType(type, theme) {
     medium: type.medium || type.small || type.base
   };
   const size = {
-    base: getTypographyTypeConfig(type.base ?? 'body', theme).baseAndSmall.fontSize
+    base: getTypographyTypeConfig(type.base ?? 'body-m', theme).fontSize
   };
   [KittBreakpointNameEnum.SMALL, KittBreakpointNameEnum.MEDIUM, KittBreakpointNameEnum.LARGE, KittBreakpointNameEnum.WIDE].forEach(typeName => {
     const value = typeWithMediumForced[typeName];
     if (value) {
-      size[typeName] = getTypographyTypeConfig(value, theme)[getTypographyTypeConfigKeyFromTypeName(typeName)].fontSize;
+      size[typeName] = getTypographyTypeConfig(value, theme).fontSize;
     }
   });
   const marginLeft = {};
@@ -13979,7 +13848,7 @@ function BorderlessStep({
       width: 2,
       borderRadius: 2,
       position: "absolute",
-      backgroundColor: "kitt.palettes.lateOcean.black50",
+      backgroundColor: "kitt.accent",
       overflow: "hidden",
       children: isNextDone ? /*#__PURE__*/jsxRuntime.jsx(AnimatedView, {
         style: progressBarAnimatedStyles,
@@ -14061,7 +13930,7 @@ function Step({
         state: state,
         index: index
       }), !isLast ? /*#__PURE__*/jsxRuntime.jsx(View, {
-        backgroundColor: shouldDisableNextLink ? 'kitt.palettes.lateOcean.black100' : 'kitt.palettes.lateOcean.moonPurple',
+        backgroundColor: shouldDisableNextLink ? 'kitt.accent' : 'kitt.primary',
         width: 1,
         position: "absolute",
         top: 46,