export const colors = { white : '#fff' , gray01 : '#fafafa' , gray02 : '#efefef' , gray03 : '#999' , gray04 : '#888' , gray05 : '#666' , gray06 : '#444' , gray07 : '#333' , gray08 : '#111' , black : '#000' , purple : '#49318c' , blue : '#254763' , lightBlue : '#a8d8fc' , orange : '#fb8d3e' , brand : '#f87b6e' , } ; export const fonts = { sansSerif : '-apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif' , serif : 'Georgia, "Times New Roman", Times, serif' , monospace : 'Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace, monospace' , } ; export const breakpoints = { xs : 0 , sm : 576 , md : 768 , lg : 992 , xl : 1200 , } ; export const widths = { md : 720 , lg : 960 , xl : 1140 , } ; export const typeScale = { h1 : { fontSize : 48 , lineHeight : 56 , } , h2 : { fontSize : 40 , lineHeight : 48 , } , h3 : { fontSize : 32 , lineHeight : 40 , } , h4 : { fontSize : 24 , lineHeight : 32 , } , h5 : { fontSize : 20 , lineHeight : 28 , } , p : { fontSize : 16 , lineHeight : 24 , } , } ; export const containerPadding = 24 ; export const heights = { header : 80 , brandLogo : 40 , } ;