Effects

Effects can be used to highlight individual elements.

Shadows visualize a spatial impression. They mark elements from their environment. They can also be used to display interactivity.

Overlays emphasize the contents above it and further hide not relevant information.

The browser focus shows the element what is currently focused.

Usage#

Mainly the effects are used for picture-text compositions. But it can also be used as a highlight element.

This shadow should be used for all elements that are displayed with a better recognition in contrast to the website background.

Attributes	Preview
HEX: #000000 rgba: 0, 0, 0, 0.15 settings: 0px 2px 4px 0px

This shadow should be used for all elements that require strong contrast with background.

Attributes	Preview
HEX: #000000 rgba: 0, 0, 0, 0.35 settings: 0px 4px 6px 3px

This shadow can only be used with superimposed elements.
They create a spatial effect which clearly overlay the page, e.g. layers, lightboxes, flyouts.

Attributes	Preview
HEX: #000000 rgba: 0, 0, 0, 0.15 settings: 0px 3px 3px 0px

This overlay covers the website in the background and highlights important content.
The overlay extends across the entire page.
The content box placed over the overlay can have a free ratio.
The content box should have rounded corners with 2px radius.

Attributes	Preview
color: basic-black opacity: 72%

Attributes	Preview
Global setup outline: total 3px (outside) opacity: 50% radius: 2px color composition: 1. brand-primary-base 2px 2. basic-white 1px
Exception! The error state has the color composition: 1. danger-base 2px 2. color: basic-white 1px
Example