Colors
A
Pass
A
Pass
A
Fail
A
Fail
Nameblack
Hex#000000
RGB0, 0, 0
CMYK0, 0, 0, 100
A
Fail
A
Fail
A
Pass
A
Pass
Namewhite
Hex#ffffff
RGB255, 255, 255
CMYK0, 0, 0, 0
A
Pass
A
Pass
A
Fail
A
Fail
NamegrayDark
Hex#1f2937
RGB31, 41, 55
CMYK44, 25, 0, 78
A
Pass
A
Pass
A
Fail
A
Fail
Nametext
Hex#1f2937
RGB31, 41, 55
CMYK44, 25, 0, 78
A
Fail
A
Fail
A
Pass
A
Pass
Namebackground
Hex#ffffff
RGB255, 255, 255
CMYK0, 0, 0, 0
A
Pass
A
Pass
A
Fail
A
Pass
Nameprimary
Hex#1d4ed8
RGB29, 78, 216
CMYK87, 64, 0, 15
A
Pass
A
Pass
A
Fail
A
Fail
NameprimaryHover
Hex#1e40af
RGB30, 64, 175
CMYK83, 63, 0, 31
A
Pass
A
Pass
A
Fail
A
Fail
Namesecondary
Hex#4b5563
RGB75, 85, 99
CMYK24, 14, 0, 61
A
Fail
A
Fail
A
Pass
A
Pass
Namemuted
Hex#d1d5db
RGB209, 213, 219
CMYK5, 3, 0, 14
A
Fail
A
Fail
A
Pass
A
Pass
Namesuccess
Hex#86efac
RGB134, 239, 172
CMYK44, 0, 28, 6
A
Fail
A
Fail
A
Pass
A
Pass
Nameinfo
Hex#60a5fa
RGB96, 165, 250
CMYK62, 34, 0, 2
A
Fail
A
Fail
A
Pass
A
Pass
Namewarning
Hex#fdba74
RGB253, 186, 116
CMYK0, 26, 54, 1
A
Fail
A
Fail
A
Pass
A
Pass
Namedanger
Hex#fca5a5
RGB252, 165, 165
CMYK0, 35, 35, 1
A
Fail
A
Fail
A
Pass
A
Pass
Namelight
Hex#f3f4f6
RGB243, 244, 246
CMYK1, 1, 0, 4
A
Pass
A
Pass
A
Fail
A
Fail
Namedark
Hex#1f2937
RGB31, 41, 55
CMYK44, 25, 0, 78
A
Pass
A
Pass
A
Fail
A
Fail
NametextMuted
Hex#4b5563
RGB75, 85, 99
CMYK24, 14, 0, 61
Palettes
Gray
gray - 50
Hex#f9fafb
RGB249, 250, 251
CMYK1, 0, 0, 2
gray - 100
Hex#f3f4f6
RGB243, 244, 246
CMYK1, 1, 0, 4
gray - 200
Hex#e5e7eb
RGB229, 231, 235
CMYK3, 2, 0, 8
gray - 300
Hex#d1d5db
RGB209, 213, 219
CMYK5, 3, 0, 14
gray - 400
Hex#9ca3af
RGB156, 163, 175
CMYK11, 7, 0, 31
gray - 500
Hex#6b7280
RGB107, 114, 128
CMYK16, 11, 0, 50
gray - 600
Hex#4b5563
RGB75, 85, 99
CMYK24, 14, 0, 61
gray - 700
Hex#374151
RGB55, 65, 81
CMYK32, 20, 0, 68
gray - 800
Hex#1f2937
RGB31, 41, 55
CMYK44, 25, 0, 78
gray - 900
Hex#111827
RGB17, 24, 39
CMYK56, 38, 0, 85
Red
red - 50
Hex#fef2f2
RGB254, 242, 242
CMYK0, 5, 5, 0
red - 100
Hex#fee2e2
RGB254, 226, 226
CMYK0, 11, 11, 0
red - 200
Hex#fecaca
RGB254, 202, 202
CMYK0, 20, 20, 0
red - 300
Hex#fca5a5
RGB252, 165, 165
CMYK0, 35, 35, 1
red - 400
Hex#f87171
RGB248, 113, 113
CMYK0, 54, 54, 3
red - 500
Hex#ef4444
RGB239, 68, 68
CMYK0, 72, 72, 6
red - 600
Hex#dc2626
RGB220, 38, 38
CMYK0, 83, 83, 14
red - 700
Hex#b91c1c
RGB185, 28, 28
CMYK0, 85, 85, 27
red - 800
Hex#991b1b
RGB153, 27, 27
CMYK0, 82, 82, 40
red - 900
Hex#7f1d1d
RGB127, 29, 29
CMYK0, 77, 77, 50
Orange
orange - 50
Hex#fff7ed
RGB255, 247, 237
CMYK0, 3, 7, 0
orange - 100
Hex#ffedd5
RGB255, 237, 213
CMYK0, 7, 16, 0
orange - 200
Hex#fed7aa
RGB254, 215, 170
CMYK0, 15, 33, 0
orange - 300
Hex#fdba74
RGB253, 186, 116
CMYK0, 26, 54, 1
orange - 400
Hex#fb923c
RGB251, 146, 60
CMYK0, 42, 76, 2
orange - 500
Hex#f97316
RGB249, 115, 22
CMYK0, 54, 91, 2
orange - 600
Hex#ea580c
RGB234, 88, 12
CMYK0, 62, 95, 8
orange - 700
Hex#c2410c
RGB194, 65, 12
CMYK0, 66, 94, 24
orange - 800
Hex#9a3412
RGB154, 52, 18
CMYK0, 66, 88, 40
orange - 900
Hex#7c2d12
RGB124, 45, 18
CMYK0, 64, 85, 51
Green
green - 50
Hex#f0fdf4
RGB240, 253, 244
CMYK5, 0, 4, 1
green - 100
Hex#dcfce7
RGB220, 252, 231
CMYK13, 0, 8, 1
green - 200
Hex#bbf7d0
RGB187, 247, 208
CMYK24, 0, 16, 3
green - 300
Hex#86efac
RGB134, 239, 172
CMYK44, 0, 28, 6
green - 400
Hex#4ade80
RGB74, 222, 128
CMYK67, 0, 42, 13
green - 500
Hex#22c55e
RGB34, 197, 94
CMYK83, 0, 52, 23
green - 600
Hex#16a34a
RGB22, 163, 74
CMYK87, 0, 55, 36
green - 700
Hex#15803d
RGB21, 128, 61
CMYK84, 0, 52, 50
green - 800
Hex#166534
RGB22, 101, 52
CMYK78, 0, 49, 60
green - 900
Hex#14532d
RGB20, 83, 45
CMYK76, 0, 46, 67
Blue
blue - 50
Hex#eff6ff
RGB239, 246, 255
CMYK6, 4, 0, 0
blue - 100
Hex#dbeafe
RGB219, 234, 254
CMYK14, 8, 0, 0
blue - 200
Hex#bfdbfe
RGB191, 219, 254
CMYK25, 14, 0, 0
blue - 300
Hex#93c5fd
RGB147, 197, 253
CMYK42, 22, 0, 1
blue - 400
Hex#60a5fa
RGB96, 165, 250
CMYK62, 34, 0, 2
blue - 500
Hex#3b82f6
RGB59, 130, 246
CMYK76, 47, 0, 4
blue - 600
Hex#2563eb
RGB37, 99, 235
CMYK84, 58, 0, 8
blue - 700
Hex#1d4ed8
RGB29, 78, 216
CMYK87, 64, 0, 15
blue - 800
Hex#1e40af
RGB30, 64, 175
CMYK83, 63, 0, 31
blue - 900
Hex#1e3a8a
RGB30, 58, 138
CMYK78, 58, 0, 46
Indigo
indigo - 0
Hex#eef2ff
RGB238, 242, 255
CMYK7, 5, 0, 0
indigo - 1
Hex#e0e7ff
RGB224, 231, 255
CMYK12, 9, 0, 0
indigo - 2
Hex#c7d2fe
RGB199, 210, 254
CMYK22, 17, 0, 0
indigo - 3
Hex#a5b4fc
RGB165, 180, 252
CMYK35, 29, 0, 1
indigo - 4
Hex#818cf8
RGB129, 140, 248
CMYK48, 44, 0, 3
indigo - 5
Hex#6366f1
RGB99, 102, 241
CMYK59, 58, 0, 5
indigo - 6
Hex#4f46e5
RGB79, 70, 229
CMYK66, 69, 0, 10
indigo - 7
Hex#4338ca
RGB67, 56, 202
CMYK67, 72, 0, 21
indigo - 8
Hex#3730a3
RGB55, 48, 163
CMYK66, 71, 0, 36
indigo - 9
Hex#312e81
RGB49, 46, 129
CMYK62, 64, 0, 49
Typography
Font Family
Token
Value
Preview
sans
-apple-system, BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"
The quick brown fox jumps over the lazy dog
serif
Georgia, Cambria, "Times New Roman", Times, serif
The quick brown fox jumps over the lazy dog
mono
Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace
The quick brown fox jumps over the lazy dog
body
-apple-system, BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"
The quick brown fox jumps over the lazy dog
heading
inherit
The quick brown fox jumps over the lazy dog
monospace
Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace
The quick brown fox jumps over the lazy dog
Font Weights
Token
Value
Preview
hairline
100
The quick brown fox jumps over the lazy dog
thin
200
The quick brown fox jumps over the lazy dog
light
300
The quick brown fox jumps over the lazy dog
normal
400
The quick brown fox jumps over the lazy dog
medium
500
The quick brown fox jumps over the lazy dog
semibold
600
The quick brown fox jumps over the lazy dog
bold
700
The quick brown fox jumps over the lazy dog
extrabold
800
The quick brown fox jumps over the lazy dog
black
900
The quick brown fox jumps over the lazy dog
body
400
The quick brown fox jumps over the lazy dog
heading
700
The quick brown fox jumps over the lazy dog
Font Sizes
Token
Size
Preview
0
0.875rem
Size 0
1
1rem
Size 1
2
1.25rem
Size 2
3
1.5rem
Size 3
4
1.875rem
Size 4
5
2.25rem
Size 5
6
3rem
Size 6
7
4rem
Size 7
8
4.5rem
Size 8
Headings
Heading
Typeh1
Token6
Size3rem
Line Height1.25
Weight700
{ fontSize: 6, fontWeight: "heading", lineHeight: "heading", fontFamily: "heading" }Heading
Typeh2
Token5
Size2.25rem
Line Height1.25
Weight700
{ fontSize: 5, fontWeight: "heading", lineHeight: "heading", fontFamily: "heading" }Heading
Typeh3
Token4
Size1.875rem
Line Height1.25
Weight700
{ fontSize: 4, fontWeight: "heading", lineHeight: "heading", fontFamily: "heading" }Heading
Typeh4
Token3
Size1.5rem
Line Height1.25
Weight700
{ fontSize: 3, fontWeight: "heading", lineHeight: "heading", fontFamily: "heading" }Space
Token
Size
Preview
0
0
1
0.25rem
2
0.5rem
3
1rem
4
2rem
5
4rem
6
8rem
7
16rem
8
32rem