Design-Tokens

Diese Seite sammelt die Low-Level-Tokens für Radius, Abstände, Element-Höhen, die Tropfen-Form, Schatten und Bewegung. Radius, Tropfen-Form und Bewegung stammen aus apps/web/app/globals.css. Die Abstände folgen der Tailwind-Standardskala, die Element-Höhen und Schatten sind als Muster im Komponenten-Code definiert. Die Farb-Tokens stehen in Farben & Typografie.

Radius-Skala

sm 6px

md 8px

lg 10px

xl 14px

2xl · Karten 18px

4xl · Badges 26px

Die gesamte Skala leitet sich aus einem Basis-Token ab (--radius = 10px), alle weiteren Stufen sind feste Vielfache davon. So bleiben die Rundungen über die ganze Oberfläche im selben Verhältnis, statt beliebig gewählt zu sein. Größere Flächen tragen größere Radien. Karten nutzen rounded-2xl (18px), die Badge-Komponente rounded-4xl (≈26px, bei ihrer geringen Höhe faktisch pillenförmig), kleine Steuerelemente die unteren Stufen. Auch die Tropfen-Form baut auf --radius-lg auf. Vollständig runde Pillen entstehen separat über rounded-full, nicht über diese Skala.

Abstände

gap-1 4px

gap-2 8px

gap-3 12px

gap-4 16px

gap-6 24px

gap-8 32px

Die Abstände folgen Tailwinds 4px-Raster, eigene Spacing-Tokens gibt es bewusst nicht. Das hält den vertikalen Rhythmus einheitlich und vermeidet ein zweites, paralleles System. Als Faustregel gelten kleine Schritte (4 bis 8px) innerhalb eines Elements und für Labels, mittlere (12 bis 16px) zwischen Feldern und große (24 bis 32px) zwischen Abschnitten und Karten.

Element-Höhen

Status Badge · h-5 · 20px

Button kompakt · h-7 · 28px

Eingabe Input · h-8 · 32px

Auswahl Select · h-8 · 32px

Button Standard · h-8 · 32px

Button groß · h-9 · 36px

Die interaktiven Steuerelemente teilen sich eine kleine Höhenskala aus dem 4px-Raster, statt jeweils eigene Maße zu führen. Der wichtigste Wert ist h-8 (32px): Input, Select und der Standard-Button fallen darauf zusammen und sitzen so in einer Formularzeile sauber auf einer Linie. Die übrigen Höhen ergeben sich als gezielte Abweichungen davon.

Formular-Baseline h-8 (32px): Input, Select und der Standard-Button. Diese gemeinsame Höhe sorgt für die saubere Ausrichtung in einer Zeile.
Kompakt (h-7 28px, h-6 24px): Button-Größen sm und xs für dichte Toolbars und Inline-Aktionen.
Prominent (h-9 36px): Button-Größe lg für herausgehobene Aktionen.
Badge (h-5 20px): Die flachste Komponente, rein kennzeichnend.
Textarea (min-h-16 64px): Mehrzeilige Eingaben starten bei 64px und wachsen mit dem Inhalt.
Icon-Buttons: Quadratisch (size-6 bis size-9), die Kantenlänge entspricht der jeweiligen Button-Höhe.

Tropfen

bg-primary

bg-brand-blue

bg-brand-amber

bg-brand-green

bg-brand-purple

@utility icon-droplet { border-radius: var(--radius-lg) 0 var(--radius-lg) var(--radius-lg); }

Die Tropfen-Form (CSS-Utility icon-droplet) ist die wiedererkennbare Markenform und bindet jedes Icon optisch an das Logo. Sie ist die einzige nicht-rechteckige Grundform im Interface und wird konsequent für Icon-Container eingesetzt, nicht dekorativ verstreut.

