diff --git a/src/assets/theme/colors.ts b/src/assets/theme/colors.ts
index dade5b8..30d2e0b 100644
--- a/src/assets/theme/colors.ts
+++ b/src/assets/theme/colors.ts
@@ -1,80 +1,218 @@
 export type TColor =
   | 'transparent'
-  | 'white'
-  | 'black'
-  | 'mercury'
-  | 'alto'
-  | 'gray'
-  | 'regentGray'
-  | 'silver'
-  | 'darkBlue'
-  | 'dodgerBlue'
-  | 'periwinkleGray'
-  | 'baliHai'
-  | 'solitude'
-  | 'apple'
-  | 'madang'
-  | 'mantis'
-  | 'thunderbird'
-  | 'toreaBay'
-  | 'azureRadiance'
-  | 'oliveDrab'
-  | 'mineShaft'
+  | 'npwBase01'
+  | 'npwBase02'
+  | 'npwBase03'
+  | 'npwBase04'
+  | 'npwBase05'
+  | 'npwBase06'
+  | 'npwBase07'
+  | 'npwBase08'
+  | 'npwBase09'
+  | 'npwPrimary'
+  | 'npwPrimaryHover'
+  | 'npwPrimaryActive'
+  | 'npwPrimaryText'
+  | 'npwSecondary'
+  | 'npwSecondaryHover'
+  | 'npwSecondaryActive'
+  | 'npwAccent'
+  | 'npwAccentHover'
+  | 'npwAccentActive'
+  | 'npwAccentText'
+  | 'npwSelection'
+  | 'npwFocus'
+  | 'npwClear'
+  | 'npwClearDisabled'
+  | 'npwClearHover'
+  | 'npwClearActive'
+  | 'npwClearInverse'
+  | 'npwClearInverseHover'
+  | 'npwClearInverseActive'
+  | 'npwErrorFill'
+  | 'npwErrorBg'
+  | 'npwErrorBgHover'
+  | 'npwSuccessFill'
+  | 'npwSuccessBg'
+  | 'npwSuccessBgHover'
+  | 'npwWarningFill'
+  | 'npwWarningBg'
+  | 'npwWarningBgHover'
+  | 'npwInfoFill'
+  | 'npwInfoBg'
+  | 'npwInfoBgHover'
+  | 'npwNeutralFill'
+  | 'npwNeutralBg'
+  | 'npwNeutralBgHover'
+  | 'npwText01'
+  | 'npwText02'
+  | 'npwText03'
+  | 'npwLink'
+  | 'npwLinkHover'
+  | 'npwPositive'
+  | 'npwPositiveHover'
+  | 'npwNegative'
+  | 'npwNegativeHover'
+  | 'npwErrorFillNight'
+  | 'npwErrorBgNight'
+  | 'npwErrorBgNightHover'
+  | 'npwSuccessFillNight'
+  | 'npwSuccessBgNight'
+  | 'npwSuccessBgNightHover'
+  | 'npwWarningFillNight'
+  | 'npwWarningBgNight'
+  | 'npwWarningBgNightHover'
+  | 'npwInfoFillNight'
+  | 'npwInfoBgNight'
+  | 'npwInfoBgNightHover'
+  | 'npwNeutralFillNight'
+  | 'npwNeutralBgNight'
+  | 'npwNeutralBgNightHover'
+  | 'npwText01Night'
+  | 'npwText02Night'
+  | 'npwText03Night'
+  | 'npwLinkNight'
+  | 'npwLinkNightHover'
+  | 'npwPositiveNight'
+  | 'npwPositiveNightHover'
+  | 'npwNegativeNight'
+  | 'npwNegativeNightHover'
+  | 'npwSupport01'
+  | 'npwSupport02'
+  | 'npwSupport03'
+  | 'npwSupport04'
+  | 'npwSupport05'
+  | 'npwSupport06'
+  | 'npwSupport07'
+  | 'npwSupport08'
+  | 'npwSupport09'
+  | 'npwSupport10'
+  | 'npwSupport11'
+  | 'npwSupport12'
+  | 'npwSupport13'
+  | 'npwSupport14'
+  | 'npwSupport15'
+  | 'npwSupport16'
+  | 'npwSupport17'
+  | 'npwSupport18'
+  | 'npwSupport19'
+  | 'npwSupport20'
+  | 'npwSupport21'
+  | 'npwSupport22'
 
 /**
  List of possible colors in your app.
  This is used for better color management and suggestions from your *Editor*.
- You should *avoid* using it directly if there is a color in your palette that represents it; like `primary` or `secondary`.
-
- Every index must have a comment: `@color #ffffff rgb(255,255,255)` with a hex value that represents a color.
- It helps to identify the desired color from this list.
  **/
 
 const colors: {
   [index in TColor]: string
 } = {
-  // @color transparent
   transparent: 'transparent',
-  // @color #ffffff rgb(255,255,255)
-  white: '#ffffff',
-  // @color #000000 rgb(0,0,0)
-  black: '#000000',
-  // @color #E5E5E5 rgb(229,229,229)
-  mercury: '#E5E5E5',
-  // @color #E0E0E0 rgb(224,224,224)
-  alto: '#e0e0e0',
-  // @color #828282 rgb(130,130,130)
-  gray: '#828282',
-  // @color #8392a6 rgb(131,146,166)
-  regentGray: '#8392a6',
-  // @color #C4C4C4 rgb(196,196,196)
-  silver: '#C4C4C4',
-  // @color #071332 rgb(7,19,50)
-  darkBlue: '#071332',
-  // @color #39A5FF rgb(57,165,255)
-  dodgerBlue: '#39A5FF',
-  // @color #CBDDEC rgb(203,221,236)
-  periwinkleGray: '#cbddec',
-  // @color #7D94A8 rgb(125,148,168)
-  baliHai: '#7D94A8',
-  // @color #EBF6FF rgb(235,246,255)
-  solitude: '#EBF6FF',
-  // @color #68B73F rgb(104,183,63)
-  apple: '#68B73F',
-  // @color #C3F1AB rgb(195,241,171)
-  madang: '#C3F1AB',
-  // @color #70C445 rgb(112,196,69)
-  mantis: '#70C445',
-  // @color #BC1616 rgb(188,22,22)
-  thunderbird: '#BC1616',
-  // @color #0b2e8e rgb(11,46,142)
-  toreaBay: '#0b2e8e',
-  // @color #008BFF rgb(0,139,255)
-  azureRadiance: '#008BFF',
-  // @color #478825 rgb(71,136,37)
-  oliveDrab: '#478825',
-  // @color #333333 rgb(51,51,51)
-  mineShaft: '#333333'
+  npwBase01: '#fff',
+  npwBase02: '#f6f6f6',
+  npwBase03: '#ededed', // basic border
+  npwBase04: '#d7d7d7', // hovered borders
+  npwBase05: '#b0b0b0', // interface icons
+  npwBase06: '#959595', // hovered interface icons
+  npwBase07: '#808080', // inverted background
+  npwBase08: '#333', // dark interface icons
+  npwBase09: '#000', // icons on inverted background
+  npwPrimary: '#526ed3', // primary buttons, background
+  npwPrimaryHover: '#6c86e2', // primary buttons hover
+  npwPrimaryActive: '#314692', // primary buttons hover
+  npwPrimaryText: '#fff', // text on primary background
+  npwSecondary: '#ebefff', // inputs and secondary buttons
+  npwSecondaryHover: '#dfe3f3', // inputs and secondary buttons hover
+  npwSecondaryActive: '#d8ddf2', // inputs and secondary buttons pressed
+  npwAccent: '#ff8078', // fill and outline of accent elements
+  npwAccentHover: '#ff9a94', // accent elements hover
+  npwAccentActive: '#e7716a', // accent elements pressed
+  npwAccentText: '#fff', // text on accent background
+  npwSelection: 'rgba(112, 182, 246, 0.12)', // selected text background
+  npwFocus: 'rgba(51, 51, 51, 0.64)', // focus ring color
+  npwClear: 'rgba(0, 0, 0, 0.08)', // translucent dark fill
+  npwClearDisabled: 'rgba(0, 0, 0, 0.04)', // translucent dark fill disabled
+  npwClearHover: 'rgba(0, 0, 0, 0.16)', // translucent dark fill hover
+  npwClearActive: 'rgba(0, 0, 0, 0.2)', // translucent dark fill pressed
+  npwClearInverse: 'rgba(255, 255, 255, 0.16)', // translucent light fill
+  npwClearInverseHover: 'rgba(255, 255, 255, 0.24)', // translucent light fill hover
+  npwClearInverseActive: 'rgba(255, 255, 255, 0.4)', // translucent light fill pressed
+  // Statuses
+  npwErrorFill: 'rgba(244, 87, 37, 1)', // icons and decorative elements with error status
+  npwErrorBg: 'rgba(244, 87, 37, 0.12)', // translucent error background
+  npwErrorBgHover: 'rgba(244, 87, 37, 0.24)', // translucent hover error background
+  npwSuccessFill: 'rgba(74, 201, 155, 1)', // icon and decorative elements with success status
+  npwSuccessBg: 'rgba(74, 201, 155, 0.12)', // translucent success background
+  npwSuccessBgHover: 'rgba(74, 201, 155, 0.24)', // translucent success hover
+  npwWarningFill: 'rgba(255, 199, 0, 1)', // icon and decorative elements with warning status
+  npwWarningBg: 'rgba(255, 199, 0, 0.12)', // translucent warning background
+  npwWarningBgHover: 'rgba(255, 199, 0, 0.24)', // translucent warning background
+  npwInfoFill: 'rgba(112, 182, 246, 1)', // icon and decorative elements with info status
+  npwInfoBg: 'rgba(112, 182, 246, 0.12)', // translucent info background
+  npwInfoBgHover: 'rgba(112, 182, 246, 0.24)', // translucent info background
+  npwNeutralFill: 'rgb(121, 129, 140)', // icon and decorative elements with neutral status
+  npwNeutralBg: 'rgba(121, 129, 140, 0.12)', // translucent info background
+  npwNeutralBgHover: 'rgba(121, 129, 140, 0.24)', // translucent info background
+  // Text
+  npwText01: 'rgba(27, 31, 59, 1)',
+  npwText02: 'rgba(27, 31, 59, 0.65)',
+  npwText03: 'rgba(27, 31, 59, 0.4)',
+  npwLink: '#526ed3',
+  npwLinkHover: '#6c86e2',
+  npwPositive: '#3aa981',
+  npwPositiveHover: '#7ac5aa',
+  npwNegative: '#dd4c1e',
+  npwNegativeHover: '#e38163',
+  // Modifiers for dark background
+  npwErrorFillNight: 'rgba(255, 140, 103, 1)',
+  npwErrorBgNight: 'rgba(244, 87, 37, 0.32)',
+  npwErrorBgNightHover: 'rgba(244, 87, 37, 0.4)',
+  npwSuccessFillNight: 'rgb(74, 201, 155)',
+  npwSuccessBgNight: 'rgba(74, 201, 155, 0.32)',
+  npwSuccessBgNightHover: 'rgba(74, 201, 155, 0.4)',
+  npwWarningFillNight: 'rgb(255, 199, 0)',
+  npwWarningBgNight: 'rgba(255, 199, 0, 0.32)',
+  npwWarningBgNightHover: 'rgba(255, 199, 0, 0.4)',
+  npwInfoFillNight: 'rgb(112, 182, 246)',
+  npwInfoBgNight: 'rgba(112, 182, 246, 0.32)',
+  npwInfoBgNightHover: 'rgba(112, 182, 246, 0.4)',
+  npwNeutralFillNight: 'rgb(149, 155, 164)',
+  npwNeutralBgNight: 'rgb(149, 155, 164, 0.32)',
+  npwNeutralBgNightHover: 'rgb(149, 155, 164, 0.48)',
+  //
+  npwText01Night: 'rgba(255, 255, 255, 1)',
+  npwText02Night: 'rgba(255, 255, 255, 0.72)',
+  npwText03Night: 'rgba(255, 255, 255, 0.6)',
+  npwLinkNight: '#6788ff',
+  npwLinkNightHover: '#526ed3',
+  npwPositiveNight: '#44c596',
+  npwPositiveNightHover: '#3aa981',
+  npwNegativeNight: '#ff8c67',
+  npwNegativeNightHover: '#bb593a',
+  //
+  npwSupport01: '#a8cef1',
+  npwSupport02: '#3682db',
+  npwSupport03: '#8dda71',
+  npwSupport04: '#34b41f',
+  npwSupport05: '#e29398',
+  npwSupport06: '#b8474e',
+  npwSupport07: '#fcc068',
+  npwSupport08: '#ff8a00',
+  npwSupport09: '#dab3f9',
+  npwSupport10: '#7b439e',
+  npwSupport11: '#fee797',
+  npwSupport12: '#fcbb14',
+  npwSupport13: '#ea97c4',
+  npwSupport14: '#bd65a4',
+  npwSupport15: '#7fd7cc',
+  npwSupport16: '#2fad96',
+  npwSupport17: '#d4aca2',
+  npwSupport18: '#9d6f64',
+  npwSupport19: '#d2e9a2',
+  npwSupport20: '#aadc42',
+  npwSupport21: '#a0c5df',
+  npwSupport22: '#3c7ba8'
 }
 
 export default colors
