You are currently viewing outdated (<=3.x) Chameleon documentation on our old website. For version >=4.x, check out our new website.

Current release: 3.5.0 | hub

foundations

Illustrations ()

Chameleon illustrations support increased meaning and metaphors. They are designed to be simple, flexible and visually balanced.

Chameleon illustrations provide visual storytelling and branding possibilities. They can portray a certain mood or style for your product and they can be utilized as metaphors to make complex aspects of the product more clear and understandable.

Each brand can pick or create their own illustration style. We do advise however to be consistent: choose one style for all your illustrations. This way the user gets familiar with your illustrations and will easily recognize them as being part of your brand and understand the functional meaning they may provide.

A few examples of illustration styles:

Illustration Styles

The default Chameleon illustration set

Chameleon provides a white-label illustration set which will be used as a fallback/ default for all the illustrations that are currently used in the digital products that are linked to the design system.

The white label set is designed in grey tones to have it fit any brand. However, brands can choose to keep this illustration set but have it branded in their own colors. Browse the available illustrations below.

Note: This overview also provides a set of all the illustrations that are currently necessary for the app, in case you choose to have your own set of illustrations designed.

Digitaal
ImagePlaceholder
Login
Mail
ManageTags
PageNotFound
Region
SaveFile
SaveFileInstruction
SaveTags
SearchResults
Slim
Snel
Success
Super
Weekend

Usage

The illustrations are created within a 3:2 ratio container and ready to use within all sizes that fit that ratio. Because of the vector-based (SVG) file type, they will not lose quality after resizing.

PNG file formats do have a fixed size so make sure to check the quality if you want to use that file type.

Figma Libraries

Please check out the guidelines for further information on how to use the illustrations as components.

Open source illustration sets

There are a few open-source libraries online of which you can use illustrations for free. We can recommend:

If you decide to use any of these the design system team can change them for you into the colors of your brand.

Not finding the right illustration?

Chameleon Design System is a living thing. Therefore, the situation may occur that certain illustrations do not yet exist. Please see our Getting in touch page for information on how to reach out. If there's a similar illustration already, we will suggest you to use a existing one instead.

© Copyright 2020 Mediahuis NV. All rights Reserved