Palettes

Every palette is composed of seven picked colors to match with the elements of your interfaces.


If you have not seen how it works yet, and also want to create your own palettes, please let’s have a tour on our page

 System →

Every palette is composed of seven picked colors to match with the elements of your interfaces. If you have not seen how it works yet, and also want to create your own palettes, please let’s have a tour on our page

 System →

Discover our colors on a retina display (Version 1.2)

Discover our colors on a retina display (Version 1.2)

V 0.1 - ALPHA

Semantics

Semantics

Semantics

Colors that help identify status, see actions, locate help, and understand next steps.


Colors that help identify status, see actions, locate help, and understand next steps.

Colors that help identify status, see actions, locate help, and understand next steps.

Colors that help identify status, see actions, locate help, and understand next steps.

Hue 354
Show values →
LIGHT
DARK (soon)
Surface
Surface Hover
Borders
Shapes
Border Hover
Text
Shape Hover
Text Hover
Shape Active
Text Active
Hue 354
Show values →
LIGHT
DARK (soon)
Surface
Surface Hover
Borders
Shapes
Border Hover
Text
Shape Hover
Text Hover
Shape Active
Text Active
Hue 354
Show values →
LIGHT
DARK (soon)
Surface
Surface Hover
Borders
Shapes
Border Hover
Text
Shape Hover
Text Hover
Shape Active
Text Active
Hue 354
Show values →
LIGHT
DARK (soon)
Surface
Surface Hover
Borders
Shapes
Border Hover
Text
Shape Hover
Text Hover
Shape Active
Text Active
Hue 22
Show values →
LIGHT
DARK (soon)
Surface
Surface Hover
Borders
Shapes
Border Hover
Text
Shape Hover
Text Hover
Shape Active
Text Active
Hue 22
Show values →
LIGHT
DARK (soon)
Surface
Surface Hover
Borders
Shapes
Border Hover
Text
Shape Hover
Text Hover
Shape Active
Text Active
Hue 22
Show values →
LIGHT
DARK (soon)
Surface
Surface Hover
Borders
Shapes
Border Hover
Text
Shape Hover
Text Hover
Shape Active
Text Active
Hue 22
Show values →
LIGHT
DARK (soon)
Surface
Surface Hover
Borders
Shapes
Border Hover
Text
Shape Hover
Text Hover
Shape Active
Text Active
Hue 143
Show values →
LIGHT
DARK (soon)
Surface
Surface Hover
Borders
Shapes
Border Hover
Text
Shape Hover
Text Hover
Shape Active
Text Active
Hue 143
Show values →
LIGHT
DARK (soon)
Surface
Surface Hover
Borders
Shapes
Border Hover
Text
Shape Hover
Text Hover
Shape Active
Text Active
Hue 143
Show values →
LIGHT
DARK (soon)
Surface
Surface Hover
Borders
Shapes
Border Hover
Text
Shape Hover
Text Hover
Shape Active
Text Active
Hue 143
Show values →
LIGHT
DARK (soon)
Surface
Surface Hover
Borders
Shapes
Border Hover
Text
Shape Hover
Text Hover
Shape Active
Text Active
Hue 219
Show values →
LIGHT
DARK (soon)
Surface
Surface Hover
Borders
Shapes
Border Hover
Text
Shape Hover
Text Hover
Shape Active
Text Active
Hue 219
Show values →
LIGHT
DARK (soon)
Surface
Surface Hover
Borders
Shapes
Border Hover
Text
Shape Hover
Text Hover
Shape Active
Text Active
Hue 219
Show values →
LIGHT
DARK (soon)
Surface
Surface Hover
Borders
Shapes
Border Hover
Text
Shape Hover
Text Hover
Shape Active
Text Active
Hue 219
Show values →
LIGHT
DARK (soon)
Surface
Surface Hover
Borders
Shapes
Border Hover
Text
Shape Hover
Text Hover
Shape Active
Text Active

Accent

Accent

Accent

Colors you can use to distinguish elements between them such as tags. For now there is 6 colors because we think it is enough and avoid too much confusions.

Colors you can use to distinguish elements between them such as tags. For now there is 6 colors because we think it is enough and avoid too much confusions.

Colors you can use to distinguish elements between them such as tags. For now there is 6 colors because we think it is enough and avoid too much confusions.

