Style Guide
Black
Black
Dark 900
#0C0407
Black
Dark 800
#333333
Black
Dark 700
#4C4C4C
Black
Dark 600
#666666
Black
Default 500
#808080
Black
Light 400
#999999
Black
Light 300
#B3B3B3
Black
Light 200
#CCCCCC
Black
Light 100
#E5E5E5
Brand Color
Brand
Dark 900
#091B77
Brand
Dark 800
#102890
Brand
Dark 700
#1A3AB3
Brand
Dark 600
#2650D6
Brand
Default 500
#3469F9
Brand
Light 400
#6692FB
Brand
Light 300
#85ACFD
Brand
Light 200
#ADCAFE
Brand
Light 100
#D6E5FE
Brand
Light 100
#FFFFFF
Success
Success
Dark 900
#0D6630
Success
Dark 800
#167C34
Success
Dark 700
#239A3C
Success
Dark 600
#33B843
Success
Default 500
#46D64B
Success
Light 400
#78E672
Success
Light 300
#9EF290
Success
Light 200
#C6FAB7
Success
Light 100
#E5FCDA
Warning
Warning
Dark 900
#7A4800
Warning
Dark 800
#935C00
Warning
Dark 700
#B77800
Warning
Dark 600
#DB9600
Warning
Default 500
#FFB600
Warning
Light 400
#FFCD3F
Warning
Light 300
#FFDC66
Warning
Light 200
#FFEA99
Warning
Light 100
#FFF6CC
Regular
text-H 1
72px
110%
The quick brown fox jumps
text-H 2
60px
120%
The quick brown fox jumps
text-H 3
48px
120%
The quick brown fox jumps
text-3xl
40px
120%
The quick brown fox jumps
text-2xl
36px
120%
The quick brown fox jumps
text-xl
32px
140%
The quick brown fox jumps
text-xl
24px
120%
The quick brown fox jumps
text-lg
20px
140%
The quick brown fox jumps
text-lg
18px
140%
The quick brown fox jumps
text-base
16px
140%
The quick brown fox jumps
text-sm
14px
140%
The quick brown fox jumps
text-xs
12px
Auto
The quick brown fox jumps
Medium
text-H 1
72px
110%
The quick brown fox jumps
text-H 2
60px
120%
The quick brown fox jumps
text-H 3
48px
120%
The quick brown fox jumps
text-3xl
40px
120%
The quick brown fox jumps
text-2xl
36px
120%
The quick brown fox jumps
text-xl
32px
140%
The quick brown fox jumps
text-xl
24px
120%
The quick brown fox jumps
text-lg
20px
140%
The quick brown fox jumps
text-lg
18px
140%
The quick brown fox jumps
text-base
16px
140%
The quick brown fox jumps
text-sm
14px
140%
The quick brown fox jumps
text-xs
12px
Auto
The quick brown fox jumps
Semibold
text-H 1
72px
110%
The quick brown fox jumps
text-H 2
60px
120%
The quick brown fox jumps
text-H 3
48px
120%
The quick brown fox jumps
text-3xl
40px
120%
The quick brown fox jumps
text-2xl
36px
120%
The quick brown fox jumps
text-xl
32px
140%
The quick brown fox jumps
text-xl
24px
120%
The quick brown fox jumps
text-lg
20px
140%
The quick brown fox jumps
text-lg
18px
140%
The quick brown fox jumps
text-base
16px
140%
The quick brown fox jumps
text-sm
14px
140%
The quick brown fox jumps
text-xs
12px
Auto
The quick brown fox jumps
Bold
text-H 1
72px
110%
The quick brown fox jumps
text-H 2
60px
120%
The quick brown fox jumps
text-H 3
48px
120%
The quick brown fox jumps
text-3xl
40px
120%
The quick brown fox jumps
text-2xl
36px
120%
The quick brown fox jumps
text-xl
32px
140%
The quick brown fox jumps
text-xl
24px
120%
The quick brown fox jumps
text-lg
20px
140%
The quick brown fox jumps
text-lg
18px
140%
The quick brown fox jumps
text-base
16px
140%
The quick brown fox jumps
text-sm
14px
140%
The quick brown fox jumps
text-xs
12px
Auto
The quick brown fox jumps
