Styleguide

Colors

primary #333
body #333
heading #333
heading-light #fff
secondary #666
white #fff
accent orange
background-default #fff
background-alt rgb(95, 95, 95)
link #333
link-hover #666
input-background #fff
input-border #333
input-border-focus blue
input-label gray
input-error red
input-disabled gray
button-primary-bg rgba(75, 157, 249, 1)
button-primary-color #fff
icons #333

Fonts

Font Families:

primary: sans-serif
secondary: serif
heading: serif

Font Styles:

default
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Font large
Font body
Font small
Form label
Form input
Form error
Text stretch
mobile
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Font large
Font body
Font small

Breakpoints

Site Max Width None
Mobile First No
desktop-wide max-width: 100vw
min-width: 1440px
content: 1440px
col: xl
default: true
bleed: 1600px
desktop max-width: 1439px
min-width: 1024px
content: 1024px
col: lg
tablet max-width: 1023px
min-width: 768px
content: 768px
col: md
mobile max-width: 767px
min-width: 320px
content: 100%
col: sm
default: false

Variables

Spacing

none0
xl80px
lg50px
md30px
sm20px
xs10px