Color

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

60*

100

Neutral

Primary

Secondary

Success

Warning

Error

Info

Figma

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

C T Neutral-20

C T Neutral-30

C T Neutral-40

C T Neutral-50

C T Neutral-60

C T Neutral-70

C T Neutral-80

C T Neutral-90

C T Neutral-100

Primary

C T Primary-10

C T Primary-20

C T Primary-30

C T Primary-40

C T Primary-50

C T Primary-60

C T Primary-70

C T Primary-80

C T Primary-90

C T Primary-100

Secondary

C T Secondary-10

C T Secondary-20

C T Secondary-30

C T Secondary-40

C T Secondary-50

C T Secondary-60

C T Secondary-70

C T Secondary-80

C T Secondary-90

C T Secondary-100

Success

C T Success-10

C T Success-20

C T Success-30

C T Success-40

C T Success-50

C T Success-60

C T Success-70

C T Success-80

C T Success-90

C T Success-100

Warning

C T Warning-10

C T Warning-20

C T Warning-30

C T Warning-40

C T Warning-50

C T Warning-60

C T Warning-70

C T Warning-80

C T Warning-90

C T Warning-100

Error

C T Error-10

C T Error-20

C T Error-30

C T Error-40

C T Error-50

C T Error-60

C T Error-70

C T Error-80

C T Error-90

C T Error-100

Info

C T Info-10

C T Info-20

C T Info-30

C T Info-40

C T Info-50

C T Info-60

C T Info-70

C T Info-80

C T Info-90

C T Info-100