Level 1 — Vertiefung

Design-System & CSS-Architektur

Energiekonzern-Palette, Typografie-Hierarchie, Komponenten-Bibliothek und Zuganglichkeits-Regeln.

Auf dieser Seite

Energiekonzern-Palette — Tiefenblau, Impuls-Orange, Warmgrau
Typografie — Bricolage Grotesque, DM Sans, JetBrains Mono
Komponenten — Module, Deep-Dive-Links, Breadcrumbs
Responsive & Zuganglichkeit — Breakpoints, WCAG AA

Energiekonzern-Palette

Tiefenblau, Impuls-Orange, Warmgrau und alle Varianten

Das Farbsystem basiert auf drei Primarfarben, die an die visuelle Identitat eines Energiekonzerns angelehnt sind: Tiefenblau#000099 — Vertrauen, Tiefe, Professionalitat. Verwendet fur Navigation, Hero-Sektionen und als dezente Modulnummer (12% Opacity). fur Autoritat und Struktur, Impuls-Orange#FE8F11 — Energie, Aktion, Aufmerksamkeit. Verwendet fur CTAs, Fortschrittsbalken, aktive Zustande und Deep-Dive-Links. fur Energie und Aktion, Warmgrau#E4DAD4 — Neutralitat, Lesbarkeit. Verwendet fur Trennlinien, alternierenden Hintergrund und dezente Borders. fur neutrale Flachen.

Farbpalette

#000099

Tiefenblau

--color-deep-blue

#FE8F11

Impuls-Orange

--color-impulse-orange

#E4DAD4

Warmgrau

--color-warm-gray

#F3EFEB

Warmgrau BG

--color-warm-gray-bg

#000066

Code-BG

--color-code-bg

#1A1A2E

Text

--color-text

/* CSS Custom Properties — Farbpalette */
:root {
  --color-deep-blue:     #000099;  /* Nav, Hero, Nummern */
  --color-impulse-orange: #FE8F11;  /* CTAs, Akzente */
  --color-warm-gray:     #E4DAD4;  /* Borders, Trennlinien */
  --color-warm-gray-bg:  #F3EFEB;  /* Alternating BG */
  --color-code-bg:       #000066;  /* Code-Blocke */
  --color-text:          #1A1A2E;  /* Fliesstext */
  --color-text-muted:    #6B6560;  /* Subtitles */
}

Alle Farben werden als CSS Custom Properties definiert. Das erlaubt konsistente Verwendung im gesamten Design und ermoglicht theoretisch Theme-Switching (z.B. Dark Mode) durch einfaches Uberschreiben der Variablen.

Typografie

Bricolage Grotesque, DM Sans, JetBrains Mono, Grossenskala

Die Typografie-Hierarchie nutzt drei Google Fonts mit klarer Rollenzuweisung: Bricolage Grotesque fur Display-Headlines (Modulnummern, Seitentitel, H1-H3), DM Sans als Body-Schrift fur Fliesstext und Navigation, und JetBrains Mono fur Code-Blocke und technische Labels.

Typografie-Preview

Bricolage Grotesque 800 — Display / H1

Learning Skill v2.0

Bricolage Grotesque 700 — H2 / Module Title

Skill-Architektur im Detail

DM Sans 400 — Body

Der Skill verwandelt beliebige Codebases in interaktive Multi-Level-HTML-Kurse mit bis zu vier Tiefenebenen.

JetBrains Mono 400 — Code

HS = Komplexitat(0-3) + Relevanz(0-3)

/* Typografie-Skala (clamp fur Responsive) */
.hero h1    { font-size: clamp(2rem, 5vw, 3.2rem); }
.module-title { font-size: clamp(1.4rem, 3vw, 2rem); }
.module-number { font-size: clamp(4rem, 10vw, 7rem); opacity: .12; }
body         { font-size: 1rem; line-height: 1.6; }
code         { font-size: .8rem; line-height: 1.6; }

Komponenten

Module, Deep-Dive-Links, Breadcrumbs, Level-Indicator, Tooltips

Das Design-System definiert wiederverwendbare Komponenten, die in allen generierten Kursen eingesetzt werden. Jede Komponente hat klare Zustandigkeiten und CSS-Klassen.

Komponente: Level-Indicator (4 Dots)

4 Dots: L0 (done), L1 (active), L2 (leer), L3 (leer). Entwickler haben max. 4 Dots, Anwender 3, Entscheider 2.

Komponente: Deep-Dive-Link

Thema vertiefen

Orange-Button mit Pfeil-Icon. Nur sichtbar, wenn ein tieferes Level fur das Thema existiert (HS uber Schwelle).

Komponente: Tooltip

Hover uber diesen BegriffTooltips erscheinen bei Hover und erklaren Fachbegriffe inline. Sie nutzen position:fixed und JavaScript fur korrekte Positionierung. fur eine Erklarung.

Responsive & Zuganglichkeit

Breakpoints, WCAG AA, Kontrast-Regeln

Das Design ist Mobile-First mit einem Haupt-Breakpoint bei 640px. Auf kleinen Bildschirmen werden Module-Header vertikal gestapelt, Pipeline-Flows horizontal scrollbar, und die Schriftgrossen uber clamp() automatisch angepasst.

Alle Farbkombinationen erfullen WCAG AAWeb Content Accessibility Guidelines Level AA. Erfordert ein Kontrastverhaltnis von mindestens 4.5:1 fur normalen Text und 3:1 fur grossen Text. fur Kontrast: Weisser Text auf Tiefenblau (#000099) hat ein Verhaltnis von 10.5:1, dunkelblauer Text (#1A1A2E) auf weissem Hintergrund 16.1:1.

/* Responsive Breakpoint */
@media (max-width: 640px) {
  .module-header {
    flex-direction: column;
    gap: .5rem;
  }
  .module-number { font-size: 3.5rem; }
  .hero h1       { font-size: 1.8rem; }
  .pipeline-flow { flex-wrap: nowrap; }  /* horizontal scroll */
}

/* Kontrastverhaltnisse */
/* #FFFFFF auf #000099 → 10.5:1 (AAA) */
/* #1A1A2E auf #FFFFFF → 16.1:1 (AAA) */
/* #FE8F11 auf #000066 →  4.7:1 (AA)  */