diff --git a/src/assets/theme/gradients.ts b/src/assets/theme/gradients.ts
index 1b47c5b..e60a5a5 100644
--- a/src/assets/theme/gradients.ts
+++ b/src/assets/theme/gradients.ts
@@ -1,9 +1,3 @@
-import colors from './colors'
-
-const gradients = {
-  gradient1: `radial-gradient(66.71% 115.76% at 4.44% 45.46%, ${colors.madang} 0%, ${colors.mantis} 100%)`,
-  gradient2: `radial-gradient(50.21% 53.11% at 24.64% 0%, ${colors.white} 0%, ${colors.dodgerBlue} 100%)`,
-  gradient3: `linear-gradient(269.17deg, rgba(0, 139, 255, 0.2) -17.87%, rgba(57, 165, 255, 0.036) 99.24%)`
-}
+const gradients = {}
 
 export default gradients
diff --git a/src/assets/theme/index.ts b/src/assets/theme/index.ts
index eae98bb..d3c7610 100644
--- a/src/assets/theme/index.ts
+++ b/src/assets/theme/index.ts
@@ -2,7 +2,6 @@ import breakpoints from './breakpoints'
 import colors from './colors'
 import constants from './constants'
 import gradients from './gradients'
-import palette from './palette'
 import shadows from './shadows'
 import transitions from './transitions'
 
