Style Guide

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
Nametext
Hex#2d3748
RGB45, 55, 72
CMYK37, 24, 0, 72
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#2b6cb0
RGB43, 108, 176
CMYK76, 39, 0, 31
A
Fail
A
Pass
A
Pass
A
Pass
Namesecondary
Hex#718096
RGB113, 128, 150
CMYK25, 15, 0, 41
A
Fail
A
Fail
A
Pass
A
Pass
Namemuted
Hex#e2e8f0
RGB226, 232, 240
CMYK6, 3, 0, 6
A
Fail
A
Fail
A
Pass
A
Pass
Nameinfo
Hex#63b3ed
RGB99, 179, 237
CMYK58, 24, 0, 7
A
Fail
A
Fail
A
Pass
A
Pass
Namedanger
Hex#feb2b2
RGB254, 178, 178
CMYK0, 30, 30, 0

Palettes

Gray

gray - 1
Hex#f7fafc
RGB247, 250, 252
CMYK2, 1, 0, 1
gray - 2
Hex#edf2f7
RGB237, 242, 247
CMYK4, 2, 0, 3
gray - 3
Hex#e2e8f0
RGB226, 232, 240
CMYK6, 3, 0, 6
gray - 4
Hex#cbd5e0
RGB203, 213, 224
CMYK9, 5, 0, 12
gray - 5
Hex#a0aec0
RGB160, 174, 192
CMYK17, 9, 0, 25
gray - 6
Hex#718096
RGB113, 128, 150
CMYK25, 15, 0, 41
gray - 7
Hex#4a5568
RGB74, 85, 104
CMYK29, 18, 0, 59
gray - 8
Hex#2d3748
RGB45, 55, 72
CMYK37, 24, 0, 72
gray - 9
Hex#1a202c
RGB26, 32, 44
CMYK41, 27, 0, 83

Red

red - 1
Hex#fff5f5
RGB255, 245, 245
CMYK0, 4, 4, 0
red - 2
Hex#fed7d7
RGB254, 215, 215
CMYK0, 15, 15, 0
red - 3
Hex#feb2b2
RGB254, 178, 178
CMYK0, 30, 30, 0
red - 4
Hex#fc8181
RGB252, 129, 129
CMYK0, 49, 49, 1
red - 5
Hex#f56565
RGB245, 101, 101
CMYK0, 59, 59, 4
red - 6
Hex#e53e3e
RGB229, 62, 62
CMYK0, 73, 73, 10
red - 7
Hex#c53030
RGB197, 48, 48
CMYK0, 76, 76, 23
red - 8
Hex#9b2c2c
RGB155, 44, 44
CMYK0, 72, 72, 39
red - 9
Hex#742a2a
RGB116, 42, 42
CMYK0, 64, 64, 55

Blue

blue - 1
Hex#ebf8ff
RGB235, 248, 255
CMYK8, 3, 0, 0
blue - 2
Hex#bee3f8
RGB190, 227, 248
CMYK23, 8, 0, 3
blue - 3
Hex#90cdf4
RGB144, 205, 244
CMYK41, 16, 0, 4
blue - 4
Hex#63b3ed
RGB99, 179, 237
CMYK58, 24, 0, 7
blue - 5
Hex#4299e1
RGB66, 153, 225
CMYK71, 32, 0, 12
blue - 6
Hex#3182ce
RGB49, 130, 206
CMYK76, 37, 0, 19
blue - 7
Hex#2b6cb0
RGB43, 108, 176
CMYK76, 39, 0, 31
blue - 8
Hex#2c5282
RGB44, 82, 130
CMYK66, 37, 0, 49
blue - 9
Hex#2a4365
RGB42, 67, 101
CMYK58, 34, 0, 60

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
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
bold
700
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

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