Marcel Raddatz
92c3d686c5
Feature spec, system design, design system (colors/typography/components), and per-view HTML specs for Erbstücke Wannsee. Also includes Claude personas used during design sessions. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
603 lines
34 KiB
HTML
603 lines
34 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="UTF-8"/>
|
||
<meta name="viewport" content="width=device-width,initial-scale=1"/>
|
||
<title>Erbstücke Wannsee — Design System</title>
|
||
<link href="https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,600;0,700;1,400&family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet"/>
|
||
<style>
|
||
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
|
||
body{font-family:'Inter',system-ui,sans-serif;background:#EAE5DC;color:#1C2820;line-height:1.5;font-size:13px;padding:48px 32px 120px}
|
||
.doc{max-width:1200px;margin:0 auto}
|
||
|
||
/* ── Masthead ── */
|
||
.mh{padding-bottom:24px;border-bottom:3px solid #5B7A66;margin-bottom:56px}
|
||
.mh .kicker{font-size:9px;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:#C4874A}
|
||
.mh h1{font-family:'Lora',Georgia,serif;font-size:30px;font-weight:700;color:#1C2820;letter-spacing:-.4px;margin-top:7px}
|
||
.mh p{font-size:13.5px;color:#6B6050;max-width:820px;line-height:1.8;margin-top:12px}
|
||
.byline{font-size:9px;color:#999;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;margin-top:16px}
|
||
.tag-row{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap}
|
||
.tag{background:#5B7A66;color:#fff;padding:3px 9px;border-radius:2px;font-size:8.5px;font-weight:800;letter-spacing:.8px;text-transform:uppercase}
|
||
.tag.amber{background:#C4874A}
|
||
.tag.outline{background:transparent;color:#5B7A66;border:1px solid #5B7A66}
|
||
.tag.gray{background:#6B6050;color:#fff}
|
||
|
||
/* ── Section rhythm ── */
|
||
.section{margin-bottom:80px}
|
||
.section+.section{border-top:1px dashed #C8C0B4;padding-top:72px}
|
||
.section-kicker{font-size:9px;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:#C4874A;display:block;margin-bottom:6px}
|
||
.section h2{font-family:'Lora',Georgia,serif;font-size:24px;font-weight:700;color:#1C2820;margin-bottom:10px}
|
||
.section-desc{font-size:13px;color:#6B6050;line-height:1.75;max-width:780px;margin-bottom:28px}
|
||
|
||
/* ── Color swatches ── */
|
||
.swatch-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px;margin-bottom:24px}
|
||
.swatch{border-radius:8px;overflow:hidden;border:1px solid rgba(0,0,0,.08);background:#fff}
|
||
.swatch-color{height:72px}
|
||
.swatch-info{padding:9px 11px}
|
||
.swatch-name{font-size:10px;font-weight:700;color:#1C2820;margin-bottom:1px}
|
||
.swatch-token{font-family:monospace;font-size:10px;color:#5B7A66;margin-bottom:2px}
|
||
.swatch-hex{font-family:monospace;font-size:10px;color:#888}
|
||
.swatch-rule{font-size:9px;color:#999;margin-top:3px;line-height:1.4}
|
||
|
||
/* ── Token / impl tables ── */
|
||
.token-table,.impl-table{width:100%;border-collapse:collapse;font-size:12px;margin-bottom:24px;background:#fff;border-radius:6px;overflow:hidden;border:1px solid #E0D8CC}
|
||
.token-table th,.impl-table th{text-align:left;padding:9px 12px;font-size:9px;font-weight:800;color:#888;text-transform:uppercase;letter-spacing:.5px;border-bottom:2px solid #E0D8CC;background:#F7F4EF}
|
||
.token-table td,.impl-table td{padding:8px 12px;border-bottom:1px solid #EDE8E0;color:#444;vertical-align:top;line-height:1.55}
|
||
.token-table tr:last-child td,.impl-table tr:last-child td{border-bottom:none}
|
||
.token-table td:first-child{font-family:monospace;font-size:11px;color:#5B7A66;white-space:nowrap}
|
||
.impl-table td:first-child{font-weight:700;color:#1C2820;width:20%}
|
||
.impl-table td:nth-child(3){color:#777;font-size:11px;width:10%}
|
||
.impl-table td:last-child{color:#888;font-size:11px;font-style:italic}
|
||
.dot{display:inline-block;width:14px;height:14px;border-radius:3px;border:1px solid rgba(0,0,0,.1);vertical-align:middle;margin-right:6px}
|
||
td code,th code{font-family:monospace;font-size:11px;background:#F2EDE4;padding:1px 5px;border-radius:2px;color:#5B7A66}
|
||
|
||
/* ── Contrast grid ── */
|
||
.contrast-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px;margin-bottom:24px}
|
||
.contrast-card{background:#fff;border:1px solid #E0D8CC;border-radius:6px;padding:14px 16px}
|
||
.contrast-row{display:flex;align-items:center;gap:10px;padding:7px 0;border-bottom:1px solid #F0EDE6;font-size:11px}
|
||
.contrast-row:last-child{border-bottom:none}
|
||
.contrast-chip{width:90px;height:28px;border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;flex-shrink:0}
|
||
.contrast-ratio{font-family:monospace;font-weight:700;color:#1C2820;width:48px;flex-shrink:0}
|
||
.pass-aa{background:#DCFCE7;color:#166534;font-size:9px;font-weight:800;padding:2px 6px;border-radius:3px}
|
||
.pass-aaa{background:#DBEAFE;color:#1E40AF;font-size:9px;font-weight:800;padding:2px 6px;border-radius:3px}
|
||
.contrast-desc{color:#666}
|
||
|
||
/* ── Type specimens ── */
|
||
.type-specimen{background:#fff;border:1px solid #E0D8CC;border-radius:8px;padding:22px 26px;margin-bottom:12px}
|
||
.type-meta{font-size:9px;font-weight:800;color:#AAA;text-transform:uppercase;letter-spacing:1.5px;margin-bottom:12px}
|
||
.type-label{font-size:10px;color:#999;margin-top:8px;line-height:1.5}
|
||
|
||
/* ── Component preview grid ── */
|
||
.comp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;margin-bottom:16px}
|
||
.comp-box{background:#fff;border:1px solid #E0D8CC;border-radius:8px;padding:18px 20px}
|
||
.comp-label{font-size:9px;font-weight:800;color:#888;text-transform:uppercase;letter-spacing:1px;margin-bottom:14px}
|
||
|
||
/* ── Buttons ── */
|
||
.btn{display:inline-flex;align-items:center;justify-content:center;font-family:'Inter',sans-serif;font-weight:700;border-radius:6px;cursor:pointer;border:none;min-height:44px;padding:0 20px;font-size:13px;text-decoration:none}
|
||
.btn-primary{background:#5B7A66;color:#fff}
|
||
.btn-accent{background:#C4874A;color:#fff}
|
||
.btn-outline{background:transparent;border:1.5px solid #5B7A66;color:#5B7A66;padding:0 19px}
|
||
.btn-danger{background:#FBF0F0;border:1.5px solid #9B6060;color:#9B6060;padding:0 19px}
|
||
.btn-ghost{background:transparent;color:#6B6050;padding:0 12px}
|
||
.btn-disabled{background:#F2EDE4;border:1.5px solid #E0D8CC;color:#AAA;cursor:not-allowed}
|
||
.btn-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:10px}
|
||
|
||
/* ── Chips ── */
|
||
.chip{display:inline-flex;align-items:center;font-size:10px;font-weight:700;padding:3px 10px;border-radius:12px;text-transform:uppercase;letter-spacing:.3px}
|
||
.chip-sage{background:#DFF0E6;color:#2E6645;border:1px solid #A8D5B8}
|
||
.chip-amber{background:#FBF0E0;color:#8A5A1A;border:1px solid #E8C48A}
|
||
.chip-gray{background:#F3F0EC;color:#5A5040;border:1px solid #DDD8CC}
|
||
.chip-row{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px}
|
||
|
||
/* ── Status indicators ── */
|
||
.status-free{font-size:12px;font-weight:700;color:#4A7C5C}
|
||
.status-mine{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700;background:#E8F5EC;color:#2E6645;padding:3px 10px;border-radius:10px;border:1px solid #A8D5B8}
|
||
.status-taken{font-size:12px;font-weight:700;color:#9B6060}
|
||
|
||
/* ── Gallery cards ── */
|
||
.gcard{background:#fff;border:1px solid #E0D8CC;border-radius:8px;overflow:hidden;display:flex;margin-bottom:8px}
|
||
.gcard-img{width:72px;height:72px;background:#C4B8A8;flex-shrink:0}
|
||
.gcard-body{padding:10px 12px;display:flex;flex-direction:column;justify-content:center;gap:3px}
|
||
.gcard-cat{font-size:9px;color:#6B6050;font-weight:800;text-transform:uppercase;letter-spacing:.6px}
|
||
.gcard-title{font-family:'Lora',Georgia,serif;font-size:12px;color:#1C2820;font-weight:600;line-height:1.3}
|
||
|
||
/* ── Filter tabs ── */
|
||
.pill{background:transparent;color:#6B6050;border:1.5px solid #E0D8CC;font-family:'Inter',sans-serif;font-size:10px;font-weight:700;padding:5px 11px;border-radius:20px;min-height:32px;white-space:nowrap;cursor:pointer}
|
||
.pill.on{background:#5B7A66;color:#fff;border-color:#5B7A66}
|
||
|
||
/* ── Nav bar ── */
|
||
.app-nav{height:44px;background:#5B7A66;display:flex;align-items:center;padding:0 14px;border-radius:6px;margin-bottom:8px}
|
||
.app-logo{font-family:'Lora',Georgia,serif;font-size:13px;font-weight:700;color:#fff}
|
||
.app-user{margin-left:auto;font-size:10px;color:rgba(255,255,255,.75);font-weight:600}
|
||
|
||
/* ── Focus ring ── */
|
||
.focus-ex{outline:3px solid rgba(91,122,102,.45);outline-offset:2px}
|
||
|
||
/* ── Do / Don't ── */
|
||
.do-dont{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1.5px solid #E0D8CC;border-radius:8px;overflow:hidden;margin-bottom:16px}
|
||
.dd-head{padding:9px 16px;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;border-bottom:1.5px solid #E0D8CC}
|
||
.do-head{background:#F0FDF4;color:#166534;border-right:1px solid #E0D8CC}
|
||
.dont-head{background:#FFF5F5;color:#991B1B}
|
||
.dd-body{padding:16px 18px;background:#fff;font-size:12px;color:#444;line-height:1.6}
|
||
.dd-body:first-of-type{border-right:1px solid #F0EDE6;background:#FAFFFE}
|
||
.dd-body:last-of-type{background:#FFFAFA}
|
||
.do-item::before{content:'✓ ';color:#16A34A;font-weight:700}
|
||
.dont-item::before{content:'✕ ';color:#DC2626;font-weight:700}
|
||
.rule-item{display:block;margin-bottom:6px}
|
||
.rule-item code{font-size:10.5px;background:#F2EDE4;padding:1px 4px;border-radius:2px;color:#5B7A66}
|
||
|
||
/* ── Notes box ── */
|
||
.notes{background:#F9F7F3;border-left:3px solid #C4874A;padding:14px 20px;border-radius:0 4px 4px 0;margin-top:24px}
|
||
.notes .nh{font-size:9px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:#C4874A;margin-bottom:8px}
|
||
.notes ul{list-style:none;display:flex;flex-direction:column;gap:6px}
|
||
.notes li{font-size:12px;color:#333;padding-left:16px;position:relative;line-height:1.7}
|
||
.notes li::before{content:"•";position:absolute;left:0;color:#C4874A;font-weight:800}
|
||
.notes li code{font-family:monospace;font-size:11px;background:#F2EDE4;padding:1px 4px;border-radius:2px;color:#5B7A66}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="doc">
|
||
|
||
<!-- ════ MASTHEAD ════ -->
|
||
<div class="mh">
|
||
<div class="kicker">UI/UX Spec · Implementation-ready</div>
|
||
<h1>Erbstücke Wannsee — Design System</h1>
|
||
<p>
|
||
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.
|
||
</p>
|
||
<div class="byline">Leonie Voss · 2026-05-05 · Final · Gilt für alle Views</div>
|
||
<div class="tag-row">
|
||
<span class="tag">design system</span>
|
||
<span class="tag amber">salbei & amber</span>
|
||
<span class="tag outline">WCAG AA</span>
|
||
<span class="tag outline">lora + inter</span>
|
||
<span class="tag gray">kein dark mode</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ════ 01 — FARB-TOKEN ════ -->
|
||
<div class="section">
|
||
<span class="section-kicker">01 — Farben</span>
|
||
<h2>Farb-Token</h2>
|
||
<p class="section-desc">
|
||
Alle Farben werden als CSS Custom Properties definiert und via Tailwind-Erweiterung (<code>theme.extend.colors</code>) als semantische Klassen verfügbar gemacht.
|
||
Kein Inline-Hex, keine Tailwind-Standard-Farben direkt im Markup.
|
||
</p>
|
||
|
||
<div class="swatch-grid">
|
||
<div class="swatch">
|
||
<div class="swatch-color" style="background:#F2EDE4;border-bottom:1px solid #E0D8CC"></div>
|
||
<div class="swatch-info">
|
||
<div class="swatch-name">Canvas</div>
|
||
<div class="swatch-token">--color-canvas</div>
|
||
<div class="swatch-hex">#F2EDE4</div>
|
||
<div class="swatch-rule">Seitenhintergrund (body)</div>
|
||
</div>
|
||
</div>
|
||
<div class="swatch">
|
||
<div class="swatch-color" style="background:#FFFFFF;border-bottom:1px solid #E0D8CC"></div>
|
||
<div class="swatch-info">
|
||
<div class="swatch-name">Surface</div>
|
||
<div class="swatch-token">--color-surface</div>
|
||
<div class="swatch-hex">#FFFFFF</div>
|
||
<div class="swatch-rule">Karten, Modals, Inputs</div>
|
||
</div>
|
||
</div>
|
||
<div class="swatch">
|
||
<div class="swatch-color" style="background:#E0D8CC"></div>
|
||
<div class="swatch-info">
|
||
<div class="swatch-name">Line</div>
|
||
<div class="swatch-token">--color-line</div>
|
||
<div class="swatch-hex">#E0D8CC</div>
|
||
<div class="swatch-rule">Rahmen, Trennlinien</div>
|
||
</div>
|
||
</div>
|
||
<div class="swatch">
|
||
<div class="swatch-color" style="background:#5B7A66"></div>
|
||
<div class="swatch-info">
|
||
<div class="swatch-name">Primary (Salbei)</div>
|
||
<div class="swatch-token">--color-primary</div>
|
||
<div class="swatch-hex">#5B7A66</div>
|
||
<div class="swatch-rule">Nav, Buttons, aktive Tabs</div>
|
||
</div>
|
||
</div>
|
||
<div class="swatch">
|
||
<div class="swatch-color" style="background:#4A6855"></div>
|
||
<div class="swatch-info">
|
||
<div class="swatch-name">Primary Dark</div>
|
||
<div class="swatch-token">--color-primary-dark</div>
|
||
<div class="swatch-hex">#4A6855</div>
|
||
<div class="swatch-rule">Hover auf Primary-Buttons</div>
|
||
</div>
|
||
</div>
|
||
<div class="swatch">
|
||
<div class="swatch-color" style="background:#C4874A"></div>
|
||
<div class="swatch-info">
|
||
<div class="swatch-name">Accent (Amber)</div>
|
||
<div class="swatch-token">--color-accent</div>
|
||
<div class="swatch-hex">#C4874A</div>
|
||
<div class="swatch-rule">CTAs, Highlights, Admin-Sidebar aktiv</div>
|
||
</div>
|
||
</div>
|
||
<div class="swatch">
|
||
<div class="swatch-color" style="background:#1C2820"></div>
|
||
<div class="swatch-info">
|
||
<div class="swatch-name">Ink</div>
|
||
<div class="swatch-token">--color-ink</div>
|
||
<div class="swatch-hex">#1C2820</div>
|
||
<div class="swatch-rule">Haupttext, Überschriften</div>
|
||
</div>
|
||
</div>
|
||
<div class="swatch">
|
||
<div class="swatch-color" style="background:#6B6050"></div>
|
||
<div class="swatch-info">
|
||
<div class="swatch-name">Ink Muted</div>
|
||
<div class="swatch-token">--color-ink-muted</div>
|
||
<div class="swatch-hex">#6B6050</div>
|
||
<div class="swatch-rule">Labels, Metadaten, Hilfstexte</div>
|
||
</div>
|
||
</div>
|
||
<div class="swatch">
|
||
<div class="swatch-color" style="background:#4A7C5C"></div>
|
||
<div class="swatch-info">
|
||
<div class="swatch-name">Status Free</div>
|
||
<div class="swatch-token">--color-status-free</div>
|
||
<div class="swatch-hex">#4A7C5C</div>
|
||
<div class="swatch-rule">„✓ Frei"-Text und Badge-Hintergrund</div>
|
||
</div>
|
||
</div>
|
||
<div class="swatch">
|
||
<div class="swatch-color" style="background:#9B6060"></div>
|
||
<div class="swatch-info">
|
||
<div class="swatch-name">Status Taken</div>
|
||
<div class="swatch-token">--color-status-taken</div>
|
||
<div class="swatch-hex">#9B6060</div>
|
||
<div class="swatch-rule">„● [Name]"-Text, Fehler, Danger-Aktionen</div>
|
||
</div>
|
||
</div>
|
||
<div class="swatch">
|
||
<div class="swatch-color" style="background:#2A3B30"></div>
|
||
<div class="swatch-info">
|
||
<div class="swatch-name">Admin BG</div>
|
||
<div class="swatch-token">--color-admin-bg</div>
|
||
<div class="swatch-hex">#2A3B30</div>
|
||
<div class="swatch-rule">Admin-Sidebar, Admin-Login-Hintergrund</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<table class="token-table">
|
||
<thead><tr><th>CSS Token</th><th>Wert</th><th>Tailwind-Klasse</th><th>Primärer Einsatz</th></tr></thead>
|
||
<tbody>
|
||
<tr><td>--color-canvas</td><td><span class="dot" style="background:#F2EDE4"></span>#F2EDE4</td><td><code>bg-canvas</code></td><td>body background, Galerie-Hintergrund</td></tr>
|
||
<tr><td>--color-surface</td><td><span class="dot" style="background:#fff;border:1px solid #ddd"></span>#FFFFFF</td><td><code>bg-surface</code></td><td>Karten, Modals, Inputs, Admin-Content</td></tr>
|
||
<tr><td>--color-line</td><td><span class="dot" style="background:#E0D8CC"></span>#E0D8CC</td><td><code>border-line</code></td><td>Alle Rahmen und Trennlinien</td></tr>
|
||
<tr><td>--color-primary</td><td><span class="dot" style="background:#5B7A66"></span>#5B7A66</td><td><code>bg-primary · text-primary</code></td><td>Navigationsleiste, Primär-Buttons, aktive Filter-Pills</td></tr>
|
||
<tr><td>--color-primary-dark</td><td><span class="dot" style="background:#4A6855"></span>#4A6855</td><td><code>hover:bg-primary-dark</code></td><td>Hover-Zustand auf Primary-Elementen</td></tr>
|
||
<tr><td>--color-accent</td><td><span class="dot" style="background:#C4874A"></span>#C4874A</td><td><code>bg-accent · text-accent</code></td><td>Admin-Sidebar aktiver Bereich, Thumbnail-Badge, sparsame Highlights</td></tr>
|
||
<tr><td>--color-ink</td><td><span class="dot" style="background:#1C2820"></span>#1C2820</td><td><code>text-ink</code></td><td>Fließtext, Seiten-Titel, Artikel-Titel im Modal</td></tr>
|
||
<tr><td>--color-ink-muted</td><td><span class="dot" style="background:#6B6050"></span>#6B6050</td><td><code>text-ink-muted</code></td><td>Kategorie-Labels, Platzhaltertext, Hinweise</td></tr>
|
||
<tr><td>--color-status-free</td><td><span class="dot" style="background:#4A7C5C"></span>#4A7C5C</td><td><code>text-status-free</code></td><td>Statustext „✓ Frei", Badge-Text „✓ Meine Reservierung"</td></tr>
|
||
<tr><td>--color-status-taken</td><td><span class="dot" style="background:#9B6060"></span>#9B6060</td><td><code>text-status-taken</code></td><td>Statustext „● [Name]", Danger-Buttons, Fehlertexte</td></tr>
|
||
<tr><td>--color-admin-bg</td><td><span class="dot" style="background:#2A3B30"></span>#2A3B30</td><td><code>bg-admin</code></td><td>Admin-Sidebar, Admin-Login-Seite-Hintergrund</td></tr>
|
||
</tbody>
|
||
</table>
|
||
|
||
<h3 style="font-family:'Lora',Georgia,serif;font-size:16px;font-weight:700;color:#1C2820;margin:28px 0 16px">Kontrast-Prüfung (WCAG 2.1)</h3>
|
||
<div class="contrast-grid">
|
||
<div class="contrast-card">
|
||
<div style="font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;color:#888;margin-bottom:10px">Text auf Hintergrund</div>
|
||
<div class="contrast-row">
|
||
<div class="contrast-chip" style="background:#F2EDE4;color:#1C2820;font-size:11px">Aa</div>
|
||
<div class="contrast-ratio">9.2:1</div>
|
||
<span class="pass-aaa">AAA</span>
|
||
<div class="contrast-desc">Ink auf Canvas — Haupttext</div>
|
||
</div>
|
||
<div class="contrast-row">
|
||
<div class="contrast-chip" style="background:#fff;color:#1C2820;font-size:11px">Aa</div>
|
||
<div class="contrast-ratio">12.6:1</div>
|
||
<span class="pass-aaa">AAA</span>
|
||
<div class="contrast-desc">Ink auf Surface — Karten</div>
|
||
</div>
|
||
<div class="contrast-row">
|
||
<div class="contrast-chip" style="background:#F2EDE4;color:#6B6050;font-size:11px">Aa</div>
|
||
<div class="contrast-ratio">5.1:1</div>
|
||
<span class="pass-aa">AA</span>
|
||
<div class="contrast-desc">Ink Muted auf Canvas — Labels</div>
|
||
</div>
|
||
<div class="contrast-row">
|
||
<div class="contrast-chip" style="background:#5B7A66;color:#fff;font-size:11px">Aa</div>
|
||
<div class="contrast-ratio">4.6:1</div>
|
||
<span class="pass-aa">AA</span>
|
||
<div class="contrast-desc">Weiß auf Primary — Nav, Buttons</div>
|
||
</div>
|
||
</div>
|
||
<div class="contrast-card">
|
||
<div style="font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;color:#888;margin-bottom:10px">Status-Farben</div>
|
||
<div class="contrast-row">
|
||
<div class="contrast-chip" style="background:#fff;color:#4A7C5C;font-size:11px">✓ Frei</div>
|
||
<div class="contrast-ratio">5.2:1</div>
|
||
<span class="pass-aa">AA</span>
|
||
<div class="contrast-desc">Status Free auf Surface</div>
|
||
</div>
|
||
<div class="contrast-row">
|
||
<div class="contrast-chip" style="background:#F2EDE4;color:#4A7C5C;font-size:11px">✓ Frei</div>
|
||
<div class="contrast-ratio">4.6:1</div>
|
||
<span class="pass-aa">AA</span>
|
||
<div class="contrast-desc">Status Free auf Canvas</div>
|
||
</div>
|
||
<div class="contrast-row">
|
||
<div class="contrast-chip" style="background:#fff;color:#9B6060;font-size:11px">● Name</div>
|
||
<div class="contrast-ratio">4.5:1</div>
|
||
<span class="pass-aa">AA</span>
|
||
<div class="contrast-desc">Status Taken auf Surface</div>
|
||
</div>
|
||
<div class="contrast-row">
|
||
<div class="contrast-chip" style="background:#2A3B30;color:#fff;font-size:11px">Aa</div>
|
||
<div class="contrast-ratio">11.8:1</div>
|
||
<span class="pass-aaa">AAA</span>
|
||
<div class="contrast-desc">Weiß auf Admin BG — Sidebar</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="do-dont">
|
||
<div>
|
||
<div class="dd-head do-head">✓ Tun</div>
|
||
<div class="dd-body">
|
||
<span class="rule-item do-item">Alle Farben über <code>bg-canvas</code>, <code>text-primary</code> etc. einsetzen</span>
|
||
<span class="rule-item do-item">Status immer mit Icon + Text kommunizieren, nie Farbe allein</span>
|
||
<span class="rule-item do-item">Accent (Amber) sparsam einsetzen — maximal 1–2 Elemente pro Screen</span>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<div class="dd-head dont-head">✕ Nicht tun</div>
|
||
<div class="dd-body">
|
||
<span class="rule-item dont-item">Inline-Hex wie <code>style="color:#5B7A66"</code> im Markup</span>
|
||
<span class="rule-item dont-item">Tailwind-Standard-Farben wie <code>text-green-600</code> für Status</span>
|
||
<span class="rule-item dont-item">Decorative-Farben (#C4874A, #A8D5B8) als Body-Text auf weißem Hintergrund</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ════ 02 — TYPOGRAFIE ════ -->
|
||
<div class="section">
|
||
<span class="section-kicker">02 — Typografie</span>
|
||
<h2>Typografie</h2>
|
||
<p class="section-desc">
|
||
Zwei Schriftarten. <strong>Lora</strong> (Google Fonts, Serif) für alles Emotionale und Identitätsstiftende — App-Name, Artikel-Titel, Seiten-Überschriften.
|
||
<strong>Inter</strong> (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 <code><link></code> im <code><head></code> laden.
|
||
</p>
|
||
|
||
<div class="type-specimen">
|
||
<div class="type-meta">Lora 700 — App-Name, Seiten-Titel</div>
|
||
<div style="font-family:'Lora',Georgia,serif;font-size:28px;font-weight:700;color:#1C2820;line-height:1.2">Erbstücke Wannsee</div>
|
||
<div class="type-label">font-serif text-[28px] font-bold — nur Nav und Gate Screen</div>
|
||
</div>
|
||
|
||
<div class="type-specimen">
|
||
<div class="type-meta">Lora 700 — Artikel-Titel im Modal</div>
|
||
<div style="font-family:'Lora',Georgia,serif;font-size:20px;font-weight:700;color:#1C2820;line-height:1.3">Schreibtisch aus Eichenholz</div>
|
||
<div class="type-label">font-serif text-xl font-bold leading-snug</div>
|
||
</div>
|
||
|
||
<div class="type-specimen">
|
||
<div class="type-meta">Lora 600 — Karten-Titel (Liste)</div>
|
||
<div style="font-family:'Lora',Georgia,serif;font-size:13px;font-weight:600;color:#1C2820;line-height:1.3">Goldbrosche mit Granat</div>
|
||
<div class="type-label">font-serif text-[13px] font-semibold leading-snug</div>
|
||
</div>
|
||
|
||
<div class="type-specimen">
|
||
<div class="type-meta">Lora 400 italic — Notizen, Hinweise</div>
|
||
<div style="font-family:'Lora',Georgia,serif;font-size:14px;font-style:italic;color:#6B6050;line-height:1.6">Kleine Schramme oben links, sonst sehr guter Zustand.</div>
|
||
<div class="type-label">font-serif text-sm italic text-ink-muted leading-relaxed</div>
|
||
</div>
|
||
|
||
<div class="type-specimen">
|
||
<div class="type-meta">Inter 400 — Body / Fließtext</div>
|
||
<div style="font-family:'Inter',sans-serif;font-size:16px;font-weight:400;color:#1C2820;line-height:1.6">Hier kannst du Gegenstände aus dem Nachlass reservieren. Gib deinen persönlichen Code ein:</div>
|
||
<div class="type-label">font-sans text-base leading-relaxed — minimum 16px für Fließtext</div>
|
||
</div>
|
||
|
||
<div class="type-specimen">
|
||
<div class="type-meta">Inter 800 uppercase — Kategorie-Labels, Section-Kicker</div>
|
||
<div style="display:flex;gap:20px;align-items:center;flex-wrap:wrap">
|
||
<span style="font-family:'Inter',sans-serif;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.7px;color:#6B6050">Möbel</span>
|
||
<span style="font-family:'Inter',sans-serif;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.7px;color:#6B6050">Schmuck</span>
|
||
<span style="font-family:'Inter',sans-serif;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.7px;color:#6B6050">Bücher</span>
|
||
</div>
|
||
<div class="type-label">font-sans text-[10px] font-extrabold uppercase tracking-wide text-ink-muted</div>
|
||
</div>
|
||
|
||
<div class="type-specimen">
|
||
<div class="type-meta">Monospace System — Code-Strings</div>
|
||
<div style="font-family:monospace;font-size:16px;font-weight:600;letter-spacing:4px;color:#1C2820">AB3K7MN2</div>
|
||
<div class="type-label">font-mono text-base font-semibold tracking-[4px] uppercase — Gate Screen und Code-Verwaltung</div>
|
||
</div>
|
||
|
||
<table class="token-table" style="margin-top:24px">
|
||
<thead><tr><th>Rolle</th><th>Font / Gewicht</th><th>Größe</th><th>Tailwind-Klassen</th></tr></thead>
|
||
<tbody>
|
||
<tr><td>App-Name (Nav)</td><td>Lora 700</td><td>14px</td><td><code>font-serif text-sm font-bold text-white</code></td></tr>
|
||
<tr><td>Gate Screen Titel</td><td>Lora 700</td><td>20px</td><td><code>font-serif text-xl font-bold text-ink</code></td></tr>
|
||
<tr><td>Admin Seiten-Titel</td><td>Lora 700</td><td>16px</td><td><code>font-serif text-base font-bold text-ink</code></td></tr>
|
||
<tr><td>Artikel-Titel (Modal)</td><td>Lora 700</td><td>20px</td><td><code>font-serif text-xl font-bold text-ink leading-snug</code></td></tr>
|
||
<tr><td>Karten-Titel (Liste)</td><td>Lora 600</td><td>13px</td><td><code>font-serif text-[13px] font-semibold text-ink leading-snug</code></td></tr>
|
||
<tr><td>Notiz / kursiv</td><td>Lora 400 italic</td><td>14px</td><td><code>font-serif text-sm italic text-ink-muted leading-relaxed</code></td></tr>
|
||
<tr><td>Body / Fließtext</td><td>Inter 400</td><td>16px</td><td><code>font-sans text-base leading-relaxed</code></td></tr>
|
||
<tr><td>Kategorie-Label</td><td>Inter 800 caps</td><td>10px</td><td><code>font-sans text-[10px] font-extrabold uppercase tracking-wide text-ink-muted</code></td></tr>
|
||
<tr><td>Status-Text</td><td>Inter 700</td><td>11–12px</td><td><code>font-sans text-[11px] font-bold</code></td></tr>
|
||
<tr><td>Button-Text</td><td>Inter 700</td><td>13–14px</td><td><code>font-sans text-sm font-bold</code></td></tr>
|
||
<tr><td>Admin-Label / Meta</td><td>Inter 800 caps</td><td>9px</td><td><code>font-sans text-[9px] font-extrabold uppercase tracking-widest text-ink-muted</code></td></tr>
|
||
<tr><td>Code-String</td><td>Mono System 600</td><td>16px</td><td><code>font-mono text-base font-semibold tracking-[4px] uppercase</code></td></tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<!-- ════ 03 — KERNKOMPONENTEN ════ -->
|
||
<div class="section">
|
||
<span class="section-kicker">03 — Komponenten</span>
|
||
<h2>Kernkomponenten</h2>
|
||
<p class="section-desc">Alle wiederverwendbaren UI-Bausteine. Jeder interaktive Bereich hat mindestens 44 px Höhe (WCAG 2.2 Touch Target). Fokus-Ringe immer sichtbar via <code>focus-visible</code>.</p>
|
||
|
||
<div class="comp-grid">
|
||
|
||
<div class="comp-box">
|
||
<div class="comp-label">Buttons (min. 44 px Höhe)</div>
|
||
<div class="btn-row">
|
||
<button class="btn btn-primary">Reservieren</button>
|
||
<button class="btn btn-accent">Speichern</button>
|
||
</div>
|
||
<div class="btn-row">
|
||
<button class="btn btn-outline">Aufheben</button>
|
||
<button class="btn btn-danger">Code löschen</button>
|
||
</div>
|
||
<div class="btn-row">
|
||
<button class="btn btn-ghost">Abbrechen</button>
|
||
<button class="btn btn-disabled" disabled>Nicht verfügbar</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="comp-box">
|
||
<div class="comp-label">Status-Indikatoren</div>
|
||
<div style="display:flex;flex-direction:column;gap:10px">
|
||
<div>
|
||
<div class="status-free">✓ Frei</div>
|
||
<div style="font-size:10px;color:#999;margin-top:2px">Galerie-Karte + Modal — text-status-free</div>
|
||
</div>
|
||
<div>
|
||
<div class="status-mine">✓ Meine Reservierung</div>
|
||
<div style="font-size:10px;color:#999;margin-top:2px">Badge — bg-[#E8F5EC] border-[#A8D5B8]</div>
|
||
</div>
|
||
<div>
|
||
<div class="status-taken">● Renate</div>
|
||
<div style="font-size:10px;color:#999;margin-top:2px">Galerie-Karte + Modal — text-status-taken</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="comp-box">
|
||
<div class="comp-label">Kategorie-Chips</div>
|
||
<div class="chip-row">
|
||
<span class="chip chip-sage">Aktiv</span>
|
||
<span class="chip chip-amber">Amber</span>
|
||
<span class="chip chip-gray">Inaktiv</span>
|
||
</div>
|
||
<div style="font-size:10px;color:#999;margin-top:4px;line-height:1.5">Sage = ausgewählte Kategorie. Grau = nicht ausgewählt.</div>
|
||
</div>
|
||
|
||
<div class="comp-box">
|
||
<div class="comp-label">Filter-Tab-Leiste (Galerie)</div>
|
||
<div style="display:flex;gap:5px;overflow-x:auto;padding-bottom:4px">
|
||
<button class="pill on">Alle</button>
|
||
<button class="pill">Möbel</button>
|
||
<button class="pill">Bücher</button>
|
||
<button class="pill">Schmuck</button>
|
||
<button class="pill">Werkzeug</button>
|
||
</div>
|
||
<div style="font-size:10px;color:#999;margin-top:8px">Horizontal scrollbar bei Überlauf · min-height 32px</div>
|
||
</div>
|
||
|
||
<div class="comp-box">
|
||
<div class="comp-label">Galerie-Karte (Telefon — 1 Spalte)</div>
|
||
<div class="gcard">
|
||
<div class="gcard-img"></div>
|
||
<div class="gcard-body">
|
||
<div class="gcard-cat">Möbel</div>
|
||
<div class="gcard-title">Schreibtisch Eiche</div>
|
||
<div class="status-free" style="font-size:10px;margin-top:2px">✓ Frei</div>
|
||
</div>
|
||
</div>
|
||
<div class="gcard">
|
||
<div class="gcard-img" style="background:#B8AA98"></div>
|
||
<div class="gcard-body">
|
||
<div class="gcard-cat">Schmuck</div>
|
||
<div class="gcard-title">Goldbrosche</div>
|
||
<div class="status-taken" style="font-size:10px;margin-top:2px">● Renate</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="comp-box">
|
||
<div class="comp-label">Galerie-Karte (Tablet — 2 Spalten)</div>
|
||
<div style="display:grid;grid-template-columns:1fr 1fr;gap:8px">
|
||
<div style="border:1px solid #E0D8CC;border-radius:8px;overflow:hidden;background:#fff">
|
||
<div style="background:#C4B8A8;aspect-ratio:1"></div>
|
||
<div style="padding:7px 9px">
|
||
<div class="gcard-cat">Möbel</div>
|
||
<div class="status-free" style="font-size:9px;margin-top:2px">✓ Frei</div>
|
||
</div>
|
||
</div>
|
||
<div style="border:1px solid #E0D8CC;border-radius:8px;overflow:hidden;background:#fff">
|
||
<div style="background:#B8AA98;aspect-ratio:1"></div>
|
||
<div style="padding:7px 9px">
|
||
<div class="gcard-cat">Schmuck</div>
|
||
<div class="status-taken" style="font-size:9px;margin-top:2px">● Renate</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="comp-box">
|
||
<div class="comp-label">Navigationsleiste (Familie)</div>
|
||
<div class="app-nav">
|
||
<span class="app-logo">Erbstücke Wannsee</span>
|
||
<span class="app-user">Markus</span>
|
||
</div>
|
||
<div style="font-size:10px;color:#999;line-height:1.5">h-11 bg-primary sticky top-0 · App-Name links, Nutzername rechts</div>
|
||
</div>
|
||
|
||
<div class="comp-box">
|
||
<div class="comp-label">Fokus-Ring (Tastaturnavigation)</div>
|
||
<button class="btn btn-primary focus-ex">Reservieren</button>
|
||
<div style="margin-top:10px;font-family:monospace;font-size:10px;background:#F7F4EF;padding:7px 10px;border-radius:4px;color:#5B7A66;line-height:1.6">
|
||
focus-visible:ring-2<br>
|
||
focus-visible:ring-primary/45<br>
|
||
focus-visible:ring-offset-2<br>
|
||
outline-none
|
||
</div>
|
||
<div style="font-size:10px;color:#999;margin-top:6px">Gilt für alle fokussierbaren Elemente. <code>focus-visible</code> statt <code>focus</code> — kein Ring bei Mausklick.</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="do-dont">
|
||
<div>
|
||
<div class="dd-head do-head">✓ Tun</div>
|
||
<div class="dd-body">
|
||
<span class="rule-item do-item">min-h-[44px] auf allen Buttons und interaktiven Elementen</span>
|
||
<span class="rule-item do-item"><code>aria-label</code> auf allen Icon-only Buttons</span>
|
||
<span class="rule-item do-item">Status immer mit Zeichen (✓, ●) + Text kommunizieren</span>
|
||
<span class="rule-item do-item"><code>disabled</code>-Attribut setzen, nicht nur visuell dämpfen</span>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<div class="dd-head dont-head">✕ Nicht tun</div>
|
||
<div class="dd-body">
|
||
<span class="rule-item dont-item"><code>outline: none</code> ohne Ersatz-Fokus-Ring</span>
|
||
<span class="rule-item dont-item">Farbe als einziger Status-Indikator (Color-Blindness)</span>
|
||
<span class="rule-item dont-item">Buttons unter 44px Höhe, besonders im Admin auf Mobilgeräten</span>
|
||
<span class="rule-item dont-item">Placeholder-Text als Label-Ersatz für Formularfelder</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="notes">
|
||
<div class="nh">Tailwind-Konfiguration (tailwind.config)</div>
|
||
<ul>
|
||
<li>Alle Token in <code>theme.extend.colors</code>: <code>canvas: 'var(--color-canvas)'</code>, <code>primary: 'var(--color-primary)'</code> usw.</li>
|
||
<li>CSS Custom Properties in <code>src/app.css</code> unter <code>:root</code> definieren</li>
|
||
<li>Font-Familien: <code>fontFamily: { serif: ['Lora', 'Georgia', 'serif'], sans: ['Inter', 'system-ui', 'sans-serif'] }</code></li>
|
||
<li>Google Fonts via <code><link></code> in <code>src/app.html</code>: Lora (400, 400i, 600, 700) + Inter (400, 500, 600, 700, 800)</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
</div><!-- /doc -->
|
||
</body>
|
||
</html>
|