Interface Design

Color

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

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.