For front-end developers, it is important to maintain discipline regarding the colors used.
There should be always a primary color defined which is based on important elements and is in accordance with a client’s visual identification. There is usually also a secondary color defined. It would be beneficial to define not more than 10 colors used across the project + black/white.
On the front side there is a convention in the Magesuite to assign colors to variables according to decreasing brightness, f.e:
| Code Block |
|---|
$color_background-200: $color_white !default;
$color_background-500: $color_haze !default; // #f2f3f3
$color_background-600: $color_porcelain !default; // #e5eaea
$color_background-800: $color_oslo-gray !default; // #828788
$color_background-900: $color_black !default; |
500 is considered a middle value and the most used color (f.e. as background) is assigned to it.
If you use numeric values to distinguish colors please name variations of basic colors, especially shades of grey, from the most bright to the most dark, f.e.
| Code Block |
|---|
grey 01 - #f2f2f3
grey 02 - #e5eaea
grey 03 - #828788 |
| Info |
|---|
Please use colors without opacity on the designs in every case it is possible. |
| Info |
|---|
Please provide sufficient color contrasts for texts. Color contrast is the difference in brightness between foreground and background colors. There are useful color contrasts checker, f.e. https://accessibleweb.com/color-contrast-checker/ |
DONT’T | DO |
|---|---|
 Don’t use opacity in order to introduce a new color |  Stick to colors defined in the styleguide |
 Don’t use too bright colors for texts. |  Use colors with enough contrasts comparing with their backgrounds. |
