Designsystem · Entwurf 0.1 · 03.10.2026

Durchschlag: Jede Angebotszeile trägt mit, was gesagt wurde.

Früher lag unter dem Angebotsblock ein Durchschlag in Blau. Der Baustein übernimmt das Bild: Über oder neben jeder Position steht in Blau der gesprochene Satz mit Zeitmarke, darunter die Zeile aus der Preisliste. Was nicht belegt ist, wird schraffiert markiert.

1. 01Grundsätze
2. 02Farben und Kontrast
3. 03Host-Vertrag
4. 04Schrift und Raster
5. 05Bauteile
6. 06Barrierefreiheit
7. 07Texte

Grundsätze

1. Belegt statt behauptetJede Position zeigt Satz, Zeitmarke und Preislisteneintrag. Ohne Beleg keine stille Übernahme.
2. Offen bleibt offenFehlt ein Preis, bleibt das Feld leer. Der Baustein schlägt keinen Preis vor und ändert keine Preisliste.
3. Hostfarbe führt, Status bleibtDie Software des Herstellers bestimmt Akzent, Ecken und Schrift. Die vier Statusfarben sind gesperrt.
4. Mit Handschuh bedienbarJede Fläche zum Tippen ist mindestens 48 × 48 px groß. WCAG 2.2 verlangt 24 px.
5. Ohne Mikrofon nutzbarTippen ist gleichwertig. Status wird nie nur über Farbe gezeigt, sondern auch mit Zeichen und Wort.
6. Der Baustein sendet nichtsEr übergibt einen Entwurf. Versand, Steuer und Rechnung bleiben in der Hostsoftware.

Farben und Kontrast

Werte direkt aus tokens.json, Kontrast nach WCAG 2.2 berechnet. Text braucht 4,5 : 1, Linien und Markierungen 3 : 1.

Wird aus /assets/tokens.json geladen.

Host-Vertrag

Ein Hersteller setzt sechs Werte: Akzent, Schrift auf dem Akzent, Ecken, Schrift, hell oder dunkel und den Grund seiner App. Alles andere bleibt beim Baustein. Die Tabelle prüft die drei Beispiel-Hosts gegen die Pflichtkontraste; die Kopfleiste gehört nur zum Beispiel-Host.

Einbau, wie er gemeint ist

<div data-host="eigener-name" data-modus="hell">   <!-- oder "dunkel" -->
  <section class="b"> … Baustein … </section>
</div>

[data-host="eigener-name"] {
  --host-accent: #0B5CAD;    --host-on-accent: #FFFFFF;   /* ≥ 4,5 : 1 */
  --host-radius: 6px;        --host-font: "Eigene Schrift", sans-serif;
  --host-app-bg: #EEF2F6;    /* Akzent dagegen ≥ 3 : 1 */
}

Entwurf zur Erklärung im Herstellergespräch. Keine fertige Schnittstelle, kein Paket.

Schrift und Raster

IBM Plex Sans für Bedienung, IBM Plex Mono für Belege, Zeitmarken und Positionsnummern, Source Serif 4 nur für Überschriften dieser Projektseiten. Im Baustein ersetzt die Hostschrift Plex Sans, Mono bleibt. Ziffern stehen tabellarisch, damit Beträge untereinander passen.

Abstände, Raster 4 px

Bauteile

Statusmarken

Zeichen und Wort tragen die Bedeutung, Farbe hilft nur. Schraffur am Rand heißt: Hier fehlt eine Bestätigung.

Schaltflächen in drei Hosts

Primär nimmt Akzent und Ecken des Hosts. Sekundär und leise bleiben in der Schriftfarbe des Bausteins. Mindesthöhe 48 px.

Positionszeile

Oben der Durchschlag (gesagt, mit Zeitmarke), darunter Bezeichnung, Menge × Einzelpreis, Gesamtpreis und Quelle. In breiter Einbettung steht der Durchschlag links.

Eingabe mit Fehler

Barrierefreiheit

Texte

1. Verb zuerst„Menge bestätigen“, „Preis übernehmen“. Nicht „OK“.
2. Zahl mit Einheit„18 m² × 24,00 € je m²“. Netto steht dabei, Umsatzsteuer rechnet der Host.
3. Grund nennen„Menge geschätzt („so achtzehn“)“ statt „Unsicher“.
4. Kein Erfolg ohne Ergebnis„An Angebot A-2026-117 übergeben“ erst, wenn der Entwurf dort liegt.