Inferface Design

Elements

Input field states

.text-input:defaultborder: 1px solid --color-anthracite-70;
color: --color-anthracite-40;
border-radius: 1px;
font: --copy;
padding: 0 0.7rem;
height: 40px;
.text-input:focussed

border-color: --color-positive:
color: --color-main-secondary;

.text-input:typingborder-color: --color-positive:
color: --color-main-secondary;
.text-input:successborder-color: --color-secondary-70;
color: --color-main-secondary;
.text-input:attentionborder-color: --color-attention;
color: --color-main-secondary;
.text-input:errorborder-color: --color-warning;
color: --color-main-secondary;
.text-input:disabledborder-color: --color-secondary-15;
background-color: --color-secondary-7;
color: --color-secondary-15;

Input fields variants

.search-barborder: 1px solid --color-anthracite-70;
color: --color-anthracite-40;
icon-color: --color-main-secondary;
border-radius: 1px;
font: --copy;
padding: 0 0.7rem;
height: 40px;
vertical-align: center;
.dropdownborder: 1px solid --color-anthracite-70; border-radius: 1px; color: --color-main-secondary; icon-color: --color-main-secondary; font: --copy; padding-left: 0.8rem; height: 40px; vertical-align: center;
.input-note

border: 1px solid --color-anthracite-70;
color: --color-anthracite-40;
border-radius: 1px;
font: --copy;
padding: 0 0.7rem;
height: 40px;
font-note: --copy-small-bold;
color-note: --color-main-secondary;
margin-bottom: 0.3rem;

.counterborder: 1px solid --color-anthracite-70;
border-radius: 1px;
color: --color-main-secondary;
icon-color: --color-main-secondary;
icon-size: 25px;
bg-icon-color: --color-anthracite-7;
font: --copy;
padding: 0 0.4rem;
text-align: center;
height: 40px;
vertical-align: center;

Buttons

Primary

background-color: --color-main-primary; border-color: --color-main-primary; color: --color-main-dark; border-radius: 1px; icon-color: --color-main-dark; padding-between icon and text: 10px; padding: 5px 0; width: auto;
font: --copy; height: 40px;		background-color: --color-primary-80; color: --color-main-dark;background-color: --color-primary-80; color: --color-main-dark; border: 1px solid --color-main-dark;background-color: --color-secondary-7; border-color: --secondary-color-7;color: --color-secondary-15;

Secondary Promotional

background-color: --color-main-secondary;
color: --color-main-light;
border-color: --color-main-secondary;
border-radius: 1px;
icon-color: --color-main-light;
padding-between icon and text: 10px;
padding: 5px 0;
height: 40px

background-color: --color-secondary-70;
color: --color-main-light;		background-color: --color-secondary-70;
color: --color-main-light;
border-color: --color-main-secondary;		background-color: --color-secondary-7;
border-color: --secondary-color-7;
color: --color-secondary-15;

Secondary Functional

background-color: --color-secondary-15; border-color: --color-secondary-40; color: --color-main-secondary; border-radius: 1px; icon-color: --color-main-secondary; padding-between icon and text: 10px;
padding: 5px 0; width: auto;
font: --copy; height: 40px;		background-color: --color-secondary-7; border-color: --color-secondary-15;background-color: --color-secondary-7; border-color: --color-secondary-40;background-color: --color-secondary-7; border-color: --secondary-color-7;color: --color-secondary-15;

Tertiary


background-color: --color-main-light; border-color: --color-main-light; color: --color-main-secondary; border-radius: 1px; icon-color: --color-main-secondary; padding-between icon and text: 10px;
padding: 5px 0; width: auto;
font: --copy; height: 40px;		color: --color-secondary-70;color: --color-secondary-70;
border-color: --color-secondary-70;		background-color: none;
border-color: none;
color: --color-secondary-15;

Textlinks

Hier steht ein Textlink.
Hier steht ein Textlink.

Hier steht ein Textlink.
Hier steht ein Textlink.

Hier steht ein Textlink.
Hier steht ein Textlink.
default {
color: --color-main-secondary;
text-decoration: underline;
}		hover {
color: --color-main-primary-80;
text-decoration: underline;
}		active {
color: --color-primary-80;
text-decoration: underline;
}

Warning

background-color: --color-warning;
color: --color-main-light;
border-color: --color-warning;
border-radius: 1px;
icon-color: --color-main-light;
padding-between icon and text: 10px;
padding: 5px 0;
font: --copy; height: 40px;		background-color: --color-warning-80;
border-color: --color-warning-80;		background-color: --color-warning-80;
border-color: --color-main-dark;		background-color: --color-secondary-7;
border-color: --secondary-color-7;
color: --color-secondary-15;

Floating action

:defaultbackground-color: --color-main-primary; icon-color: --color-main-dark;

toggle:hover { background-color: --color-main-secondary; icon-color: --color-main-light; }

border: 1px solid --color-main-secondary;

background-color: --color-secondary-15; icon-color: --color-secondary-40;

Toggle

:default

background-color: --color-main-light;

border: 1px solid --color-secondary-70;

circle-color: --color-secondary-70;

toggle:active {
background-color: --color-main-primary;
}

toggle:disabled {
border: 1px solid --color-secondary-15; circle-color: --color-secondary-15;
}

Toggle with icon

background-color: --color-main-light;
border: 1px solid --color-secondary-70;
circle-color: --color-secondary-70;

Checkboxes

:defaultbackground-color: --color-main-light; border: 1px solid --color-secondary-70; border-radius: 1px;

checkbox:active { background-color: --color-main-primary; icon-color: --color-main-dark; }

checkbox:disabled { border: 1px solid --color-secondary-15; }

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.

Website Library
Web Application Library