Band 4.1

Design System 2.0

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

Tokens

Farben, Raum, Form, Motion, Layer

Token-Gruppen

Eine Rolle je Gruppe

Bereinigte Abweichungen

Aus dem Design-Audit

Geprüfte Bereiche

Gast-App, Restaurantportal, Office, Service Flow, Developer Hub, E-Mails

Basisfarben

Flaechen und Text. Weiss dominiert, Farbe bleibt Gast.

--background

oklch(0.994 0.0025 95)

Seitenhintergrund

--foreground

oklch(0.215 0.022 292)

Fliesstext

--surface-0

oklch(1 0 0)

Dialoge, wichtigste Karten

--surface-1

var(--surface-1)

Standardkarten

--surface-2

var(--surface-2)

Ruhige Flaechen, Leisten

--muted-foreground

var(--muted-foreground)

Sekundaertext

--border

var(--border)

Kanten und Trenner

Marke & Akzent

White-Label: diese Werte darf ein Restaurant ueberschreiben.

--brand

oklch(0.55 0.208 295)

Primaeraktion, Fokus

--brand-foreground

oklch(0.99 0.002 95)

Text auf Marke

--brand-soft

oklch(0.958 0.022 295)

Weiche Markenflaeche

--ambience

var(--ambience)

Restaurantakzent

--ring

oklch(0.55 0.208 295)

Fokusring

Statusfarben

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

--success

var(--success)

Erfolg, bestaetigt

--warning

var(--warning)

Warnung, Achtung

--danger

var(--danger)

Fehler, Abbruch

--info

var(--info)

Information, Hinweis

--muted

var(--muted)

Neutral, inaktiv

Abstaende

4pt-Raster. Freie Pixelwerte sind verboten.

space.3xs

0.25rem

Icon zu Label

space.2xs

0.5rem

Chips, dichte Listen

space.xs

0.75rem

Listenabstand

space.sm

1rem

Kartenabstand

space.md

1.25rem

Kartenpolster mobil

space.lg

1.5rem

Kartenpolster Desktop

space.xl

2rem

Hero-Polster

space.2xl

2.5rem

Abschnitt mobil

space.4xl

4rem

Abschnitt Desktop

Radien

Rundung folgt der Rolle, nicht dem Geschmack.

--radius-control

16px

Buttons, Chips

--radius-field

18px

Eingabefelder

--radius-card

24px

Karten, Panels

--radius-dialog

28px

Dialoge, Menus

--radius-sheet

32px

Bottom Sheets

--radius-hero

40px

Buehnen, Cover

--radius-pill

999px

Pills, Floating Nav

Elevation

Tiefe entsteht durch Licht, nie durch Flaechenfarbe.

--shadow-e1

shadow-e1

Ruhende Karte

--shadow-e2

shadow-e2

Aktive Karte

--shadow-e3

shadow-e3

Angehobene Karte

--shadow-floating

shadow-floating

Floating Navigation

--shadow-modal

shadow-modal

Dialog, Sheet

--shadow-hero

shadow-hero

Buehne

Motion

Fuenf Dauern, vier Kurven. Alles andere ist verboten.

--duration-instant

90ms

Tap-Feedback

--duration-fast

160ms

Hover, Fokus

--duration-base

240ms

Standarduebergang

--duration-slow

380ms

Sheets, Dialoge

--duration-scene

520ms

Szenenwechsel

--ease-ryh

cubic-bezier(0.22, 1, 0.36, 1)

Standardkurve

--ease-entrance

cubic-bezier(0.16, 1, 0.3, 1)

Auftritt

--ease-exit

cubic-bezier(0.4, 0, 1, 1)

Abgang

Layer & Z-Index

Ebenen sind vergeben, nicht erfunden.

layer.base

Inhalt

layer.raised

Sticky Karten

layer.nav

Topbar, Sidebar

layer.floating

Floating Navigation, FAB

layer.overlay

Scrim, Drawer

layer.modal

Dialog, Sheet

layer.toast

Toasts

layer.tooltip

Tooltip, Popover

Design-Audit

Was gefunden wurde – und wie es dauerhaft verhindert wird.

Farben

bereinigt · 41

Statusfarben wurden mit Tailwind-Paletten (emerald/amber/red) gesetzt.

Ersetzt durch --success / --warning / --danger inklusive Soft-Varianten.

Farben

bereinigt · 34

Text und Flaechen auf Bildern nutzten rohes Weiss und Schwarz.

Neue Tokens --color-on-media und --color-media-scrim; Klassen text-on-media, bg-media-scrim.

Typografie

bereinigt · 4

Vereinzelte freie Schriftgroessen (text-[11px]) statt Textrollen.

Auf type-caption umgestellt; freie Groessen sind gesperrt.

Komponenten

dauerhaft geregelt

Aktionen wurden teils als eigene Divs mit Hover-Styles gebaut.

Button, IconButton und FAB sind die einzigen Aktionsflaechen.

Form

dauerhaft geregelt

Kartenradien schwankten zwischen 12px und 32px.

Radius folgt der Rolle: control/field/card/dialog/sheet/hero/pill.

Animation

dauerhaft geregelt

Uneinheitliche Dauern und lineare Kurven.

Fuenf Dauern, vier Kurven; motion-reduce ist ueberall respektiert.

Icons

dauerhaft geregelt

Risiko gemischter Icon-Quellen.

Ausschliesslich Lucide, Strichstaerke 2, registriert in der Icon Library.

Keine rohen Farben in Komponenten
Kein Hex, kein rgb(), keine Tailwind-Palette. Nur semantische Tokens.
Keine freien Schriftgroessen
Immer eine Textrolle (type-*) waehlen.
Radius folgt der Rolle
Buttons control, Felder field, Karten card, Dialoge dialog.
Eine Primaeraktion pro Screen
Alles Weitere ist secondary oder ghost.
Farbe steht nie allein
Status immer mit Text oder Icon – auch fuer Farbfehlsichtige lesbar.
Fokus ist immer sichtbar
ryh-focus-ring auf jeder interaktiven Flaeche, Ziele mindestens 44px.