Our brand.

A simple style guide to get you started with using the WebMechanix brand.

Logos

Download: png svg
Download: png svg
Download: png svg

Logomark

Download: png svg
Download: png svg
Download: png svg
Download: png svg

Typography

Fraunces is used for headlines.

Font Weights: 900 Black (H1), 700 Bold (H2-H6)

Proxima Nova is used for body copy.

Font Weights: 400 Regular, 500 Medium, 700 Bold

Colors

We are committed to complying with the WCAG 2.1 AA color contrast ratio standards to help ensure accessibility and inclusivity for our users.

Colors overlayed for text are WMX Discovery, Blank Slate and White.

Primary

Sm
FAIL
Lg
FAIL
Sm
PASS
Lg
PASS
Sm
PASS
Lg
PASS
WMX Discovery
HEX
#072D56
CMYK
100 / 87 / 38 / 33
RGB
7 / 45 / 86
Pantone
534 C
Sm
FAIL
Lg
FAIL
Sm
PASS
Lg
PASS
Sm
PASS
Lg
PASS
WMX Midnight Oil
HEX
#002244
CMYK
100 / 86 / 43 / 48
RGB
0 / 34 / 68
Pantone
282 C
Do not use as a background color
WMX Daydream
HEX
#009FD4
CMYK
76 / 21 / 3 / 0
RGB
0 / 159 / 212
Pantone
299 C
Do not use as a background color
WMX Optimism
HEX
#46B756
CMYK
72 / 0 / 91 / 0
RGB
70 / 183 / 86
Pantone
360 C

Secondary

Do not use as a background color
Blank Slate
HEX
#2E536C
CMYK
87 / 62 / 39 / 21
RGB
46 / 83 / 108
Pantone
174-14 C
Do not use as a background color
Sapphire In Your Belly
HEX
#1178A7
CMYK
72 / 0 / 91 / 0
RGB
70 / 183 / 86
Pantone
7690 C
Do not use as a background color
Rose to the Occasion
HEX
#E0516C
CMYK
7 / 83 / 43 / 0
RGB
224 / 81 / 108
Pantone
702 C
Do not use as a background color
Grape to Meet You
HEX
#884F9C
CMYK
54 / 81 / 2 / 0
RGB
136 / 79 / 156
Pantone
258 C
Do not use as a background color
Teal the Day
HEX
#07B2AA
CMYK
76 / 4 / 40 / 0
RGB
7 / 178 / 170
Pantone
7472 C
Do not use as a background color
Orange You Glad
HEX
#F89834
CMYK
0 / 48 / 90 / 0
RGB
248 / 152 / 52
Pantone
715 C
Do not use as a background color
Yellow There
HEX
#F7D95C
CMYK
4 / 11 / 76 / 0
RGB
247 / 217 / 92
Pantone
128 C

Neutral

Sm
PASS
Lg
PASS
Sm
FAIL
Lg
PASS
Sm
FAIL
Lg
FAIL
White
HEX
#FFFFFF
CMYK
0 / 0 / 0 / 0
RGB
255 / 255 / 255
Sm
PASS
Lg
PASS
Sm
FAIL
Lg
FAIL
Sm
FAIL
Lg
FAIL
Light Gray
HEX
#F4F2ED
CMYK
3 / 2 / 5 / 0
RGB
244 / 242 / 237
Sm
PASS
Lg
PASS
Sm
FAIL
Lg
FAIL
Sm
FAIL
Lg
FAIL
Gray
HEX
#E1E0E1
CMYK
10 / 8 / 8 / 0
RGB
225 / 224 / 225
Pantone
663 C
Sm
FAIL
Lg
FAIL
Sm
FAIL
Lg
FAIL
Sm
PASS
Lg
PASS
Dark Gray
HEX
#5E6468
CMYK
64 / 52 / 48 / 20
RGB
94 / 100 / 104
Pantone
Cool Gray 10 C

Gradient

Our gradient is used as an accent to the WMX Discovery and WMX Midnight Oil primary colors when applied to line art and icons. The gradient must go from the top left corner to the bottom right corner.

Do not use as a background color
Optimistic Daydream
Color Names
WMX Daydream to WMX Optimism
HEX
#009FD4 to #46B756

Icons + Accent Elements

Our icons and accent elements represent our agency’s passion for the story behind the data. Below is a sample of each. For the full library, please reach out to the Creative department.

swirly.svg
grid_accent.webp
plusses.svg
plusses-2.svg