Playful Primitive
Postmoderne Primitive, harte Offset-Schatten, Asymmetrie.
P0=0 · MA=0 · Comp 22/25 · LH 0.79
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 | 59 undokumentierte Werte |
| Token-Hoist · Auto-Promotion | 3 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) | 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.79 (Ziel ≥ 0.90) |
| Lighthouse · Accessibility | 1 (Ziel ≥ 0.95) |
| Lighthouse · Best Practices | 0.92 (Ziel ≥ 0.90) |
| Bundle-Size | 1066 KB |
Vision-Critique-Zitat
Hot-yellow ground with black ‘dazukommen’ pill top-left and teal settings tile top-right reads instantly on-brand; mid map card has a ‘locate me’ FAB and pin cluster, and the LIVE JETZT buddy row at bottom-mid uses chunky offset shadows. Tab-bar is grounded but icon stroke weights vary.
Farbpalette
bg
fg-primary
fg-secondary
accent-1
accent-2
accent-3
accent-4
surface
border
muted
Typografie
| Rolle | Wert |
|---|---|
| display | "Bungee", "Archivo Black", system-ui, sans-serif |
| display-weight | 700 |
| display-tracking | -0.02em |
| body | "Space Grotesk", "Inter", system-ui, sans-serif |
| body-weight | 400 |
| mono | "JetBrains Mono", monospace |
Spacing
| Step | Wert |
|---|---|
| step-0 | 4px |
| step-1 | 8px |
| step-2 | 12px |
| step-3 | 20px |
| step-4 | 32px |
| step-5 | 52px |
Radius
| Element | Wert |
|---|---|
| asymmetric-1 | 20px 4px 14px 28px |
| asymmetric-2 | 8px 24px 6px 18px |
| pill | 999px |
| block | 0px |
Schatten
| Tier | Wert |
|---|---|
| hard-1 | 4px 4px 0 #0f0e10 |
| hard-2 | 8px 8px 0 #f24c3d |
| hard-3 | 0 0 0 2px #0f0e10, 6px 6px 0 #ffd23f |
Charakteristische Patterns
- wonky squiggle (sine path, 2-3 wavelengths, 4px stroke)
- checkerboard cell strip (8x8 black/white)
- polka dots (20px diameter, accent-3 on bg)
- asymmetric quad-color block
- thick black outline on every primary surface
Anti-Patterns dieser Direktion
- uniform rounded-12px corners on every surface
- neutral grayscale palette
- soft drop-shadows (use hard offset shadows)
- Inter or Roboto for display