Hue 323
Show values →
LIGHT
DARK (soon)
Surface
Surface Hover
Borders
Shapes
Border Hover
Text
Shape Hover
Text Hover
Shape Active
Text Active
Hue 323
Show values →
LIGHT
DARK (soon)
Surface
Surface Hover
Borders
Shapes
Border Hover
Text
Shape Hover
Text Hover
Shape Active
Text Active
Hue 323
Show values →
LIGHT
DARK (soon)
Surface
Surface Hover
Borders
Shapes
Border Hover
Text
Shape Hover
Text Hover
Shape Active
Text Active
Hue 323
Show values →
LIGHT
DARK (soon)
Surface
Surface Hover
Borders
Shapes
Border Hover
Text
Shape Hover
Text Hover
Shape Active
Text Active
Hue 276
Show values →
LIGHT
DARK (soon)
Surface
Surface Hover
Borders
Shapes
Border Hover
Text
Shape Hover
Text Hover
Shape Active
Text Active
Hue 276
Show values →
LIGHT
DARK (soon)
Surface
Surface Hover
Borders
Shapes
Border Hover
Text
Shape Hover
Text Hover
Shape Active
Text Active
Hue 276
Show values →
LIGHT
DARK (soon)
Surface
Surface Hover
Borders
Shapes
Border Hover
Text
Shape Hover
Text Hover
Shape Active
Text Active
Hue 276
Show values →
LIGHT
DARK (soon)
Surface
Surface Hover
Borders
Shapes
Border Hover
Text
Shape Hover
Text Hover
Shape Active
Text Active
Hue 253
Show values →
LIGHT
DARK (soon)
Surface
Surface Hover
Borders
Shapes
Border Hover
Text
Shape Hover
Text Hover
Shape Active
Text Active
Hue 253
Show values →
LIGHT
DARK (soon)
Surface
Surface Hover
Borders
Shapes
Border Hover
Text
Shape Hover
Text Hover
Shape Active
Text Active
Hue 253
Show values →
LIGHT
DARK (soon)
Surface
Surface Hover
Borders
Shapes
Border Hover
Text
Shape Hover
Text Hover
Shape Active
Text Active
Hue 253
Show values →
LIGHT
DARK (soon)
Surface
Surface Hover
Borders
Shapes
Border Hover
Text
Shape Hover
Text Hover
Shape Active
Text Active
Hue 188
Show values →
LIGHT
DARK (soon)
Surface
Surface Hover
Borders
Shapes
Border Hover
Text
Shape Hover
Text Hover
Shape Active
Text Active
Hue 188
Show values →
LIGHT
DARK (soon)
Surface
Surface Hover
Borders
Shapes
Border Hover
Text
Shape Hover
Text Hover
Shape Active
Text Active
Hue 188
Show values →
LIGHT
DARK (soon)
Surface
Surface Hover
Borders
Shapes
Border Hover
Text
Shape Hover
Text Hover
Shape Active
Text Active
Hue 188
Show values →
LIGHT
DARK (soon)
Surface
Surface Hover
Borders
Shapes
Border Hover
Text
Shape Hover
Text Hover
Shape Active
Text Active
Hue 174
Show values →
LIGHT
DARK (soon)
Surface
Surface Hover
Borders
Shapes
Border Hover
Text
Shape Hover
Text Hover
Shape Active
Text Active
Hue 174
Show values →
LIGHT
DARK (soon)
Surface
Surface Hover
Borders
Shapes
Border Hover
Text
Shape Hover
Text Hover
Shape Active
Text Active
Hue 174
Show values →
LIGHT
DARK (soon)
Surface
Surface Hover
Borders
Shapes
Border Hover
Text
Shape Hover
Text Hover
Shape Active
Text Active
Hue 174
Show values →
LIGHT
DARK (soon)
Surface
Surface Hover
Borders
Shapes
Border Hover
Text
Shape Hover
Text Hover
Shape Active
Text Active
Hue 76
Show values →
LIGHT
DARK (soon)
Surface
Surface Hover
Borders
Shapes
Border Hover
Text
Shape Hover
Text Hover
Shape Active
Text Active
Hue 76
Show values →
LIGHT
DARK (soon)
Surface
Surface Hover
Borders
Shapes
Border Hover
Text
Shape Hover
Text Hover
Shape Active
Text Active
Hue 76
Show values →
LIGHT
DARK (soon)
Surface
Surface Hover
Borders
Shapes
Border Hover
Text
Shape Hover
Text Hover
Shape Active
Text Active
Hue 76
Show values →
LIGHT
DARK (soon)
Surface
Surface Hover
Borders
Shapes
Border Hover
Text
Shape Hover
Text Hover
Shape Active
Text Active

Neutrals & Overlays

Neutrals & Overlays

Neutrals & Overlays

They are essential for a perfect visual interface.


🔹 Please note that Neutrals and Overlays should be influenced by your Primary Color.


This is why we can't provide Neutral and Overlay palettes


As Neutrals have more usages in our interfaces, we will update the section with the right matrix and we are currently working on specific parameters to help you define them.


They are essential for a perfect visual interface. 🔹 Please note that Neutrals and Overlays should be influenced by your Primary Color. This is why we can't provide Neutral and Overlay palettes As Neutrals have more usages in our interfaces, we will update the section with the right matrix and we are currently working on specific parameters to help you define them.

They are essential for a perfect visual interface. 🔹 Please note that Neutrals and Overlays should be influenced by your Primary Color. This is why we can't provide Neutral and Overlay palettes As Neutrals have more usages in our interfaces, we will update the section with the right matrix and we are currently working on specific parameters to help you define them.