Primary

#CCE5FF

Primary.100

#92CCFF

Primary.200

#006397

Primary.500

#004B73

Primary.800

#001D31

Primary.900

Secondary

#D3E4F8

secondary.100

#B7C8DB

secondary.200

#4F6070

secondary.500

#384858

secondary.800

#0B1D2B

secondary.900

Neutral

#F9F9FC

neutral.50

#F1F4F9

neutral.100

#EBEEF3

neutral.200

#E6E8EE

neutral.300

#E2E2E5

neutral.400

#D7DADF

neutral.500

#C2C7CE

nneutral.600

#72787E

neutral.700

#42474E

neutral.800

#1A1C1E

neutral.900

Headings

Heading 01

h1 - Heading Large

Regular (400)

Desktop

57px

Tablet

45px

Mobile

36px

Line Height

64px

Line Height

52px

Line Height

44px

Letter Spacing

-0.25px

Letter Spacing

0px

Letter Spacing

0px

Quick brown fox jumps!

Heading 02

h2 - Heading Medium

Regular (400)

Desktop

45px

Tablet

36px

Mobile

24px

Line Height

52px

Line Height

44px

Line Height

32px

Letter Spacing

0px

Letter Spacing

0px

Letter Spacing

0px

Quick brown fox jumps!

Heading 03

h3 - Display Medium

Regular (400)

Desktop

28px

Tablet

24px

Mobile

20px

Line Height

36px

Line Height

32px

Line Height

28px

Letter Spacing

0px

Letter Spacing

0px

Letter Spacing

0px

Quick brown fox jumps!

Heading 04

h4 - Display Small

Regular (400)

Desktop

24px

Tablet

20px

Mobile

16px

Line Height

32px

Line Height

28px

Line Height

24px

Letter Spacing

0px

Letter Spacing

0px

Letter Spacing

0px

Quick brown fox jumps!

Heading 05

h5 - Label Large

Medium (500)

Desktop

22px

Tablet

16px

Mobile

16px

Line Height

28px

Line Height

24px

Line Height

24px

Letter Spacing

0px

Letter Spacing

0.15px

Letter Spacing

0.15px

Quick brown fox jumps!

Heading 06

h6 - Paragraph Large

Regular (400)

Desktop

22px

Tablet

16px

Mobile

16px

Line Height

30px

Line Height

24px

Line Height

24px

Letter Spacing

0px

Letter Spacing

0.5px

Letter Spacing

0.5px

Quick brown fox jumps!

Body / Paragraph

Paragraph

Body Paragraph

Regular (400)

Desktop

16px

Tablet

14px

Mobile

14px

Line Height

24px

Line Height

20px

Line Height

20px

Letter Spacing

0.5px

Letter Spacing

0.25px

Letter Spacing

0.25px

Quick brown fox jumps!

Body 01

body1 - Paragraph Medium

Regular (400)

Desktop

16px

Tablet

14px

Mobile

14px

Line Height

24px

Line Height

20px

Line Height

20px

Letter Spacing

0.5px

Letter Spacing

0.25px

Letter Spacing

0.25px

Quick brown fox jumps!

Body 02

body2 - Paragraph Small

Regular (400)

Desktop

14px

Tablet

12px

Mobile

12px

Line Height

20px

Line Height

18px

Line Height

18px

Letter Spacing

0.25px

Letter Spacing

0.25px

Letter Spacing

0.25px

Quick brown fox jumps!

Subtitle

Subtitle 01

subtitle1 - Label Medium

Medium (500)

Desktop

16px

Tablet

14px

Mobile

14px

Line Height

24px

Line Height

20px

Line Height

20px

Letter Spacing

0.15px

Letter Spacing

0.1px

Letter Spacing

0.1px

Quick brown fox jumps!

Subtitle 02

subtitle2 - Label Small

Medium (500)

Desktop

14px

Tablet

12px

Mobile

12px

Line Height

20px

Line Height

18px

Line Height

18px

Letter Spacing

0.1px

Letter Spacing

0.1px

Letter Spacing

0.1px

Quick brown fox jumps!

Caption

Caption

caption - Hyperlink Small

Semibold (600)

Desktop

12px

Tablet

12px

Mobile

12px

Line Height

16px

Line Height

16px

Line Height

16px

Letter Spacing

0px

Letter Spacing

0px

Letter Spacing

0px

Quick brown fox jumps!

Caption 01

caption1 - Hyperlink Large

Regular (400)

Desktop

16px

Tablet

16px

Mobile

16px

Line Height

24px

Line Height

24px

Line Height

24px

Letter Spacing

0.5px

Letter Spacing

0.5px

Letter Spacing

0.5px

Quick brown fox jumps!

Caption 02

caption2 - Hyperlink Medium

Medium (500)

Desktop

14px

Tablet

14px

Mobile

14px

Line Height

20px

Line Height

20px

Line Height

20px

Letter Spacing

0.1px

Letter Spacing

0.1px

Letter Spacing

0.1px

Quick brown fox jumps!

Button

Default

Fill color button

use "btn" class in your Button or Link.

Outline

Border color button

use "btn-outline" class in your Button or Link.

Link

Link

Border color button

use "btn-outline" class in your Button or Link.