Style Guide
Colors
A
Fail
A
Fail
A
Pass
A
Pass
Namelight
Hex#ffffff
RGB255, 255, 255
CMYK0, 0, 0, 0
A
Fail
A
Fail
A
Pass
A
Pass
NamelessLight
Hex#cccccc
RGB204, 204, 204
CMYK0, 0, 0, 20
A
Pass
A
Pass
A
Fail
A
Fail
Namedark
Hex#000000
RGB0, 0, 0
CMYK0, 0, 0, 100
A
Pass
A
Pass
A
Fail
A
Fail
NamelessDark
Hex#000000b3
RGB0, 0, 0
CMYK0, 0, 0, 100
A
Fail
A
Fail
A
Pass
A
Pass
Nameprimary
Hex#ffffff
RGB255, 255, 255
CMYK0, 0, 0, 0
A
Pass
A
Pass
A
Fail
A
Fail
Namesecondary
Hex#000000
RGB0, 0, 0
CMYK0, 0, 0, 100
A
Fail
A
Fail
A
Pass
A
Pass
Namemercury
Hex#e5e5e5
RGB229, 229, 229
CMYK0, 0, 0, 10
A
Fail
A
Fail
A
Pass
A
Pass
NameoldLace
Hex#fef7ed
RGB254, 247, 237
CMYK0, 3, 7, 0
A
Fail
A
Fail
A
Pass
A
Pass
Namewafer
Hex#e1d2cb
RGB225, 210, 203
CMYK0, 7, 10, 12
A
Fail
A
Fail
A
Pass
A
Pass
Namealmond
Hex#efd8ca
RGB239, 216, 202
CMYK0, 10, 15, 6
A
Fail
A
Fail
A
Pass
A
Pass
NamejustRight
Hex#e8cab1
RGB232, 202, 177
CMYK0, 13, 24, 9
A
Fail
A
Fail
A
Pass
A
Pass
NameindianKhaki
Hex#c8a88f
RGB200, 168, 143
CMYK0, 16, 28, 22
A
Fail
A
Fail
A
Pass
A
Pass
NamewaferDark
Hex#b896561a
RGB184, 150, 86
CMYK0, 18, 53, 28
A
Fail
A
Pass
A
Pass
A
Pass
Namepomegranate
Hex#e82b13
RGB232, 43, 19
CMYK0, 81, 92, 9
A
Fail
A
Fail
A
Pass
A
Pass
NamegoldenDream
Hex#eec73b
RGB238, 199, 59
CMYK0, 16, 75, 7
A
Fail
A
Fail
A
Pass
A
Pass
NameroseBud
Hex#fbb6b9
RGB251, 182, 185
CMYK0, 27, 26, 2
A
Fail
A
Fail
A
Pass
A
Pass
Namejaffa
Hex#f38343
RGB243, 131, 67
CMYK0, 46, 72, 5
A
Fail
A
Pass
A
Pass
A
Pass
NameeasternBlue
Hex#1882b6
RGB24, 130, 182
CMYK87, 29, 0, 29
A
Fail
A
Pass
A
Pass
A
Pass
NamegreenHaze
Hex#02a751
RGB2, 167, 81
CMYK99, 0, 51, 35
Typography
Font Family
Token
Value
Preview
sofia
sofia-pro-soft, Helvetica, system-ui, -apple-system, BlinkMacSystemFont, sans-serif
The quick brown fox jumps over the lazy dog
abril
abril-fatface, Helvetica, system-ui, -apple-system, BlinkMacSystemFont, sans-serif
The quick brown fox jumps over the lazy dog
body
sofia-pro-soft, Helvetica, system-ui, -apple-system, BlinkMacSystemFont, sans-serif
The quick brown fox jumps over the lazy dog
heading
abril-fatface
The quick brown fox jumps over the lazy dog
Font Weights
Token
Value
Preview
body
400
The quick brown fox jumps over the lazy dog
heading
700
The quick brown fox jumps over the lazy dog
bold
700
The quick brown fox jumps over the lazy dog
Font Sizes
Token
Size
Preview
0
10
Size 0
1
12
Size 1
2
14
Size 2
3
16
Size 3
4
20
Size 4
5
24
Size 5
6
36
Size 6
7
48
Size 7
8
64
Size 8
9
72
Size 9
10
96
Size 10
11
120
Size 11
Headings
Heading
Typeh1
Token5
Size24
Line Height1.125
Weight700
{ fontSize: 5, fontWeight: "heading", lineHeight: "heading", fontFamily: "heading" }Heading
Typeh2
Token4
Size20
Line Height1.125
Weight700
{ fontSize: 4, fontWeight: "heading", lineHeight: "heading", fontFamily: "heading" }Heading
Typeh3
Token3
Size16
Line Height1.125
Weight700
{ fontSize: 3, fontWeight: "heading", lineHeight: "heading", fontFamily: "heading" }Heading
Typeh4
Token2
Size14
Line Height1.125
Weight700
{ fontSize: 2, fontWeight: "heading", lineHeight: "heading", fontFamily: "heading" }Heading
Typeh5
Token1
Size12
Line Height1.125
Weight700
{ fontSize: 1, fontWeight: "heading", lineHeight: "heading", fontFamily: "heading" }Heading
Typeh6
Token0
Size10
Line Height1.125
Weight700
{ fontSize: 0, fontWeight: "heading", lineHeight: "heading", fontFamily: "heading" }Space
Token
Size
Preview
0
0
1
4
2
8
3
12
4
16
5
24
6
36
7
48
8
96
9
124