Colors

Color distinguishes our brand and helps us create consistent experiences across products.

Neutral

Gray is a neutral color and is the foundation of the color system. Almost everything in UI design — text, form fields, backgrounds, dividers — are usually gray.

0

#FFFFFF

10

#F9FAFB

20

#E5E7EB

30

#D1D5DB

40

#AEB2BA

50

#6B7280

60

#4B5563

70

#374151

80

#1F2937

90

#111827

100

#030712

Inter Tight

Bold

SemiBold

Medium

Regular

Aa

Heading - Desktop

Heading 1

Inter Tight/ Bold

104px

100%

Heading 1

Heading 2

Inter Tight/ SemiBold

72px

100%

Heading 2

Heading 3

Inter Tight/ SemiBold

64px

100%

Heading 3

Heading 4

Inter Tight/ SemiBold

56px

100%

Heading 4

Heading 5

Inter Tight/ SemiBold

40px

100%

Heading 5

Heading 6

Inter Tight/ SemiBold

32px

100%

Heading 6

Heading - Mobile

Heading 1

Inter Tight/ Bold

64px

100%

Heading 1

Heading 2

Inter Tight/ SemiBold

56px

100%

Heading 2

Heading 3

Inter Tight/ SemiBold

48px

100%

Heading 3

Heading 4

Inter Tight/ SemiBold

40px

100%

Heading 4

Heading 5

Inter Tight/ SemiBold

32px

100%

Heading 5

Body

Body Extra-Large Bold

Inter Tight/ SemiBold

28px

120%

The quick brown fox

Body Extra-Large Medium

Inter Tight/ Medium

28px

120%

The quick brown fox

Body Extra-Large Regular

Inter Tight/ Regular

28px

120%

The quick brown fox

Body Large Bold

Inter Tight/ SemiBold

20px

130%

The quick brown fox

Body Large Medium

Inter Tight/ Medium

20px

130%

The quick brown fox

Body Large Regular

Inter Tight/ Regular

20px

130%

The quick brown fox

Body Large Bold

Inter Tight/ SemiBold

18px

150%

The quick brown fox

Body Large Medium

Inter Tight/ Medium

18px

150%

The quick brown fox

Body Large Regular

Inter Tight/ Regular

18px

150%

The quick brown fox

Body Semi-Large Bold

Inter Tight/ SemiBold

16px

150%

The quick brown fox

Body Semi-Large Medium

Inter Tight/ Medium

16px

150%

The quick brown fox

Body Semi-Large Regular

Inter Tight/ Regular

16px

150%

The quick brown fox

Body Small Bold

Inter Tight/ SemiBold

14px

150%

The quick brown fox

Body Small Medium

Inter Tight/ Medium

14px

150%

The quick brown fox

Body Small Regular

Inter Tight/ Regular

14px

150%

The quick brown fox

Caption Bold

Inter Tight/ SemiBold

12px

150%

The quick brown fox

Caption Medium

Inter Tight/ Medium

12px

150%

The quick brown fox

Caption Regular

Inter Tight/ Regular

12px

150%

The quick brown fox