TYPOGRAPHY

Typography

This page covers the details related to typography, how to edit it and how to style it with ease.

In order to change the typography of the whole system, simply navigate to the Body element and in the selector panel, select
Body (All Pages)Here you can select the default typography to be used across the whole system. Note that this will apply the type style to all elements, if you are using two different sets of typography, you can simply alter the requirements below.

We have provided global typography styles that match the class system you will see outline below. We recommend you simply add text fields by giving them a class name, such as H2 Title 600 Body Normal 600 Detail 400 You can review all details of this system below.

Change the primary paragraph typography by selecting the body element. Learn More
When you edit a global color swatch, you automatically apply the color change to all instances where the color exists. So if you update the Purple 300 to suit your brands color the color will be applied across all utility items, components, templates etc.

Typography

As described in the project documentation, you can simply add these classes to elements to inherit their styles.
By default we provide some basic spacing classes that can help you quickly add padding and margin as combo-classes.

Typography Colors

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

Aa

Black
Aa Bb Cc Dd Ee
1 2 3 4 5 6 7 8 9
Extra Bold
Aa Bb Cc Dd Ee
1 2 3 4 5 6 7 8 9
Bold
Aa Bb Cc Dd Ee
1 2 3 4 5 6 7 8 9
Semibold
Aa Bb Cc Dd Ee
1 2 3 4 5 6 7 8 9
Medium
Aa Bb Cc Dd Ee
1 2 3 4 5 6 7 8 9
Regular
Aa Bb Cc Dd Ee
1 2 3 4 5 6 7 8 9
Light
Aa Bb Cc Dd Ee
1 2 3 4 5 6 7 8 9
Extra Light
Aa Bb Cc Dd Ee
1 2 3 4 5 6 7 8 9
Thin
Aa Bb Cc Dd Ee
1 2 3 4 5 6 7 8 9

Typography

As described in the project documentation, you can simply add these classes to elements to inherit their styles.
By default we provide some basic spacing classes that can help you quickly add padding and margin as combo-classes.

Typography Colors

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

H1

H1 Title 400

H1 Title 600

H1 Title 800

H2

H2 Title 400

H2 Title 600

H2 Title 800

H3

H3 Title 400

H3 Title 600

H3 Title 800

H4

H4 Title 400

H4 Title 600

H4 Title 800

H5
H5 Title 400
H5 Title 600
H5 Title 800
Body Large

Body Large 400

Body Large 600

Body Large 800

Body Normal

Body Normal 400

Body Normal 600

Body Normal 800

Body Small

Body Small 400

Body Small 600

Body Small 800

Button

Button 400

Button 600

Button 800

Detail

Detail 400

Detail 600

Detail 800