Open Source Color System

System

Here are the different staps and principle that lead the system.

V 0.1 - ALPHA

OSCS

Applications identified

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

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

C3F042

FA5C00

E91B06

E34BA9

A829FB

473497

0659FF

07B1CC

00A131

C3F042

FA5C00

XE91B06

E34BA9

A829FB

473497

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:

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.

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

Here are some applications of the system