← Zurück zum Überblick

Design-System & Brand-Tokens

Farben, Typografie, Komponenten und das Self-Contained-Prinzip — die visuelle DNA jeder generierten Seite

Auf dieser Seite
01Drei Farben, ein System 02Typografie-Stack 03Self-Contained Prinzip 04Komponenten-Bibliothek 05Responsive & Animation
01

Drei Farben, ein System

Die gesamte visuelle Identität basiert auf drei Kernfarben, ergänzt durch semantische Farben für Feedback-Zustände. Jede Farbe hat eine klare Rolle — kein willkürlicher Einsatz, sondern ein durchgängiges System.

Kernfarben

#000099
Tiefenblau
Vertrauen, Autorität. Navigation, Hero-Bereiche, Modul-Nummern, Code-Hintergründe.
#FE8F11
Impuls-Orange
Energie, Aktion. CTAs, Links, Fortschrittsbalken, aktive Zustände, Badges.
#E4DAD4
Warmgrau
Wärme, Ruhe. Borders, Hintergrund-Alternierung, Trennlinien, Scrollbar.

Semantische Farben

#84C041
Success
Richtige Antworten, Erfolgs­meldungen, File-Tree-Dateien
#CC0000
Error
Falsche Antworten, Fehlermeldungen, Blocking-Hinweise
#1195EB
Info
Quiz-Rahmen, Info-Boxen, neutrale Hinweise
02

Typografie-Stack

Drei Schriftfamilien decken alle Anwendungsfälle ab. Jede hat eine klare Aufgabe — kein Mix, keine Überschneidungen. Geladen über Google Fonts, die einzige externe Abhängigkeit.

Bricolage Grotesque — Display
Headings, Modul-Nummern, Display-Text

Überschriften, Karten-Titel, Pyramiden-Labels, Flow-Step-Labels. Gewichte: 400, 600, 700, 800.

--font-display
DM Sans — Body
Fließtext, Beschreibungen, Labels, Navigation

Absatztext, Card-Beschreibungen, Breadcrumbs, Quiz-Optionen, Tooltips. Gewichte: 300–700, inkl. Italic.

--font-body
JetBrains Mono — Code
Code-Blöcke, Badges, technische Labels

File Trees, Inline-Code, Modul-Nummern in der Übersicht, Breadcrumb-Level-Tags, Variable-Namen. Gewichte: 400, 500, 600.

--font-mono

Größen-Skala (--text-*)

xs0.75rem — 12px
sm0.875rem — 14px
base1rem — 16px
lg1.125rem — 18px
xl1.25rem — 20px
2xl1.5rem — 24px
3xl1.875rem — 30px
4xl2.25rem — 36px
5xl3rem — 48px
6xl3.75rem — 60px
// Font-Family CSS-Variablen --font-display: 'Bricolage Grotesque', Georgia, serif; --font-body: 'DM Sans', -apple-system, sans-serif; --font-mono: 'JetBrains Mono', 'Fira Code', monospace; // Einsatz in Komponenten: .module-title { font-family: var(--font-display); } .card-desc { font-family: var(--font-body); } .file-tree { font-family: var(--font-mono); } .card-badge { font-family: var(--font-mono); }

Drei Font-Stacks: Bricolage Grotesque für alles, was Aufmerksamkeit braucht (Headings, Titel). DM Sans für alles, was gelesen wird (Absatztext, Beschreibungen). JetBrains Mono für alles Technische (Code, Badges, Labels). Fallbacks sorgen dafür, dass ohne Google Fonts trotzdem ein sauberes Layout entsteht.

03

Self-Contained Prinzip

Keine externen CSS-Dateien. Alles ist inline in jeder HTML-Datei. Das CSS wird einmalig in Phase 3 definiert und in jede einzelne Datei kopiert. Ergebnis: Dateien funktionieren offline, keine Broken Links, keine CDN-Abhängigkeit (außer Google Fonts).

