Color

Color can set the basic tone, mood, connotation and conception of a brand or a product. The right choice of color can support better readability of the information.

Color usage

This system uses three main color groups: Neutral, Primary and Secondary plus four feedback related color groups: Success, Warning, Error and Info. You don't have to use nor customize all colors. You can start by adding components to your layout and changing the swatches for this specific components.

Neutral

Neutral colors are mainly used for the interface elements such as texts, dividers, borders and neutral backgrounds.

Primary

A primary color is the color displayed most frequently across the website and components. Primary color group is brand related. It is used for primary and important action and navigation elements such as buttons, links, tabs etc.

Secondary

A secondary color provides more ways to accent and distinguish your UI elements. Having a secondary color is optional, and should be applied sparingly to accent select parts of your UI.

Success, Warning, Error and Info

These colors are reserved to communicate feedback.

Use colors from Figma

You can use this section to transfer the color palette from your Figma designs. Replace the image on the right with the Color Grid from Figma. Then use color picker while editing the swatch on the left to get the hex value from the Figma Grid.

Webflow

10
20
30
40
50
60*
70
80
90
100
Neutral
Primary
Secondary
Success
Warning
Error
Info

Figma

Replace the image placeholder at the bottom with the 'Swatches' group from your Figma file found on the Colors page.

Background Colors

To apply color background to an element add a class name related to a specific color. Class names for background colors are constructed like this: C B Neutral-100 (Color Background ColorName-ColorLevel). Below you can see all background color classes available in the system.

Neutral
C B Neutral-10
C B Neutral-20
C B Neutral-30
C B Neutral-40
C B Neutral-50
C B Neutral-60
C B Neutral-70
C B Neutral-80
C B Neutral-90
C B Neutral-100
Primary
C B Primary-10
C B Primary-20
C B Primary-30
C B Primary-40
C B Primary-50
C B Primary-60
C B Primary-70
C B Primary-80
C B Primary-90
C B Primary-100
Secondary
C B Secondary-10
C B Secondary-20
C B Secondary-30
C B Secondary-40
C B Secondary-50
C B Secondary-60
C B Secondary-70
C B Secondary-80
C B Secondary-90
C B Secondary-100
Success
C B Success-10
C B Success-20
C B Success-30
C B Success-40
C B Success-50
C B Success-60
C B Success-70
C B Success-80
C B Success-90
C B Success-100
Warning
C B Warning-10
C B Warning-20
C B Warning-30
C B Warning-40
C B Warning-50
C B Warning-60
C B Warning-70
C B Warning-80
C B Warning-90
C B Warning-100
Error
C B Error-10
C B Error-20
C B Error-30
C B Error-40
C B Error-50
C B Error-60
C B Error-70
C B Error-80
C B Error-90
C B Error-100
Info
C B Info-10
C B Info-20
C B Info-30
C B Info-40
C B Info-50
C B Info-60
C B Info-70
C B Info-80
C B Info-90
C B Info-100

Text Colors

To apply color to a text element add a class name related to a specific color. Class names for text colors are constructed like this: C T Neutral-100 (Color Text ColorName-ColorLevel). Below you can see all text color classes available in the system.

Neutral
C T Neutral-10
AAA 21.00
C T Neutral-20
AAA 20.10
C T Neutral-30
AAA 18.36
C T Neutral-40
AAA 15.99
C T Neutral-50
AAA 14.10
C T Neutral-60
AAA 9.52
C T Neutral-70
AA 6.21
C T Neutral-80
AA 5.40
C T Neutral-90
AAA 16.31
C T Neutral-100
AAA 19.18
Primary
C T Primary-10
AAA 19.40
C T Primary-20
AAA 18.01
C T Primary-30
AAA 12.30
C T Primary-40
AAA 8.82
C T Primary-50
AA 5.75
C T Primary-60
AA 5.85
C T Primary-70
AAA 8.63
C T Primary-80
AAA 11.96
C T Primary-90
AAA 15.45
C T Primary-100
AAA 18.10
Secondary
C T Secondary-10
AAA 19.12
C T Secondary-20
AAA 15.83
C T Secondary-30
AAA 12.80
C T Secondary-40
AAA 10.23
C T Secondary-50
AAA 8.12
C T Secondary-60
AA 6.35
C T Secondary-70
AA 4.80
C T Secondary-80
AAA 7.01
C T Secondary-90
AAA 9.86
C T Secondary-100
AAA 13.49
Success
C T Success-10
AAA 20.45
C T Success-20
AAA 18.00
C T Success-30
AAA 15.29
C T Success-40
AAA 12.91
C T Success-50
AAA 10.92
C T Success-60
AAA 9.27
C T Success-70
AA 6.06
C T Success-80
AA 5.59
C T Success-90
AAA 9.40
C T Success-100
AAA 15.47
Warning
C T Warning-10
AAA 20.19
C T Warning-20
AAA 18.53
C T Warning-30
AAA 16.86
C T Warning-40
AAA 15.06
C T Warning-50
AAA 13.31
C T Warning-60
AAA 11.05
C T Warning-70
AAA 7.32
C T Warning-80
AAA 4.76
C T Warning-90
AA 6.79
C T Warning-100
AAA 10.50
Error
C T Error-10
AAA 19.09
C T Error-20
AAA 14.71
C T Error-30
AAA 10.98
C T Error-40
AAA 8.20
C T Error-50
AA 6.43
C T Error-60
AA 5.15
C T Error-70
AA 5.57
C T Error-80
AAA 7.75
C T Error-90
AAA 10.72
C T Error-100
AAA 14.35
Info
C T Info-10
AAA 19.11
C T Info-20
AAA 15.96
C T Info-30
AAA 13.17
C T Info-40
AAA 10.58
C T Info-50
AAA 8.34
C T Info-60
AA 6.47
C T Info-70
AA 5.00
C T Info-80
AAA 7.50
C T Info-90
AAA 10.59
C T Info-100
AAA 14.17
Color
arrow_upward