Active Dense
Performance-getrieben, oranger Akzent, datendichte Cards.
P0=0 · MA=0 · Comp 20/25 · LH 0.85
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 | 9 hart codierte Farben |
| Token-Lint · Magic Numbers | 55 undokumentierte Werte |
| Token-Hoist · Auto-Promotion | 8 Farben → Token |
| Axe · A11y-Violations | 1 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) | 20 (Ziel 22) |
| Vision · Information Density (1–5) | 4 |
| Vision · Visual Hierarchy (1–5) | 4 |
| Vision · Brand Coherence (1–5) | 4 |
| Vision · AI-Slop-Smell (1–5, höher = sauberer) | 4 |
| Vision · Mobile Realism (1–5) | 4 |
| Lighthouse · Performance | 0.85 (Ziel ≥ 0.90) |
| Lighthouse · Accessibility | 1 (Ziel ≥ 0.95) |
| Lighthouse · Best Practices | 0.96 (Ziel ≥ 0.90) |
| Bundle-Size | 1326 KB |
Vision-Critique-Zitat
Strong editorial stack: yellow header, condensed-mono metadata triplet (04/08/600m) mid-screen, map card with route chips, BUDDYS HEUTE row and SPOTS peek above tab-bar. Map chrome (locate FAB, scale) reads native, but the three metric tiles share identical weight and the buddy chips repeat the same orange LIVE pill — slight pattern-ai feel.
Farbpalette
bg
fg-primary
fg-secondary
accent-1
accent-2
accent-3
accent-4
surface
border
muted
Typografie
| Rolle | Wert |
|---|---|
| display | "Manrope", "Inter Tight", system-ui, sans-serif |
| display-weight | 800 |
| display-tracking | -0.025em |
| body | "Inter", system-ui, sans-serif |
| body-weight | 500 |
| mono | "IBM Plex Mono", "JetBrains Mono", monospace |
Spacing
| Step | Wert |
|---|---|
| step-0 | 4px |
| step-1 | 8px |
| step-2 | 12px |
| step-3 | 16px |
| step-4 | 24px |
| step-5 | 36px |
Radius
| Element | Wert |
|---|---|
| card | 8px |
| tile | 6px |
| pill | 999px |
| metric | 4px |
Schatten
| Tier | Wert |
|---|---|
| tile-1 | 0 1px 2px rgba(13, 31, 45, 0.06), 0 0 0 1px rgba(13, 31, 45, 0.04) |
| elevated | 0 4px 12px -4px rgba(252, 76, 2, 0.18) |
| none | none |
Charakteristische Patterns
- metric tile row (3-4 small cards) with big numeric value + tiny mono caption
- horizontal divider lines as section separators (1 px, border color)
- orange (accent-1) reserved for LIVE / active states ONLY — never decorative
- tiny inline distance/duration chips with mono numerals next to buddy names
- compact map with bold colored route polyline overlay
Anti-Patterns dieser Direktion
- blob shapes or organic curves
- soft pastel colors
- drop-shadows with blur > 6 px
- decorative illustrations
- rounded-full corners on cards (>16 px)