Variables

Font Families 

NameDefaultDescription
$font-family-primary 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif Main font applied to :root.
$font-family-secondary 'PT Serif', Georgia, serif Accent font in our case used for editorial purposes.

Font Sizings 

NameDefaultDescription
$font-root 16px Desktop font root size
$font-root-tablet 16px Tablet font root size
$font-root-mobile 15px Mobile font root size

Letter Spacing 

NameDefaultDescription
$font-letter-spacing-s .02em Small lsp setting
$font-letter-spacing-b .03em Base lsp setting
$font-letter-spacing-m .05em Medium lsp setting
$font-letter-spacing-l .07em Large lsp setting

Line Height 

NameDefaultDescription
$font-line-height-s 1.2 Typically used on headlines
$font-line-height-b 1.4 Default leading used on p tags
$font-line-height-m 1.5 Heading spacing
$font-line-height-l 2 More heading spacing

Breakpoints 

NameDefaultDescription
$bp-xs 320px Mobile
$bp-s 520px Mobile
$bp-m 650px Tablet
$bp-l 845px Small Desktop
$bp-xl 1080px Desktop
$bp-xxl 1300px Large Desktop

Story Containers 

NameDefaultDescription
$story-small 30rem ~480px This is our smallest story container; used for plugins
$story-narrow 41.5rem ~664px This is the text story container; used for text and plugins
$story-giant 60rem ~960px This is our widest story container; used for plugins

Border Radius 

NameDefaultDescription
$border-radius-b 4px Subtle radius
$border-radius-l 40px Very round, usually used on buttons relating to monetary values.

Utility height 

NameDefaultDescription
$util-height 45px Standard height of navbar and forms

Size units 

NameDefaultDescription
$size-xxxl 3rem size xxxl
$size-giant 2.5rem size giant
$size-xxl 2rem size xxl
$size-xl 1.75rem size xl
$size-l 1.5rem size l
$size-m 1.2rem size m
$size-b 1.1rem size b
$size-s .92rem size s
$size-xs .85rem size xs
$size-xxs .7rem size xxs
$size-xxxs .55rem size xxxs
$size-tiny .275rem size tiny (only used for margin)