Illustrations

If you would like to contribute illustrations, or have feedback on existing illustrations, please talk to us on Discord or on the forums!

We collect illustration inspiration and reference material on Pinterest. Give it a look!

Design principles

Streetmix illustrations use the following principles to achieve its simple, unique style.

Simplified forms and reduced details

The complexity of form is reduced to a simple silhouette and each object contains minimal details. Good rule of thumb: if you don’t need a particular detail to identify the item, don’t add it. This reduction helps each illustration scale to small sizes.

Vehicle with too much detail Vehicle with ideal amount of detail
Nope. The extra details aren’t visible at a small scale and the more complicated silhouette makes the car look clunky.
Yes! This silhouette has less vertices, and extraneous details are removed or simplified.

Sharp angles

All of the illustrations are comprised of sharp angles, with a minimal use of perfect circles.

Vehicle with round angles Vehicle with sharp angles
Nope. Don’t draw rounded corners or bulby shapes.
Yes! Edges should meet at sharp angles.

Few orthogonal lines

There are very few entirely straight vertical lines. All of the objects slant in or out in a trapezoidal way, unless it makes the illustration look too funky.

Vehicle with rectangular shapes Vehicle with trapezoidal shapes
Nope. Avoid rectangular shapes.
Yes! Shapes should be trapezoidal.
Vehicle with rectangular shapes Vehicle with trapezoidal shapes
Nope.
Yes!

Lines that appear to be exactly vertical or horizontal will not actually be precisely level or plumb. This isn’t an engineering drawing. Lines can be slightly “off,” with some exceptions.

One example of such an exception is for building walls. Since buildings can be multi-story, lines that continue from one floor to the next must be vertically straight so that each floor aligns properly.

Recurring elements

Shapes that recur throughout illustrations helps everything read as part of the same unified family. However, these should be subtle—don’t overdo these, or force them into existence. Use them when they make sense.

45-degree angles

Some angled elements can be drawn at exactly 45 degrees. These work well for window reflections and shadows.

45-degree angled elements

The “brick”

This is a simple trapezoidal shape of similar size and proportion that can be used as a small object, detail, or addition to a larger shape.

The "brick"
Example usage of the "brick"

The “platter”

Similar to the Brick, the Platter is a trapezoidal shape but much longer and flatter.

The "platter"
Example usage of the "platter"

Letters and words

Avoid using actual words or letters in illustrations. Streetmix is used all over the world, and we want to avoid making illustrations that are English-only (or specific to your preferred language).

One notable exception to this is the use of numbers or letters as transportation route identifiers.

Brands, logos, and other recognizable features

Similarly, avoid specific brands and logos, whether that’s commercial businesses (like transportation network companies or chain restaurants) or public agencies (like transportation agencies). However, some illustrations are clearly homages to actual elements that come from specific parts of the world, like New York City’s wayfinding pylons, or San Francisco’s deep-red “Yerba Buena” parklet. We like that these recognizable elements can be dropped anywhere around the world, but logos tie the elements to its regional source too strongly.

In the future…

…we may be able to relax these guidelines by localizing illustrations to specific regions. For now, prefer abstractions that make an illustration look generic, even if it’s an homage to a real place.

Color

Palette

Colors are mostly soft, with hints of brightness. They should have sufficient contrast against a light–medium blue background (the sky).

Colors are not necessarily “true to life.” (For instance, we’re not using the “actual” color of a taillight.) Use colors from the following color palette whenever possible, instead of using custom colors, so that illustrations appear unified. But if the palette just doesn’t work, you may choose a new color that does. Some illustrations may have already chosen a color not shown below, so it’s best to sample colors that have already been used elsewhere, even if it’s not part of the official palette.

Skin tones

R 85
G 63
B 55

#553f37

R 114
G 89
B 75

#72594b

R 170
G 139
B 126

#aa8b7e

R 206
G 172
B 152

#ceac98

R 225
G 197
B 181

#e1c5b5

To keep people recognizable, use skin tone colors only for people.

Beiges

R 206
G 173
B 128

#cead80

R 224
G 206
B 168

#e0cea8

R 236
G 219
B 177

#ecdbb1

R 246
G 241
B 225

#f6f1e1

Recommended for: walls, stucco, plaster, pavement, sand

Off-whites

R 216
G 211
B 203

#d8d3cb

R 231
G 230
B 222

#e7e6de

R 245
G 243
B 233

#f5f3e9

Recommended for: walls, metal, concrete

Greens

R 53
G 129
B 63

#35813f

R 103
G 154
B 69

#679a45

R 136
G 186
B 106

#89ba6a

Recommended for: foliage, trees, plants

Browns

R 53
G 45
B 39

#352d27

R 100
G 88
B 73

#645849

R 124
G 112
B 90

#7c705a

R 152
G 138
B 116

#988a74

Recommended for: wood, dirt

Grayscale

R 42
G 43
B 42

#2a2b2a

R 92
G 94
B 95

#5c5e5f

R 193
G 190
B 187

#c1bebb

R 228
G 226
B 220

#e4e2dc

R 244
G 242
B 237

#f4f2ed

Recommended for: asphalt, metal, road markings

Indigos

R 37
G 41
B 71

#252947

R 49
G 49
B 86

#313156

R 73
G 74
B 114

#494a72

Recommend for: windows, reflective surfaces

Blues

R 35
G 76
B 107

#234c6b

R 54
G 99
B 135

#366387

R 79
G 131
B 163

#4f83a3

Recommended for: water

Reds / Oranges

R 114
G 14
B 26

#720e1a

R 174
G 32
B 37

#ae2025

R 239
G 156
B 116

#ef9c74

R 255
G 238
B 204

#ffeecc

Recommended for: lights, flowers

Brights

R 231
G 103
B 60

#e7673c

R 248
G 187
B 28

#f8bb1c

R 252
G 209
B 87

#fcd157

R 16
G 155
B 168

#109ba8

Bright colors used sparingly when colors above won’t do.

Tip

You can download a palette swatch for use in your favorite graphics editing program.

Shadows and highlights

Many elements have one solid color with a highlight and a low light. Exceptions include objects with more details, like the bus. Because the bus contains detail elements (lights, windshield, mirrors, route number, etc), adding shading to the metal would make the object too busy. Similarly, details don’t need shadows or highlights—they wouldn’t be visible at a small scale anyway. All of the shading should be done with one solid color, without feathered shadows or gradients. (The only exception is the sky.)

Bus with many shadows & highlights Bus with less shadows & highlights
Nope. The image is over–complicated by the number of shadows and highlights.
Yes! The shading and highlighting is used only on the most prominent element, the windshield.
Tree with gradient shading Tree without gradient shading
Nope. This image uses gradients to blend out the shadows and highlights.
Yes! No gradients. No drop shadows.

Contrast

Some illustrations are smaller in nature, so they require more contrast between adjacent colors to be clearer. For example, the pedestrian’s pants need more contrast than the building.

Tree with gradient shading Tree without gradient shading
Nope. This looks good as a larger image, but the shadow is not really visible when scaled down.
Yes! This actually looks like too much contrast close up, but is just right when scaled down.

Workflow

For instructions on how to work on illustrations, see the instructions in the illustrations repository: https://github.com/streetmix/illustrations

Tip

The illustrations used here in this documentation are also located in the illustrations repository! If you want to update the graphics used here, please make sure to process the exported SVG files through SVGOMG so that they’re optimized, making them faster to load.

You can also see a collection of illustrations in our Reference library.