open source color system

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)

V 0.1 - ALPHA

Semantics

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 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 219

Show values →

LIGHT

DARK (soon)

Surface

Surface Hover

Borders

Shapes

Border Hover

Text

Shape Hover

Text Hover

Shape Active

Text Active

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.

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 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 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

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.

Home

System

See creators & Contributors