GeoGraSim — Style-Guide (Admin)

🎨 Bildstil 🌿 Bild-Farbpalette 🧩 UI-Farbtokens 📐 Layout & Spacing 🔤 Typografie 🖼️ Bildformate 📱 iPad-Patterns 🗣️ Sprache

Style-Guide

Verbindliche Stil-Referenz für alle GeoGraSim-Module. Klick auf Farbfelder oder „Kopieren" überträgt den Wert in die Zwischenablage. Diese Seite ist die Single-Source-of-Truth — wenn du etwas änderst, musst du es hier auch aktualisieren.

DALL-E / Bildgenerierung

Offizieller Prompt-Block

Verbatim verwenden, NICHT umformulieren. Bei jedem Bild diesen Block voranstellen, danach nur den Szenen-Teil ergänzen.

Flat Scandinavian illustration, wide panoramic landscape filling the entire 16:9 frame edge-to-edge, painted style with clean vector shapes, dark forest green (#1f4b37) and sage green (#4a7c4e) tones, yellow-mustard (#e8c547) accents, beige (#e8e4d8) buildings and valleys, white highlights. No text, no watermark, no logos, no borders, no frame.

Eckdaten

Feld	Wert
Modell	`dall-e-3`
Splash-Auflösung	1792 × 1024 (16:9 panoramisch)
Glossar-Bilder	1792 × 1024, standard quality
Avatar-Bilder	1024 × 1024, kreisrund maskiert via CSS
Format	PNG
API-Key	`OPENAI_API_KEY` in `App/.env.local` (nicht im Git)

Tabu

keine Schrift im Bild keine Logos keine Wasserzeichen keine Rahmen / Borders

Single-Source-of-Truth

Lauffähiger Referenz-Generator: App/sims/logistik/scripts/generate-splash-images.sh (Variable PROMPT_BASE). Bei Pipeline-Fragen dort als Vorlage abschauen.

Why

Konsistenz über alle Module. Die Sims stehen auf der Schülerseite nebeneinander; wenn ein Modul aus dem Stil ausbricht, fällt es sofort auf. Gilt nicht nur für Splashes, sondern auch für Spielfeld-Hintergründe, Sprites, Marker-Icons, Bewertungs-Visuals.

Bild-Farbpalette (verbindlich für DALL-E + Sprites + SVGs)

Klick auf eine Karte kopiert den Hex-Wert.

Forest green#1f4b37

Sage green#4a7c4e

Yellow-mustard#e8c547

Beige#e8e4d8

Weiß-Highlights#ffffff

UI-Farbtokens (CSS-Variablen aus design-system.css)

Diese Tokens nutzen alle Plattform-UIs (Cockpits, Admin, Wrapper, Modale). In Sims als var(--ggs-fjord) referenzieren.

Akzent (Fjord)

--ggs-fjord#4a7c8a

--ggs-fjord-dark#1f4e5a

--ggs-fjord-light#dae8ec

Erfolg (Moss)

--ggs-moss#5a8a5e

--ggs-moss-dark#3a6b3e

--ggs-moss-light#dcead0

Warnung & Fehler

--ggs-orange / warning#e8833a

--ggs-coral / danger#c85c4a

--ggs-coral-light#f0d0ca

Neutral & Sand

--ggs-bg#f5f2eb

--ggs-bg-dark#e8e4d8

--ggs-sand#e8d5b5

--ggs-sand-dark#c4a97a

--ggs-border#e0ddd4

Text

--ggs-text#2a2a2a

--ggs-text-muted#8a8a8a

--ggs-text-light#b0b0b0

Komplette CSS-Variable als Block

--ggs-fjord:        #4a7c8a;
--ggs-fjord-dark:   #1f4e5a;
--ggs-fjord-light:  #dae8ec;
--ggs-moss:         #5a8a5e;
--ggs-moss-dark:    #3a6b3e;
--ggs-moss-light:   #dcead0;
--ggs-sand:         #e8d5b5;
--ggs-sand-dark:    #c4a97a;
--ggs-coral:        #c85c4a;
--ggs-coral-light:  #f0d0ca;
--ggs-orange:       #e8833a;
--ggs-bg:           #f5f2eb;
--ggs-bg-dark:      #e8e4d8;
--ggs-white:        #ffffff;
--ggs-text:         #2a2a2a;
--ggs-text-muted:   #8a8a8a;
--ggs-text-light:   #b0b0b0;
--ggs-border:       #e0ddd4;
--ggs-success:      #5a8a5e;
--ggs-warning:      #e8833a;
--ggs-danger:       #c85c4a;
--ggs-info:         #4a7c8a;

Layout & Spacing

Token	Wert	Verwendung
`--ggs-gap-xs`	4 px	Inline-Abstände, Pill-Padding
`--ggs-gap-sm`	8 px	Button-Innenabstand, Form-Felder
`--ggs-gap-md`	16 px	Card-Innenabstand, Standard-Layout
`--ggs-gap-lg`	24 px	Sektion-Abstand
`--ggs-gap-xl`	32 px	Hero-Bereiche
`--ggs-radius-sm`	6 px	Pills, kleine Buttons
`--ggs-radius-md`	12 px	Karten, Modale
`--ggs-radius-lg`	16 px	Hero-Cards, große Modale
`--ggs-radius-pill`	999 px	Pills, Avatar-Kreise
`--ggs-shadow-sm`	`0 1px 3px rgba(0,0,0,.08)`	Karten
`--ggs-shadow-md`	`0 2px 8px rgba(0,0,0,.12)`	Modale, schwebende Layers
`--ggs-shadow-lg`	`0 4px 16px rgba(0,0,0,.16)`	Tooltips, Spectator-Banner

Typografie

Token	Wert
`--ggs-font`	`'Inter', system-ui, -apple-system, sans-serif`
`--ggs-font-mono`	`'JetBrains Mono', 'Fira Code', monospace`

Größenrichtlinien

0.62 rem — Card-Header (uppercase, letter-spacing .05em)
0.7 rem — Hilfstexte, Subtitles
0.78 rem — Body-Text in Karten
0.85 rem — Modul-Namen, Tabs
0.95 rem — H3 / Section-Titel
1.15 rem — H2 / Page-Titel

Bildformate & Pfade

Typ	Maße	Pfad
Modul-Card-Image (Cockpit)	≈ 800 × 450 (16:9)	`App/assets/img/sim-NN-<slug>.png`
Glossar-Bild	1792 × 1024	`App/assets/img/glossar/<slug>.png`
Glossar-SVG (Schemata)	vektor	`App/assets/img/glossar/<slug>-schema.svg`
Splash (Sim-Intro)	1792 × 1024	`App/sims/<slug>/assets/splash-*.png`
Avatar (User)	1024 × 1024	`App/assets/img/avatars/avatar-<slug>.png`
Logo (SVG)	vektor	`App/assets/img/geograsim_t.svg`

Avatar-Slugs (30 Stück, 3 Gruppen)

Geo-Welt: pilotin · pilot · kartografin · geologe · meteorologin · stadtplaner · forscherin · forscher · taucherin · astronaut
Cool & lustig: coole-girl · coole-boy · lustige-girl · lustige-boy · nerd-girl · sportlich-boy · kuenstlerin · musiker · gaertnerin · abenteurer
Tier-Begleiter: fuchs-explorer · eule-prof · baer-foerster · pinguin-polar · affe-tropen · delfin-meer · adler-pilot · schildkroete-w · katze-stadt · biene-natur

iPad-Patterns (Hauptzielgerät: iPad Landscape 1180 × 820)

Touch-Ziele ≥ 36 px Höhe, idealerweise 44 px für primäre Aktionen
Kein Hover-Kleber — alle Interaktionen müssen ohne Hover funktionieren
Modale nutzen height: 100dvh + safe-area-inset-bottom
Sticky Aktions-Buttons unten im Modal — nicht außerhalb scrollen lassen
Float-✕ oben rechts bei Modalen, damit „Schließen" immer erreichbar ist
Layout breit statt hoch — Badges horizontal, 2-Spalten-Grids wo möglich
viewport-fit=cover + 100dvh für Vollbild-Sims

Sprache (Lernarbeit-Lexikon)

Niemals „spielen / Spiel / Spieler*in" verwenden. GeoGraSim ist Lernarbeit nach Wygotski, kein Spiel.

Statt	Verwende
spielen	arbeiten mit · bearbeiten
Spiel	Simulation · Modul
Spieler*in	Bearbeiterin · Schülerin
Spielrunde	Durchgang
Game Over	Durchgang beendet

Ausnahme: in Code-Variablen (state.gameOver, player_progress) ist „game/player" als technischer Begriff unkritisch — Hauptsache an der UI nicht sichtbar.