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

Foundations ()

Foundations are a set of agreed-upon primitive values that can be seen as the DNA for a specific brand

These values are what enable brands to differentiate as brands are given the freedom to adapt these core values according to their branding strategy.

Foundations are expressed under the form of values for color, typography, spacing, shadows, elevation, and icons. These values are then consumed by the component tokens and components itself, meaning that a change in one of these primitive values will automatically translate itself to it being changed everywhere it was used. A concrete example: say that the primary color for a brand was to be changed to a slightly darker value. This change will result in all components using the primary color to be updated automatically. E.g. where the button used to be a lighter blue shade, the update will now render all buttons slightly darker blue.

These foundations exist both in the design space as in a development environment. Design-wise, they are represented as color, layer and text styles in our design toolkit. On the technical side, they are represented as a set of JSON values, that are subsequently translated to tokens for a specific programming language.

© Copyright 2020 Mediahuis NV. All rights Reserved