palette.js

module.exports = {
  bkg: {
    1: '#07152A',
    2: '#111E33',
    3: '#162742',
    4: '#1E365C',
    5: '#222222',
    6: '#061120',
    7: '#1E365CF7',
    disabled: '#FFFFFF4D',
    blue200: '#4D76B8',
    pink200: '#FF3E91',
    blackAlpha: 'rgba(0,0,0,0.08)',
    white200: 'rgba(255,255,255, .2)',
    white850: 'rgba(255,255,255, .85)',
    deepBlue: '#223552',
    headerGradient:
      'linear-gradient(90deg, rgba(40,79,148,1) 25.72%, rgba(254,0,119,1) 141.55%)',
  },

  button: {
    secondary: '#FF3E91',
    secondaryhover: '#CB2C70',

    primary: '#4CA1CF',
    primaryhover: '#4D76B8',

    neutral: '#fff',
  },

  disabled: '#f5f5f5',

  alert: {
    lightsuccess: '#079C31',
    darksuccess: '#078029',
    lightwarning: '#FF9900',
    darkwarning: '#E58C07',
    lighterror: '#AF0404',
    darkerror: '#8E0707',
  },

  warning: {
    error: '#AF0404',
    info: '#FF9900',
    success: '#079C31',
    successhover: '#0bbf3e',
  },

  fields: {
    input: {
      primary: '#07152B',
      placeholder: '#85B6FF99',
      border: '#314970',
      borderfocus: '#1E365C',
    },
  },

  menu: {
    primary: '#1E365C',
    secondary: '#162742',
    primaryhover: '#314970',
    secondaryhover: '#314970',
  },

  dashed: {
    light: '#FFFFFF4D',
    dark: '#FFFFFF80',
  },

  brand: {
    royalblue: '#4D76B8',
    royalbluemedium: '#4CA1CF',
    blue100: '#4CA1CF',
    assetGuidText: 'rgba(133, 182, 255, 0.6)',
    pink: '#9F0949',
    pink200: '#FF3E91',
    blue: '#4D76B8',
    blue100: '#C9DEFF',
    blueAlpha: '#476DAA',
    blue200: '#4CA1CF',
    blue400: '#4d76b8',
    blue500: '#1E365C',
    blue600: '#162742',
    blue700: '#111E33',
    blue800: '#07152A',
    green: '#8EC100',
    darkGreen: '#83B100',
    black: '#000',
    orange: '#FE9B07',
    white: '#fff',
    red: '#D70000',
    redDark: '#C60000',
    deepPink: '#CB2C70',
    deepPink100: '#FF3E91',
    gray: '#808080',
    graylight: '#F5F5F5',
    gray200: '#A2A5AB',
    gray300: '#808795',
    whiteAlpaBlue: '#283851',
    yellowInfo: '#FE9B07',
    yellowInfoDark: '#EA8F06',
  },
  border: {
    default: 'rgba(255, 255, 255, 0.16)',
    diffBLUE: '#1F2B3F',
  },
  alpha: {
    whiteAlpha100: 'rgba(255, 255, 255, 0.06)',
    whiteAlpha200: 'rgba(255, 255, 255, 0.08)',
    whiteAlpha300: 'rgba(255, 255, 255, 0.16)',
  },

  extraColors: {
    red: '#D70000',
  },
};