...
| Info |
|---|
You can override every colour in the design system by creating your own CSS variables. Read the theming guide the for more information. |
Default and inverse
Chameleon provides two modes out of the box, default, and inverse. Default and inverse is designed to work with brands identities regardless of the lightness or darkness of the 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.
In contrast, Durex’s brand colours are traditionally darker. Durex’s default colour palette will be their standard colours, but they could use the inverse palette if they wanted to design a page with a lighter colour scheme, or to bring attention to certain content on a darker page.
Light and dark mode
| Info |
|---|
The use of mode in Chameleon should not be confused with light and dark modes. |
Light and dark mode is a site wide device or user controlled setting who’s primary feature is to choose between light text on dark backgrounds or dark text on light backgrounds. Most browsers and devices offer this option but it’s up to you whether you honour this choice.
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.
Colours in use
Action colours
Colour | Default value | |
|---|---|---|
Action | ||
On-action | ||
Action hover | ||
On-hover | ||
Action focus | ||
On-Focus | ||
Action focus border | ||
Action active | ||
On-active | ||
Action disabled | ||
On-disabled | ||
Selected | ||
On-selected | ||
Dropdown hover | ||
CTA link border |
General UI colours
Colour | Default value | |
|---|---|---|
Accent | ||
Input field border | ||
Input field hover | ||
Divider | ||
Heading | ||
Body | ||
Placeholder | ||
Visited | ||
Surface | ||
Elevation | ||
Background default | ||
Background alternating |
Semantic colours
Colour | Default value | |
|---|---|---|
Error | ||
On-error | ||
Error fill | ||
Notice | ||
On-notice | ||
Notice fill | ||
Success | ||
On-Success | ||
Success fill | ||
Destructive | ||
On-destructive |
| Info |
|---|
All colours listed above come in an “inverse“ palette. |
Full colour list
Chameleon Green
chameleon green-50 | hsl(184, 32%, 93%) | #E7F2F3 |
chameleon green-100 | hsl(184, 32%, 86%) | #CFE5E6 |
chameleon green-150 | hsl(184, 32%, 78%) | #B6D8DA |
chameleon green-200 | hsl(184, 32%, 71%) | #9ECBCD |
chameleon green-300 | hsl(184, 32%, 57%) | #6EB0B5 |
chameleon green-400 | hsl(184, 43%, 43%) | #3D969C |
chameleon green-500 | hsl(184, 32%, 93%) | #0D7C83 |
chameleon green-600 | hsl(184, 82%, 28%) | #0A6369 |
chameleon green-700 | hsl(184, 82%, 17%) | #084A4F |
chameleon green-800 | hsl(184, 82%, 11%) | #053234 |
chameleon green-850 | hsl(184, 82%, 8%) | #042527 |
chameleon green-900 | hsl(184, 82%, 6%) | #03191A |
chameleon green-950 | hsl(184, 82%, 3%) | #010C0D |
...