Lumo Komponenten

Referenz für alle Lumo-Seiten. Jede Komponente zeigt Zustände, Code, Einsatzzweck und ihr Bewegungsverhalten. Farben, Abstände, Radien, Dauern und Easings kommen ausschließlich aus den Tokens.

Tokens

Grundlage aller Komponenten. Neue Werte kommen hier hinzu, nie direkt in eine Komponente.

Button

Primär für die eine Hauptaktion pro Ansicht, Sekundär für Alternativen, Ghost für Nebenaktionen in Toolbars und Tabellen.

Varianten und Größen

Zustände (Primär)

normal
Hover
Fokus
aktiv
deaktiviert
Fehler
Laden
Wann: für Aktionen, die etwas auslösen; für reine Navigation einen Link verwenden.
Mikro-Interaktion: Hover hebt 2 px an mit Schatten, 120 ms, ease-out-expo; Klick drückt auf scale .98, 120 ms; bei reduzierter Bewegung nur Farbwechsel.

Textfeld mit Floating Label

Label sitzt im leeren Feld und wandert beim Fokus nach oben, bleibt also immer sichtbar.

normal

ausgefüllt

Fokus

Bitte gib mindestens 8 Ziffern ein.

deaktiviert

Laden: Verfügbarkeit wird geprüft …

Wann: für einzeilige Eingaben in Formularen mit mehr als zwei Feldern.
Mikro-Interaktion: Label verschiebt sich bei Fokus 9 px nach oben und skaliert auf .78, 200 ms, ease-out-expo; Rahmenfarbe 120 ms.

Textbereich

Mehrzeilige Eingabe mit Zeichenzähler.

0 / 280 Zeichen

Mindestens 20 Zeichen, damit wir dir sinnvoll antworten können.

Wann: für Freitext über eine Zeile hinaus, etwa Anfragen oder Notizen.
Mikro-Interaktion: wie Textfeld: Label 200 ms ease-out-expo, Rahmen 120 ms; Zähler ohne Animation.

Auswahlfeld

Natives select mit eigenem Pfeil, damit Tastatur, Screenreader und mobile Picker unverändert funktionieren.

Bitte wähle eine Branche.

Wann: ab fünf Optionen; bis vier Optionen lieber Radio-Buttons.
Mikro-Interaktion: Rahmenfarbe bei Hover und Fokus, 120 ms, ease-out-expo; Liste öffnet nativ.

Checkbox

Für unabhängige Ja/Nein-Entscheidungen und Mehrfachauswahl.

Module

Bitte bestätige die AGB.

Wann: wenn mehrere Optionen gleichzeitig gelten können oder eine Zustimmung nötig ist.
Mikro-Interaktion: Haken skaliert von .6 auf 1 und blendet ein, 120 ms, ease-out-expo, beim Anklicken.

Radio

Genau eine Option aus einer kleinen Gruppe. Pfeiltasten wechseln innerhalb der Gruppe (nativ).

Abrechnung
Wann: bei zwei bis vier sich ausschließenden Optionen, die man alle auf einen Blick sehen soll.
Mikro-Interaktion: Punkt wächst von 0 auf 1, 120 ms, ease-out-expo, bei Auswahl.

Toggle-Schalter

Für Einstellungen, die sofort wirken, ohne Speichern-Button.

Wann: für sofort wirksame An/Aus-Einstellungen; in Formularen mit Absenden-Button lieber eine Checkbox.
Mikro-Interaktion: Knopf gleitet 16 px, Spur färbt sich, 200 ms, ease-out-expo, beim Umschalten.

Karte

Ganze Fläche klickbar über einen Link im Titel, damit nur ein Tab-Stopp entsteht.

Wann: für gleichartige Inhalte in Rastern, etwa Artikel, Fallstudien oder Funktionen.
Mikro-Interaktion: hebt sich bei Hover und Fokus 2 px mit stärkerem Schatten, 200 ms, ease-out-expo.

Hinweisbox

Vier Töne. Farbe immer zusammen mit Icon und Titel, damit der Ton auch ohne Farbsehen erkennbar ist.

Info

Am Samstag zwischen 2 und 4 Uhr finden Wartungsarbeiten statt.

Erfolg

Dein Schichtplan wurde veröffentlicht.

Warnung

Drei Mitarbeitende überschreiten diese Woche 48 Stunden.

