Created
May 6, 2019 18:21
-
-
Save mfix22/f2fb9a64648b8501176dbd29a7fa92d8 to your computer and use it in GitHub Desktop.
Airbnb's style guide translated into a `styled-system` theme
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// You can adjust these according to your use case | |
export const breakpoints = ['32em', '48em', '64em', '80em'] | |
export const colors = { | |
rausch: '#FF5A5F', | |
babu: '#00A699', | |
arches: '#FC642D', | |
hof: '#4848484', | |
foggy: '#767676', | |
primary: '#FF5A5F' | |
// more colors would go here | |
} | |
export const space = [0, 8, 16, 24, 48, 64 /* add more to your liking */] | |
space.tiny = space[1] | |
space.small = space[2] | |
space.base = space[3] | |
space.large = space[4] | |
space.xlarge = space[5] | |
export const fontSizes = [ | |
'8px', | |
'14px', | |
'17px', | |
'19px', | |
'24px', | |
'32px', | |
'44px' | |
] | |
export const lineHeights = [ | |
'8px', | |
'18px', | |
'22px', | |
'24px', | |
'28px', | |
'36px', | |
'56px' | |
] | |
// other things like fontWeights, borders, and shadows can be added here |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment