Typography
Basic Typography
Heading
h1.Heading
font size: 30 | line-height: 45 | font weight: 600
h2.Heading
font size: 24 | line-height: 36 | font weight: 500
h3.Heading
font size: 21 | line-height: 31.5 | font weight: 500
h4.Heading
font size: 18 | line-height: 27 | font weight: 500
h5.Heading
font size: 16 | line-height: 24 | font weight: 500
h6.Heading
font size: 14 | line-height: 21 | font weight: 500
Subtitle 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur
font size: 16 | line-height: 28 | font weight: 400
Subtitle 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur
font size: 14 | line-height: 21 | font weight: 400
Body 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur
font size: 16 | line-height: 24 | font weight: 400
Body 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur
font size: 14 | line-height: 20 | font weight: 400
Caption. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur
font size: 12 | line-height: 19 | font weight: 400
OVERLINE. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur
font size: 12 | line-height: 31 | font weight: 400
Default Text
Text Primary
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur
Text Secondary
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur
Text Info
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur
Text Warning
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur
Text Error
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur
Text Success
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur
Text-alignment
Left aligned on all viewport sizes.
Center aligned on all viewport sizes.
Right aligned on all viewport sizes.
Left aligned on viewports SM (small) or wider.
Left aligned on viewports MD (medium) or wider.
Left aligned on viewports LG (large) or wider.
Left aligned on viewports XL (extra-large) or wider.
Opacity
High-emphasis has an opacity of 87% in light theme and 100% in dark.
Medium-emphasis text and hint text have opacities of 60% in light theme and 70% in dark.
Disabled text has an opacity of 38% in light theme and 50% in dark.