Typography

Headings

H1

Element

H2

Element

H3

Element

H4

Element
H5
Element
H6
Element

Body

Subtitle - 18px / 1.61

Overline - 18px / 1.33

Paragraph-leading - 18px / 1.78

Paragraph - 16px / 1.69

Paragraph bold - 16px / 1.69

Paragraph (text-small) - 14px / 1.43

Paragraph (text-tiny) - 12px / 1.5

Text Link - 16px / 1.6
Note: The body font should be set on the root 'Body (All Pages)' tag.
H1
Class
H2
Class
H3
Class
H4
Class
H5
Class
H6
Class

Paragraph

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Note: The paragraph font size should be set on the root ' All Paragraphs)' tag.

Colors

Brand palette

Primary

Success

Success

Success

Danger

Danger

Danger

Warning

Warning

Warning

Info

Info

Info

Black

Deep

Darkest

Darker

Dark

Gray

Light

Lighter

Lightest

Pale

White

States

Hover

Focus

Disabled

Secondary Hover

Focus

Disabled

Elevation

Elevation 1

Elevation 2

Elevation 3

Elevation 4

Buttons

Note: Buttons with icons doesn't work with classes.
Make it a symbol and reuse.
Note: Hover and focus states can be set from the selector dropdown, next to the classes.

Unused classes

Custom card slider