Interface Design
Primary Palette
| --color-main-light | #ffffff |
| --color-main-light-contrast | #000000 |
| --color-main-primary | #6ec800 |
|
| --color-main-primary-contrast | #000000 |
| --color-main-secondary | #1f2837 |
| --color-main-secondary-contrast | #ffffff |
|
| --color-main-dark | #000000 |
|
| --color-main-dark-contrast | #ffffff |
Neutral Palette
| --color-secondary-7 | #eff0f1 |
|
| --color-secondary-7-contrast | #1f2837 |
| --color-secondary-15 | #dedfe1 |
|
| --color-secondary-15-contrast | #1f2837 |
| --color-secondary-40 | #a5a8af |
|
| --color-secondary-40-contrast | #ffffff |
| --color-secondary-70 | #616a73 |
|
| --color-secondary-70-contrast | #ffffff |
Semantic
|
| --color-positive | #6ec800 |
|
| --color-positive-contrast | #000000 |
| --color-attention | #ffe70a |
|
| --color-attention-contrast | #000000 |
| --color-warning | #bb0522 |
|
| --color-warning-contrast | #ffffff |
Shades
|
| --color-main-primary-80 | #8bd333 |
| --color-warning-80 | #d11804 |
More
Typography
Icons
Elements
Design styles at Figma library
You can find the (css) details all our components in our corporate account in Figma. The core library contains our basic, general elements. A separate library is available for web applications and our website. Please login to Figma, if you want to see the libraries. The libraries are unlocked for all registered members with a wago.com email address.