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-primary	sans-serif
font-secondary	serif
font-heading	serif
font-size-body	14px
font-size-large	16px
font-size-small	12px
line-height	1.1
line-height-large	1.5
font-light	300
font-regular	400
font-semibold	600
font-bold	700
font-xbold	800
heading-line-height	1.2
heading-font-weight	bold
heading-1-size	45px
heading-1-mobile-size	30px
heading-2-size	30px
heading-2-mobile-size	25px
heading-3-size	25px
heading-3-mobile-size	20px
heading-4-size	16px
heading-4-mobile-size	14px
heading-5-size	14px
heading-5-mobile-size	14px
stretch-spacing	2px
table-cell-padding	10px
table-sm-cell-padding	5px
table-bg	transparent
table-bg-accent	#f9f9f9
table-bg-hover	#f5f5f5
table-bg-active	#f5f5f5
table-border-width	1px
table-border-color	#eceeef
message-border-radius	2px

Spacing

none	0
xl	80px
lg	50px
md	30px
sm	20px
xs	10px