Warm Discovery
Foto-getriebene Discovery, weiche Cards, Rating-Chips.
P0=0 · MA=0 · Comp 21/25 · LH 0.83
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 | 3 hart codierte Farben |
| Token-Lint · Magic Numbers | 61 undokumentierte Werte |
| Token-Hoist · Auto-Promotion | 2 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.83 (Ziel ≥ 0.90) |
| Lighthouse · Accessibility | 1 (Ziel ≥ 0.95) |
| Lighthouse · Best Practices | 0.96 (Ziel ≥ 0.90) |
| Bundle-Size | 946 KB |
Vision-Critique-Zitat
Strong yellow header with serif-italic ‘Heute, Sophie.’ anchors the top, mid map card with legend chips reads well, ‘Heute live’ avatar row mid-screen and ‘Spots in der Nähe’ photo cards bottom give 4 dense regions above the tab-bar. Avatar circles feel slightly generic.
Farbpalette
bg
fg-primary
fg-secondary
accent-1
accent-2
accent-3
accent-4
surface
border
muted
Typografie
| Rolle | Wert |
|---|---|
| display | "Sohne", "Manrope", "Inter Tight", system-ui, sans-serif |
| display-weight | 600 |
| display-tracking | -0.018em |
| body | "Inter", system-ui, sans-serif |
| body-weight | 400 |
| mono | "JetBrains Mono", monospace |
Spacing
| Step | Wert |
|---|---|
| step-0 | 4px |
| step-1 | 8px |
| step-2 | 16px |
| step-3 | 24px |
| step-4 | 32px |
| step-5 | 48px |
Radius
| Element | Wert |
|---|---|
| photo | 12px |
| card | 16px |
| pill | 999px |
| tight | 8px |
Schatten
| Tier | Wert |
|---|---|
| card-resting | 0 6px 16px rgba(0, 0, 0, 0.06) |
| card-elevated | 0 16px 32px -8px rgba(0, 0, 0, 0.10) |
| border-only | inset 0 0 0 1px #dddddd |
Charakteristische Patterns
- POI cover photo dominates each card (16:11 aspect, 200 px tall, full-bleed)
- tiny meta row under each photo: distance · category · live status
- rating-style chip (star + numeric) on POI cards
- horizontal scroll hint (peek of next card cut off at right edge)
- Sophie’s avatar + greeting in compact header strip, not a hero band
Anti-Patterns dieser Direktion
- icon-only POI tiles without photography
- hard borders or 0 px radius
- high-saturation accent stripes
- monospace as primary type
- card-in-card-in-card nesting