...
Chameleon
...
Chameleon comes with a full set of colour palettes for you to customise your websites.
...
Chameleon provides two modes out of the box, default, and inverse. Default and inverse is designed to work with brands identities a brand's identity regardless of the lightness or darkness of the prominent brand colours.
For example, Vanish uses lighter colours for their brand identity. Their default palette will be lighter, and their inverse palette will use darker colours.
...
Light and dark modes are considered themes in Chameleon and will require a full set of colour palettes (default and inverse) to be designed and implemented.
On{colour}
Some colours in Chameleon are referred to as on colours. These are colours designed to sit on top of other colours.
...
For example, this button uses two colours:
Action - For the background colour
On-action - For the text colour
We make this separation to allow for maximum flexibility. If you wanted to change your action colour you only need to consider the action, and on-action declarations. Otherwise you would have to find out where you’ve used every instance of your action colour (chameleon green-500) and change it individually. You would also need to ensure that any text that sits on top of action is also updated.
Colours in use
Action colours
Colour | Default value | Inverse | |
|---|---|---|---|
Action | chameleon green-500 | chameleon green-500 | |
On-action | white-500 | deep blue-500 | |
Action hover | chameleon green-700 | chameleon green-150 | |
On-hover | white-500 | deep blue-500 | |
Action focus | chameleon green-700 | chameleon green-150 | |
On-Focus | white-500 | deep blue-500 | |
Action focus border | chameleon blue-400 | chameleon blue-400 | |
Action active | chameleon green-800 | chameleon green-50 | |
On-active | white-500 | deep blue-500 | |
Action disabled | grey-200 | grey-200 | |
On-disabled | grey-500 | grey-500 | |
Selected | chameleon green-800 | chameleon green-50 | |
On-selected | white-500 | deep blue-500 | |
Dropdown hover | chameleon green-50 | steel blue-900 | |
CTA link border | chameleon green-400 | chameleon green-400 |
General UI colours
Colour | Default value | Inverse | |
|---|---|---|---|
Accent | chameleon blue-500 | chameleon blue-300 | |
Input field border | grey-400 | grey-300 | |
Input field hover | grey-600 | grey-100 | |
Divider | grey-400 | grey-300 | |
Heading | steel blue-500 | steel blue-50 | |
Body | steel blue-300 | steel blue-200 | |
Placeholder | steel blue-100 | steel blue-300 | |
Visited | purple-500 | purple-300 | |
Surface | white-500 | chameleon blue-850 | |
Elevation | grey-900 / 12% opacity | grey-100 / 12% opacity | |
Background default | white-500 | deep blue-500 | |
Background alternating | light blue-500 | steel blue-500 |
Semantic colours
Colour | Default value | Inverse | |
|---|---|---|---|
Error | red-500 | n/a | |
On-error | red-700 | n/a | |
Error fill | red-50 | n/a | |
Notice | amber-500 | n/a | |
On-notice | amber-700 | n/a | |
Notice fill | amber-50 | n/a | |
Success | green-500 | n/a | |
On-Success | green-700 | n/a | |
Success fill | green-50 | n/a | |
Destructive | red-500 | n/a | |
On-destructive |
...
white-500 | n/a |
Full colour list
Chameleon Green
...