Styleguide, Viersam

Farben

Lavendel mit Violett (Entscheidung Boris), Werte aus 16-farbwelten.md Abschnitt 7 und dem Prototyp-Labor, in OKLCH. Kontraste gemessen nach WCAG 2, Test in color.test.ts.

Grund, Lavendel #D9CCF0

alle Screens

--bg: oklch(0.867 0.051 301.78)

Schrift #000000

13,9:1 auf Grund

--fg: oklch(0 0 0)

Nebentext #4E4566

5,9:1 auf Grund, 5,2:1 auf Fläche; Warum-Zeilen, Bildunterschriften, Zähler

--muted: oklch(0.4134 0.0552 296.43)

Linie #A99FBB

Trennlinien, Feldrahmen in Ruhe (Schwarz zu 22 % auf Lavendel)

--line: oklch(0.7202 0.0415 301.62)

Fläche #CDBFE8

Hinweisboxen, Kacheln, Druckzustand der Listenzeile

--surface: oklch(0.8294 0.0585 300.72)

Eingabefeld #EEE8FA

heller als der Grund, mit 1,5-px-Linie

--input: oklch(0.941 0.0249 301.07)

Signal, Violett #3B1E8C

nur Primärknopf, Fortschritt, Auswahlzustand, Enthüllungs-Name, Hero-Zeile 3, Fokusring. Nie Fließtext, nie Fläche hinter Fließtext

--signal: oklch(0.3537 0.1673 286.27)

Fehler, Dunkelrot #8A0E0E

Fehlermeldung über dem Feld, Feldrahmen im Fehlerfall. Der einzige Rotton im System

--error: oklch(0.4048 0.1562 27.95)

Marker, Butter-Orange #FFD08C

markiert, nur als Fläche: Ticket, Laufband, Enthüllungs-Name als Textmarker, Hinweisbox. Schrift darauf Schwarz oder Violett. Nie als Text, nie als Knopf, nie als Auswahlzustand. Bewusst die Butter-Stufe, nicht Aprikose: Abstand zum Creme-Terrakotta-Cluster

--mark: oklch(0.8836 0.1004 76.07)

Ticket #FFD08C

die orange Fläche auf dem Lavendel-Screen, Schrift darauf Schwarz

--ticket: oklch(0.8836 0.1004 76.07)

Gemessene Kontraste

AaSchrift auf Grund	13,8:1	ok
AaNebentext auf Grund	5,8:1	ok
AaNebentext auf Fläche	5,2:1	ok
AaSchrift auf Fläche	12,2:1	ok
AaSchrift auf Eingabefeld	17,6:1	ok
AaSignal auf Grund (Knopffläche, Fortschritt, Fokusring)	7,9:1	ok
AaKnopftext Weiß auf Signal	12,0:1	ok
AaEnthüllungs-Name und Hero-Zeile 3 in Signal auf Grund	7,9:1	ok
AaFehler auf Grund	6,4:1	ok
AaFehler auf Eingabefeld	8,2:1	ok
AaSchrift Schwarz auf Butter-Orange (Ticket, Laufband, Hinweis)	14,7:1	ok
AaViolett auf Butter-Orange (Enthüllungs-Name als Textmarker)	8,4:1	ok
AaNebentext auf Butter-Orange	6,2:1	ok
AaFehler auf Butter-Orange	6,8:1	ok
AaButter-Orange auf Grund (Fläche, nur Orientierung)	1,1:1
AaLinie auf Grund (Rahmen, nur Orientierung)	1,7:1

Regeln: Violett ist Handlung, nur auf Primärknopf, Fortschritt, Auswahl, Enthüllungs-Name, Hero-Zeile 3 und Fokusring, Schrift darauf Weiß. Butter-Orange markiert, nur als Fläche: Ticket, Laufband, Enthüllungs-Name als Textmarker, Hinweisbox. Schrift darauf Schwarz oder Violett, nie Orange als Text, nie als Knopf, nie als Auswahlzustand. Fehler in Dunkelrot, der einzige Rotton; Vermilion fällt auf Lavendel durch (2,7:1).

