Illustrations
12 SVG-Motive — "Stille Stärke". Implementierung in @fragjulia/ui/illustrations.
Das fragJulia-Illustrations-Set besteht aus 12 handgezeichneten SVG-Motiven, die V1's generische Hospital-Icons ersetzen. Leitidee: "Stille Stärke" — ruhig, klar, respektvoll.
Technische Vorgaben
Alle 12 Illustrationen teilen:
viewBox="0 0 140 140"- Strokes: 2–2.5px (Hauptlinien), 1–1.5px (Details)
- Nur drei Farben:
#6B7F5E(sage, Hauptstriche)#A8B89A(sage-light, Details)#D4C4A8(sand, warme Akzente)
- Keine schwarzen Linien, keine Verläufe, keine Filter
- Transparente Hintergründe
stroke-linecap="round",stroke-linejoin="round"- React-Komponenten mit
size?: numberProp (Default: 140)
Das Set
| # | Name | Motiv | Einsatz |
|---|---|---|---|
| 1 | Verbundenheit | Zwei Silhouetten, geteilter Boden | Community Hero, Community Cards |
| 2 | Wachstum | Hände, die einen Keimling halten | Nachsorge, Rezepte "Nachsorge" |
| 3 | Wissen | Offenes Buch mit klaren Linien | Lexikon Hero, Knowledge-Card |
| 4 | Dialog | Sprechblase mit ruhigen Wellen | Chat, "Frag Julia" |
| 5 | Geborgenheit | Gesteppte Decke, geschichtete Wellen | Home Hero, 404, Loading |
| 6 | Fuersorge | Schale mit Dampf und Löffel | Rezepte Hero |
| 7 | Vertrauen | Zwei Hände, die sich zuwenden | Breastfriend Hero |
| 8 | Sicherheit | Geschützter Kreis mit Haken / Schloss | Datenschutz Hero |
| 9 | Regelmaessigkeit | Kalender mit markiertem Datum | Live-Formate |
| 10 | Erfahrung | Papier und Stift | Magazin Hero |
| 11 | Staerke | Geometrisch facettiertes Herz | Mentale Gesundheit, Alltag |
| 12 | Horizont | Sonnenaufgang über ruhiger Landschaft | CTA-Sektionen |
Implementierung
Live-Implementierung: packages/ui/src/illustrations/index.tsx — 12 React-Komponenten.
import { Geborgenheit, Wachstum, Dialog } from '@fragjulia/ui/illustrations';
<Geborgenheit size={160} className="opacity-90" />
<Wachstum size={48} />
<Dialog size={32} />Die SVG-Quelltexte jedes Motivs stehen vollständig in DesignGUIDE/fragjulia-design-brief-v3.md §6.1 (Zeilen 756–974) — einschließlich der exakten Koordinaten jedes Pfades.
Platzierung pro Seite
| Seite | Illustration(en) |
|---|---|
| Home Hero | #5 Geborgenheit (dekoratives Pattern-Overlay) |
| Home Features | #4 Dialog, #1 Verbundenheit, #3 Wissen, #10 Erfahrung (jeweils 32px inline) |
| Home Alltag | #2 Wachstum, #6 Fuersorge, #11 Staerke (48px) |
| Chat | #4 Dialog (Empty State) |
| Community Kategorien | pro Kategorie eine Illustration (32–40px, --sage opacity 0.5) |
| Lexikon Hero | #3 Wissen |
| Magazin Hero | #10 Erfahrung |
| Rezepte Phasen | #6, #12, #2, #12 (48px) |
| Breastfriend Hero | #7 Vertrauen |
| Datenschutz Hero | #8 Sicherheit |
| Wer-Abschluss | #12 Horizont (120px, zentriert) |
| Live-Formate | #9 Regelmaessigkeit |
| 404 / Loading | #5 Geborgenheit |
Was Illustrationen NICHT sein dürfen
- Keine Emojis (🏃♀️ 🥗 🧘)
- Keine Stockphoto-Menschen
- Keine generischen Hospital / Medical-Icons
- Keine Cartoon- oder Disney-artigen Figuren
- Keine komplexen Verläufe
- Keine Schwarz-Weiß-Linienkunst ohne Farbe aus der Palette
- Keine 3D-Renderings
- Keine Grafiken, die aus dem Pool generischer Asset-Libraries stammen
Wer neue Illustrationen hinzufügt, muss diese Regeln einhalten und das Asset in packages/ui/src/illustrations/index.tsx als benannter Export registrieren.
Quelle: DesignGUIDE/fragjulia-design-brief-v3.md §6 (Assets: Illustrationen, Icons, OG-Images, Avatare). SVG-Quelltexte in §6.1, Platzierung in §6.2, Anti-Patterns in §6.6.