RT Designsystem für Webanwendungen
Feste, wiederverwendbare UI-Regeln für stabile Oberflächen. Diese Seite dient als visuelle und funktionale Referenz, bevor die Regeln in Anwendungen übernommen werden.
01 · Grundlagen
Design-Tokens und Gestaltungsregeln
Einheitliche Werte verhindern schleichende Abweichungen zwischen Anwendungen.
Farben
Neutrale Flächen, gedämpftes RT-Blau, separate Statusfarben.
Hintergrund
#F3F5F7Fläche
#FFFFFFText
#25313CText dezent
#667481Primär
#446F8FErfolg
#467A5CWarnung
#805919Fehler
#A94B4BTypografie
Hierarchie ohne unnötige Größenvielfalt.
H1
Seitenüberschrift
H2
Bereichsüberschrift
H3
Komponentenüberschrift
H4
Unterüberschrift
Body
Standardtext für Erläuterungen und Inhalte. Lesbarkeit hat Vorrang vor optischer Verdichtung.
SmallSekundäre Meta- und Hilfstexte.
Abstände
4-px-Raster mit begrenzter Skala.
4space-18space-212space-316space-420space-524space-632space-848space-12Boxen, Flächen und Informationshierarchie
Rahmen und Weißraum statt Schattenstapel.
Standardbox
Normale Inhaltsgruppe mit neutralem Rahmen.
Subtile Fläche
Für sekundäre Kontexte oder kompakte Gruppen.
Akzentbox
Für wichtige Hinweise ohne Alarmcharakter.
02 · Aktionen
Buttons, Links und Aktionsgruppen
Eine Aktion darf weder unter Boxen rutschen noch Text überlagern. Buttontexte bleiben in einer Zeile, solange dies sinnvoll möglich ist.
Button-Hierarchie
Primär, sekundär, ruhig und destruktiv.
Aktionsleiste
Aktionen umbrechen kontrolliert und bleiben innerhalb des Containers.
03 · Formulare
Formularsystem
Labels stehen oberhalb der Felder; Hilfetexte und Fehler gehören direkt zum Feld. Mindesthöhe 44 px.
Rich-Text-Editor
Editor-Chrome und Inhalt folgen denselben Tokens.
Beispielinhalt
Der Editor darf keine völlig eigene Designsprache erzeugen. Inhaltsdarstellung und spätere Ausgabe bleiben möglichst deckungsgleich.
Einheitliche Abstände und Typografie verhindern visuelle Sprünge.
p > bodyWörter: 19
04 · Daten
Tabellen, Listen, Karten und Navigation
Dichte Datenansichten bleiben lesbar und dürfen auf kleinen Displays nicht die Gesamtseite verbreitern.
Datentabelle
Horizontaler Overflow bleibt auf den Tabellencontainer begrenzt.
| Projekt | Kunde | Status | Fortschritt | Geändert | Aktionen | |
|---|---|---|---|---|---|---|
| RT KundenportalWebanwendung | Muster GmbH | Aktiv | 72 % | 30.08.2026 | ||
| RT Site ManagerWebanwendung | Beispiel AG | Prüfung | 45 % | 29.08.2026 |
MK
Max Kundemax@example.test
AktivAT
Anna Teamanna@example.test
InternNoch keine Daten
Leere Zustände erklären den nächsten sinnvollen Schritt.
Ladezustand / Skeleton
Tabs
Tabs wechseln echte Inhaltsbereiche und sind keine Anker-Navigation.
Übersichtsinhalt mit stabiler Innenhöhe und klarer Zuordnung.
Aktivitätsinhalt. Der Wechsel erfolgt per JavaScript, nicht über Scroll-Anker.
Einstellungen erhalten dieselben Formular- und Boxregeln.
05 · Feedback
Status, Meldungen und Fortschritt
Farbe ist nie der einzige Informationsträger.
ErfolgDie Änderungen wurden gespeichert.
InformationDiese Einstellung gilt für alle Benutzer dieses Projekts.
Prüfung erforderlichVor dem Update sollte ein aktuelles Backup vorhanden sein.
FehlerDer Datensatz konnte nicht gespeichert werden.
Badges und Fortschritt
Statuskennzeichnungen bleiben kompakt und dürfen Texte nicht überlagern.
AktivInformationPrüfungFehlerEntwurf
Akkordeon
Zusatzinformationen werden bei Bedarf eingeblendet.
Damit alle Anwendungen dieselben Abstände, Farben, Zustände und Komponentenmaße verwenden und Änderungen zentral nachvollziehbar bleiben.
Sonderwerte verursachen Drift, erschweren Wartung und sind eine häufige Ursache für Darstellungsfehler.
06 · Overlays
Dialoge, Drawer, Dropdowns und Toasts
Overlays besitzen definierte Ebenen und dürfen nicht durch zufällige z-index-Werte kollidieren.
07 · Stabilität
Stress- und Grenzfalltest
Diese Beispiele provozieren die Fehler, die in produktiven Oberflächen häufig auftreten: lange Texte, kleine Breiten, viele Aktionen und übervolle Inhalte.
Extrem langer Kartentitel ohne sinnvolle kurze Bezeichnung zur Prüfung von Umbruch und Containerbreite
Auch lange Bezeichnungen dürfen Buttons nicht aus dem Container drücken.
SehrLangesTechnischesWortOhneLeerzeichenOderTrennzeichenDasTrotzdemDenContainerNichtSprengenDarf_1234567890_abcdefghijklmnopqrstuvwxyz
Viele Aktionen
Flex-Wrap statt Überlagerung.
320-px-Simulation
Kundenbenachrichtigungen mit langer Überschrift
Der Button sitzt immer unterhalb beziehungsweise neben dem Inhalt, aber niemals darüber.
Kein horizontales Seiten-Overflow
Buttons überlagern keine Boxen
Textcontainer verwenden min-width: 0
Tabellen scrollen lokal horizontal
Fokuszustände bleiben sichtbar
Reduced Motion wird berücksichtigt