styles-base-config.js

const defaultFontFamily = 'Avenir, Helvetica Neue, Helvetica, Arial, sans-serif';

const font = {
  size: {
    base: {
      small: '16px',
      large: '18px',
    },

    // PX to REM based on 16px
    text: {
      xsmall: '.75rem',   // 12px
      small: '.875rem',   // 14px
      medium: '1rem',     // 16px
      large: '1.125rem',  // 18px
      xlarge: '1.25rem',  // 20px
    },
    title: {
      small: '1.25rem',   // 20px
      medium: '1.5rem',   // 24px
      large: '1.625rem',  // 26px
      xlarge: '1.875rem', // 30px
    },
  },

  weight: {
    thin: 400,
    regular: 500,
    bold: 600,
  },

  family: {
    text: defaultFontFamily,
    title: defaultFontFamily,
  },
};

const lineHeight = {
  text: 1.5,
  title: 1.2,
};

const spacing = {
  none: '0',
  mini: '.25rem',
  xsmall: '.5rem',
  small: '1rem',
  medium: '1.5rem',
  large: '2rem',
  xlarge: '3rem',
  huge: '4rem',
};

const colors = {
  // basics
  black: '#000',
  white: '#fff',

  // shades
  shadeDarkest: '#2d2d2d',
  shadeDarker: '#6d6d6d',
  shadeDark: '#9d9d9d',
  shadeMedium: '#cecece',
  shadeLight: '#e2e0e0',
  shadeLighter: '#f0f0f0',
  shadeLightest: '#f7f7f7',

  // primary
  primary: '#f60',
  primaryDark: '#e55b00',
  primaryLight: '#ffefe6',

  // error
  error: '#d0021b',
  errorLight: '#ffe5e8',

  // success
  success: '#18a8b0',
  successDark: '#13868c',
  successLight: '#e7f6f7',
};

// css defautls
`
html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: shadeDarkscale;
  font-size: ${font.size.base.small};
  touch-action: manipulation;
  box-sizing: border-box;
}

*,
*:after,
*:before {
  box-sizing: inherit;
}

body {
  font-family: ${font.family.text};
  font-size: ${font.size.text.medium};
  font-weight: ${font.weight.regular};
  line-height: ${lineHeight.text};
  color: ${colors.shadeDarkest};
}
`