Home Reference Source

src/styles/tokens.js

const tokens = {
  colors: {
    grey: {
      lightest: '#F5F5F5',
      lighter: '#D8D8D8',
      light: '#9B9B9B',
      dark: '#717171',
      darker: '#3C3C3B',
      darkest: '#2A2B43',
    },
    green: '#4DD2AF',
    blue: '#4B53B6',
    white: '#FFFFFF',
    pink: '#E7827F',
    gradients: {
      pink: 'linear-gradient(35deg, #E96F8C, #C5445E)',
      blue: 'linear-gradient(35deg, #4B53B6, #8C6FE9)',
    },
  },
  shadow: '0 3px 3px 0 rgba(0, 0, 0, 0.05), 0 0 0 1px rgba(0, 0, 0, 0.04)',
  fontSizes: {
    xxxs: '0.9rem',
    xxs: '1rem',
    xs: '1.2rem',
    s: '1.3rem',
    m: '1.4rem',
    l: '1.6rem',
    xl: '1.8rem',
    xxl: '2rem',
    xxxl: '2.7rem',
  },
  spaces: {
    none: 0,
    xxs: '0.4rem',
    xs: '0.8rem',
    s: '1.2rem',
    m: '1.6rem',
    l: '2rem',
    xl: '2.4rem',
    xxl: '2.8rem',
  },
  radius: {
    s: '0.6rem',
    m: '1rem',
    circle: '50%',
  },
};

export default tokens;