Wann: für Hinweise im Seitenfluss, die bleiben, bis das Problem gelöst ist; für flüchtige Rückmeldungen den Toast nutzen.
Mikro-Interaktion: keine Bewegung; neu eingefügte Boxen blenden in 200 ms ein, ease-out-expo.

Tabs

Pfeiltasten links/rechts wechseln, Pos1 und Ende springen an den Rand, Tab führt in das Panel (WAI-ARIA Tabs, automatische Aktivierung).

Zeiterfassung, Schichtplanung, Urlaubsanträge und Auswertungen in einer Oberfläche.
Wann: für gleichrangige Inhalte, die man nicht gleichzeitig vergleichen muss.
Mikro-Interaktion: Indicator gleitet zum neuen Tab, 200 ms, ease-out-expo; Panel blendet mit 4 px Weg ein, 200 ms, bei Tabwechsel.

Akkordeon

Kopfzeilen sind Buttons in Überschriften, Enter und Leertaste öffnen, aria-expanded zeigt den Zustand (WAI-ARIA Accordion).

Die meisten Teams arbeiten nach zwei Wochen produktiv mit Lumo.

Wann: für FAQ und lange Seiten, auf denen Leser gezielt einzelne Punkte suchen.
Mikro-Interaktion: Pfeil dreht 180°, Inhalt blendet mit 4 px Weg ein, je 200 ms, ease-out-expo, beim Öffnen.

Tooltip

Erscheint bei Hover und Fokus, Escape blendet ihn aus, der Zeiger kann über den Tooltip wandern (WAI-ARIA Tooltip, WCAG 1.4.13).

Gilt für alle Standorte Als CSV, Excel oder DATEV
Wann: für kurze Zusatzinfos zu Bedienelementen; nie für wichtige Informationen, die man zum Ausfüllen braucht.
Mikro-Interaktion: blendet mit 4 px Weg ein, 120 ms, ease-out-expo; bei Hover nach 300 ms, bei Fokus sofort.

Breadcrumb

Zeigt die Position in der Seitenhierarchie, letzte Ebene mit aria-current.

Wann: ab drei Hierarchieebenen; auf flachen Seiten weglassen.
Mikro-Interaktion: keine; Unterstreichung bei Hover ohne Übergang.

Seitennavigation

Vertikale Navigation für Dokumentation und Einstellungen, aktive Seite mit aria-current.

Wann: für Bereiche mit mehr als fünf Unterseiten, die man oft wechselt.
Mikro-Interaktion: Markierungsbalken wächst per scaleY, 200 ms, ease-out-expo, beim Wechsel; Hover-Fläche 120 ms.

Off-Canvas-Navigation

Modales Panel: Fokus bleibt gefangen, Escape und Klick auf den Hintergrund schließen, Fokus kehrt zum Auslöser zurück.

Wann: für die Hauptnavigation auf kleinen Bildschirmen.
Mikro-Interaktion: Panel fährt per translateX von links ein, Hintergrund blendet auf, je 320 ms, ease-out-expo, beim Öffnen.

Toast-Meldung

Rückmeldung in einer Live-Region (role=status), nimmt keinen Fokus. Hover oder Fokus pausiert das Ausblenden, Escape schließt.

Wann: für kurze Bestätigungen nach einer Aktion; Fehler, die eine Handlung verlangen, gehören in eine Hinweisbox.
Mikro-Interaktion: Toast fährt 16 px von unten ein, 240 ms, ease-out-expo, verschwindet nach 4 s in 160 ms.

Modal-Dialog

Natives dialog-Element mit showModal: Hintergrund wird inert, Fokus startet im Dialog, Escape schließt, Fokus kehrt zum Auslöser zurück.

Standort Bremen löschen?

Alle 23 Schichtpläne dieses Standorts werden archiviert. Du kannst sie 30 Tage lang wiederherstellen.
Wann: nur für Entscheidungen, die den Arbeitsfluss bewusst unterbrechen sollen, etwa Löschen.
Mikro-Interaktion: Dialog skaliert von .96 auf 1 und blendet ein, Hintergrund blendet auf, 200 ms, ease-out-expo, beim Öffnen.

Skeleton-Loader

Platzhalter in der Form des späteren Inhalts, Container mit aria-busy.

Wann: wenn Laden länger als 300 ms dauert und die Form des Inhalts bekannt ist.
Mikro-Interaktion: Glanz wandert per translateX in 1200 ms, ease-in-out, Endlosschleife; bei reduzierter Bewegung pulsiert nur die Deckkraft.