Typography
Typography is important part of design system. It helps to create visual hierarchy and make content more readable.
Font faces
UI components use three font faces:
- Opens sans for regular text
- Roboto Mono for code snippets
- Inter for headings
Heading styles
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Text styles
Basic text
Display Large
Display-medium
Display-regular
Heading
Strong
Subheading
Caption
Accent
Body-XL
Body-LG
Body-Regular
Font weights
Regular
Accent
Bold
Font sizes
Fineprint
Note
Caption
Body
Accent
Lead
Title
Display
Line heights
Compact
Normal
Regular
Medium
Large
Extra large
Letter spacing
Tighter
Tight
Normal
Loose
Ellipsis
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam consequatur cumque deleniti dolor dolores eaque exercitationem explicabo fugit illum ipsam laborum non officiis perferendis praesentium quae ratione similique, tenetur vitae!
Text transform
Uppercase
Lowercase
Capitalize
Text alignment
Left
Center
Right
Justify
Wrapping
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam consequatur cumque deleniti dolor dolores eaque exercitationem explicabo fugit illum ipsam laborum non officiis perferendis praesentium quae ratione similique, tenetur vitae!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam consequatur cumque deleniti dolor dolores eaque exercitationem explicabo fugit illum ipsam laborum non officiis perferendis praesentium quae ratione similique, tenetur vitae!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam consequatur cumque deleniti dolor dolores eaque exercitationem explicabo fugit illum ipsam laborum non officiis perferendis praesentium quae ratione similique, tenetur vitae!
Text colors
Primary
Secondary
Success
Warning
Critical
Danger
Error
Info
Neutral
Disabled
Inversed
White
Black
Link
Highlight
Backgrounds
Primary
Inversed Primary
Secondary
Inversed Secondary
Tertiary
White
Critical
Danger
Warning
Success
Info
Neutral
Disabled
Inversed
Nav primary
Nav Secondary
Highlight