UI/UX Spec · Implementation-ready

Erbstücke Wannsee — Design System

Vollständige Design-Grundlage für die Erbstücke-Wannsee-App: Farb-Token, Typografie, Kernkomponenten. Warm-pastell Palette (Salbei & Amber) für einen würdevollen, familiären Kontext. Kein Dark Mode. Nur Deutsch. WCAG 2.1 AA als Mindeststandard.

Leonie Voss · 2026-05-05 · Final · Gilt für alle Views

design system salbei & amber WCAG AA lora + inter kein dark mode

01 — Farben

Farb-Token

Alle Farben werden als CSS Custom Properties definiert und via Tailwind-Erweiterung (theme.extend.colors) als semantische Klassen verfügbar gemacht. Kein Inline-Hex, keine Tailwind-Standard-Farben direkt im Markup.

Canvas

--color-canvas

#F2EDE4

Seitenhintergrund (body)

Surface

--color-surface

#FFFFFF

Karten, Modals, Inputs

Line

--color-line

#E0D8CC

Rahmen, Trennlinien

Primary (Salbei)

--color-primary

#5B7A66

Nav, Buttons, aktive Tabs

Primary Dark

--color-primary-dark

#4A6855

Hover auf Primary-Buttons

Accent (Amber)

--color-accent

#C4874A

CTAs, Highlights, Admin-Sidebar aktiv

Ink

--color-ink

#1C2820

Haupttext, Überschriften

Ink Muted

--color-ink-muted

#6B6050

Labels, Metadaten, Hilfstexte

Status Free

--color-status-free

#4A7C5C

„✓ Frei"-Text und Badge-Hintergrund

Status Taken

--color-status-taken

#9B6060

„● [Name]"-Text, Fehler, Danger-Aktionen

Admin BG

--color-admin-bg

#2A3B30

Admin-Sidebar, Admin-Login-Hintergrund

CSS Token	Wert	Tailwind-Klasse	Primärer Einsatz
--color-canvas	#F2EDE4	`bg-canvas`	body background, Galerie-Hintergrund
--color-surface	#FFFFFF	`bg-surface`	Karten, Modals, Inputs, Admin-Content
--color-line	#E0D8CC	`border-line`	Alle Rahmen und Trennlinien
--color-primary	#5B7A66	`bg-primary · text-primary`	Navigationsleiste, Primär-Buttons, aktive Filter-Pills
--color-primary-dark	#4A6855	`hover:bg-primary-dark`	Hover-Zustand auf Primary-Elementen
--color-accent	#C4874A	`bg-accent · text-accent`	Admin-Sidebar aktiver Bereich, Thumbnail-Badge, sparsame Highlights
--color-ink	#1C2820	`text-ink`	Fließtext, Seiten-Titel, Artikel-Titel im Modal
--color-ink-muted	#6B6050	`text-ink-muted`	Kategorie-Labels, Platzhaltertext, Hinweise
--color-status-free	#4A7C5C	`text-status-free`	Statustext „✓ Frei", Badge-Text „✓ Meine Reservierung"
--color-status-taken	#9B6060	`text-status-taken`	Statustext „● [Name]", Danger-Buttons, Fehlertexte
--color-admin-bg	#2A3B30	`bg-admin`	Admin-Sidebar, Admin-Login-Seite-Hintergrund

Kontrast-Prüfung (WCAG 2.1)

Text auf Hintergrund

9.2:1

AAA

Ink auf Canvas — Haupttext

12.6:1

AAA

Ink auf Surface — Karten

5.1:1

Ink Muted auf Canvas — Labels

4.6:1

Weiß auf Primary — Nav, Buttons

Status-Farben

✓ Frei

5.2:1

Status Free auf Surface

✓ Frei

4.6:1

Status Free auf Canvas

● Name

4.5:1

Status Taken auf Surface

11.8:1

AAA

Weiß auf Admin BG — Sidebar

✓ Tun

Alle Farben über bg-canvas, text-primary etc. einsetzen Status immer mit Icon + Text kommunizieren, nie Farbe allein Accent (Amber) sparsam einsetzen — maximal 1–2 Elemente pro Screen

✕ Nicht tun