@@ -12,7 +11,6 @@ export interface ITheme {
   colors: typeof colors
   constants: typeof constants
   gradients: typeof gradients
-  palette: typeof palette
   shadows: typeof shadows
   transitions: typeof transitions
 }
@@ -23,7 +21,6 @@ const theme = {
   colors,
   constants,
   gradients,
-  palette,
   shadows,
   transitions
 }
diff --git a/src/assets/theme/palette.ts b/src/assets/theme/palette.ts
deleted file mode 100644
index 66220b1..0000000
--- a/src/assets/theme/palette.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import colors, { TColor } from './colors'
-
-export type TPalletColor = TColor | 'primary' | 'secondary'
-
-const palette: {
-  [index in TPalletColor]: string
-} = {
-  ...colors,
-  primary: colors.apple,
-  secondary: colors.dodgerBlue
-}
-
-export default palette
diff --git a/src/components/blocks/Page/Content.ts b/src/components/blocks/Page/Content.ts
index aadf505..9164786 100644
--- a/src/components/blocks/Page/Content.ts
+++ b/src/components/blocks/Page/Content.ts
@@ -6,7 +6,7 @@ const Content = styled('main')`
   min-height: 125px;
   z-index: 1;
 
-  background: ${(props) => props.theme.colors.white};
+  background: ${(props) => props.theme.colors.npwBase01};
 
   @media (max-width: ${(props) => props.theme.breakpoints.sm}) {
     margin-top: 125px;
diff --git a/src/components/blocks/Page/index.ts b/src/components/blocks/Page/index.ts
index daba419..e033830 100644
--- a/src/components/blocks/Page/index.ts
+++ b/src/components/blocks/Page/index.ts
@@ -9,7 +9,7 @@ const Page = styled('div')`
   min-height: 100vh;
   width: 100%;
 
