...
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 | 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 | 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 | 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
...