Foundations
Typography
Typography can help create clear logical hierarchies, organize information to ensures that elements in the UI are clear and easily recognizable when scanning the page.
Typography rules
Allowed weight
Regular
400
SemiBold
600
Bold
700
Styles
Properties
Use for
Styles
Size :
56px
Weight :
700
Line height :
62px
Banner title
Heading 1
Size :
38px
Weight :
700
Line height :
44px
Oversized screen title, use only once per page.
Heading 2
Size :
28px
Weight :
700
Line height :
34px
Main titles, use only once per page.
Heading 3
Size :
18px
Weight :
700 / 400
Line height :
24px
Large Button, Link, Sub heading
Body 1
Size :
16px
Weight :
700 / 400
Line height :
22px
Small Button, Link, Body copy, textfield
Body 2
Size :
14px
Weight :
700 / 400
Line height :
20px
Caption, Helper, label on textfield.
Body 3
Size :
12px
Weight :
600
Line height :
16px
Label only
Small
Size :
10px
Weight :
700 / 400
Line height :
14px
Paragraph
Extra Small
Responsive breakpoint
These breakpoints describe column and width specifications for different screen size.
Screen size
Margin
Container
Column
Gutter
Mobile (320-839)
XSmall
320-399
20
Fluid
12
8
Small
400-599
20
Fluid
12
12
Medium
600-839
40
Fluid
12
16
Desktop (840-1440+)
Large
840-959
Fluid
760
12
16
XLarge
960-1279
100
Fluid
12
16
XXLarge
1280-1439
120
Fluid
12
20
XXXLarge
1440+
Fluid
1200
12
24
Typography rules
Allowed weight
Regular
400
SemiBold
600
Bold
700
Styles
Properties
Use for
Styles
Size :
56px
Weight :
700
Line height :
62px
Banner title
Heading 1
Size :
38px
Weight :
700
Line height :
44px
Oversized screen title, use only once per page.
Heading 2
Size :
28px
Weight :
700
Line height :
34px
Main titles, use only once per page.
Heading 3
Size :
18px
Weight :
700 / 400
Line height :
24px
Large Button, Link, Sub heading
Body 1
Size :
16px
Weight :
700 / 400
Line height :
22px
Small Button, Link, Body copy, textfield
Body 2
Size :
14px
Weight :
700 / 400
Line height :
20px
Caption, Helper, label on textfield.
Body 3
Size :
12px
Weight :
600
Line height :
16px
Label only
Small
Size :
10px
Weight :
700 / 400
Line height :
14px
Paragraph
Extra Small
Responsive breakpoint
These breakpoints describe column and width specifications for different screen size.
Screen size
Margin
Container
Column
Gutter
Mobile (320-839)
XSmall
320-399
20
Fluid
12
8
Small
400-599
20
Fluid
12
12
Medium
600-839
40
Fluid
12
16
Desktop (840-1440+)
Large
840-959
Fluid
760
12
16
XLarge
960-1279
100
Fluid
12
16
XXLarge
1280-1439
120
Fluid
12
20
XXXLarge
1440+
Fluid
1200
12
24
Typography rules
Allowed weight
Regular
400
SemiBold
600
Bold
700
Styles
Properties
Use for
Styles
Size :
56px
Weight :
700
Line height :
62px
Banner title
Heading 1
Size :
38px
Weight :
700
Line height :
44px
Oversized screen title, use only once per page.
Heading 2
Size :
28px
Weight :
700
Line height :
34px
Main titles, use only once per page.
Heading 3
Size :
18px
Weight :
700 / 400
Line height :
24px
Large Button, Link, Sub heading
Body 1
Size :
16px
Weight :
700 / 400
Line height :
22px
Small Button, Link, Body copy, textfield
Body 2
Size :
14px
Weight :
700 / 400
Line height :
20px
Caption, Helper, label on textfield.
Body 3
Size :
12px
Weight :
600
Line height :
16px
Label only
Small
Size :
10px
Weight :
700 / 400
Line height :
14px
Paragraph
Extra Small
Responsive breakpoint
These breakpoints describe column and width specifications for different screen size.
Screen size
Margin
Container
Column
Gutter
Mobile (320-839)
XSmall
320-399
20
Fluid
12
8
Small
400-599
20
Fluid
12
12
Medium
600-839
40
Fluid
12
16
Desktop (840-1440+)
Large
840-959
Fluid
760
12
16
XLarge
960-1279
100
Fluid
12
16
XXLarge
1280-1439
120
Fluid
12
20
XXXLarge
1440+
Fluid
1200
12
24
