Define color priorities
A wide range of color shades were introduced with the current color palette. The problem is that there's no guidance for using those shades. We should be able to answer questions like:
- “I need to use one blue, which shade should I pick?”
- “This UI component needs three contrasting shades of green. Can I pick whatever I want?”
The current color palette is named after the font-weight attribute numeric values (e.g. 300, 500, 700). These values specify the weight of glyphs in the font, their degree of blackness. This naming scheme can also be applied to colors, according to their degree of blackness.
On top of this naming scheme, we define a system of color priorities, in the same way that font weights are used to create a contrasting typography that communicates hierarchy. For example, to create contrast between two pieces of text, we pair the medium weight (
500) with the bold (
700) or light (
We can apply this same logic to colors, as seen in the image below, which tags colors according to order of priority: 1 to 4. For comparison purposes, the current color scheme (without any indication of priority) is placed next to the proposed priority system.
If we had to pick only one shade of blue, it would be the medium weight
500, which is priority 1. This can be considered the “default” shade. If we needed more colors, we could choose from the next priority level, number 2, which has
700. And so forth.
For more flexibility in using the colors , the
50 and the
950 shades were added.