Produkt-UI

Die App ist heller und ruhiger als Marketing: viel Weiß, klare Hierarchie, große Zahlen, wenige Farbflächen. Die Marke erkennt man an Wald, Minze und dem Open-Ledger-Zeichen – nicht an vollflächigen Farben.

Regel für alle Screens: Farben, Radien, Größen, Schriften und Abstände kommen nur aus den Design-Tokens (design-system/tokens). Komponenten werden einmal gebaut und überall wiederverwendet – nie pro Screen neu.

Prinzipien

1. Eine Hauptaktion pro Ansicht – in Wald. Alles andere ist sekundär oder tertiär.
2. Eine dunkle Karte pro Ansicht (Wald) als Anker für das Wichtigste – Klarblick oder Kontostand.
3. Große Zahlen, wenig Text. Nachkommastellen leise, Einheiten klein.
4. Status durch Text, Farbe unterstützt – nie nur Farbe.
5. Tastatur, Fokus, Kontrast sind Pflicht: sichtbarer Fokus-Ring, Tippflächen ≥ 44 px, prefers-reduced-motion beachten.
6. Echte Daten oder klar gekennzeichnete Beispieldaten – nie erfundene Zahlen.

Token-Stufen

Im Code sind alle Tokens CSS-Variablen: farbe.wald → var(--farbe-wald), knopf.groesse.m.hoehe → var(--knopf-groesse-m-hoehe).

Knopf

Form Pill (Radius 999px), Schrift Figtree 600, Text einzeilig und zentriert, deaktiviert 50 % Deckkraft, Fokus-Ring 2 px Wald mit 2 px Abstand.

Varianten

Größen

Text

• Verb + Objekt im Infinitiv, höchstens drei Wörter: „Beleg hochladen“, „Buchung erfassen“, „Festschreiben“.
• Satzanfang groß, kein Punkt, keine Ausrufezeichen, kein „Hier klicken“, kein „OK“ – sag, was passiert.
• Text immer einzeilig und horizontal zentriert; nie umbrechen oder abschneiden – lieber kürzer formulieren.
• Symbol vorn nur, wenn es die Aktion eindeutiger macht (Hochladen, Google). Pfeil hinten nur für Navigation zu einer anderen Ansicht.

Platzierung

• Seitenkopf: Hauptaktion oben rechts neben dem Titel (Desktop); auf dem Handy volle Breite unter dem Titel.
• Formular: Aktionen unter dem letzten Feld, linksbündig, Hauptaktion zuerst; Rückmeldung rechts daneben bzw. darunter.
• Dialog: Aktionen unten rechts, Reihenfolge [Abbrechen (sekundär)] [Hauptaktion (primär)]; auf dem Handy untereinander, Hauptaktion oben, volle Breite.
• Karte: Aktion unten links in der Karte; „Alle ansehen“ als tertiärer Knopf rechts im Kartenkopf.
• Wald-Karte (Anker): nur Variante „auf-wald“.
• Nie zwei primäre Knöpfe nebeneinander. Destruktive Aktionen nie als primär, sondern Variante „gefahr“ mit Bestätigung.

Zustände

• Hover: Hintergrund bzw. Rand laut Variante; Übergang bewegung.dauer.kurz.
• Fokus (Tastatur): Ring rand.fokus, 2 px, 2 px Abstand – immer sichtbar.
• Deaktiviert: Deckkraft 50 %, kein Hover; besser erklären, warum es nicht geht, als nur zu deaktivieren.
• Lädt: Text ersetzt durch Tätigkeit mit Auslassung („Wird gebucht …“), Breite bleibt, Klick gesperrt.

Symbolknopf

Runder Knopf nur mit Symbol (Navigation, Benachrichtigungen, Hilfe): 44 px (Navigation) bzw. 50 px (Kopfzeile), weiß mit Linie, aktiv in Minze. Immer mit aria-label.

Eingabefeld

Text

• Label: Substantiv, kurz („Belegnummer“, „Betrag in €“). Platzhalter nur als Beispiel („z. B. RE 2026-0142“).
• Fehler unter dem Feld in einem Satz: was falsch ist und wie es richtig geht („Das Sollkonto braucht 4 bis 9 Ziffern.“).

Platzierung

• Label oben, linksbündig; Hinweis und Fehler unter dem Feld.
• Beträge rechtsbündig in Tabellen, in Feldern linksbündig mit Einheit im Label.

Karte

Weiß, Radius 24 px (mobil 22 px), kein Schatten, kein Rahmen – der Kontrast zum App-Grund reicht. Titel mit kleinem Minz-Quadrat; rechts Kontext oder eine tertiäre Aktion („Alle ansehen“). Die Anker-Karte ist Wald mit Text in Creme und Knopf „auf Wald“.

Status

Pill mit 28 px Höhe. Die Information trägt der Text.

Steuerleiste, Segment, Menü, Navigation

• Steuerleiste (Suche, Gesellschafts-Wechsler mit SKR-Anzeige, Datum): 50 px, weiß mit Linie, Pill-Form. Suche mit ⌘ K.
• Segment (Ergebnis · Umsatz · Kosten): 34 px, inaktiv App-Grund, aktiv Minze.
• Menü: Radius 20 px, schwebender Schatten, Einträge 40 px hoch mit Radius 14 px; aktiver Eintrag Minze hell.
• Navigation: Icon-Leiste links (96 px breit, runde 44-px-Knöpfe, aktiv Minze); auf dem Handy schwebende Tab-Leiste in Wald mit aktivem Eintrag in Minze.

Steuerleiste

Segment

Menue

Navigation

Seitenaufbau

• Kopfzeile: Suche (flexibel), Gesellschafts-Wechsler, rechts Benachrichtigungen und Datum.
• Seitentitel zweistufig (Kontext leise, Titel groß), daneben Status; Hauptaktion oben rechts. Auf dem Handy steht die Aktion in voller Breite unter dem Titel.
• Raster: 12 Spalten ab 1024 px, Abstand 20 px; Karten 4/5/3 oder 4/5/3 Spalten (Übersicht). Seitenrand 16 px (Handy), 32 px (Tablet), 40 px (Desktop).
• Handy: eine Spalte, keine seitlich wischbaren Leisten, Tab-Leiste unten.

Schriftstile

Barrierefreiheit (Abnahme je Screen)

• Kontraste laut Farbkapitel; kein Grau unter 24 px auf Flieder.
• Sichtbarer Fokus (2 px Wald, 2 px Abstand) bei Tastaturbedienung.
• Tippflächen mindestens 44 px; kompakte Knöpfe (36 px) nur am Desktop.
• Diagramme mit Textalternative (Tabelle für Screenreader).
• prefers-reduced-motion: keine Animationen.
• Sprache de, sinnvolle Überschriften-Hierarchie, Formularfelder mit sichtbarem Label.