System
Here are the different staps and principle that lead the system.
V 0.1 - ALPHA

Applications identified

Applications identified

Applications identified

We have identified the different types of UI elements where color should be applied :

We have identified the different types of UI elements where color should be applied :

We have identified the different types of UI elements where color should be applied :

Surface (Backgrounds)
Borders
Shapes (icons/elements)
Texts
Then the different states needed
Surface
Default + Hover
Borders
Default + Hover
Shapes
Default + Hover + Active
Texts
Default + Hover + Active
And finally categories
Primaries
You’ll define your own depending on your brand or interface considérations.
Semantics
Used in a lot of cases. We preferred to name all the colors by they HUE because red could mean danger but also busy, etc.
Please check the great matrix example made by Atlassian Design Team here →
Accents
For a lot of different cases : tags, differentiation, etc.
Neutrals
They got a different scale because of the specific use and rules.

Handpicked colors

Handpicked colors

Handpicked colors

We’ve selected colors we loved, and this is a really tricky and subjective act.



Some are directly inspired by Radix UI Colors which is also a great resource for your systems.

We’ve selected colors we loved, and this is a really tricky and subjective act.



Some are directly inspired by Radix UI Colors which is also a great resource for your systems.

We’ve selected colors we loved, and this is a really tricky and subjective act.

 Some are directly inspired by Radix UI Colors which is also a great resource for your systems.

0659FF
07B1CC
00A131
00A131
C3F042
FA5C00
E91B06
E34BA9
A829FB
473497
0659FF
07B1CC
00A131
00A131
C3F042
FA5C00
XE91B06
E34BA9
A829FB
473497

Generated palettes

Generated palettes

Generated palettes

To match our defined applications and create the system, we used the ColorBox.io Tool to generate color palettes. it provided us some great informations about accessibility compliance.


We set the tool with the following constant configurations:

To match our defined applications and create the system, we used the ColorBox.io Tool to generate color palettes. it provided us some great informations about accessibility compliance.


We set the tool with the following constant configurations:

To match our defined applications and create the system, we used the ColorBox.io Tool to generate color palettes. it provided us some great informations about accessibility compliance. We set the tool with the following constant configurations:

To match our defined applications and create the system, we used the ColorBox.io Tool to generate color palettes. it provided us some great informations about accessibility compliance. We set the tool with the following constant configurations:

NUMBER OF STEPS
21 + Minor Steps 0 & 1
HUE
Same Value from Start to End
SATURATION
From 0 to 1 - Rate 1
BRIGHTNESS
From 0 to 1
LOCKED VALUE
Handpicked base color Hex value
EXEMPLE OF PALETTE
We played with the different curves because colors are not equals in terms of light influence.

You can totally play with the tool and create your own system.
We played with the different curves because colors are not equals in terms of light influence. You can totally play with the tool and create your own system.
We played with the different curves because colors are not equals in terms of light influence. You can totally play with the tool and create your own system.

The Matrix

The Matrix

The Matrix

With several components identified, we‘ve selected the different variations and tested them with some plugins to ensure AA contrast and readability.
Hue 354
LIGHT
Surface
Surface Hover
Borders
CONTRASTS - MANDATORY
Contrasts works on White surface, Color surface & Neutral surface
Shapes
Border Hover
Text
Shape Hover
Text Hover
Shape Active
Text Active

Exemple of Use

Exemple of Use

Exemple of Use

Here are some applications of the system
Tags
Surface + Text
Tags
Tags
Tags
Tags
Tags
Tags
Tags
Icon in shape + Text
Surface + Shapes + Text
Message
Message
Message
Message
Message
Toast with icon
Shape
This is a message
This is a message