-  background: ${(props) => props.theme.colors.solitude};
+  background: ${(props) => props.theme.colors.npwBase01};
 
   grid-template-columns: auto;
   grid-template-areas:
diff --git a/src/components/elements/Button/ButtonText.ts b/src/components/elements/Button/ButtonText.ts
index fb9e80e..01f553d 100644
--- a/src/components/elements/Button/ButtonText.ts
+++ b/src/components/elements/Button/ButtonText.ts
@@ -2,8 +2,9 @@ import styled from '@emotion/styled'
 
 import theme from '../../../assets/theme'
 import { changeOpacityOnLoading } from './LoaderContainer'
+import { colorStates } from './variants/_colorVariants'
 
-const ButtonText = styled('span')<{ isLoading?: boolean }>`
+const ButtonText = styled('span')<{ isLoading?: boolean; colorStates: colorStates }>`
   font-weight: bold;
   font-size: 16px;
   line-height: 25px;
diff --git a/src/components/elements/Button/index.tsx b/src/components/elements/Button/index.tsx
index 608015b..bc86378 100644
--- a/src/components/elements/Button/index.tsx
+++ b/src/components/elements/Button/index.tsx
@@ -48,7 +48,11 @@ const Button = ({ children = null, variant = 'primary', ...props }: IButtonProps
         </IconContainer>
       )}
       {children && (
-        <Variant.Text {...props} {...props.textProps}>
+        <Variant.Text
+          {...props}
+          {...props.textProps}
+          colorStates={props.colorStates || colorVariants[variant]}
+        >
           {children}
         </Variant.Text>
       )}
