Lädt...
0 %

Verbindliche interne Referenzmaske fur wiederverwendbare UI-Bausteine. Jede neue Maske soll sich an diesen Komponenten, Maßen und Interaktionsmustern orientieren.

Einhand-Bedienung zuerst Klickbarkeit ist sofort erkennbar Maße bleiben konsistent Dialoge wirken aus einem Guss Flow statt Seitensammlung

Editor bereit. Änderungen können lokal gespeichert und als JSON exportiert werden.

Globale Tokens & Layers

Farben

--bg: #0B1220 · --panel: #111A2C · --text: #E8EAF0 · --line: #2A3550 · --brand: #6C705B

Spacing

--space-1: 8px · --space-2: 16px · --space-3: 24px · --space-4: 32px

Radius

--radius-md: 12px · Sheet/Confirm: 14px bei Bedarf

Typo

Body 16px · Table 14px · Secondary 14px

Icons & Touch

Icon Standard 24px · Minimum Touch-Target 48x48px

Dialog-Breiten

Desktop min(92vw, 560px) · Tablet min(88vw, 500px) · Mobile 100vw

Z-Index Layer

Header 1200 · Popover 1300 · Portal Quick 1490-1511 · Dialog 3000

Primare Interaktionspunkte. Fokus auf klare Klickbarkeit, Touch-Zone und konsistente Hohe.

Standard

Primary Button

ID: buttons--primary-button

Details

Hauptaktion pro Bereich, maximal eine Primary pro Action-Gruppe.

Typ
Höhe
Breite / Verhalten
Padding
Border-Radius
Font-Size
Icon-Größe
Touch-Target
Zustände
Farben
Verwendungszweck
Funktionen
Checks / NOGO
Standard

Secondary Button

ID: buttons--secondary-button

Details

Sekundare Aktion, klare Alternative zur Hauptaktion.

Typ
Höhe
Breite / Verhalten
Padding
Border-Radius
Font-Size
Icon-Größe
Touch-Target
Zustände
Farben
Verwendungszweck
Funktionen
Checks / NOGO
Standard

Ghost Button

ID: buttons--ghost-button

Details

Niedrigere visuelle Priorität in dichten Toolbars.

Typ
Höhe
Breite / Verhalten
Padding
Border-Radius
Font-Size
Icon-Größe
Touch-Target
Zustände
Farben
Verwendungszweck
Funktionen
Checks / NOGO
In Prüfung

Icon Button

ID: buttons--icon-button

Details

Kompakte Aktion mit klarer Icon-Semantik und ARIA-Label.

Typ
Höhe
Breite / Verhalten
Padding
Border-Radius
Font-Size
Icon-Größe
Touch-Target
Zustände
Farben
Verwendungszweck
Funktionen
Checks / NOGO
In Prüfung

Danger Button

ID: buttons--danger-button

Details

Destruktive Aktion, nur mit klarer Kontextwarnung einsetzen.

Typ
Höhe
Breite / Verhalten
Padding
Border-Radius
Font-Size
Icon-Größe
Touch-Target
Zustände
Farben
Verwendungszweck
Funktionen
Checks / NOGO

Form-Komponenten mit einheitlicher Hohe, Fokusrahmen und lesbarer Label-Hierarchie.

Kompakte Status- und Filterindikatoren mit klarer semantischer Farbe.

Flachen fur Informationen und Aktionen mit konsistenten Radien, Rahmen und Paddings.

Einheitliche Overlay-Logik fur Confirm-, Info-, Form- und Action-Flows.

Datenstrukturen mit zwei Darstellungsformen: Tabelle und Kartenliste.