Willkommen an Bord der Hoppetosse!
Dieser Leitfaden hilft dabei, das visuelle Erscheinungsbild unserer Kita einheitlich und professionell zu gestalten. Hier findest du alle wichtigen Informationen zu Farben, Schriften und Gestaltungselementen – einfach erklärt und leicht umsetzbar.
Unser Piratenschiff-Thema
Inspiriert von Astrid Lindgrens Geschichten gestalten wir alles warm, einladend und abenteuerlich. Unsere Farben und Formen sollen Kinder und Eltern gleichermaßen ansprechen und Vertrauen schaffen.
🎨 Unsere Farben
Jede Farbe hat ihre eigene Bedeutung und ihren Einsatzbereich. Verwende sie bewusst, um die richtige Stimmung zu erzeugen.
Hauptfarben
Hoppetosse-Gelb
#FED520
Verwendung:
- • Primäre Buttons (CTA)
Abenteuer-Orange
#E55B24
Verwendung:
- • Links Hover-Effekte
- • Sekundäre Button-Ränder
Meer-Türkis
#50918A
Verwendung:
- • Hover-Effekt Primary Button
- • Externe Links
Alarm-Rot
#CA161C
Verwendung:
- • Akzente
Schiefer-Blau
#4A586D
Verwendung:
- • Akzente
Ozean-Blau
#98BBE5
Verwendung:
- • Akzente
Neutrale Farben
Creme
#F9F4E8
Haupthintergrund
Weiß
#FAF9F5
Akzente
Grau
#3D3D3A
Haupttext
Schwarz
#1F1E1D
Starke Kontraste
Spezialfarben
Rand-Farbe
rgba(31,30,29,0.2)
Für subtile Ränder und Trennlinien
Transparenzen
📝 Unsere Schriften
Acme - Für Überschriften
Willkommen bei der Hoppetosse!
Unser Alltag
Hauptüberschriften, Seitentitel, wichtige Hervorhebungen.
Download FontPoppins - Für Text
Untertitel (Semibold)
Normaler Fließtext. Gut lesbar und professionell.
Alle Fließtexte, Untertitel, Beschreibungen, Navigation.
Download FontComing Soon - Für Zitate & Kapitel
"Hier darf Kindheit noch so sein wie in den Geschichten von Astrid Lindgren."
Einsatz: Zitate, Kapitel-/Abschnitts-Kennzeichnungen und verspielte Akzente.
sonnig, lebhaft, mutig, naturverbunden, verträumt und einzigartig.
🏴☠️ Unsere Logos
Wortmarke – Farbvarianten (SVG)
Alle Wortmarken liegen als skalierbare SVGs vor. Verwende die Variante passend zum Hintergrundkontrast.
Beispiele: Farb-Kombinationen (PNG)
Praxisbeispiele für Kombinationen aus Hintergrundfarben und Wortmarke. Verwende diese als Inspiration für Social Posts, Plakate oder Website-Banner.
Bildmarke (SVG)
Die Bildmarke (Schiff) dient als kompaktes Icon, Favicon oder Social-Profilbild. Sie funktioniert besonders gut in kleinen Größen. Achte auf ausreichenden Kontrast zum Hintergrund und genügend Freiraum (mind. halbe Höhe der Bildmarke) rundherum.
Bild + Wortmarke (SVG + AI)
Die kombinierte Variante ist das Standardlogo für Dokumente, Plakate und die Website. Verwende sie, wenn genügend Platz vorhanden ist. Empfohlene Mindestbreite: 180 px. Auf hellen Hintergründen die bunte/teal Version, auf dunklen Hintergründen die weiße Wortmarke einsetzen.
📋 Karten
Standard Karte
Creme Hintergrund mit abgerundeten Ecken und sanftem Rand.
Hover-Effekt: Vergrößerung + Schatten
Weiße Karte
Alternative für mehr Kontrast oder bei vielen Karten.
Gleicher Hover-Effekt
🖼️ Bilder
Rechteckige Bilder
4:3
Für Hero-Bereiche und große Darstellungen. Nutze die 4 zu 3 Maske.
Quadratische Bilder
1:1
Für Teamfotos und Profilbilder. Nutze die 1 zu 1 Maske.
📝 Prompts für Bildgenerierung
1. Modell anlernen (einmalig)
Modell: Open AI - ChatGPT 5: chatgpt.com
Prompt: Ich gebe dir nun einige Bilder im Stil von Astrid Lindgren. Deine Aufgabe ist es diesen Stil zu analysieren damit du ihn anschließend erzeugen kannst.
Uploads: 5-10 Bilder im Stil von Astrid Lindgren hochladen z.B. die Bildersammlung im Brandguide
2. Breite Bilder erstellen
Prompt: Erstelle ein Bild. 16:9 Landscape Format. Illustration von Kindern, die draußen auf einer Wiese spielen. Einige rennen lachend, andere sitzen im Kreis und singen. Im Hintergrund: Bäume, Blumen, eine kleine Picknickdecke. Stimmung: lebendig, frei, naturverbunden. Im Astrid Lindgren Kinderbuchstil. Wichtig: Nutze NIEMALS Pippi-Langstrumpf als Figur da dies zu Copy Right Verletzungen führen kann!
3. Profilbilder Mensch
Prompt: Erstelle ein quadratisches Profilbild im Format 1:1 von einem Kindergarten-Erzieher (männliche Person), der in die Kamera schaut. Nur die obere Körperhälfte soll zu sehen sein. Verwende exakt denselben Kunststil und verändere nicht das Gesicht des Tieres. Verwende dieselben schwarzen Punktaugen wie im Original.
Upload: Optional kannst du hier ein Foto einer Person hochladen und den Prompt anpassen z.B. Nutze dafür die Person aus dem Foto im Anhang
4. Gruppenbild Tiere
Hinweis: Erstelle zuerst das Gruppenbild
Prompt: Drei kleine Gruppen von Kindern als Tiere dargestellt: neugierige Mäuse (2–3 Jahre), verspielte Bären (3–5 Jahre), kluge Füchse (Vorschulkinder). Alle sitzen fröhlich zusammen in einer Fantasiewelt (Wiese, Garten). Illustration im Kinderbuchstil, farbenfroh, charmant, inspiriert von Astrid Lindgren.
5. Profilbilder Tier
Prompt: Erstelle ein quadratisches Profilbild (1:1) des Fuchses, der direkt in die Kamera schaut. Nur die obere Körperhälfte. Verwende exakt denselben Kunststil und verändere das Gesicht des Tieres nicht. Nutze dieselben schwarzen Punktaugen wie im Original.
Upload: Gruppenbild Tiere
Bildersammlung
Alle verfügbaren Fotos aus dem Ordner /images/. Klicke
auf „Download“ für die Originaldatei.