Schrift

Anybody: Überschriften, Datum, Enthüllung, Plakat-Hero. Archivo: Fließtext, Felder, Knöpfe, Listen.

Vier Paare

Wie heißt ihr?

Rike und Boris

Viersam

Breitenachse

587585100118150

Glyphenprobe (beide Schriften)

Äöü ß „Moin“ 19:30 Uhr 19,00 €

Äöü ß „Moin“ 19:30 Uhr 19,00 € – Övelgönne, Eimsbüttel, Straße

Befund: ß wird in Versalien vom Browser zu SS, deshalb kein ß in Display-Zeilen. Das schließende „“ sitzt in Anybody tief, vor dem Einsatz in Überschriften prüfen.

Nebentext 15 px, 5,9:1. Zähler und Zeiten tabellarisch: 3 von 9, 19:30, 29,00 €

Größen

Hero: aus der Gerätebreite, min(33cqw, 17.5cqh)
Enthüllungs-Name 42, Ticket-Datum 44, Termin-Datum 34, Frage 30, Sektion 28, Entweder-oder 26, Kachel-Titel 22
Fließtext 17, Lead 16, Nebentext 15, Label 14, Zähler 13, Kategorie-Label 12

Knöpfe

Eckig, 52 px, Druckzustand 0,97. Ein Primärknopf pro Bildschirm. Zum Senden nie deaktiviert.

Fokus: 2 px Signal mit 2 px Abstand (Tab-Taste). Halten zeigt den Druckzustand.

Felder

Label oben, Fehler über dem Feld in Dunkelrot, Rahmen 1,5 px. Feld heller als der Grund. Schrift im Feld max(16px, 1em), sonst zoomt iOS.

Dein Vorname

Deine Mail

Vorname Partner:in

Bitte auch den zweiten Vornamen eintragen.

Deine Nummer

Nur für den Partner-Link per WhatsApp.

Wir sind ein Paar und melden uns gemeinsam an. Es geht um Freundschaft, nicht um Dating.Datenschutzhinweis gelesen. Daten nur für die Tische, Löschung auf Wunsch.

Sendefehler

Das hat nicht geklappt. Eure Antworten sind noch da.

Hinweis

Kein Konto, keine Profile. Eure Antworten sehen nur wir, zum Zusammenstellen der Tische.

Auswahl

Listenzeilen für Einzelauswahl, Kacheln mit Glyph für Wunsch und Stil, Chips mit Zähler für Mehrfachauswahl, Button-Gruppe für zwei bis drei Stufen.

In welcher Lebensphase seid ihr?

Damit am Tisch Paare sitzen, die gerade Ähnliches erleben.

Was wünscht ihr euch?

Damit wir euch an einen Tisch setzen, an dem genau das passiert.

Leute, mit denen wir öfter was machenEinen guten Abend, mal sehenAnschluss, wir sind neu in HamburgRaus aus dem Alltag, zu zweit und zu acht

Worauf habt ihr Lust?

Eins bis drei. Ihr seht danach nur Abende, die dazu passen.

1 von 3 gewählt

Was macht ihr gern?

Bis zu fünf. Jedes gemeinsame Interesse zählt beim Zusammenstellen.

2 von 5 gewählt

Zwei Dinge über euren Tisch.

Das Budget entscheidet über das Restaurant. Der Tisch bekommt das niedrigste gemeinsame.

Essen pro Person, ohne Getränke

bis 35 €35 bis 60 €über 60 €

Lautstärke, in der ihr euch wohlfühlt

FlüsternNormalTrubel

Alle Glyphen

tisch

sport

kurs

leute

abend

haus

uhr

fine

laut

wein

street

trattoria

kochen

cocktail

keramik

brot

Regler und Entweder-oder

Fünf Stufen, keine Vorauswahl. Entweder-oder: fünf Paare, jede Wahl holt das nächste.

Wie ist ein guter Abend für euch?

Fünf Stufen, tippt eine. Drei von vier Paaren am Tisch sollten hier ähnlich ticken.

