Typography Demo

Headers

h1 Header (36px mobile / 48px web) h2 Header (30px mobile / 40px web) h3 Header (24px mobile / 34px web) h4 Header (20px mobile / 28px web) h5 Header (16px mobile / 24px web) h6 Header (14px mobile / 20px web)

Text Styles

t1-regular Text (10px mobile / 12px web)
t1-bold Text (10px mobile / 12px web)
t2-regular Text (12px mobile / 14px web)
t2-medium Text (12px mobile / 14px web)
t2-bold Text (12px mobile / 14px web)
t3-regular Text (14px mobile / 16px web)
t3-medium Text (14px mobile / 16px web)
t3-bold Text (14px mobile / 16px web)
t4-regular Text (16px mobile / 18px web)
t4-medium Text (16px mobile / 18px web)
t4-bold Text (16px mobile / 18px web)
t5-regular Text (18px mobile / 20px web)
t5-medium Text (18px mobile / 20px web)
t5-bold Text (18px mobile / 20px web)
t6-regular Text (20px mobile / 24px web)
t6-medium Text (20px mobile / 24px web)
t6-bold Text (20px mobile / 24px web)
t7-regular Text (22px mobile / 28px web)
t7-medium Text (22px mobile / 28px web)
t7-bold Text (22px mobile / 28px web)

Colors Demo

Background Colors

Primary-500 Background
Secondary-500 Background
Success-500 Background
Warning-500 Background
Error-500 Background
Info-500 Background
Accent-500 Background
Tertiary-500 Background

Border Colors

Primary-500 Border
Secondary-500 Border
Success-500 Border
Warning-500 Border
Error-500 Border
Info-500 Border
Accent-500 Border
Tertiary-500 Border

Text-500 Colors

Primary-500 Text

Secondary-500 Text

Success-500 Text

Warning-500 Text

Error-500 Text

Info-500 Text

Accent-500 Text

Tertiary-500 Text

Buttons Demo

Element Font Size
Hero h2
Title h3
Description t4-regular
Buttons t3-regular
Item Headings h4
Item Description t3-medium