Motion
The motion system extends the expression and functionality of the design system. Motion allows modules using the design system to be more flexible, more dynamic, and contain a wider range of content.
Color
The color of the modules should adjust according to the philosophy in the Secondary Colors section.
As the modules amplify, the color should adjust to match the pacing of the amplification.
The modules amplify and change color simultaneously.
Amplify + Cut
Back to top
Black & White
Black
R 0
G 0
B 0
H 0
S 0
B 0
C 0
M 0
Y 0
K 100
HEX #000000
PMS BLACK 6C
White
R 255
G 255
B 255
H 0
S 0
B 100
C 0
M 0
Y 0
K 0
HEX #FFFFFF
PMS OPAQUE WHITE
Warm
Pink
R 255
G 117
B 230
H 311
S 54
B 100
C 11
M 61
Y 0
K 0
HEX #FF75E6
PMS 237C
Scarlet
R 161
G 0
B 46
H 343
S 100
B 63
C 24
M 100
Y 81
K 20
HEX #A1002E
PMS 207C
Red
R 241
G 32
B 39
H 358
S 87
B 95
C 0
M 98
Y 95
K 0
HEX #F12027
PMS 3556C
Orange
R 255
G 75
B 0
H 18
S 100
B 100
C 1
M 85
Y 100
K 0
HEX #FF4B00
PMS 1655C
Yellow
R 255
G 211
B 0
H 50
S 100
B 100
C 1
M 15
Y 100
K 0
HEX #FFD300
PMS 109C
Lime
R 186
G 209
B 49
H 69
S 77
B 82
C 32
M 2
Y 100
K 0
HEX #BAD131
PMS 2297C
Cool
Blue
R 255
G 117
B 230
H 311
S 54
B 100
C 11
M 61
Y 0
K 0
HEX #174BEB
PMS 2132C
Neon
R 136
G 148
B 255
H 234
S 47
B 100
C 49
M 41
Y 0
K 0
HEX #8894FF
PMS 7452C
Purple
R 149
G 7
B 255
H 274
S 97
B 100
C 63
M 80
Y 0
K 0
HEX #9507FF
PMS 266C
Moss
R 79
G 79
B 46
H 60
S 42
B 31
C 60
M 50
Y 86
K 42
HEX #4F4F2E
PMS 7764C
Dark Green
R 14
G 102
B 75
H 162
S 86
B 40
C 88
M 36
Y 77
K 42
HEX #0E664B
PMS 336C
Green
R 0
G 170
B 31
H 131
S 100
B 67
C 82
M 4
Y 100
K 0
HEX #00AA1F
PMS 2423C
Neutral
Cool Gray
R 162
G 171
B 197
H 225
S 18
B 77
C 37
M 27
Y 11
K 0
HEX #A2ABC5
PMS 2132C
Gray
R 137
G 142
B 131
H 87
S 8
B 56
C 48
M 36
Y 47
K 5
HEX #898E83
PMS 7539C
Wash
R 186
G 175
B 221
H 254
S 21
B 87
C 26
M 30
Y 0
K 0
HEX #BAAFDD
PMS 2092C
Dust
R 168
G 144
B 141
H 7
S 16
B 66
C 36
M 42
Y 39
K 2
HEX #A8908D
PMS 4113C
Sand
R 198
G 188
B 155
H 46
S 22
B 78
C 24
M 21
Y 41
K 0
HEX #CEC7AE
PMS 4246C
Charcoal
R 112
G 115
B 129
H 229
S 13
B 51
C 59
M 50
Y 38
K 9
HEX #707381
PMS 4128C
Opacity Reduction
25%
50%
75%
Core Color
Tint Reduction
75%
50%
25%
Warm
Pink
Scarlet
Red
Orange
Yellow
Lime
Cool
Blue
Purple
Neon
Moss
Dark Green
Green
Neutral
Cool Gray
Gray
Wash
Dust
Sand
Charcoal
Two Elements
When using two elements in the composition, 100% and 50% tint or opacity should be used.
100%
50%
Three Elements
When using three elements in the composition, 100%, 50% and 25% should be used to provide maximum gradation of tones.
100%
50%
25%
Four Elements
When using four elements in the composition, 100%, 75%, 50% and 25% should be used.
100%
75%
50%
25%
Five Elements
When using five elements in the composition, a 10% tint provides an additional level of tonal gradation.
100%
75%
50%
25%
10%
Two Elements
Three Elements
Four Elements
Type
1. White On Color Opacity
2. Black On Color Opacity
3. Color On Black Opacity
4. Color On Black Tint
5. Color On 10% Tint Opacity
6. White On Image Opacity
Graphic Block
1. Color On Black Tint
2. Color On 10% Tint Opacity
3. Color On Color Tint
4. Color On Image Tint
Type
1. White On Color Opacity
2. Black On Color Opacity
3. Color On Black Opacity
4. Color On Black Tint
5. Color On 10% Tint Opacity
6. White On Image Opacity
Graphic Block
1. Color On Black Tint
2. Color On 10% Tint Opacity
3. Color On Color Tint
4. Color On Image Tint
Type
1. White On Color Opacity
2. Black On Color Opacity
3. Color On Black Opacity
4. Color On Black Tint
5. Color On 10% Tint Opacity
6. White On Image Opacity
Graphic Block
1. Color On Black Tint
2. Color On 10% Tint Opacity
3, Color On Color Tint
4. Color On Image Tint
Type
1. White On Color Opacity
2. Black On Color Opacity
3. Color On Black Opacity
4. Color On Black Tint
5. Color On 10% Tint Opacity
6. White On Image Opacity
Graphic Block
1. Color On Black Tint
2. Color On 10% Tint Opacity
3. Color On Color Tint
4. Color On Image Tint
Type
1. White On Color Opacity
2. Black On Color Opacity
3. Color On Black Opacity
4. Color On Black Tint
5. Color On 10% Tint Opacity
6. White On Image Opacity
Graphic Block
1. Color On Black Tint
2. Color On 10% Tint Opacity
3. Color On Color Tint
4. Color On Image Tint
Type
1. White On Color Opacity
2. Black On Color Opacity
3. Color On Black Opacity
4. Color On Black Tint
5. Color On 10% Tint Opacity
6. White On Image Opacity
Graphic Block
1. Color On Black Tint
2. Color On 10% Tint Opacity
3. Color On Color Tint
4. Color On Image Tint
Type
1. White On Color Opacity
2. Black On Color Opacity
3. Color On Black Opacity
4. Color On Black Tint
5. Color On 10% Tint Opacity
6. White On Image Opacity
Graphic Block
1. Color On Black Tint
2. Color On 10% Tint Opacity
3. Color On Color Tint
4. Color On Image Tint
Type
1. White On Color Opacity
2. Black On Color Opacity
3. Color On Black Opacity
4. Color On Black Tint
5. Color On 10% Tint Opacity
6. White On Image Opacity
Graphic Block
1. Color On Black Tint
2. Color On 10% Tint Opacity
3. Color On Color Tint
4. Color On Image Tint
Type
1. White On Color Opacity
2. Black On Color Opacity
3. Color On Black Opacity
4. Color On Black Tint
5. Color On 10% Tint Opacity
6. White On Image Opacity
Graphic Block
1. Color On Black Tint
2. Color On 10% Tint Opacity
3. Color On Color Tint
4. Color On Image Tint
Type
1. White On Color Opacity
2. Black On Color Opacity
3. Color On Black Opacity
4. Color On Black Tint
5. Color On 10% Tint Opacity
6. White On Image Opacity
Graphic Block
1. Color On Black Tint
2. Color On 10% Tint Opacity
3. Color On Color Tint
4. Color On Image Tint
Type
1. White On Color Opacity
2. Black On Color Opacity
3. Color On Black Opacity
4. Color On Black Tint
5. Color On 10% Tint Opacity
6. White On Image Opacity
Graphic Block
1. Color On Black Tint
2. Color On 10% Tint Opacity
3. Color On Color Tint
4. Color On Image Tint
Type
1. White On Color Opacity
2. Black On Color Opacity
3. Color On Black Opacity
4. Color On Black Tint
5. Color On 10% Tint Opacity
6. White On Image Opacity
Graphic Block
1. Color On Black Tint
2. Color On 10% Tint Opacity
3. Color On Color Tint
4. Color On Image Tint
Type
1. White On Color Opacity
2. Black On Color Opacity
3. Color On Black Opacity
4. Color On Black Tint
5. Color On 10% Tint Opacity
6. White On Image Opacity
Graphic Block
1. Color On Black Tint
2. Color On 10% Tint Opacity
3. Color On Color Tint
4. Color On Image Tint
Type
1. White On Color Opacity
2. Black On Color Opacity
3. Color On Black Opacity
4. Color On Black Tint
5. Color On 10% Tint Opacity
6. White On Image Opacity
Graphic Block
1. Color On Black Tint
2. Color On 10% Tint Opacity
3. Color On Color Tint
4. Color On Image Tint
Type
1. White On Color Opacity
2. Black On Color Opacity
3. Color On Black Opacity
4. Color On Black Tint
5. Color On 10% Tint Opacity
6. White On Image Opacity
Graphic Block
1. Color On Black Tint
2. Color On 10% Tint Opacity
3. Color On Color Tint
4. Color On Image Tint
Type
1. White On Color Opacity
2. Black On Color Opacity
3. Color On Black Opacity
4. Color On Black Tint
5. Color On 10% Tint Opacity
6. White On Image Opacity
Graphic Block
1. Color On Black Tint
2. Color On 10% Tint Opacity
3. Color On Color Tint
4. Color On Image Tint
Type
1. White On Color Opacity
2. Black On Color Opacity
3. Color On Black Opacity
4. Color On Black Tint
5. Color On 10% Tint Opacity
6. White On Image Opacity
Graphic Block
1. Color On Black Tint
2. Color On 10% Tint Opacity
3. Color On Color Tint
4. Color On Image Tint
Type
1. White On Color Opacity
2. Black On Color Opacity
3. Color On Black Opacity
4. Color On Black Tint
5. Color On 10% Tint Opacity
6. White On Image Opacity
Graphic Block
1. Color On Black Tint
2. Color On 10% Tint Opacity
3. Color On Color Tint
4. Color On Image Tint
Pop
R 255
G 117
B 230
H 311
S 54
B 100
C 11
M 61
Y 0
K 0
HEX #FF75E6
PMS 237C
Latin
R 255
G 75
B 0
H 18
S 100
B 100
C 1
M 85
Y 100
K 0
HEX #FF4B00
PMS 1655C
Rock
R 241
G 32
B 39
H 358
S 87
B 95
C 0
M 98
Y 95
K 0
HEX #F12027
PMS 3556C
Alternative
R 186
G 175
B 221
H 254
S 21
B 87
C 26
M 30
Y 0
K 0
HEX #BAAFDD
PMS 2092C
Hip-Hop
R 79
G 79
B 46
H 60
S 42
B 31
C 60
M 50
Y 86
K 42
HEX #4F4F2E
PMS 7764C
R&B
R 149
G 7
B 255
H 274
S 97
B 100
C 63
M 80
Y 0
K 0
HEX #9507FF
PMS 266C
Country
R 168
G 144
B 141
H 7
S 16
B 66
C 36
M 42
Y 39
K 2
HEX #A8908D
PMS 4113C
EDM
R 186
G 209
B 49
H 69
S 77
B 82
C 32
M 2
Y 100
K 0
HEX #BAD131
PMS 2297C
Indie
R 255
G 117
B 230
H 311
S 54
B 100
C 11
M 61
Y 0
K 0
HEX #174BEB
PMS 2132C
Latin
Orange
Reggaeton
Sabor Tropical
Urbano
Hip-Hop
Moss
Grime
Trap
Drill
EDM
Lime
Electronic
Techno
House
Country
Dust
Reggaeton
Sabor Tropical
Urbano
Rock
Red
Grime
Trap
Drill
R&B
Purple
Electronic
Techno
House