Entweder, oder.

Fünf schnelle Paare. Nicht nachdenken, antippen.

Fortschritt und Laden

Linie oben, 2 px, Signal, Zähler als Text. Lade-Moment unter zwei Sekunden, kein Spinner über der Seite.

←

x

3 von 9

x

Wir reservieren euren Tisch.

Termine

Kategorie ohne Farbe: Schriftbreite des Datums, Glyph, Label, Rahmen oben. Restplätze erst ab 2, sonst „Plätze frei“. Ausgebucht bleibt sichtbar.

Tisch

Fr, 14. Nov

19:30

19 € pro Paar, das Essen zahlt ihr im Restaurant. Plätze frei.

Sport

Sa, 22. Nov

10:00

29 € pro Paar, Platz und Schläger inklusive. Anfänger willkommen. Noch 2 Plätze für Paare.

Kurs

Do, 27. Nov

18:30

59 € pro Paar, drei Stunden Barista-Kurs, alles inklusive. Noch 1 Platz für ein Paar.

Tisch

Fr, 28. Nov

19:30

Wir melden uns, wenn ein Tisch frei wird. Ausgebucht.

Leer

Der nächste Abend steht noch nicht fest. Ihr bekommt eine Mail, sobald es einen Termin gibt.

Ticket

Bestätigung als Ticket in Butter-Orange: Datum groß, Fakten tabellarisch, Abriss, was 48 Stunden vorher kommt. Darunter die Runde, echt gezählt.

Ihr seid dabei.

Fr, 14. Nov

Was: Tisch, 19:30 Uhr
Paar: Boris und Rike
Runde: Nr. 2, acht Plätze
Beitrag: 19,00 €, bezahlt

Restaurant und die Vornamen der anderen Paare kommen Mittwoch, 12.11., um 10 Uhr. Hier und per WhatsApp.

3 von 4 Paaren in eurer Runde sind dabei.

Bestätigung geht an beide Mail-Adressen. Absage bis Di, 11.11., 19:30 Uhr kostenlos.

Enthüllung

Der eine Motion-Moment. Name in Violett auf Butter-Orange als Textmarker. Zeilen kommen nacheinander.

Mittwoch, 12. November, 10:00 Uhr

Haebel, Ottensen

Eulenstraße, Freitag, 19:30 Uhr. Tisch auf den Namen Viersam.

WeinbarEher spät35 bis 60 €

Anna und JonasSeit zwei Jahren in Hamburg, Rennrad, Weinbar, eher spät.

Mira und TomWinterhude, Kinderwunsch, Konzerte, Trattoria, Elbe statt Alster.

Lea und FinnEimsbüttel, Kind unter 3, Kaffee, Brettspiele, früh satt.

Gesprächskarten liegen auf dem Tisch. Jeder zahlt sein Essen selbst. Bis Freitag.

Plakat-Hero und Laufband

Füllt den ersten Bildschirm der Startseite. Breite 58 bis 150, Größe nur per Transform, 9 s Schleife, Pause-Link, Reduced Motion friert bei Breite 92 ein. Zeile 3 in Violett.

ViersamHamburg

Freundschaft für Paare, kein Dating.
Am Tisch, auf dem Platz, im Kurs.

Laufband

Text

du klein, ihr für das Paar, Knopftexte ein bis drei Wörter. Datum und Uhrzeit nach DIN 5008: Fr, 14.11.2026, 19:30 Uhr.

Verbotsliste

nahtlos
unvergesslich
auf das nächste Level
Dreiklänge („schnell, einfach, sicher“)
„Kein X. Kein Y. Nur Z.“ im Fließtext
Streaks, Badges, Konfetti
Sie statt ihr
Knopftexte über drei Wörter

Beispiele, die gehen

Zu zweit anmelden
Weiter
Buchen
Abschicken
Ihr seid dabei.
Stimmt das so?
Egal, beides geht

KI-Look-Checkliste