✅
Offline-fähig
Jede HTML-Datei enthält ihren kompletten Style. Kein Server nötig, kein Build-Prozess, kein Bundler.
🔗
Keine Broken Links
Kein <link rel="stylesheet"> das auf eine fehlende Datei zeigt. Der Style ist immer da.
📦
Portabel
Einzelne Dateien können per E-Mail geteilt, in andere Verzeichnisse kopiert oder offline geöffnet werden.

~200 CSS-Variablen in folgenden Kategorien

18
--color-*
Kern-, semantische und Oberflächenfarben
3
--font-*
Display, Body, Mono Font-Stacks
10
--text-*
Größenskala von xs (0.75rem) bis 6xl (3.75rem)
2
--leading-*
Zeilenhöhen: tight (1.15) und normal (1.6)
12
--space-*
Abstandswerte von 0.25rem bis 5rem
4
--radius-*
Border-Radien: sm, md, lg, full
3
--shadow-*
Schatten: sm, md, lg
5
--ease-*, --duration-*
Timing: fast, normal, slow + Easing + Stagger-Delay
3
--content-width, --nav-height, --radius-full
Layout-Konstanten
04

Komponenten-Bibliothek

Alle visuellen Bausteine folgen der Struktur .module → .module-content → .module-header → .module-body → .screen. Hier die wichtigsten Komponenten im Überblick:

.card + .cards-grid
Karten-Titel
Beschreibungstext mit Details.
badge
.quiz + .quiz-option
✏️ Kurz getestet
Antwort A
Antwort B ✓
.file-tree
// Kommentar
Verzeichnis/
  datei.ts
.term + .term-tooltip
Ein Fachbegriff mit Erklärung
Tooltip-Erklärung des Begriffs
.deep-dive-link
IM DETAIL
Thema vertiefen
→
.viz-flow + .viz-flow-step
📦
Schritt 1
→
✨
Schritt 2
05

Responsive & Animation

Zwei Breakpoints, Scroll-Snap mit proximity (nicht mandatory!) und IntersectionObserver-basierte Einblend-Animationen.

Breakpoints

Desktop > 768px Multi-Column-Grids, volle Flow-Visualisierungen
Tablet ≤ 768px Einzelspalten, vertikale Flows
Mobile ≤ 480px Kompakt, gestapelt
📲
Scroll-Snap
scroll-snap-type: y proximity — sanftes Einrasten, kein erzwungenes Springen. Jedes .module ist ein Snap-Punkt.
proximity
✨
Animate-In
.animate-in + IntersectionObserver. Elemente faden ein mit translateY(20px) → translateY(0).
IntersectionObserver
// Animation Timing --ease-out: cubic-bezier(.16, 1, .3, 1); --duration-fast: 150ms; // Hover, Tooltips --duration-normal:300ms; // Transitions, Karten --duration-slow: 500ms; // Animate-In, Einblendungen --stagger-delay: 120ms; // Verzögerung zwischen Geschwistern // IntersectionObserver Konfiguration rootMargin: '0px 0px -10% 0px' threshold: 0.1 // Stagger-Formel transition-delay: calc(var(--stagger-index) * var(--stagger-delay)); // --stagger-index wird per JS gesetzt (0, 1, 2, ...)

Animation-System: Drei Geschwindigkeitsstufen (150ms für schnelle Hover-Effekte, 300ms für normale Transitions, 500ms für Einblend-Animationen). Die Easing-Kurve cubic-bezier(.16, 1, .3, 1) sorgt für eine natürliche Verzögerung. Stagger-Delays lassen Kinder-Elemente nacheinander erscheinen (120ms Abstand).

✏️ Kurz getestet

Warum wird CSS inline eingebettet statt über ein externes Stylesheet?

Weil externe CSS-Dateien langsamer geladen werden
Damit Dateien komplett eigenständig ohne Abhängigkeiten funktionieren
Weil der Browser Inline-CSS priorisiert
Im Detail Farbraum & Typografie im Detail → Kontrastberechnungen, WCAG-Compliance, variable Schriftgewichte und die vollständige Token-Liste
→
Weitere Vertiefungsseiten für Entwickler
01 Orchestrator 02 Helpfulness-Scoring 03 Pipelines 04 Design-System 05 Navigation 06 Templates 07 Qualitätssicherung