Hand Drawn
Skizzierte Outlines, Bleistift-Textur, Marginalia.
P0=0 · MA=0 · Comp 22/25 · LH 0.80
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 | 2 hart codierte Farben |
| Token-Lint · Magic Numbers | 44 undokumentierte Werte |
| Token-Hoist · Auto-Promotion | 0 Farben → Token |
| Axe · A11y-Violations | 0 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) | 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.80 (Ziel ≥ 0.90) |
| Lighthouse · Accessibility | 1 (Ziel ≥ 0.95) |
| Lighthouse · Best Practices | 0.96 (Ziel ≥ 0.90) |
| Bundle-Size | 1363 KB |
Vision-Critique-Zitat
Warm off-white bg, hand-drawn ‘sage hier’ on the mid map, and lowercase ‘drei sind heute schon dabei’ headline read distinctly on-brand. The pill-row under the headline (‘buddies live’, ‘cafés offen’, ‘spielplatz trocken’) and avatar row at bottom feel slightly squeezed against the map card.
Farbpalette
bg
paper
fg-primary
fg-secondary
ink
sage-1
sage-2
marker-yellow
marker-coral
marker-rose
muted
Typografie
| Rolle | Wert |
|---|---|
| display | "Caveat", "Patrick Hand", "Comic Neue", cursive |
| display-weight | 600 |
| display-tracking | 0em |
| body | "Patrick Hand", "Caveat", "Comic Neue", cursive |
| body-weight | 400 |
| body-leading | 1.55 |
Spacing
| Step | Wert |
|---|---|
| step-0 | 6px |
| step-1 | 10px |
| step-2 | 14px |
| step-3 | 22px |
| step-4 | 34px |
| step-5 | 52px |
Radius
| Element | Wert |
|---|---|
| uneven-1 | 12px 18px 14px 22px |
| uneven-2 | 20px 8px 24px 12px |
| circle | 50% |
| block | 0px |
Schatten
| Tier | Wert |
|---|---|
| scribble-shadow | 2px 3px 0 rgba(26, 24, 20, 0.65) |
| marker-glow | 0 0 0 6px rgba(240, 213, 107, 0.35) |
| no-shadow | none |
Charakteristische Patterns
- sketchy stroke borders (filter: url(#wobble) or 2-3px hand-drawn SVG)
- marker-pen highlight stripe behind keywords
- dashed underline on links (3,2 dash array)
- doodle accents (arrow, asterisk, star) in margin
- paper-texture background (subtle noise)
Anti-Patterns dieser Direktion
- perfect geometric circles or rectangles
- any sans-serif as display (must be a hand-drawn family)
- drop shadows in the rectangular CSS sense (use offset hard shadow)
- neutral gray as accent (use marker tones)