Bausteine
Die 30 Bausteine, aus denen Onboarding, GAP-Analyse und Cockpit zusammengesetzt sind. Jede Karte zeigt ein Exemplar; die Detailseite alle Varianten und Zustände.
Formular10
Eingaben erfassen — Text, Auswahl, Ja/Nein.
- Button
Löst eine Handlung aus — vom „Weiter“ bis zum Löschen.
- Checkbox
Ja-oder-Nein-Häkchen, etwa um eine Maßnahme zu übernehmen.
- Combobox
Suchfeld mit Vorschlägen — findet auch bei Umlauten und Tippfehlern.
- Input
Einzeiliges Textfeld für Namen, Zahlen und kurze Angaben.
- Label
Beschriftet ein Eingabefeld, damit klar ist, was hinein soll.
- Radio Group
Genau eine Option aus wenigen wählen.
- Select
Aufklappliste, wenn die Auswahl mehr als drei Einträge hat.
- Slider
Wert auf einer Skala einstellen, etwa den Schutzbedarf.
- Switch
Ein- oder Ausschalten, mit sofortiger Wirkung.
- Textarea
Mehrzeiliges Textfeld für Begründungen und Beschreibungen.
Anzeige4
Zustände und Hinweise sichtbar machen.
Navigation4
Zwischen Bereichen, Rollen und Ansichten wechseln.
- Breadcrumb
Zeigt, wo man sich befindet, und führt zurück.
- Dropdown Menu
Menü mit Aktionen hinter einer Schaltfläche, etwa zum Rollenwechsel.
- Segmented Control
Umschalter zwischen wenigen gleichrangigen Ansichten.
- Tabs
Reiter für Bereiche einer Seite.
Overlay1
Etwas über der Seite bestätigen lassen.
- Dialog
Fenster über der Seite für Bestätigungen und kurze Eingaben.
Struktur5
Inhalte ordnen — Karten, Reihen, Tabellen.
- Card
Abgesetzte Fläche für einen zusammengehörigen Inhalt.
- Empty State
Sagt, dass noch nichts da ist — und was als Nächstes zu tun ist.
- List Row
Reihe mit Titel, Untertitel und Status — der Grundbaustein jeder Liste.
- Option Group
Auswählbare Reihen mit Erklärung — das Kernmuster von Onboarding und GAP.
- Table
Tabelle für Assets, Risiken und Nachweise in Spalten.
Fortschritt5
Stand, Grad und Kennzahlen zeigen.
Marke1
Logo und Symbole.
- Logo & Icons
Das Markenzeichen und die acht Symbole, die überall im System auftauchen.