diff --git a/src/components/elements/Button/variants/_colorVariants.ts b/src/components/elements/Button/variants/_colorVariants.ts
index dec5e3f..2d0e9b1 100644
--- a/src/components/elements/Button/variants/_colorVariants.ts
+++ b/src/components/elements/Button/variants/_colorVariants.ts
@@ -1,11 +1,11 @@
-import { TPalletColor } from '../../../../assets/theme/palette'
+import { TColor } from '../../../../assets/theme/colors'
 
 export type colorStates = {
-  unset: TPalletColor
-  hover: TPalletColor
-  active: TPalletColor
-  focus: TPalletColor
-  disabled: TPalletColor
+  unset: TColor
+  hover: TColor
+  active: TColor
+  focus: TColor
+  disabled: TColor
 }
 
 interface colorVariant {
@@ -14,25 +14,25 @@ interface colorVariant {
 
 const colorVariants: colorVariant = {
   primary: {
-    unset: 'primary',
-    hover: 'primary',
-    active: 'primary',
-    focus: 'primary',
-    disabled: 'gray'
+    unset: 'npwPrimary',
+    hover: 'npwPrimaryHover',
+    active: 'npwPrimaryActive',
+    focus: 'npwPrimaryActive',
+    disabled: 'npwPrimaryActive'
   },
   secondary: {
-    unset: 'secondary',
-    hover: 'secondary',
-    active: 'secondary',
-    focus: 'secondary',
-    disabled: 'transparent'
+    unset: 'npwPositive',
+    hover: 'npwPositiveHover',
+    active: 'npwPositiveHover',
+    focus: 'npwPositiveHover',
+    disabled: 'npwSuccessBgNight'
   },
   transparent: {
     unset: 'transparent',
     hover: 'transparent',
     active: 'transparent',
     focus: 'transparent',
-    disabled: 'gray'
+    disabled: 'transparent'
   }
 }
 
diff --git a/src/components/elements/Button/variants/primary/PrimaryButtonText.ts b/src/components/elements/Button/variants/primary/PrimaryButtonText.ts
index 1fa9870..a26fda9 100644
--- a/src/components/elements/Button/variants/primary/PrimaryButtonText.ts
+++ b/src/components/elements/Button/variants/primary/PrimaryButtonText.ts
@@ -3,7 +3,10 @@ import styled from '@emotion/styled'
 import ButtonText from '../../ButtonText'
 
 const PrimaryButtonText = styled(ButtonText)`
-  color: ${(props) => props.theme.palette['white']};
+  color: ${(props) =>
+    props.colorStates.unset === 'transparent'
+      ? props.theme.colors.npwBase09
+      : props.theme.colors.npwBase01};
 `
 
 export default PrimaryButtonText
diff --git a/src/components/elements/Button/variants/primary/PrimaryStyledButton.ts b/src/components/elements/Button/variants/primary/PrimaryStyledButton.ts
index c68ff5d..de88ef5 100644
--- a/src/components/elements/Button/variants/primary/PrimaryStyledButton.ts
+++ b/src/components/elements/Button/variants/primary/PrimaryStyledButton.ts
@@ -7,30 +7,30 @@ import { colorStates } from '../_colorVariants'
 
 const disabledStyle = (props: { theme: Theme; colorStates: colorStates }) => css`
   box-shadow: unset;
-  background: ${props.theme.palette['alto']};
-  border-color: ${props.theme.palette['alto']};
+  background: ${props.theme.colors[props.colorStates.disabled]};
+  border-color: ${props.theme.colors[props.colorStates.disabled]};
   cursor: default;
 
   &:hover {
     box-shadow: unset;
-    background: ${props.theme.palette['alto']};
-    border-color: ${props.theme.palette['alto']};
+    background: ${props.theme.colors[props.colorStates.disabled]};
+    border-color: ${props.theme.colors[props.colorStates.disabled]};
   }
 `
 
 const PrimaryStyledButton = styled(StyledButton)`
-  box-shadow: 0 4px 20px 0 ${(props) => hexToRGB(props.theme.palette[props.colorStates.unset], 0.3)};
-  border: 2px solid ${(props) => props.theme.palette[props.colorStates.unset]};
-  background: ${(props) => props.theme.palette[props.colorStates.unset]};
+  box-shadow: 0 4px 20px 0 ${(props) => hexToRGB(props.theme.colors[props.colorStates.unset], 0.3)};
+  border: 2px solid ${(props) => props.theme.colors[props.colorStates.unset]};
+  background: ${(props) => props.theme.colors[props.colorStates.unset]};
   padding: 16px 30px;
   border-radius: 3px;
   transition: all ${(props) => props.theme.transitions.normal};
 
   &:hover {
     box-shadow: 0 4px 20px 0
-      ${(props) => hexToRGB(props.theme.palette[props.colorStates.hover], 0.3)};
-    border: 2px solid ${(props) => props.theme.palette[props.colorStates.hover]};
-    background: ${(props) => props.theme.palette[props.colorStates.hover]};
+      ${(props) => hexToRGB(props.theme.colors[props.colorStates.hover], 0.3)};
+    border: 2px solid ${(props) => props.theme.colors[props.colorStates.hover]};
+    background: ${(props) => props.theme.colors[props.colorStates.hover]};
   }
 
   &:active {
diff --git a/src/components/elements/Loader.tsx b/src/components/elements/Loader.tsx
index 9233012..6117109 100644
--- a/src/components/elements/Loader.tsx
+++ b/src/components/elements/Loader.tsx
@@ -35,7 +35,7 @@ interface LoaderProps {
   style?: Record<string, unknown>
 }
 
-const Loader = ({ loaderColor = theme.colors.black, ...props }: LoaderProps) => (
+const Loader = ({ loaderColor = theme.colors.npwBase09, ...props }: LoaderProps) => (
   <LoaderStyle loaderColor={loaderColor} {...props} />
 )
 
diff --git a/src/utils/hexToRGB.ts b/src/utils/hexToRGB.ts
index c9a1eb3..3f64fce 100644
--- a/src/utils/hexToRGB.ts
+++ b/src/utils/hexToRGB.ts
@@ -1,15 +1,21 @@
 import { TColor } from '../assets/theme/colors'
 
 function hexToRGB(hex: TColor | string, alpha?: number) {
-  const r = parseInt(hex.slice(1, 3), 16)
-  const g = parseInt(hex.slice(3, 5), 16)
-  const b = parseInt(hex.slice(5, 7), 16)
+  try {
+    const r = parseInt(hex.slice(1, 3), 16)
+    const g = parseInt(hex.slice(3, 5), 16)
+    const b = parseInt(hex.slice(5, 7), 16)
 
-  if (alpha) {
-    return `rgba(${r},${g},${b},${alpha})`
+    if (alpha) {
+      return `rgba(${r},${g},${b},${alpha})`
+    }
+
+    return `rgb(${r},${g},${b})`
+  } catch (e) {
+    console.error(`Error converting to rgb for: ${hex}`, e)
   }
 
-  return `rgb(${r},${g},${b})`
+  return hex
 }
 
 export default hexToRGB