/documents/persons/geschichten/persons/documents/geschichten/persons/{id} (Instanz-spezifisch)#D0CCC4 / #C0BDB6 (warm, kein reines Weiß)#323850#262E48#7080A8 — Absender, Excerpts, Entwurfs-Meta (≥ 4.5:1)#6070A0 — HSTAT-Label, Card-Head h3 (≥ 4.5:1)#5A6888 — Datum-Felder (≥ 4.5:1)#A6DAD8 — unverändert, auch im Dark Modergba(166,218,216,.14)dashboard.greeting.morning — „Guten Morgen" (vor 12:00)dashboard.greeting.afternoon — „Guten Tag" (12:00–18:00)dashboard.greeting.evening — „Guten Abend" (ab 18:00)dashboard.welcome — „Herzlich willkommen, {name}." (parametrisch)dashboard.persons.viewAll — „Alle {count} Personen →" (parametrisch)dashboard.recentlyUpdated — „Zuletzt aktualisiert"dashboard.myDrafts — „Meine Entwürfe"dashboard.stat.documents — „Dokumente" / mobil: „Dok."dashboard.stat.persons — „Personen" / mobil: „Pers."dashboard.stat.stories — „Geschichten" / mobil: „Gesch."Exakte Tailwind CSS 4-Klassen und Pixel-Werte für jeden UI-Bereich. Diese Werte gelten für die Implementierung, nicht die skalierten Mockup-Werte.
+ +| Region | +Tailwind-Klassen | +Hinweise | +
|---|---|---|
| Seiten-Canvas | +bg-canvas w-full |
+ Vollbreite Viewport; Farbe: --palette-sand / bg-canvas |
+
| Inhalts-Wrapper | +max-w-7xl mx-auto px-8 py-8 |
+ 1280 px max-width, 32 px padding allseitig | +
| Header-Balken | +bg-white border border-line rounded-sm px-4 py-3 flex items-center gap-4 |
+ Explizit bg-white, nicht bg-surface — weißer Hintergrund ist intentionell (B.1-Entscheidung) |
+
| Header: Gruß-Zeit | +text-[6px] font-bold uppercase tracking-[.8px] text-[#C8B8A0] |
+ Warm-beige, kein Design-Token — kandidiert für --color-greeting-time |
+
| Header: Begrüßungsname | +font-serif text-xl text-brand-navy |
+ Georgia/Tinos; text-xl (20 px real) |
+
| Header: Trennlinie | +w-px self-stretch bg-line flex-shrink-0 |
+ 1 px vertikal; --palette-line = #E8E4DF |
+
| Stat-Zahl | +text-2xl font-black text-brand-navy leading-none block |
+ Numerischer Wert; Block damit Label darunter sitzt | +
| Stat-Label | +text-[11px] font-bold uppercase tracking-[.8px] text-ink-3 block mt-0.5 |
+ Licht: #706C68 (WCAG AA); Tailwind-Token text-ink-3 TBD |
+
| Personen-Grid | +grid grid-cols-4 gap-1.5 |
+ Mobile: grid-cols-2 bei sm: (640 px) |
+
| Personen-Kachel | +bg-surface border border-line rounded-sm p-2.5 flex flex-col items-center text-center gap-1.5 no-underline |
+ bg-surface = --palette-surface; kein Bottom-Accent |
+
| Personen-Avatar | +w-9 h-9 rounded-full flex items-center justify-center font-black text-white text-[9px] shadow-sm flex-shrink-0 |
+ 34 px real ≈ w-9 (36 px) — nächster Tailwind-Step; Avatar-Farbe per Person-Eigenfarbe |
+
| Mint-Pill Badge | +text-[11px] font-bold text-brand-navy bg-[#D4F0EE] px-1.5 py-px rounded-full |
+ Token-Kandidat: --color-mint-pill / bg-mint-soft |
+
| „Alle N Personen →" | +text-xs font-semibold text-[#4A6E8A] no-underline text-right block mt-1 |
+ Direkte Farbe (kein opacity-Trick) — WCAG AA auf bg-canvas |
+
| Content-Card | +bg-surface border border-line rounded-sm overflow-hidden flex flex-col |
+ Gleiche Card-Sprache wie restliche App | +
| Card-Kopfzeile | +flex items-center justify-between px-3 py-1.5 border-b border-line |
+ h3: text-[11px] font-bold uppercase tracking-[.12em] text-ink-3 |
+
| Dok.-Datum | +text-[12px] text-ink-3 whitespace-nowrap flex-shrink-0 |
+ Licht: #706C68 (WCAG AA); nicht #C8C4BE |
+
| Story-Excerpt | +text-xs text-ink-2 leading-relaxed line-clamp-2 |
+ 2 Zeilen max via Tailwind line-clamp-2 |
+
| Story-Meta | +text-[11px] text-ink-3 |
+ Licht: #706C68 (WCAG AA) |
+
| Entwürfe-Card | +bg-surface border border-line border-l-[3px] border-l-brand-mint rounded-sm overflow-hidden |
+ Mint Left-Border als visueller Anker für BLOG_WRITE-Zone | +
| Dark Mode | +dark:bg-surface dark:border-white/8 dark:text-ink (via Tailwind dark:) |
+ Nicht !important-Overrides aus Spec — spec-DK- Klassen sind Annäherungen |
+