Design-System
Kitchensink
Alles, was die Oberflächen gemeinsam haben. Die Bildsprache folgt der Hausmarke bergluxus.de: fast schwarze Fläche, ein einziger Kupferton, gesperrte Versalien. Wechsle das Systemthema zwischen hell und dunkel — die Seite folgt, ohne dass hier eine zweite Palette hinterlegt ist.
Neutraltöne
Beide Enden stammen aus der Marke: das Beige #f0efee und das fast schwarze #0b0e0c. Dazwischen läuft die Reihe durch nahezu neutrale Grautöne, weil die beiden Endpunkte gegenläufig getönt sind und jede erzwungene Tönung an einem der Enden falsch aussähe.
bone-50
bone-100
bone-200
ink-300
ink-400
ink-500
ink-600
ink-700
ink-800
ink-900
ink-950
Akzent: Kupfer
Ein einziger Akzent statt einer Palette. #d36620 ist der Markenwert und steht unverändert da — auf der dunklen Fläche erreicht er 5.26:1, die Marke muss also nicht verbogen werden, um lesbar zu sein. Auf Beige reicht derselbe Wert nicht; dafür gibt es copper-700.
copper-300
copper-400
copper-500
copper-600
copper-700
Kontraste, gerechnet
Diese Werte stammen aus derselben Funktion, die im Test-Gate läuft. Wer eine Farbe schöner findet und ändert, bekommt dort einen roten Test — nicht später eine Beschwerde.
| Paar | Verhältnis | Mindestwert | Status |
|---|---|---|---|
| Fließtext dunkel | 16.89 : 1 | 7.0 : 1 | ✓ erfüllt |
| Sekundärtext dunkel | 8.88 : 1 | 4.5 : 1 | ✓ erfüllt |
| Akzent dunkel | 5.26 : 1 | 4.5 : 1 | ✓ erfüllt |
| Fokusring auf Akzentfläche | 3.69 : 1 | 3.0 : 1 | ✓ erfüllt |
| Fließtext hell | 15.71 : 1 | 7.0 : 1 | ✓ erfüllt |
| Sekundärtext hell | 6.77 : 1 | 4.5 : 1 | ✓ erfüllt |
| Akzent hell | 5.70 : 1 | 4.5 : 1 | ✓ erfüllt |
Zimmerstatus
Reihenfolge nach Dringlichkeit: Rückstände zuerst. Die Farbzuordnung folgt der Branchenkonvention — eine Housekeeping-Leitung, die seit fünfzehn Jahren rote Zeilen als Rückstand liest, soll nicht umlernen. Jeder Zustand hat zwei Farbsätze, einen je Thema; die Zeile unten weiß davon nichts und zeigt trotzdem den richtigen.
- Zu reinigen313
- Blockiert7
- In Arbeit1204
- Bitte nicht stören7
- Gereinigt7
- Abgenommen7
Schreibrichtung
Dieselbe Liste in rechtsläufiger Anordnung. Möglich, weil überall logische Eigenschaften stehen (ms-auto statt ml-auto) — RTL wird damit später ein Katalog-Eintrag und kein Umbau der Layouts.
- Zu reinigen313
- Blockiert7
- In Arbeit1204
- Bitte nicht stören7
Typografie
Karla für Überschriften und Auszeichnungen: leicht, versal, weit gesperrt — die Schrift der Hausmarke. IBM Plex Sans für Fließtext und Listen, und das ist eine bewusste Abweichung von der Website: Karla im Schnitt 300 ist auf einem billigen Android-Display im Halbdunkel schlechter zu lesen, und Plex hat echte Tabellenziffern.
Junior Suite mit Balkon
Zimmer 313 ist bezogen und wartet auf Abnahme. Die Balkontür klemmt — vermerkt für das Housekeeping, nicht für den Gast.
Tabellenziffern, untereinander:
313 · 08:15
1204 · 11:00
7 · 14:45
Zielgrößen und Fokus
48 Pixel Untergrenze statt der von WCAG verlangten 24: Housekeeping tippt mit Handschuhen, im Gehen und einhändig — mit einem Wäschewagen in der anderen Hand. Tab-Taste drücken, um die Fokusanzeige zu sehen; sie ist absichtlich nicht kupfern, sonst verschwände sie auf der ersten Schaltfläche.