Inline-Hex wie style="color:#5B7A66" im Markup Tailwind-Standard-Farben wie text-green-600 für Status Decorative-Farben (#C4874A, #A8D5B8) als Body-Text auf weißem Hintergrund

02 — Typografie

Typografie

Zwei Schriftarten. Lora (Google Fonts, Serif) für alles Emotionale und Identitätsstiftende — App-Name, Artikel-Titel, Seiten-Überschriften. Inter (Google Fonts, Sans) für alle UI-Elemente — Labels, Buttons, Statustext, Fließtext. Minimale Font-Größe: 12 px. Body-Text: 16 px. Beide Schriften via <link> im <head> laden.

Lora 700 — App-Name, Seiten-Titel

Erbstücke Wannsee

font-serif text-[28px] font-bold — nur Nav und Gate Screen

Lora 700 — Artikel-Titel im Modal

Schreibtisch aus Eichenholz

font-serif text-xl font-bold leading-snug

Lora 600 — Karten-Titel (Liste)

Goldbrosche mit Granat

font-serif text-[13px] font-semibold leading-snug

Lora 400 italic — Notizen, Hinweise

Kleine Schramme oben links, sonst sehr guter Zustand.

font-serif text-sm italic text-ink-muted leading-relaxed

Inter 400 — Body / Fließtext

Hier kannst du Gegenstände aus dem Nachlass reservieren. Gib deinen persönlichen Code ein:

font-sans text-base leading-relaxed — minimum 16px für Fließtext

Inter 800 uppercase — Kategorie-Labels, Section-Kicker

Möbel Schmuck Bücher

font-sans text-[10px] font-extrabold uppercase tracking-wide text-ink-muted

Monospace System — Code-Strings

AB3K7MN2

font-mono text-base font-semibold tracking-[4px] uppercase — Gate Screen und Code-Verwaltung

Rolle	Font / Gewicht	Größe	Tailwind-Klassen
App-Name (Nav)	Lora 700	14px	`font-serif text-sm font-bold text-white`
Gate Screen Titel	Lora 700	20px	`font-serif text-xl font-bold text-ink`
Admin Seiten-Titel	Lora 700	16px	`font-serif text-base font-bold text-ink`
Artikel-Titel (Modal)	Lora 700	20px	`font-serif text-xl font-bold text-ink leading-snug`
Karten-Titel (Liste)	Lora 600	13px	`font-serif text-[13px] font-semibold text-ink leading-snug`
Notiz / kursiv	Lora 400 italic	14px	`font-serif text-sm italic text-ink-muted leading-relaxed`
Body / Fließtext	Inter 400	16px	`font-sans text-base leading-relaxed`
Kategorie-Label	Inter 800 caps	10px	`font-sans text-[10px] font-extrabold uppercase tracking-wide text-ink-muted`
Status-Text	Inter 700	11–12px	`font-sans text-[11px] font-bold`
Button-Text	Inter 700	13–14px	`font-sans text-sm font-bold`
Admin-Label / Meta	Inter 800 caps	9px	`font-sans text-[9px] font-extrabold uppercase tracking-widest text-ink-muted`
Code-String	Mono System 600	16px	`font-mono text-base font-semibold tracking-[4px] uppercase`

03 — Komponenten

Kernkomponenten

Alle wiederverwendbaren UI-Bausteine. Jeder interaktive Bereich hat mindestens 44 px Höhe (WCAG 2.2 Touch Target). Fokus-Ringe immer sichtbar via focus-visible.

Buttons (min. 44 px Höhe)

Status-Indikatoren

✓ Frei

Galerie-Karte + Modal — text-status-free

✓ Meine Reservierung

Badge — bg-[#E8F5EC] border-[#A8D5B8]

● Renate

Galerie-Karte + Modal — text-status-taken

Kategorie-Chips

Aktiv Amber Inaktiv

Sage = ausgewählte Kategorie. Grau = nicht ausgewählt.

Filter-Tab-Leiste (Galerie)

Horizontal scrollbar bei Überlauf · min-height 32px

Galerie-Karte (Telefon — 1 Spalte)

Möbel

Schreibtisch Eiche

✓ Frei

Schmuck

Goldbrosche

● Renate

Galerie-Karte (Tablet — 2 Spalten)

Möbel

✓ Frei

Schmuck

● Renate

Navigationsleiste (Familie)

Erbstücke Wannsee Markus

h-11 bg-primary sticky top-0 · App-Name links, Nutzername rechts

Fokus-Ring (Tastaturnavigation)

        focus-visible:ring-2

        focus-visible:ring-primary/45

        focus-visible:ring-offset-2

        outline-none

Gilt für alle fokussierbaren Elemente. focus-visible statt focus — kein Ring bei Mausklick.

✓ Tun

min-h-[44px] auf allen Buttons und interaktiven Elementen aria-label auf allen Icon-only Buttons Status immer mit Zeichen (✓, ●) + Text kommunizieren disabled-Attribut setzen, nicht nur visuell dämpfen

✕ Nicht tun

outline: none ohne Ersatz-Fokus-Ring Farbe als einziger Status-Indikator (Color-Blindness) Buttons unter 44px Höhe, besonders im Admin auf Mobilgeräten Placeholder-Text als Label-Ersatz für Formularfelder

Tailwind-Konfiguration (tailwind.config)

Alle Token in theme.extend.colors: canvas: 'var(--color-canvas)', primary: 'var(--color-primary)' usw.
CSS Custom Properties in src/app.css unter :root definieren
Font-Familien: fontFamily: { serif: ['Lora', 'Georgia', 'serif'], sans: ['Inter', 'system-ui', 'sans-serif'] }
Google Fonts via <link> in src/app.html: Lora (400, 400i, 600, 700) + Inter (400, 500, 600, 700, 800)