System
Here are the different staps and principle that lead the system.
V 0.1 - ALPHA
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.
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
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
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