redLight
#fffc41
red
#F84A17
redDark
#d1a600
limeLight
#fbfaf6
lime
#C2F076
limeDark
#d7d3c8
yellowLight
#464f42
yellow
#E9F055
yellowDark
#161b13
pinkLight
#c1baf8
pink
#9d8df1
pinkDark
#8367eb
greenLight
#c1baf8
green
#9d8df1
greenDark
#8367eb
Our typographic system is built on legibility and accessibility. It’s clear, bold, and endlessly expressive.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nunc non blandit massa enim nec dui nunc mattis.
As the largest text on the screen, display styles are reserved for short, important text or numerals. They work best on large screens.
display-lg
FK Screamer
Bold
display-base
FK Screamer
Bold
Headlines are best-suited for short, high-emphasis text on smaller screens. These styles can be good for marking primary passages of text or important regions of content.
headline-1
Neue Haas grotesk display
bold
headline-2
Neue Haas grotesk display
semibold
headline-3
Neue Haas grotesk display
semibold
subhead-lg
Neue Haas grotesk display
semibold
Titles are smaller than headline styles, and should be used for medium-emphasis text that remains relatively short. For example, consider using title styles to divide secondary passages of text or secondary regions of content.
title-1
Neue Haas grotesk display
semibold
title-2
Neue Haas grotesk display
semibold
t
body-lg
Neue Haas grotesk text
normal
Everybody, get up! It's time to slam now. We've got a real jam goin' down. Welcome to the Space Jam. Here's your chance, do your dance at the Space Jam, alright.
body-base
Neue Haas grotesk text
normal
Everybody, get up! It's time to slam now. We've got a real jam goin' down. Welcome to the Space Jam. Here's your chance, do your dance at the Space Jam, alright.
body-sm
Neue Haas grotesk text
normal
Everybody, get up! It's time to slam now. We've got a real jam goin' down. Welcome to the Space Jam. Here's your chance, do your dance at the Space Jam, alright.
Label styles are smaller, utilitarian styles, used for things like the text inside components or for very small text in the content body, such as captions. Buttons, for example, use the label large style.
label-lg
Neue Haas grotesk Display
medium
Quad City DJs
label-md
Neue Haas grotesk Display
medium
Quad City DJs
label-sm
Neue Haas grotesk text
Medium
Quad City DJs
Label styles are smaller, utilitarian styles, used for things like the text inside components or for very small text in the content body, such as captions. Buttons, for example, use the label large style.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Block quote
Ordered list
Unordered list
Bold text
Emphasis
Superscript
Subscript
Our typographic system is built on legibility and accessibility. It’s clear, bold, and endlessly expressive.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nunc non blandit massa enim nec dui nunc mattis.
cont-xs
cont-sm
cont-md
cont-lg
cont-xl
cont-full
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nunc non blandit massa enim nec dui nunc mattis.