---
titel: Produkt-UI
quelle: https://brand.meinklarbuch.de/produkt-ui
stand: 2026-09-24
---

# 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

| Stufe | Beispiel | Wer nutzt sie |
|---|---|---|
| **Basis** (Primitive) | `farbe.wald`, `radius.l`, `abstand.4` | nur Bedeutungen und Komponenten |
| **Bedeutung** (Semantik) | `flaeche.app`, `text.leise`, `status.offen-flaeche` | Screens und Komponenten |
| **Komponente** | `knopf.variante.primaer.hintergrund`, `feld.hoehe` | nur die jeweilige Komponente |

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**

| Variante | Klasse | Hintergrund | Text | Rand | Hover | Einsatz |
|---|---|---|---|---|---|---|
| Primär | `knopf--primaer` | Wald #183D2F | Creme #FBF7EE | Wald #183D2F | Wald hover #24573F | Hauptaktion (Wald). Höchstens eine pro Ansicht. |
| Sekundär | `knopf--sekundaer` | App-Karte #FFFFFF | Wald #183D2F | App-Linie #ECEAE4 | App-Karte #FFFFFF / Rand Minze #BDEACB | Nebenaktion: weiß mit Linie. |
| Tertiär | `knopf--tertiaer` | Transparent | Wald #183D2F | Transparent | App-Grund #F4F4F0 | Leise Aktion ohne Fläche, z. B. „Alle ansehen“, „Abbrechen“ in Menüs. |
| Auf Wald | `knopf--auf-wald` | Minze #BDEACB | Wald #183D2F | Minze #BDEACB | Minze hell #D2F7DC | Hauptaktion auf der Wald-Karte oder anderen dunklen Flächen. |
| Gefahr | `knopf--gefahr` | Koralle hell #FBE3DC | Tinte #14261E | Koralle hell #FBE3DC | Koralle hell #FBE3DC / Rand Koralle #C4492E | Destruktive oder unumkehrbare Aktion (Stornieren, Mitglied entfernen). Immer mit Bestätigung. |

**Größen**

| Größe | Klasse | Höhe | Polster seitlich | Abstand Symbol–Text | Schrift | Symbol | Einsatz |
|---|---|---|---|---|---|---|---|
| S | `knopf--s` | 36px | 16px | 6px | 14px / 600 | 16px | Kompakt: nur Desktop, in Tabellen und Werkzeugleisten. |
| M | (Standard) | 44px | 20px | 8px | 15px / 600 | 18px | Standard für Karten, Formulare und Dialoge. |
| L | `knopf--l` | 50px | 24px | 10px | 16px / 600 | 20px | Hauptaktion einer Seite, Anmeldung, Aktionen auf dem Handy. |

