var colors = {
'transparent': 'transparent',
'black': '#222b2f',
'grey-darkest': '#364349',
'grey-darker': '#596a73',
'grey-dark': '#70818a',
'grey': '#9babb4',
'grey-light': '#dae4e9',
'grey-lighter': '#f2f2f2',
'grey-lightest': '#fafcfc',
'white': '#ffffff',
'blue-darkest': '#05233b',
'blue-darker': '#103d60',
'blue-dark': '#2779bd',
'blue': '#0678be',
'blue-light': '#6cb2eb',
'blue-lighter': '#bcdefa',
'blue-lightest': '#eff8ff',
}
module.exports = {
colors: colors,
screens: {
'sm': '576px',
'md': '768px',
'lg': '992px',
'xl': '1200px',
},
fonts: {
'sans': [
'-apple-system',
'BlinkMacSystemFont',
'Segoe UI',
'Roboto',
'Oxygen',
'Ubuntu',
'Cantarell',
'Fira Sans',
'Droid Sans',
'Helvetica Neue',
'sans-serif',
],
'serif': [
'Constantia',
'Lucida Bright',
'Lucidabright',
'Lucida Serif',
'Lucida',
'DejaVu Serif',
'Bitstream Vera Serif',
'Liberation Serif',
'Georgia',
'serif',
'mono': [
'Menlo',
'Monaco',
'Consolas',
'Liberation Mono',
'Courier New',
'monospace',
]
textSizes: {
'xs': '.75rem', // 12px
'sm': '.875rem', // 14px
'base': '1rem', // 16px
'lg': '1.125rem', // 18px
'xl': '1.25rem', // 20px
'2xl': '1.5rem', // 24px
'3xl': '1.875rem', // 30px
'4xl': '2.25rem', // 36px
'5xl': '3rem', // 48px
fontWeights: {
'hairline': 100,
'thin': 200,
'light': 300,
'normal': 400,
'medium': 500,
'semibold': 600,
'bold': 700,
'extrabold': 800,
'black': 900,
leading: {
'none': 1,
'tight': 1.25,
'normal': 1.5,
'loose': 2,
tracking: {
'tight': '-0.05em',
'normal': '0',
'wide': '0.05em',
textColors: colors,
backgroundColors: colors,
borderWidths: {
default: '1px',
'0': '0',
'2': '2px',
'3': '3px',
'4': '4px',
'8': '8px',
borderColors: Object.assign({ default: colors['grey-light'] }, colors),
borderRadius: {
default: '.25rem',
'sm': '.125rem',
'lg': '.5rem',
'full': '9999px',
'none': '0',
width: {
'auto': 'auto',
'px': '1px',
'1': '0.25rem',
'2': '0.5rem',
'3': '0.75rem',
'4': '1rem',
'6': '1.5rem',
'8': '2rem',
'10': '2.5rem',
'12': '3rem',
'16': '4rem',
'24': '6rem',
'32': '8rem',
'48': '12rem',
'64': '16rem',
'1/2': '50%',
'1/3': '33.33333%',
'2/3': '66.66667%',
'1/4': '25%',
'3/4': '75%',
'1/5': '20%',
'2/5': '40%',
'3/5': '60%',
'4/5': '80%',
'1/6': '16.66667%',
'5/6': '83.33333%',
'full': '100%',
'screen': '100vw'
height: {
'screen': '100vh'
minWidth: {
minHeight: {
maxWidth: {
'xs': '20rem',
'sm': '30rem',
'md': '40rem',
'lg': '50rem',
'xl': '60rem',
'2xl': '70rem',
'3xl': '80rem',
'4xl': '90rem',
'5xl': '100rem',
maxHeight: {
'screen': '100vh',
padding: {
margin: {
negativeMargin: {
shadows: {
zIndex: {
'0': 0,
'10': 10,
'20': 20,
'30': 30,
'40': 40,
'50': 50,
opacity: {
'25': '.25',
'50': '.5',
'75': '.75',
'100': '1',
packages: {