The chameleon design system consists of a few variables to define the brands identity, we call them foundations. To getting started we will need a few variables and assest. We'l sum up the minimum required, to onboard to the design system. If you need more information, you can always contact us via designsystem@mediahuis.be.

Minimum required foundations

https://chameleon.mediahuis.be/foundations/color

Primary

10 shades + base, light and dark in HEX-format (these values should come from the shades)

Secondary

10 shades + base, light and dark in HEX-format (these values should come from the shades)

Tertiary

10 shades + base, light and dark in HEX-format (these values should come from the shades)

Marketing

10 shades + base, light and dark in HEX-format (these values should come from the shades)

https://chameleon.mediahuis.be/foundations/fonts

Primary

Regular

Medium

Bold

Secondary

Regular

Medium

Bold

https://chameleon.mediahuis.be/foundations/logos

https://chameleon.mediahuis.be/foundations/iconography

https://chameleon.mediahuis.be/components/icon/design

At least brand & brand-fill (no color, bounding box) Other icons can be filled in, but are not required to start.

There are other foundations in chameleon, these are filled in with sensisble defaults. If you want to modify them, please let us know. https://chameleon.mediahuis.be/foundations

https://chameleon.mediahuis.be/components/button

Primary Button

(values from the foundations)

Secondary Button

(values from the foundations)

Outline

(values from the foundations)

Plain

(values from the foundations)

https://chameleon.mediahuis.be/components/brandedheading/code

Will be auto generated and look like the white label branded-heading. This component is fully customizable if you want. Let us know how you would like it to look like.

https://chameleon.mediahuis.be/components

Other components are automatic generated. And can still be modified. We suggest to first generate them, and modify what's needed afterwards.