SHADOWS

Schatten sind ein zentrales gestalterisches Mittel, um visuelle Hierarchie, Tiefe und räumliche Orientierung in digitalen Interfaces zu schaffen.

Overview

Schatten helfen Nutzenden, interaktive Elemente leichter zu erkennen und voneinander zu unterscheiden. Definierte Schatten-Token sorgen für konsistente Anwendung über alle Komponenten hinweg – unabhängig von Plattform oder Endgerät.

broken_image

Figma

Beispiel

Varianten

Das Designsystem umfasst die zwei Schattenvarianten "elevated" und "blocking"

broken_image

Figma

Die 2 Schatten Varianten "elevated" und "blocking"

Verwendung

Es stehen zwei Schattenvarianten zur Verfügung:

• Elevated: Wird für UI‑Elemente eingesetzt, die über dem Hintergrund liegen und einen dezenten Tiefeneffekt erhalten sollen – z. B. Dropdown‑Menüs, Tooltips oder schwebende Karten.
• Blocking: Wird für UI‑Elemente verwendet, die den Bildschirm blockieren und den Fokus vollständig auf sich ziehen – z. B. Modal Dialoge, meist in Kombination mit einem Overlay.

Schatten dienen in beiden Varianten ausschließlich dazu, optische Tiefe zu erzeugen und die räumliche Trennung dieser Elemente vom restlichen Interface klar zu machen. In allen anderen Situationen sollen Schatten konsequent vermieden werden, um visuelle Klarheit und Konsistenz zu wahren.

Tokens

In der folgenden Tabelle sind die Schatten‑Tokens des Designsystems aufgelistet.

Variante	Token
elevated	--mate-style-shadow-elevated
blocking	--mate-style-shadow-blocking