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
tooltip-bg rgba(17,17,17,.9)
icons #333
message-info #f0f0f0
message-success #dff0d8
message-error #f2dede

Fonts

Font Families:

Font Styles:

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

font-primarysans-serif
font-secondaryserif
font-headingserif
font-size-body14px
font-size-large16px
font-size-small12px
line-height1.1
line-height-large1.5
font-light300
font-regular400
font-semibold600
font-bold700
font-xbold800
heading-line-height1.2
heading-font-weightbold
heading-1-size45px
heading-1-mobile-size30px
heading-2-size30px
heading-2-mobile-size25px
heading-3-size25px
heading-3-mobile-size20px
heading-4-size16px
heading-4-mobile-size14px
heading-5-size14px
heading-5-mobile-size14px
stretch-spacing2px
table-cell-padding10px
table-sm-cell-padding5px
table-bgtransparent
table-bg-accent#f9f9f9
table-bg-hover#f5f5f5
table-bg-active#f5f5f5
table-border-width1px
table-border-color#eceeef
message-border-radius2px

Spacing

none0
xl80px
lg50px
md30px
sm20px
xs10px