Skip to main content

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 detailVehicle 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 anglesVehicle 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 shapesVehicle with trapezoidal shapes
Nope. Avoid rectangular shapes.
Yes! Shapes should be trapezoidal.
Object with rectangular shapeObject with trapezoidal shape
Nope. Lines shouldn't be straight up and down.
Yes! Slight tapers are awesome!

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


R 114
G 89
B 75


R 170
G 139
B 126


R 206
G 172
B 152


R 225
G 197
B 181


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


R 206
G 173
B 128


R 224
G 206
B 168


R 236
G 219
B 177


R 246
G 241
B 225


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


R 216
G 211
B 203


R 231
G 230
B 222


R 245
G 243
B 233


Recommended for: walls, metal, concrete


R 53
G 129
B 63


R 103
G 154
B 69


R 137
G 186
B 106


Recommended for: foliage, trees, plants


R 53
G 45
B 39


R 100
G 88
B 73


R 124
G 112
B 90


R 152
G 138
B 116


Recommended for: wood, dirt


R 42
G 43
B 42


R 92
G 94
B 95


R 193
G 190
B 187


R 228
G 226
B 220


R 244
G 242
B 237


Recommended for: asphalt, metal, road markings


R 37
G 41
B 71


R 49
G 49
B 86


R 73
G 74
B 114


Recommend for: windows, reflective surfaces


R 35
G 76
B 107


R 54
G 99
B 135


R 79
G 131
B 163


Recommended for: water

Reds / Oranges

R 114
G 14
B 26


R 174
G 32
B 37


R 239
G 156
B 116


R 255
G 238
B 204


Recommended for: lights, flowers


R 231
G 103
B 60


R 248
G 187
B 28


R 252
G 209
B 87


R 16
G 155
B 168


Bright colors are used sparingly and as highlights when the colors above won’t do.


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 & highlightsBus 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 shadingTree without gradient shading
Nope. Don't use gradients to blend shadows and highlights.
Yes! No gradients. No drop shadows.


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 shadingTree 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.


For instructions on how to work on illustrations, see the instructions in the illustrations repository.


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.