Band 4.1

Design System 2.0

Ein Erscheinungsbild über alle Portale: dieselben Tokens, dieselben Bausteine, dieselbe Sprache – vom Gasttisch bis zum Developer Hub.

Basisfarben

Flaechen und Text. Weiss dominiert, Farbe bleibt Gast.

--background

Seitenhintergrund

--foreground

Fliesstext

--surface-0

Dialoge, wichtigste Karten

--surface-1

Standardkarten

--surface-2

Ruhige Flaechen, Leisten

--muted-foreground

Sekundaertext

--border

Kanten und Trenner

Marke & Akzent

White-Label: diese Werte darf ein Restaurant ueberschreiben.

--brand

Primaeraktion, Fokus

--brand-foreground

Text auf Marke

--brand-soft

Weiche Markenflaeche

--ambience

Restaurantakzent

--ring

Fokusring

Statusfarben

Ein Zustand hat ueberall dieselbe Farbe – nie pro Screen neu entschieden.

--success

Erfolg, bestaetigt

--warning

Warnung, Achtung

--danger

Fehler, Abbruch

--info

Information, Hinweis

--muted

Neutral, inaktiv

Statuslogik

Ein Zustand hat überall dieselbe Farbe – weiche Fläche plus Text, nie Farbe allein.

neutral

Beispielzustand

order_draft, order_cancelled, production_queued

brand

Beispielzustand

order_accepted, order_in_progress, production_started

info

Beispielzustand

order_submitted, service_open, payment_pending

success

Beispielzustand

order_ready, order_served, order_completed

warning

Beispielzustand

production_blocked, service_escalated, payment_partial

danger

Beispielzustand

order_rejected, production_failed, payment_failed

premium

Beispielzustand

favorite, reward, vip

Kontrastnachweis

WCAG 2.1 – AA ist Pflicht, AAA das Ziel.

Aa – Ryh Beispieltext

Fliesstext auf Seite

11.85 · AAA

Aa – Ryh Beispieltext

Sekundaertext auf Karte

6.79 · AA

Aa – Ryh Beispieltext

Text auf Markenflaeche

5.60 · AA

Aa – Ryh Beispieltext

Erfolgstext auf Soft-Flaeche

7.10 · AAA

Aa – Ryh Beispieltext

Fehlertext auf Soft-Flaeche

8.84 · AAA