Functional Grid
Funktionaler Minimalismus, klare Typo, enge Raster.
P0=0 · MA=0 · Comp 22/25 · LH 0.77
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 | 21 hart codierte Farben |
| Token-Lint · Magic Numbers | 94 undokumentierte Werte |
| Token-Hoist · Auto-Promotion | 17 Farben → Token |
| Axe · A11y-Violations | 3 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) | 22 (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) | 5 |
| Vision · Mobile Realism (1–5) | 4 |
| Lighthouse · Performance | 0.77 (Ziel ≥ 0.90) |
| Lighthouse · Accessibility | 0.95 (Ziel ≥ 0.95) |
| Lighthouse · Best Practices | 0.96 (Ziel ≥ 0.90) |
| Bundle-Size | 1580 KB |
Vision-Critique-Zitat
Status header, map widget with ‘Karte öffnen’ affordance mid-screen, and four-row buddy list all visible above the tab-bar. Condensed ‘3 von 8 dabei’ numeral anchors hierarchy; italic quoted status lines add texture. Avatar dots feel slightly muddy at this size.
Farbpalette
bg
surface
fg-primary
fg-secondary
fg-tertiary
border
border-subtle
accent
accent-hover
success
warn
danger
Typografie
| Rolle | Wert |
|---|---|
| display | "Inter Tight", -apple-system, BlinkMacSystemFont, system-ui, sans-serif |
| display-weight | 600 |
| display-tracking | -0.018em |
| body | -apple-system, BlinkMacSystemFont, "Inter Tight", system-ui, sans-serif |
| body-weight | 400 |
| mono | "Berkeley Mono", "JetBrains Mono", ui-monospace, monospace |
Spacing
| Step | Wert |
|---|---|
| step-0 | 2px |
| step-1 | 4px |
| step-2 | 8px |
| step-3 | 12px |
| step-4 | 16px |
| step-5 | 24px |
| step-6 | 32px |
Radius
| Element | Wert |
|---|---|
| xs | 4px |
| sm | 6px |
| md | 8px |
| lg | 12px |
| pill | 999px |
Schatten
| Tier | Wert |
|---|---|
| border-sharp | inset 0 0 0 1px #e6e7ec |
| card | 0 0 0 1px #eef0f3, 0 1px 2px rgba(15, 16, 17, 0.04) |
| popover | 0 8px 24px rgba(15, 16, 17, 0.08), 0 0 0 1px #e6e7ec |
Charakteristische Patterns
- single-line hairline divider between every list row
- compact tab-strip with active 2px underline (accent)
- dense 12px font for metadata, 14px for primary body
- no decorative graphics — only icons, text, hairlines
- command-K hint in top-right (mono font)
Anti-Patterns dieser Direktion
- drop shadows beyond hairline-borders + 1px shadow
- any color outside the 11-token palette above
- rounded-2xl (12px is the cap)
- decorative gradients of any kind
- Inter (use Inter Tight)