Buttons

Depending on the application, we use different button types in the status Standard, Hover, and Press (and some buttons also have the status Inactive).

The color of the button depends on the background color. As a general rule, we use the alternating background colors white and light gray (Tint 4). The colors Gray, Black, Smart Green, and Active Red are the exceptions, for example in teasers.

Icon button

Standard: alternating backgrounds in white and light gray (Tint 4)

Icon button

Exception: Background in Gray, Black or Smart Green

Contained icon button

Standard: alternating backgrounds in white and light gray (Tint 4)

Contained icon button

Exception: Background in Gray, Black or Smart Green

CTA button

Standard: alternating backgrounds in white and light gray (Tint 4)

CTA button

Exception: Background in Gray, Black or Smart Green

Secondary button

Standard: alternating backgrounds in white and light gray (Tint 4)

Secondary button

Forbidden backgrounds for secondary button: Medium Gray, Black and Smart Green

Standard button

Standard: alternating backgrounds in white and light gray (Tint 4)

Standard button

Exception: Background in Gray, Black or Smart Green

Standard button with icon

Standard: alternating backgrounds in white and light gray (Tint 4)

Exception: Background in Gray, Black or Smart Green