Product Illustrations

Product Illustrations have various purposes. They can represent a feature or action, explain a idea with a metaphor or subtly set a mood.


To achieve visual consistency, a color palette was created. These colors relate to the UI colors but are optimised for illustraton work. Tints are added for highlights, shadows and contrast.


The default stroke is 3pt but for inner details, 2pt or no stroke is allowed. The default color is #092D4B but when approriate, a darker tint of the base color can be used as well.

Please don't...

mismatch fill and stroke colors, exceed the 3dp stroke or have 1dp for inner detail.


The smaller an illustration gets, the fewer details it needs. This keeps the image readable and the context uncluttered.

Please don't...

resize an exsisting illustration without reconsidering detail, stroke and the pixel grid.


Depending on the context, there are some different background options available.

Party Mode



That weird twilight zone between illustrations and icons. As with all twilight related matters, different rules apply. A 2pt stroke and a more limited color palette is used.