**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`.**

| Token | CSS-Variable | Wert | Beschreibung |
|---|---|---|---|
| `symbolknopf.groesse-m` | `--symbolknopf-groesse-m` | groesse.steuerung-m → 44px |  |
| `symbolknopf.groesse-l` | `--symbolknopf-groesse-l` | groesse.steuerung-l → 50px |  |
| `symbolknopf.hintergrund` | `--symbolknopf-hintergrund` | flaeche.karte → #FFFFFF |  |
| `symbolknopf.rand` | `--symbolknopf-rand` | rand.standard → #ECEAE4 |  |
| `symbolknopf.aktiv-hintergrund` | `--symbolknopf-aktiv-hintergrund` | flaeche.hervorhebung → #BDEACB |  |
| `symbolknopf.aktiv-text` | `--symbolknopf-aktiv-text` | farbe.wald → #183D2F |  |

## Eingabefeld

| Token | CSS-Variable | Wert | Beschreibung |
|---|---|---|---|
| `feld.hoehe` | `--feld-hoehe` | 48px |  |
| `feld.radius` | `--feld-radius` | radius.pill → 999px |  |
| `feld.radius-mehrzeilig` | `--feld-radius-mehrzeilig` | radius.m → 14px |  |
| `feld.polster-x` | `--feld-polster-x` | abstand.5 → 20px |  |
| `feld.schriftgroesse` | `--feld-schriftgroesse` | schrift.groesse.15 → 15px |  |
| `feld.label-schriftgroesse` | `--feld-label-schriftgroesse` | schrift.groesse.13 → 13px |  |
| `feld.hinweis-schriftgroesse` | `--feld-hinweis-schriftgroesse` | schrift.groesse.12 → 12px |  |
| `feld.hintergrund` | `--feld-hintergrund` | flaeche.karte → #FFFFFF |  |
| `feld.rand` | `--feld-rand` | rand.standard → #ECEAE4 |  |
| `feld.rand-fokus` | `--feld-rand-fokus` | rand.fokus → #183D2F |  |
| `feld.rand-fehler` | `--feld-rand-fehler` | status.kritisch-akzent → #C4492E |  |
| `feld.label-farbe` | `--feld-label-farbe` | text.leise → #66706B |  |

**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“.

| Token | CSS-Variable | Wert | Beschreibung |
|---|---|---|---|
| `karte.radius` | `--karte-radius` | radius.l → 24px |  |
| `karte.radius-mobil` | `--karte-radius-mobil` | radius.l-mobil → 22px |  |
| `karte.polster` | `--karte-polster` | abstand.7 → 28px |  |
| `karte.polster-mobil` | `--karte-polster-mobil` | abstand.6 → 24px |  |
| `karte.hintergrund` | `--karte-hintergrund` | flaeche.karte → #FFFFFF |  |
| `karte.titel-schriftgroesse` | `--karte-titel-schriftgroesse` | schrift.groesse.18 → 18px |  |
| `karte.titel-marke` | `--karte-titel-marke` | farbe.minze-kraeftig → #6CC690 |  |
| `karte.anker-hintergrund` | `--karte-anker-hintergrund` | flaeche.anker → #183D2F |  |
| `karte.anker-text` | `--karte-anker-text` | text.auf-anker → #FBF7EE |  |

## Status

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

| Token | CSS-Variable | Wert | Beschreibung |
|---|---|---|---|
| `status.erledigt-flaeche` | `--status-erledigt-flaeche` | farbe.minze → #BDEACB | Erledigt, abgeschlossen, verbunden. Text darauf: wald. |
| `status.offen-flaeche` | `--status-offen-flaeche` | farbe.amber-hell → #FCEFD4 | Offene Punkte, Rückfragen. Text darauf: tinte. Amber nie als Text. |
| `status.kritisch-flaeche` | `--status-kritisch-flaeche` | farbe.koralle-hell → #FBE3DC | Nachzahlung, Fehler, kritische Frist. Text darauf: tinte. Koralle nie als Fließtext. |
| `status.kritisch-akzent` | `--status-kritisch-akzent` | farbe.koralle → #C4492E | Nur Symbole und Rahmen bei Fehlern; als Text erst ab 24 px oder auf karte/creme. |
| `status.info-flaeche` | `--status-info-flaeche` | farbe.flieder-hell → #EEE9FC | Neutrale Hinweise, Beispieldaten-Kennzeichnung. |
| `status.neutral-flaeche` | `--status-neutral-flaeche` | farbe.app-grund → #F4F4F0 | Inaktive Segmente, neutrale Status. |
| `status.hoehe` | `--status-hoehe` | 28px |  |
| `status.radius` | `--status-radius` | radius.pill → 999px |  |
| `status.polster-x` | `--status-polster-x` | abstand.3 → 12px |  |
| `status.schriftgroesse` | `--status-schriftgroesse` | schrift.groesse.13 → 13px |  |
| `status.schrift-gewicht` | `--status-schrift-gewicht` | schrift.gewicht.mittel → 500 |  |

## 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.

### Flyout-Untermenüs

Jeder Bereich der Icon-Leiste hat ein Flyout mit Titel, einem Satz Nutzen und seinen Unterseiten (Titel + eine Zeile Erklärung). So sieht man den Weg, bevor man klickt.

- **Maus:** öffnet nach 90 ms Verweilen (kein Flackern beim Überfahren), schließt 260 ms nach dem Verlassen. Ist schon ein Flyout offen, wechselt es beim Überfahren sofort. Eine unsichtbare Brücke verbindet Symbol und Flyout – der Weg dorthin schließt nichts.
- **Tastatur:** Tab auf ein Symbol öffnet das Flyout; Pfeil hoch/runter wandert durch die Leiste, Pfeil rechts springt ins Flyout, dort Pfeile durch die Einträge, Esc oder Pfeil links schließt und führt zurück aufs Symbol. Geschlossene Flyouts sind `inert`.
- **Touch:** Tippen führt direkt zur Bereichsseite, kein Hover-Zustand.
- **Handy:** vier Hauptbereiche in der Tab-Leiste, alles Weitere unter „Mehr“ als Blatt von unten – mit denselben Einträgen wie die Flyouts.
- **Noch nicht gebaut:** Einträge bleiben sichtbar mit Status „Bald“ und führen auf eine Vorschau-Seite – der Weg ist bekannt, bevor die Funktion kommt.
- **Eine Quelle:** Bereiche und Einträge stehen nur in `app/lib/navigation.ts`; Maße und Zeiten in den Tokens `navigation.flyout.*`.

## Lernen und Arbeiten in einem

Klarbuch erklärt dort, wo entschieden wird – nicht auf einer Hilfeseite. Wer die Antwort kennt, wählt und macht weiter; wer unsicher ist, klappt auf, lernt in einer Minute und übernimmt das Ergebnis mit einem Klick ins Formular. So wächst mit jeder Aufgabe das Wissen des Unternehmers.

- **Auswahlkarte** (`.wahl`): Radio als Karte mit Titel, einem Satz Erklärung und Merkmalen zum Wiedererkennen. Für Entscheidungen, die man verstehen sollte (Rechtsform, Kontenrahmen, Tarif). „Empfohlen“ nur mit Begründung.
- **Kurz erklärt** (`.erklaerung`, natives `details`): Überschrift als Frage in Du-Form. Innen erst die Antwort in einem Satz, dann das Warum mit Paragraf. Am Ende steht eine Aktion, die das Feld ausfüllt („SKR 04 übernehmen“). Höchstens zwei je Feld: „Welcher ist meiner?“ (Weg zur eigenen Antwort) und „Der Unterschied“ (Hintergrund).
- **Wege statt Wissen abfragen:** nach Situation verzweigen („Meine GmbH gibt es schon“ / „Ich gründe gerade“), Dinge nachsehen lassen, die jeder hat (BWA, Summen- und Saldenliste), und eine fertige Nachricht an die Kanzlei anbieten.
- **Klara:** nur nennen, wo Klara wirklich antwortet, und immer als KI kennzeichnen. Geplantes trägt „Bald“.
- **Beispiel:** Gesellschaft anlegen › Kontenrahmen (`app/components/KontenrahmenWahl.tsx`, Wissen in `app/lib/kontenrahmen.ts`).

**Steuerleiste**

| Token | CSS-Variable | Wert | Beschreibung |
|---|---|---|---|
| `steuerleiste.hoehe` | `--steuerleiste-hoehe` | groesse.steuerung-l → 50px |  |
| `steuerleiste.radius` | `--steuerleiste-radius` | radius.pill → 999px |  |
| `steuerleiste.hintergrund` | `--steuerleiste-hintergrund` | flaeche.karte → #FFFFFF |  |
| `steuerleiste.rand` | `--steuerleiste-rand` | rand.standard → #ECEAE4 |  |

**Segment**

| Token | CSS-Variable | Wert | Beschreibung |
|---|---|---|---|
| `segment.hoehe` | `--segment-hoehe` | 34px |  |
| `segment.radius` | `--segment-radius` | radius.pill → 999px |  |
| `segment.hintergrund` | `--segment-hintergrund` | status.neutral-flaeche → #F4F4F0 |  |
| `segment.aktiv-hintergrund` | `--segment-aktiv-hintergrund` | flaeche.hervorhebung → #BDEACB |  |
| `segment.aktiv-text` | `--segment-aktiv-text` | farbe.wald → #183D2F |  |

**Menue**

| Token | CSS-Variable | Wert | Beschreibung |
|---|---|---|---|
| `menue.radius` | `--menue-radius` | 20px |  |
| `menue.eintrag-radius` | `--menue-eintrag-radius` | radius.m → 14px |  |
| `menue.eintrag-hoehe` | `--menue-eintrag-hoehe` | 40px |  |
| `menue.polster` | `--menue-polster` | abstand.2 → 8px |  |
| `menue.hintergrund` | `--menue-hintergrund` | flaeche.karte → #FFFFFF |  |
| `menue.eintrag-hover` | `--menue-eintrag-hover` | flaeche.app → #F4F4F0 |  |
| `menue.eintrag-aktiv` | `--menue-eintrag-aktiv` | farbe.minze-hell → #D2F7DC |  |

**Navigation**

| Token | CSS-Variable | Wert | Beschreibung |
|---|---|---|---|
| `navigation.leiste-breite` | `--navigation-leiste-breite` | 96px |  |
| `navigation.eintrag-groesse` | `--navigation-eintrag-groesse` | groesse.steuerung-m → 44px |  |
| `navigation.mobil-hintergrund` | `--navigation-mobil-hintergrund` | flaeche.anker → #183D2F |  |
| `navigation.mobil-text` | `--navigation-mobil-text` | text.auf-anker → #FBF7EE |  |
| `navigation.aktiv-hintergrund` | `--navigation-aktiv-hintergrund` | flaeche.hervorhebung → #BDEACB |  |
| `navigation.aktiv-text` | `--navigation-aktiv-text` | farbe.wald → #183D2F |  |
| `navigation.flyout.breite` | `--navigation-flyout-breite` | 320px |  |
| `navigation.flyout.abstand` | `--navigation-flyout-abstand` | abstand.3 → 12px | Abstand zwischen Icon-Leiste und Flyout. |
| `navigation.flyout.radius` | `--navigation-flyout-radius` | menue.radius → 20px |  |
| `navigation.flyout.polster` | `--navigation-flyout-polster` | abstand.3 → 12px |  |
| `navigation.flyout.eintrag-radius` | `--navigation-flyout-eintrag-radius` | radius.m → 14px |  |
| `navigation.flyout.eintrag-polster` | `--navigation-flyout-eintrag-polster` | 10px |  |
| `navigation.flyout.eintrag-hover` | `--navigation-flyout-eintrag-hover` | flaeche.app → #F4F4F0 |  |
| `navigation.flyout.eintrag-aktiv` | `--navigation-flyout-eintrag-aktiv` | farbe.minze-hell → #D2F7DC |  |
| `navigation.flyout.oeffnen-verzoegerung` | `--navigation-flyout-oeffnen-verzoegerung` | 90ms | Hover-Absicht: kurzes Überstreifen öffnet nichts. |
| `navigation.flyout.schliessen-verzoegerung` | `--navigation-flyout-schliessen-verzoegerung` | 260ms | Nachlauf, damit der Weg ins Flyout nicht abreißt. |

**Text**

- Bereichsnamen als Substantiv, ein Wort wo möglich („Buchungen“, „Steuern“). Untereinträge: Titel plus eine Zeile Beschreibung, was man dort tut.
- Noch nicht gebaute Einträge bleiben sichtbar und tragen die Markierung „Bald“ – so kennt man den Weg schon.

**Platzierung**

- Web: Icon-Leiste links, Flyout öffnet rechts neben dem Symbol, bündig mit dessen Oberkante; Hilfe und Konto unten in der Leiste.
- Handy: schwebende Tab-Leiste unten mit vier Bereichen und „Mehr“; „Mehr“ öffnet ein Blatt mit allen Bereichen und Untereinträgen.
- Das Symbol selbst führt immer zur Übersicht des Bereichs; die Untereinträge stehen im Flyout.

**Zustände**

- Maus: Flyout öffnet nach navigation.flyout.oeffnen-verzoegerung, schließt nach navigation.flyout.schliessen-verzoegerung – kein Flackern, schräge Mausbewegung ins Flyout bleibt möglich.
- Tastatur: Fokus auf dem Symbol öffnet das Flyout, Pfeil nach rechts oder unten führt hinein, Pfeiltasten wechseln Einträge, Esc schließt und setzt den Fokus zurück aufs Symbol.
- Touch: kein Hover – ein Tipp öffnet die Bereichsübersicht; Untereinträge über „Mehr“.
- Aktiver Bereich: Symbol in Minze; aktiver Untereintrag: Minze hell.
- Reduzierte Bewegung: Flyout erscheint ohne Animation.

## 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

| Stil | Schrift | Größe | Gewicht | Laufweite | Zeilenhöhe | Einsatz |
|---|---|---|---|---|---|---|
| `seite-kontext` | Outfit | 44px | 400 | -0.03em | 1 | Erste Zeile des Seitentitels in text.leise („Übersicht“). Mobil 34 px. |
| `seite-titel` | Outfit | 56px | 600 | -0.04em | 1.1 | Zweite Zeile („September 2026“). Mobil 40 px. |
| `karten-titel` | Outfit | 18px | 500 | 0em | 1.3 |  |
| `zahl-xl` | Outfit | 56px | 500 | -0.03em | 1 | Hauptkennzahl; Nachkommastellen 55 % Größe in text.leise. Tabellarische Ziffern. |
| `zahl-l` | Outfit | 38px | 500 | -0.03em | 1 |  |
| `zahl-m` | Outfit | 26px | 500 | -0.03em | 1.1 |  |
| `text` | Figtree | 15px | 400 | 0em | 1.5 |  |
| `text-klein` | Figtree | 13px | 400 | 0em | 1.4 | Metadaten, Hinweise in text.leise. |
| `label` | DM Mono | 12px | 500 | 0.12em | 1.3 | Eyebrows in Großbuchstaben, Tastenkürzel. |

## 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.