| Example | Description | Token |
|---|---|---|
|
Stats |
statsfont-size: font-weight: font-family: |
$stats-font-size
$stats-font-weight
$stats-font-family
|
|
Heading 1 |
Heading 1 - xxlargefont-size: 90px font-weight: 900 font-family: montserrat, Arial Black, sans-serif |
$xxlarge-font-size
$xxlarge-font-weight
$xxlarge-font-family
|
|
Heading 2 |
Heading 2 - xlargefont-size: 70px font-weight: 800 font-family: montserrat, Arial Black, sans-serif |
$xlarge-font-size
$xlarge-font-weight
$xlarge-font-family
|
|
Heading 3 |
Heading 3 - largefont-size: 50px font-weight: 800 font-family: montserrat, Arial Black, sans-serif |
$large-font-size
$large-font-weight
$large-font-family
|
|
Heading 4 |
Heading 4 - mediumfont-size: 40px font-weight: 500 font-family: montserrat, 'Lucida Grande', Verdana, sans-serif |
$medium-font-size
$medium-font-weight
$medium-font-family
|
|
Heading 5 |
Heading 5 - smallfont-size: 30px font-weight: 700 font-family: bebas-neue-pro, DIN Condensed, sans-serif |
$small-font-size
$small-font-weight
$small-font-family
|
|
Heading 6 |
Heading 6 - xsmallfont-size: 30px font-weight: 400 font-family: bebas-neue-pro, DIN Condensed, sans-serif |
$xsmall-font-size
$xsmall-font-weight
$xsmall-font-family
|
|
Hammerhead |
hammerheadfont-size: 24px font-weight: 300 font-family: montserrat, 'Lucida Grande', Verdana, sans-serif |
$hammerhead-font-size
$hammerhead-font-weight
$hammerhead-font-family
|
|
Body |
bodyfont-size: 20px font-weight: 400 font-family: Source Sans Pro, Trebuchet MS, Tahoma, sans-serif |
$body-font-size
$body-font-weight
$body-font-family
|
|
Caption |
captionfont-size: 12px font-weight: 800 font-family: Source Sans Pro, Trebuchet MS, Tahoma, sans-serif |
$caption-font-size
$caption-font-weight
$caption-font-family
|
| Example | Description | Token |
|---|---|---|
|
Aa Bb Cc 70px |
Hero Font Size Min |
$hero-font-size-min
|
|
Aa Bb Cc 110px |
Hero Font Size |
$hero-font-size
|
|
Aa Bb Cc 50px |
Xxlarge Font Size Min |
$xxlarge-font-size-min
|
|
Aa Bb Cc 90px |
Xxlarge Font Size |
$xxlarge-font-size
|
|
Aa Bb Cc 40px |
Xlarge Font Size Min |
$xlarge-font-size-min
|
|
Aa Bb Cc 70px |
Xlarge Font Size |
$xlarge-font-size
|
|
Aa Bb Cc 30px |
Large Font Size Min |
$large-font-size-min
|
|
Aa Bb Cc 50px |
Large Font Size |
$large-font-size
|
|
Aa Bb Cc 25px |
Medium Font Size Min |
$medium-font-size-min
|
|
Aa Bb Cc 40px |
Medium Font Size |
$medium-font-size
|
|
Aa Bb Cc 25px |
Small Font Size Min |
$small-font-size-min
|
|
Aa Bb Cc 30px |
Small Font Size |
$small-font-size
|
|
Aa Bb Cc 25px |
Xsmall Font Size Min |
$xsmall-font-size-min
|
|
Aa Bb Cc 30px |
Xsmall Font Size |
$xsmall-font-size
|
|
Aa Bb Cc 18px |
Hammerhead Font Size Min |
$hammerhead-font-size-min
|
|
Aa Bb Cc 24px |
Hammerhead Font Size |
$hammerhead-font-size
|
|
Aa Bb Cc 18px |
Body Font Size Min |
$body-font-size-min
|
|
Aa Bb Cc 20px |
Body Font Size |
$body-font-size
|
|
Aa Bb Cc 12px |
Caption Font Size Min |
$caption-font-size-min
|
|
Aa Bb Cc 12px |
Caption Font Size |
$caption-font-size
|
|
Aa Bb Cc 16px |
Button Font Size Min |
$button-font-size-min
|
|
Aa Bb Cc 18px |
Button Font Size |
$button-font-size
|