This is a default size display text
Purpose:
A smaller display style, great for:
hero sections
large promotional headers
landing page highlights
This is a large size display text
Purpose:
A smaller display style, great for:
hero sections
large promotional headers
landing page highlights
This is a extra-large size display text
Purpose:
A large display text style, great for:
hero sections
large promotional headers
landing page highlights
This is small size title text
Purpose:
Title styles provide structured headings for different content sections, offering flexibility in hierarchy.
A small title, useful for headings on secondary cards.
This is medium size title text
Purpose:
Title styles provide structured headings for different content sections, offering flexibility in hierarchy.
A medium title, commonly used for card titles or smaller page heading.
This is large size title text
Purpose:
Title styles provide structured headings for different content sections, offering flexibility in hierarchy.
A large title, great for primary section headings or content blocks.
This is extra large size title text
Purpose:
Title styles provide structured headings for different content sections, offering flexibility in hierarchy.
The largest title style, ideal for main page titles and important headers.
This is small size body text paragraph. The search for perfection is a subtle drug. It draws the mind along circuitous routes, deeper and deeper into itself, until nothing can be seen except the ideal. Desire blinds one to purpose, and thus renders true perfection impossible.
Purpose:
Body styles are used for paragraph text, balancing readability and hierarchy.
Small body text, used for description on UI cards.
This is medium size body text paragraph. I never wanted this, I never wanted to unleash my legions. Together we banished the ignorance of Old Night, but you betrayed me, you betrayed us all. You stole power from the Gods and lied to your sons. Mankind has only one chance to prosper, if you will not seize it then I will. So let it be war, from the skies of Terra to the Galactic rim. Let the seas boil, let the stars fall. Though it takes the last drop of my blood, I will see the galaxy freed once more—and if I cannot save it from your failure, Father, then let the galaxy burn!
Purpose:
Body styles are used for paragraph text, balancing readability and hierarchy.
Standard body text, used for general content and descriptions.
This is large size body text paragraph. All I ever wanted was the truth. Remember those words as you read the ones that follow. I never set out to topple my father’s kingdom of lies from a sense of misplaced pride. I never wanted to bleed the species to its marrow, reaving half the galaxy clean of Human life in this bitter crusade. I never desired any of this, though I know the reasons for which it must be done. But all I ever wanted was the truth.
Purpose:
Body styles are used for paragraph text, balancing readability and hierarchy.
A slightly larger body text style, useful for opening paragraphs in blogs/articles, used for larger pieces of text to bring attention too.
This is extra small size label text.
Purpose:
Labels help provide supporting text, form labels, or UI elements that need concise but clear messaging.
Extra small labels, great for tooltips, help text on inputs, captions, chip labels.
This is bolded extra small size label text.
Purpose:
Labels help provide supporting text, form labels, or UI elements that need concise but clear messaging.
Extra small active labels, great for active tooltips, active chip labels.
This is small size label text.
Purpose:
Labels help provide supporting text, form labels, or UI elements that need concise but clear messaging.
Small labels, medium and small primary and secondary buttons.
This is bolded small size label text.
Purpose:
Labels help provide supporting text, form labels, or UI elements that need concise but clear messaging.
Small active labels, medium and small primary and secondary buttons also used with text buttons
This is medium size label text.
Purpose:
Labels help provide supporting text, form labels, or UI elements that need concise but clear messaging.
Medium-sized labels for large primary and secondary buttons , and text field input label.
This is bolded medium size label text.
Purpose:
Labels help provide supporting text, form labels, or UI elements that need concise but clear messaging.
Purpose:
Meta text is typically used for secondary information, such as timestamps or small contextual notes.
A lightweight, small-text style for metadata, timestamps, footnotes, or subtle interface details.