Skip to content

Instantly share code, notes, and snippets.

@mfix22
Created May 6, 2019 18:21
Show Gist options
  • Save mfix22/f2fb9a64648b8501176dbd29a7fa92d8 to your computer and use it in GitHub Desktop.
Save mfix22/f2fb9a64648b8501176dbd29a7fa92d8 to your computer and use it in GitHub Desktop.
Airbnb's style guide translated into a `styled-system` theme
// 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