Zeiterfassung
Node.js/Express-App, live unter zeiterfassung.weblb.de.
Details ansehen →KONSTRUKTIONSPLAN FÜR UI
Vorlage
Jede Komponente, jeder Zustand, beschriftet wie auf einem Bauplan — zum Nachschlagen und Copy-Pasten in neue Projekte.
Design-Tokens
Farbe, Typografie und Abstände als CSS-Custom-Properties — Basis für jede Komponente auf dieser Seite. In neue Projekte per Copy-Paste aus styles.css übernehmbar.
Farbpalette
--bg
--surface
--ink
--ink-soft
--line
--accent
--accent-ink
--success
--warning
--danger
--info
Type-Scale
Aa — text-3xl
Aa — text-2xl
Aa — text-xl
Aa — text-lg
Aa — text-base
Aa — text-sm
Aa — text-xs
Spacing-Scale
--space-1 (4px)--space-2 (8px)--space-4 (16px)--space-6 (24px)--space-8 (32px)--space-12 (48px)--space-16 (64px)Text-Eingaben
Input und Textarea mit Label, Hilfetext und den vier Zuständen default/error/success/disabled — ein Zustand pro Feld sichtbar signalisiert, nie nur über Farbe allein (zusätzlich Text).
INPUT · DEFAULT
INPUT · ERROR
INPUT · SUCCESS
INPUT · DISABLED
TEXTAREA
Auswahl-Elemente
Select für eine Option aus einer langen Liste, Checkbox für unabhängige Ja/Nein-Optionen, Radio-Gruppe für eine Option aus wenigen sichtbaren Alternativen, Switch für einen sofort wirksamen Ein/Aus-Zustand.
SELECT
CHECKBOX
RADIO-GRUPPE
SWITCH
Anzeige-Elemente
Card bündelt zusammengehörige Inhalte, Badge markiert einen kurzen Status inline, Alert unterbricht mit einer Meldung, die Aufmerksamkeit braucht.
CARD
BADGES
Info
Live
Beta
Deprecated
Hinweis: Änderungen werden automatisch gespeichert.
Erledigt: Deploy erfolgreich abgeschlossen.
Achtung: Läuft in 3 Tagen ab.
Fehler: Verbindung zum Server verloren.
Overlays
Modal unterbricht den Ablauf für eine Aktion, die volle Aufmerksamkeit braucht (schließt per Escape, Backdrop-Klick oder Schließen-Button). Tooltip erklärt ein Element ohne den Ablauf zu unterbrechen.
MODAL
TOOLTIP
Zusatzinfo bei Hover/Fokus
Eintrag löschen?
Diese Aktion kann nicht rückgängig gemacht werden.
Feedback
Progress-Bar zeigt einen bekannten Fortschritt (z.B. Datei-Upload), Spinner zeigt eine unbekannte Wartezeit an.
PROGRESS
65 % hochgeladen
SPINNER
Sonstiges
Avatar identifiziert eine Person, Navbar-Beispiel zeigt das Kopfzeilen-Muster dieser Apps, Tabelle stellt Datensätze mit Kopfzeile dar.
AVATAR
AL
NAVBAR-BEISPIEL
TABELLE
| Projekt | Status | Live seit |
|---|---|---|
| zeiterfassung | Live | 2026 |
| schule | Live | 2026 |
| vorlage | Im Bau | — |
Formular-Beispiel
Alle Eingabe-Komponenten im Zusammenspiel, inklusive eines Validierungsfehlers — so sieht ein echtes Formular mit dieser Vorlage aus.