Why is a colour system needed?
- A colour-system is much more scalable with semantic colours. For example, if it is decided specifically that the white text colour on a dark background should change, only this one colour design token needs to be changed. A task of 30 seconds. In the conventional process, each screen in the design and code would have had to be analysed and the colours manually replaced.
- The MDX colour system provides the dark mode for free. In Figma, just change the variable collection for dark mode to change specific layers or whole pages. In code, just change the provided CSS file for dark mode. All is generated automatically from design tokens.
- It is guaranteed that the accessibility in light and dark mode is always at least AA compliant.
Semantic Colours
Colours in MDX are semantically constructed, meaning that the colour name is chosen based on its context and purpose. For example, the colour white does not appear just once, but can occur multiple times in various contexts, such as for a background or for the foreground text colour.
Use different colour tokens are used for the same colour, depending on the context of its usage
Don't use only one color white
Colour Types per Brand
|
primary |
main colour for a brand, e.g. primary orange for Migros |
|
neutral |
black, white, and grey colours for a brand, e.g. text or background colors |
|
success |
colour for success context, e.g. a checkmark after a successful input |
|
error |
colour for error context, e.g. a text input field error message |
|
warning |
colour for warning context, e.g. a hint which is less crucial than an error |
|
accent (1 - 9) |
up to 9 different accent colours possible, e.g. secondary, tertiary or promotion colors of a brand |
MDX Colour System
A colour is always constructed according to the following concept:
|
default |
main colour, e.g. for the background of a primary button or for text links |
|
onDefault |
used for elements on the default colour, e.g. white text color on a primary button |
|
subtle |
often used for background colours or subtle, non-relevant elements |
|
onSubtle |
used for elements on subtle colour, e.g. dark text color on a subtle background color |
|
bold |
used when the default colour should be darker for some reason |
|
onBold |
used for elements on bold colours, e.g. white text colour on a bold background |
Colour Example
In the example, the semantic colours used for the MDX Date Picker are demonstrated.
