Design Systems

Color Palette

Primary

HSLA(207, 100%, 33%, 1)

#005DA8

Secondary

HSLA(45, 100%, 58%, 1)

#FFC928

Accent

HSLA(324, 100%, 46%, 1)

#EC008C

#dbefff

#a8d8ff

#75c1ff

#42abff

#0f94ff

#005da8

#004175

#002542

#00080f

Support #1

HSLA(358, 85%, 52%, 1)

#ED1D23

Support #2

HSLA(25, 91%, 54%, 1)

#F47920

Support #3

HSLA(302, 58%, 36%, 1)

#91278D

Support #4

HSLA(149, 100%, 33%, 1)

#00A851

Support #5

HSLA(196, 100%, 47%, 1)

#00B0F0

Black @0

HSLA(0, 0%, 0%, 1)

#000000

Grey @10

HSLA(0, 0%, 10%, 1)

#1A1A1A

Grey @20

HSLA(0, 0%, 20%, 1)

#333333

Grey @30

HSLA(0, 0%, 30%, 1)

#4D4D4D

Grey @40

HSL(0, 0%, 40%)

Grey @50

HSL(0, 0%, 50%)

Grey @60

HSL(0, 0%, 60%)

Grey @70

HSL(0, 0%, 70%)

Grey @80

HSL(0, 0%, 80%)

Grey @90

HSL(0, 0%, 90%)

Grey @95

HSL(0, 0%, 95%)

Grey @99

HSL(0, 0%, 99%)

White @100

HSLA(0, 0%, 100%, 1)

#FFFFFF

Để đảm bảo nội dung hiển thị rõ ràng khi kết hợp các cặp màu sắc, vui lòng kiểm tra độ tương phản sắc độ  qua công cụ Color Contrast Checker.

Typography

Display XL

96/106

Display L

57/64

Display M

45/52

Display S

36/44

Headline L

32/40

Headline M

28/36

Headline S

24/32

Title L

22/28

Title M

16/24

Title S

24/32

Label L

14/20

Label M

12/16

Title S

11/16

Body L @Bold
Body L @Regular

20/30

Body M @Regular
Body M @Regular

16/24

Body S @Bold
Body S @Bold

14/20

Body XS @Bold
Body XS @Bold

12/16