Paper Editorial
Editorial, papier-warm, Dokument-Anmutung.
P0=0 · MA=0 · Comp 21/25 · LH 0.80
Mockup
Was wurde geprüft? (bf-design Pipeline)
| Gate | Ergebnis |
|---|---|
| Verifier · P0 (Hard-Rules aus Brief) | 0 Verstöße · Profil mobile-app |
| Verifier · P1 (Soft-Rules) | 0 Hinweise |
| Mobile Asserts · P0 (Asset-Contract) | 0 fehlende/falsche Assets |
| Mobile Asserts · P1 | 0 Hinweise |
| Token-Lint · Color Literals | 0 hart codierte Farben |
| Token-Lint · Magic Numbers | 46 undokumentierte Werte |
| Token-Hoist · Auto-Promotion | 0 Farben → Token |
| Axe · A11y-Violations | 0 insgesamt, 0 kritisch |
| ClassA · WCAG-Kontrast | alle Paare bestanden (1 geprüft) |
| ClassA · Touch-Target ≥ 44pt | 0 Verstöße |
| ClassA · Reduced Motion | respektiert |
| Vision Score · Composite (max 25) | 21 (Ziel 22) |
| Vision · Information Density (1–5) | 4 |
| Vision · Visual Hierarchy (1–5) | 4 |
| Vision · Brand Coherence (1–5) | 5 |
| Vision · AI-Slop-Smell (1–5, höher = sauberer) | 4 |
| Vision · Mobile Realism (1–5) | 4 |
| Lighthouse · Performance | 0.80 (Ziel ≥ 0.90) |
| Lighthouse · Accessibility | 1 (Ziel ≥ 0.95) |
| Lighthouse · Best Practices | 0.96 (Ziel ≥ 0.90) |
| Bundle-Size | 1626 KB |
Vision-Critique-Zitat
Serif ‘Heute Nachmittag’ headline + creamy #FAF7F4 background nail the brief. Map card mid-screen now has expand chevron top-right and subtle elevation. Activity pills (im Tierpark, Cappuccino, im Wasser) feel slightly tall vs avatar row; tab-bar bottom is clean but icons read generic.
Farbpalette
bg
surface
fg-primary
fg-secondary
fg-tertiary
border
border-subtle
tag-orange
tag-pink
tag-blue
tag-green
tag-yellow
accent
Typografie
| Rolle | Wert |
|---|---|
| display | "Inter Tight", -apple-system, BlinkMacSystemFont, system-ui, sans-serif |
| display-weight | 600 |
| display-tracking | -0.012em |
| body | -apple-system, BlinkMacSystemFont, "Inter Tight", "Segoe UI", sans-serif |
| body-weight | 400 |
| body-leading | 1.55 |
| serif-emphasis | "Lyon Text", Georgia, serif |
Spacing
| Step | Wert |
|---|---|
| step-0 | 2px |
| step-1 | 6px |
| step-2 | 10px |
| step-3 | 16px |
| step-4 | 24px |
| step-5 | 40px |
Radius
| Element | Wert |
|---|---|
| xs | 3px |
| sm | 5px |
| md | 6px |
| lg | 10px |
Schatten
| Tier | Wert |
|---|---|
| block-hover | rgba(15, 15, 15, 0.05) 0px 0px 0px 1px, rgba(15, 15, 15, 0.1) 0px 3px 6px |
| subtle | 0 0 0 1px #ecebe7 |
Charakteristische Patterns
- emoji on every block-header (consistent: 🌍, 🏠, 🌳, 🤝)
- color-tag pill on metadata (tag-orange, tag-blue etc.)
- /-command hint at empty content slot
- indent guides (2px vertical hairline) for nested lists
- callout block with emoji + tinted bg (#fef9e7)
Anti-Patterns dieser Direktion
- high-saturation accent colors (everything is muted/warm)
- drop shadows beyond the subtle 1px hairline
- rounded-2xl (Notion caps at 10px on largest surfaces)
- centered hero with single CTA — Notion is left-aligned, dense