03 / 06
Color.
Mostly Midnight, one accent. Midnight is the ground, White carries the words, and Signal marks the one thing that should catch the eye.
3.1 Palette
Nine colors, three jobs.
Four darks for grounds and surfaces, two oranges for the accent, three lights for words and lines.
- #070B18
Midnight
Primary background, dark surfaces
- HEX
#070B18- RGB
7 11 24- CMYK ≈
71 54 0 91
- #0F1630
Ink
Raised surfaces, cards on Midnight
- HEX
#0F1630- RGB
15 22 48- CMYK ≈
69 54 0 81
- #141D3D
Ink 2
Secondary surfaces
- HEX
#141D3D- RGB
20 29 61- CMYK ≈
67 52 0 76
- #1B2550
Ink 3
Tertiary surfaces, borders on dark
- HEX
#1B2550- RGB
27 37 80- CMYK ≈
66 54 0 69
- #F5A623
Signal
The one accent: the arrow, calls to action, highlights
- HEX
#F5A623- RGB
245 166 35- CMYK ≈
0 32 86 4
- #FFBE4D
Signal 2
Signal on hover, glow
- HEX
#FFBE4D- RGB
255 190 77- CMYK ≈
0 25 70 0
- #EEF1F7
White
Text and marks on dark; light background
- HEX
#EEF1F7- RGB
238 241 247- CMYK ≈
4 2 0 3
- #8993AB
Steel
Secondary text on dark
- HEX
#8993AB- RGB
137 147 171- CMYK ≈
20 14 0 33
- #5C6784
Steel 2
Tertiary text, hairlines
- HEX
#5C6784- RGB
92 103 132- CMYK ≈
30 22 0 48
3.2 Proportions
Mostly Midnight.
In any composition, Midnight covers about four fifths, Ink about a tenth and White less than that. Signal is a few sparks: the arrow, one button, one lit element.
- Midnight ~78%
- Ink ~10%
- White ~8%
- Signal and Steel the rest
3.3 One accent
Signal, once.
Signal is the only accent. Use it for the arrow in the mark, for calls to action, for the full stop that ends a headline and for one highlighted element in a figure. If two things on a screen are orange, one of them shouldn’t be.
- Never a fill for large areas.
- Never a text color on White or light surfaces.
- Never paired with a second accent color.
3.4 Contrast
Pairs that pass.
Ratios follow WCAG 2: at least 4.5:1 for body text, 3:1 for large text and graphics.
White on Midnight
17.3:1
AAA All text
White on Ink
15.8:1
AAA All text on cards
Signal on Midnight
9.7:1
AAA Accents, links, short text
Midnight on Signal
9.7:1
AAA Button labels
Steel on Midnight
6.4:1
AA Secondary text
Steel on Ink
5.8:1
AA Secondary text on cards
Steel 2 on Midnight
3.5:1
AA large Large text and hairlines only
Midnight on White
17.3:1
AAA Text on light surfaces
Signal on White
1.8:1
Fail Never text: the arrow and small details only
3.5 Light surfaces
On white, Midnight speaks.
Documents and light pages invert the system. White or paper is the ground, Midnight carries the text and the squares, and Signal is kept for the arrow and small details. For secondary text on light surfaces, use Steel 2 (5.0:1), not Steel (2.7:1).
A clear next step.
Midnight carries the text on a light surface.
Secondary text in Steel 2
3.6 Print
Proof before print.
The CMYK values are straight conversions for orientation, not a print specification. Print Midnight as a rich black, and proof Signal on the actual paper before a run.
3.7 Misuse
Four things never to do.
Don’t
Add a hue that isn’t in the palette to make something stand out. Use size, weight or Signal instead.
Don’t
Blend palette colors into gradients or add a glow.
Don’t
Set body text in Signal or Steel 2.
Don’t
Put Signal text on White or any light surface.
3.8 Files
The palette, ready to use.
The palette in four formats: CSS custom properties for the web, JSON for design and presentation tools, an Adobe swatch file (ASE) and a GIMP and Inkscape palette (GPL).