./colors

 avatar
unknown
plain_text
15 days ago
2.5 kB
11
Indexable
export const metrisBlue = {
  25: '#F3FBFF',
  50: '#EAF5FF',
  100: '#BFE1FF',
  200: '#95CEFF',
  300: '#6ABAFF',
  400: '#40A6FF',
  500: '#1592FF',
  600: '#007BE6',
  700: '#0066BF',
  800: '#005095',
  900: '#00396A',
  1000: '#002240',
};

export const metrisGray = {
  0: '#F8F9FA',
  25: '#EEF0F4',
  50: '#DDE1E8',
  100: '#CBD3DD',
  200: '#BAC4D1',
  300: '#A9B5C6',
  400: '#7D8FA9',
  500: '#586A84',
  600: '#455469',
  700: '#3B4758',
  800: '#313B49',
  900: '#1D232C',
  1000: '#161B21',
};

export const errorColor = {
  25: '#FBEAEA',
  50: '#F3C1BF',
  100: '#EB9794',
  200: '#E26E69',
  300: '#DB4943',
  400: '#DA453E',
  500: '#C12B25',
  600: '#96211D',
  700: '#6B1814',
  800: '#400E0C',
  900: '#400E0C',
};

export const warningColor = {
  25: '#FEF6E9',
  50: '#FBE5BE',
  100: '#F8D492',
  200: '#F5C367',
  300: '#F2B23B',
  400: '#F2B035',
  500: '#F0A10F',
  600: '#C4840D',
  700: '#98670A',
  800: '#6D4907',
  900: '#412C04',
};

export const successColor = {
  25: '#EFF8EE',
  50: '#D0EBCD',
  100: '#B1DEAC',
  200: '#92D08B',
  300: '#73C36A',
  400: '#54B649',
  500: '#44953C',
  600: '#387A31',
  700: '#35742E',
  800: '#265321',
  900: '#224B1E',
};

export const rubyRed = {
  50: '#FFB9D1',
  200: '#FF5D94',
  400: '#FA0E5A',
  600: '#D10047',
  800: '#740028',
};

export const forestGreen = {
  50: '#CFEBCD',
  200: '#90D08B',
  400: '#5DBB56',
  600: '#42953C',
  800: '#255321',
};

export const cosmicPurple = {
  50: '#D7BBFD',
  200: '#A361FA',
  400: '#7717F8',
  600: '#5A06CA',
  800: '#320370',
};

export const goldenTangerine = {
  50: '#FEE1BB',
  200: '#FCBA5F',
  400: '#FCA632',
  600: '#CD7703',
  800: '#724202',
};

export const oceanicAzure = {
  50: '#B9F7FF',
  200: '#5DEDFF',
  400: '#00E2FF',
  600: '#0096A9',
  800: '#006774',
};

export const sunflowerYellow = {
  50: '##FDEEBB',
  200: '#FBD760',
  400: '#FACA2B',
  600: '#CC9E05',
  800: '#715803',
};

export const lime = {
  50: '#EBFF95',
  200: '#DCFF40',
  400: '#BEEA00',
  600: '#799500',
  800: '#415000',
};

export const ultraPink = {
  50: '#FABFFF',
  200: '#F36AFF',
  400: '#EB15FF',
  600: '#AF00BF',
  800: '#61006A',
};

export const fontWeight = {
  light: '300',
  regular: '400',
  medium: '500',
  semiBold: '600',
  bold: '700',
  extraBold: '800',
};

Editor is loading...
Leave a Comment