Design

Illustration

To-do lists are a balancing act. So is Thumbtack’s illustration style. Here's how it all fits together.

Illustration style

Every Thumbtack illustration is made up of abstract pieces, carefully assembled into one balanced structure. The pieces build on each other to mimic the momentum of checking off your to-do’s.

Illustrations have a ratio of 1:1, with at least 50px padding on each side. The background should always be pure white (#ffffff).

Illustration attributes

Monuments
Characters build abstract pieces into impressive structures.

Interactive
Characters can confidently create their environments. No task is too big or small.

Balanced
Elements are carefully assembled. Every piece has its place.

Grounded
Monuments are supported by a black foundation.

Harmony
Shapes and lines of different weights are balanced out with positive and negative space.

Transparency
Like thin pieces of paper, subtle color overlays create a handcrafted look.

Using color

Black and blue are the main colors, with indigo as a secondary hue and yellow as an accent. Save green for things that are actually green — like trees or money. Add depth by using different tints from the color palette.

Thumbtack blue
009FD9
RGB - 0, 159, 217
CMYK - 75, 21, 0, 0


3EB6E3
RGB - 62, 182, 227


99DAF0
RGB - 153, 218, 240


D1ECF7
RGB - 209, 236, 247

Black
2F3033
RGB - 47, 48, 51
CMYK - 72, 65, 60, 59

Indigo
5968E2
RGB - 89, 104, 226
CMYK - 72, 64, 0, 0


808BE8
RGB - 128, 139, 232


9CA4EF
RGB - 156, 164, 239


BDC3F3
RGB - 189, 195, 243


DFE1FA
RGB - 223, 225, 250

Yellow
FEBE14
RGB - 254, 190, 20


FFDD80
RGB - 255, 221, 128


FFEBB3
RGB - 255, 235, 179

Small

Small illustrations are used alongside copy or calls to action. They’re usually balanced clusters of one to three symbols. Keep it minimal and don’t add lots of detail or characters. Dimensions should be no larger than 70px.

Putting it all together

We love metaphors. Depict ideas, not things.

Illustration can add delight and support copy, but shouldn’t distract from the main message.

Use the right size illustration for the job, at the size they’re designed for.