Sticker Pop
Sticker-Cards, Maskottchen, weiche Rosa- und Himmel-Töne.
P0=0 · MA=0 · Comp 19/25 · LH 0.73
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 | 41 hart codierte Farben |
| Token-Lint · Magic Numbers | 122 undokumentierte Werte |
| Token-Hoist · Auto-Promotion | 31 Farben → Token |
| Axe · A11y-Violations | 1 insgesamt, 0 kritisch |
| ClassA · WCAG-Kontrast | alle Paare bestanden (0 geprüft) |
| ClassA · Touch-Target ≥ 44pt | 0 Verstöße |
| ClassA · Reduced Motion | respektiert |
| Vision Score · Composite (max 25) | 19 (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) | 3 |
| Vision · Mobile Realism (1–5) | 4 |
| Lighthouse · Performance | 0.73 (Ziel ≥ 0.90) |
| Lighthouse · Accessibility | 1 (Ziel ≥ 0.95) |
| Lighthouse · Best Practices | 0.96 (Ziel ≥ 0.90) |
| Bundle-Size | 1117 KB |
Vision-Critique-Zitat
Greeting hero top, weather pill, embedded map mid with pin legend, activity list with quoted status, four-item tab-bar bottom — solid rhythm. Still pastel-pink-uniform; corners all soft-rounded; map card and activity card share identical radius/shadow.
Farbpalette
bg
fg-primary
fg-secondary
accent-pink
accent-mint
accent-lemon
accent-lavender
surface
border
muted
Typografie
| Rolle | Wert |
|---|---|
| display | "Fredoka", "M PLUS Rounded 1c", system-ui, sans-serif |
| display-weight | 600 |
| display-tracking | 0em |
| body | "Nunito", "M PLUS Rounded 1c", system-ui, sans-serif |
| body-weight | 500 |
Spacing
| Step | Wert |
|---|---|
| step-0 | 6px |
| step-1 | 10px |
| step-2 | 14px |
| step-3 | 22px |
| step-4 | 32px |
| step-5 | 48px |
Radius
| Element | Wert |
|---|---|
| soft-1 | 18px |
| soft-2 | 28px |
| blob | 60% 40% 50% 50% / 50% 60% 40% 50% |
| pill | 999px |
Schatten
| Tier | Wert |
|---|---|
| soft-1 | 0 4px 12px rgba(255, 143, 177, 0.18) |
| soft-2 | 0 8px 24px rgba(205, 184, 255, 0.22) |
| ambient | 0 0 0 4px rgba(255, 243, 163, 0.6) |
Charakteristische Patterns
- rounded mascot face on hero (cat, dog, bear)
- sparkle SVG (4-point star) on key actions
- heart bullet on lists
- blob-shaped background masks behind images
- blush-circles on faces (#ffb3c6 at 14% opacity)
Anti-Patterns dieser Direktion
- purple-to-pink gradient on white (the AI default that ruins kawaii)
- sharp 90° corners
- monochrome dark mode
- Inter for display (use Fredoka or M PLUS Rounded)