Zwanzig Tells aus 11-state-of-the-art-ux-ui.md Abschnitt 3.2 und was das System dagegen tut. Review-Frage für jedes Element: Welche Entscheidung steckt dahinter?

Lila-Blau-Verlauf, indigo-500-Knöpfe, Glaskarten: Keine Verläufe, kein Glas. Die Tailwind-Palette ist in globals.css gelöscht, es gibt nur die neun Tokens.
Creme plus Serif plus Terrakotta (Welle 2): Lavendel mit Schwarz und Violett, keine Serif. Kein Creme, kein Terrakotta.
Getöntes Fast-Schwarz statt echter Farbe: Der Grund ist eine echte Farbe, Lavendel #D9CCF0. Schwarz nur als Schrift und Ticket.
Inter, Roboto, Geist, Space Grotesk, Instrument Serif, Fraunces: Anybody (Breitenachse 50 bis 150) und Archivo, beide über next/font selbst gehostet.
Versal-Überzeile über jeder Headline: Keine. Die Kategorie-Labels in Termin-Zeilen sind Funktion (WCAG 1.4.1), keine Deko.
Meta-Zeilen mit Mittelpunkten „A · B · C“: Kommas und Punkte, DIN 5008 für Datum und Uhrzeit.
Ein kursives oder farbiges Einzelwort in der Headline: Zeile 3 des Heros ist eine ganze Zeile in Signal, kein Einzelwort im Satz.
„→“ hinter jedem Link: Links sind unterstrichen, sonst nichts.
Zentrierter Hero, Badge-Pill über der H1: Hero linksbündig als Plakat, keine Pills.
Drei Icon-Karten, Testimonials, CTA: Listenzeilen mit Trennlinie, keine Testimonials vor dem ersten Abend, ein Knopf unten.
Inhalt in identische runde Karten mit Schatten: Radius 0, keine Schatten (--shadow-* gelöscht), Hierarchie über Größe und Abstand.
Bento-Grids, Glassmorphism: Keine.
„nahtlos“, „unvergesslich“, „Level“, Dreiklänge, „Kein X. Kein Y. Nur Z.“: Verbotsliste unten. Ausnahme bleibt Zeile 1 „Freundschaft für Paare, kein Dating“.
KI-Menschen, bedeutungslose Icons, Gradient-Meshes: Glyphen aus einem Strich mit Label; Fotos echt mit Bildunterschrift, Platzhalter bis dahin ehrlich beschriftet.
Derselbe Fade-up auf jedem Element beim Scrollen: Keine Scroll-Fades. Ein Motion-Moment (Enthüllung), ein Ambient-Loop (Hero) mit Pause-Link.
Nummerierte Schritte „01 · 02 · 03“: 1 bis 4 in Anybody, ohne Nullen, ohne Punkte.
Jede Sektion gleich hoch, Weißraum ersetzt Entscheidung: Vier Sektionen auf der Startseite, ungleich hoch.
Emoji-Aufzählungen: Keine Emojis.
Dropdowns statt sichtbarer Optionen: Listenzeilen, Kacheln, Chips, Button-Gruppen. Kein Select im Fragebogen.
Senden-Knopf deaktiviert, Fehler als Toast: Senden nie deaktiviert, Fehler über dem Feld und Sendefehler über dem Knopf, beide als Text in Dunkelrot, kein Kasten.

Abnahme am Handy

390 px breit, kein Querscrollen, Hero füllt den Bildschirm, Copy-Zeile steht still
Tab durch alle Knöpfe: Fokusring in Signal überall sichtbar
Reduced Motion an: Hero steht, Lade-Form steht, Enthüllung ohne Bewegung
Schriften geladen: Breitenachse sichtbar (58 bis 150), Umlaute, ß, „“, € in beiden Schriften
Fehlertext über dem Feld, in Dunkelrot, Feld mit Dunkelrot-Rahmen
Violett nur auf Knopf, Fortschritt, Auswahl, Zeile 3, Fokus; Butter-Orange nur als Fläche auf Ticket, Laufband, Enthüllungs-Name, Hinweis