Form: Quadrat, drei Ecken rund, oben rechts eckig.
Herkunft: Angelehnt an Mittelstand-Digital und die Mittelstand-Digital Zentren, steckt zweimal im Mittelstand Vernetzt Logo.
Einsatz: Jede Icon-Kachel und jeder Avatar-Platzhalter.

Schatten und Tiefe

Hover mich

Titel einer Veranstaltung Kurze Beschreibung der Veranstaltung in ein bis zwei Zeilen. Zum Event

Große Inhaltsflächen tragen im Ruhezustand keinen Schatten, sondern nur einen Hairline-Rahmen. Tiefe entsteht dort erst bei Interaktion und ist so ein Signal für Anklickbarkeit, kein dauerhafter Schmuck. Schwebende Oberflächen wie Menüs, Dialoge oder die Login-Box liegen dagegen über dem Inhalt und tragen ihren Schatten dauerhaft. Beides passt zur flachen, soliden Grundhaltung.

Interaktive Karten wie die Veranstaltungs- und Reihenkarten im Dashboard haben im Ruhezustand keinen Schatten. Erst beim Überfahren wächst der Schatten weich auf shadow-xl (transition-all duration-300). Der Schatten signalisiert hier, dass die Karte anklickbar ist, und lenkt im Ruhezustand nicht ab.

Die Login-Karte trägt einen permanenten, besonders weichen Doppelschatten (0 2px 8px rgba(0,0,0,.06) plus 0 16px 48px rgba(0,0,0,.12)). Auf dem sonst leeren, neutralen Login-Screen gibt es nichts zum Überfahren, deshalb hebt sich die zentrale Box dauerhaft ab und zieht den Fokus sofort auf sich. Denselben Doppelschatten tragen alle zentrierten Boxen auf eigenständigen Seiten, also der Login-Flow (/login/*) und die Rechtsseiten (/impressum, /datenschutz).

shadow-sm

shadow-md

shadow-lg

shadow-xl

shadow-2xl

Login

Darüber hinaus nutzt das Produkt eine abgestufte Schatten-Skala (Tailwind). Je höher ein Element über dem Inhalt liegt, desto kräftiger der Schatten:

shadow-sm: Kleine Steuerelemente wie Buttons, Status-Badges und Icon-Buttons.
shadow-md: Select- und Popover-Panels.
shadow-lg: Schwebende Menüs, Dropdown-Toolbars, Vorschau-Popups und Tooltips.
shadow-xl: Karten im Hover sowie Dialoge und Modals.
shadow-2xl: Die größten Overlays, etwa das User-Menü im Header.
Login-Karte: Der eigene, besonders weiche Doppelschatten von oben.

Der Sticky-Header bildet die Ausnahme ganz ohne Schatten und trennt sich rein farblich über Semitransparenz und Weichzeichner (backdrop-blur-md bg-white/90).

Bewegung

fade-up · 0,4 s · ease-out · Stagger 60 ms

Bewegung bestätigt Aktionen und führt den Blick, sie ist kein Selbstzweck. Entsprechend kurz und sparsam sind die Animationen.

fade-up (8px, 0,4s, ease-out): Das Einblenden der Dashboard-Karten (Veranstaltungs- und Reihenkarten), gestaffelt je Position um ~60ms (inline animation-delay).
waiting-dot: Die pulsierenden Lade-Punkte auf /login/check-email, während auf den Magic-Link gewartet wird (wiederholt sich).

Bewegung wird gezielt dort eingesetzt, wo sie etwas leistet, als Rückmeldung auf eine Aktion oder um den Blick zu führen. Beim Hover laufen ruhige Farb- und Schatten-Übergänge (~150 bis 300 ms), Karten-Titelbilder zoomen leicht (scale-105), beim Klick gibt das Element minimal nach (translateY(1px) bzw. scale(0.98)). Die Übergänge bleiben ruhig und kurz, damit die Oberfläche reaktionsschnell und sachlich wirkt.

Siehe auch

Farben & Typografie: Token-Werte, Theme
Komponenten: Wo die Tokens zusammenkommen