Typography
Font Size/Weight
css class starting with "font-" is used to describe font size and weight
Title
font size: 32px (fluid*: 24px - 32px) | font-weight: 800/$bolder
Header 1
font size: 20px (fluid*: 16px - 20px) | font-weight: 700/$bold
Header 2
font size: 16px (fluid*: 12px - 16px) | font-weight: 500/$medium
Subheader 2
font size: 16px (fluid*: 12px - 16px) | font-weight: 500/$medium | color: $white-70
Caption Header
font size: 12px (fluid*: 9px - 12px) | font-weight: 500/$medium
Caption Body
font size: 12px (fluid*: 9px - 12px) | font-weight: 400/$book
Heading elements
= Title
= Title
= Header 1
= Header 1
= Header 2
= Header 2
Body
font size: 16px (fluid*: 12px - 16px) | font-weight: 400/$book
Footer
font size: 10px (fluid*: 8px - 10px) | font-weight: 500/$medium
Font Colors
css class such as "text" or starting with "text-" is used to describe font color
Default font color
color: $pumice(dark), $smoke(light)
Emphasis font color
color: $pumice(dark), $smoke(light)
Link font color
color: $white(dark)
Success state font color
color: $green(dark,light)
Robux font color
color: $green(dark,light)
Error state font color
color: $red(dark,light)
Disabled state font color
color: 50% opacity(dark, light)