Color Under a Purple Lightbulb

The familiar problem with digital-first brands looks like this.

To serve interface scenarios, you need a palette that’s very functional and flexible to requirements. It doesn’t matter what the brand’s primary colors are — an error will still be red, success will still be green, and the background color will depend on the user’s preferred theme, which might even change twice a day.

But to build a brand (that is, to create a user experience and accompany it with sensory input unlike anything else), you need the opposite: a controlled, simple, strong color signal. 20th-century branding is, more or less, picking a color and painting everything that color for years and years. Like Coca-Cola.

So the requirement for a digital brand’s color palette is to find an elegant solution to this problem.

And our solution is this: we give up on one fixed “brand” color and adapt the palette to the needs of the interface, because those come first — including using colors to visualize data (emotions, for example). But at the same time, we mentally keep a purple lightbulb switched on somewhere in our heads, illuminating an otherwise neutral palette. In other words, we subtly tint everything purple.

gray-950 rgb(20, 20, 25) rgb(20, 20, 20)
gray-900 rgb(30, 30, 40) rgb(31, 31, 31)
gray-800 rgb(45, 45, 60) rgb(46, 46, 46)
gray-700 rgb(68, 68, 86) rgb(69, 69, 69)
gray-600 rgb(97, 97, 118) rgb(99, 99, 99)
gray-500 rgb(126, 126, 144) rgb(127, 127, 127)
gray-400 rgb(153, 153, 170) rgb(154, 154, 154)
gray-300 rgb(176, 176, 190) rgb(177, 177, 177)
gray-200 rgb(198, 198, 210) rgb(199, 199, 199)
gray-100 rgb(220, 220, 230) rgb(221, 221, 221)
gray-50 rgb(242, 242, 246) rgb(242, 242, 242)
slate-900 rgb(20, 20, 50) rgb(21, 21, 32)
slate-700 rgb(62, 63, 97) rgb(64, 64, 78)
slate-500 rgb(118, 119, 156) rgb(120, 120, 135)
slate-300 rgb(180, 180, 220) rgb(182, 182, 198)
blue-800 rgb(30, 50, 160) rgb(20, 55, 150)
blue-700 rgb(34, 65, 184) rgb(24, 72, 170)
blue-600 rgb(37, 80, 209) rgb(28, 88, 192)
blue-500 rgb(40, 95, 235) rgb(32, 104, 220)
azure-600 rgb(0, 120, 200) rgb(0, 124, 190)
azure-500 rgb(72, 131, 195) rgb(74, 134, 185)
azure-400 rgb(110, 140, 190) rgb(113, 142, 180)
purple-500 rgb(124, 58, 237) rgb(132, 58, 220)
purple-400 rgb(152, 116, 246) rgb(160, 116, 228)
purple-300 rgb(185, 163, 252) rgb(192, 164, 240)
red-600 rgb(220, 30, 58) rgb(220, 30, 30)
red-500 rgb(238, 64, 86) rgb(238, 62, 62)
red-400 rgb(255, 90, 113) rgb(255, 92, 92)
orange-500 rgb(253, 85, 45) rgb(255, 92, 24)
orange-400 rgb(255, 120, 80) rgb(255, 126, 58)
orange-300 rgb(255, 150, 110) rgb(255, 154, 92)
green-800 rgb(20, 110, 47) rgb(32, 110, 38)
green-600 rgb(48, 147, 77) rgb(60, 147, 62)
green-500 rgb(74, 185, 108) rgb(88, 185, 90)
green-400 rgb(100, 225, 140) rgb(116, 225, 120)
Vertical fluorescent lamp

This color shift isn’t mechanical — it’s tuned by hand, by eye, and that’s not an accident: color spaces are nonlinear, and the next step up in precision from “by eye” requires a ton of math, which we don’t need yet.

The result is a restrained palette that doesn’t get in the way of any task, but isn’t faceless either — it’s recognizable. (This palette was originally worked out for an early preview of the product, and has been expanding and improving ever since.)

Read next: Five Requirements for Icons