You are on page 1of 3

Colors

Neutral Colors

Color 800 Color 700 Color 600 Color 500


#141414 #404040 #666666 #8D8D8D

Color 400 Color 300 Color 200 Color 100


#E8E8E8 #F4F4F4 #FBFBFB #FFFFFF

System Colors

Blue 400 Blue 300 Blue 200 Blue 100


#086CD9 #1D88FE #8FC3FF #EAF4FF

Green 400 Green 300 Green 200 Green 100


#11845B #05C168 #7FDCA4 #DEF2E6

Red 400 Red 300 Red 200 Red 100


#DC2B2B #FF5A65 #FFBEC2 #FFEFF0

Orange 400 Orange 300 Orange 200 Orange 100


#D5691B #FF9E2C #FFD19B #FFF3E4
Typography

Aa
Inter

Regular Medium Bold

“Lorem ipsum dolor sit amet consectetur adipiscing elit at erat consectetur ultricies sapien

facilisi euismod duis mauris a sed quam aliquet dui eros sit lacus vitae ut viverra at

praesent.”

Special headings

Display 1

Inter Medium

90px / 94px
Donec et odio
pellentesqu diam.

Display 2

Inter Medium
Donec et odio pellent
72px / 84px

diam volutpa com.

Display 3
Donec et odio pellent diam
Inter Medium

44px / 52px volutpa com lorem.

Display 4 Donec et odio pellent diam


Inter Medium volutpa com lorem.
28px / 40px

Headings

Heading H1 Donec et odio pellentesqu diam volutpat


Inter Medium commod.
36px / 46px

Heading H2 Donec et odio pellentesque diam volutpat


commodo.
Inter Medium

26px / 36px

Heading H3 Donec et odio pellentesque diam


volutpat commodo.
Inter Medium

22px / 36px

Donec et odio pellentesque diam volutpat


Heading H4
commodo.

Inter Medium

22px / 28px

Donec et odio pellentesque diam


Heading H5
volutpat commodo.

Inter Medium

16px / 26px

Donec et odio pellentesque diam


Heading H6
volutpat commodo.

Inter Medium

14px / 24px

Body

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Amet proin ut
Body Large
vitae, felis. Mauris aliquet faucibus iaculis dui vitae ullamcorper ac.

Inter Regular Posuere enim, mi pharetra neque proin dictum amet.

18px / 28px

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Amet proin ut
Body Default
vitae, felis. Mauris aliquet faucibus iaculis dui vitae ullamcorper ac.

Posuere enim, mi pharetra neque proin dictum amet.


Inter Regular

14px / 24px

Text single

400 Lorem ipsum dolor sit amet consectetur

Inter Regular Lorem ipsum dolor sit amet consectetur

Inter Medium
Lorem ipsum dolor sit amet consectetur
Inter Bold

20px / 22px

300 Lorem ipsum dolor sit amet consectetur

Inter Regular
Lorem ipsum dolor sit amet consectetur

Inter Medium Lorem ipsum dolor sit amet consectetur

Inter Bold

18px / 20px

200 Lorem ipsum dolor sit amet consectetur

Lorem ipsum dolor sit amet consectetur


Inter Regular

Inter Medium Lorem ipsum dolor sit amet consectetur

Inter Bold

16px / 18px

100 Lorem ipsum dolor sit amet consectetur

Lorem ipsum dolor sit amet consectetur

Inter Regular
Lorem ipsum dolor sit amet consectetur

Inter Medium

Inter Bold

14px / 16px

Text Single Uppercase

400 L orem ipsum dolor sit amet consectetur

Inter Regular L orem ipsum dolor sit amet consectetur


Inter Medium
L orem ipsum dolor sit amet consectetur
Inter Bold

20px / 22px

300 L orem ipsum dolor sit amet consectetur

Inter Regular
L orem ipsum dolor sit amet consectetur
Inter Medium L orem ipsum dolor sit amet consectetur
Inter Bold

18px / 20px

200 L orem ipsum dolor sit amet consectetur

L orem ipsum dolor sit amet consectetur


Inter Regular

Inter Medium L orem ipsum dolor sit amet consectetur


Inter Bold

16px / 18px

100 L orem ipsum dolor sit amet consectetur


L orem ipsum dolor sit amet consectetur
Inter Regular
L orem ipsum dolor sit amet consectetur
Inter Medium

Inter Bold

14px / 16px

Rich Text

Text Bold Lorem ipsum dolor sit amet consectetur

Inter Bold

14px / 26px

Text Lin k Lorem ipsum dolor sit amet consectetur

Inter

14px / 26px

Bullet List Lorem ipsum dolor sit amet consectetur

Mauris aliquet faucibus iaculis dui vitae ullamco


Inter

18px / 30px
Posuere enim mi pharetra neque proin dic

Numbered List 1. Lorem ipsum dolor sit amet consectetur

2. Mauris aliquet faucibus iaculis dui vitae ullamco


Inter
3. Posuere enim mi pharetra neque proin dic
18px / 30px
Shadows

General Shadows

Shadow 01 Shadow 02 Shadow 03

Shadow 04 Shadow 05 Shadow 06

Button Shadows

Button Color 01 Button Color 02 Button Color 03

Button White 01 Button White 02 Button White 03

You might also like