home

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.

Color

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.

Stroke

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.

Size

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.

Backgrounds

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

Circle
Blob
Baseline
Party Mode

Examples

'Illustraticons'

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.