Visual Guide
This guide includes the key elements of our visual identity and how to use them. Applying these elements consistently across all collateral will build and maintain the strength and recognition of our brand.
Color palette | Values
Please note the ratio use of color indicated by size here.
Limit accent colors to stroke/outline only. Examples are data (graphs/charts), warnings, confirmations, and prompts.
White
Pantone — White
CMYK — 0, 0, 0, 0
RGB — 255, 255, 255
HEX — #FFFFFF
Crucial Dark Blue
Pantone — 296C
CMYK — 85, 72, 59, 73
RGB — 12, 26, 36
HEX — #0C1A24
Dark Gray
Pantone — Cool Gray 11
CMYK — 0, 0, 0, 80
RGB — 88, 88, 90
HEX — #58585A
Medium gray
Pantone — Cool Gray 8
CMYK — 0, 0, 0, 50
RGB — 147, 149, 152
HEX — #8c8c8c
Light Gray
Pantone — Cool Gray 1
CMYK — 0, 0, 0, 10
RGB — 231, 231, 232
HEX — #E7E7E8
Crucial Blue
Pantone — 640C
CMYK — 100, 0, 0, 20
RGB — 0, 146, 200
HEX — #0092C8
Accent Red
CMYK — 0, 99, 100, 0
RGB — 255, 0, 0
HEX — #FF0000
Accent Orange
CMYK — 0, 62, 100, 0
RGB — 255, 127, 0
HEX — #FF7F00
Accent Yellow
CMYK — 6, 0, 97, 0
RGB — 255, 255, 0
HEX — #FFFF00
Accent Green
CMYK — 53, 0, 100, 0
RGB — 102, 255, 0
HEX — #66FF00
Color palette | Accent Use Examples
Please note the ratio use of color indicated by size here.
Limit accent colors to data (graphs/charts), notifications, and prompts.
Do: use accent colors for icons in warnings and prompts.
Do not: use accent colors for text.
Do: use accent + primary colors when providing multiple data points.
Do not: use accent colors for backgrounds or graphic fills.
Do: use strokes to minimize large blocks of accent colors in graphs.
Do not: recolor graphics or icons provided by the Crucial brand team.
Color palette | Tints
These slight tints of the Crucial color palette can be used to create a highlight or improve readability of text.
Please see examples for do’s & don’ts for using tints.
White (Dark Tint)
CMYK — 0, 0, 0, 10
RGB — 230, 231, 232
HEX — #E6E7E8
Crucial Dark Blue (Light Tint)
CMYK — 85, 72, 58, 48
RGB — 39, 51, 62
HEX — #27333E
Dark Gray (Light Tint)
CMYK — 0, 0, 0, 72
RGB — 105, 106, 109
HEX — #696A6D
Medium Gray (Light Tint)
CMYK — 0, 0, 0, 45
RGB — 157, 159, 162
HEX — #9D9FA2
Light Gray (Light Tint)
CMYK — 0, 0, 0, 7
RGB — 237, 237, 238
HEX — # EDEDEE
Crucial Blue (Light Tint)
CMYK — 100, 0, 0, 12
RGB — 0, 156, 215
HEX — #009CD7
Dark Gray (Dark Tint)
CMYK — 0, 0, 0, 84
RGB — 79, 79, 81
HEX — #4F4F51
Medium Gray (Dark Tint)
CMYK — 0, 0, 0, 58
RGB — 132, 134, 137
HEX — #848689
Light Gray (Dark Tint)
CMYK — 0, 0, 0, 18
RGB — 213, 215, 216
HEX — #D5D7D8
Crucial Blue (Dark Tint)
CMYK — 100, 0, 0, 30
RGB — 0, 132, 182
HEX — #0084B6
Color palette | Tint Use Examples
Limit use of tints for accenting necessary text or backgrounds.
Do: use the Dark Blue, Light Tint as a background highlight area.
Do: use any of the Gray tint colors as an accent or complement to the base color.
Do: use the option of Crucial Blue, Light Tint to improve readability of small text on a dark background.
Do: use accent colors for backgrounds or graphic fills.
Do not: use tints as the primary color or background color of a design.