Wie diese Seite gemacht ist

Gestaltung & Machart

KI-Depesche trägt ein eigenes Designsystem im Atomic-Age-/Depesche-Stil — bewusst weg vom „blau-glatten“ KI-Look. Hier liegt es offen: die Farb-Tokens, die selbst gehostete Typografie, die Form- und Schatten-Sprache, die Komponenten, das Barrierefreiheits-Versprechen und die technische Machart darunter.

Alle Tokens reagieren live — schalte oben rechts auf Dunkel, und die Kacheln ziehen mit.

Farbpalette

Deutsche Token-Namen, eine Lavendel-/Veilchen-Basis mit Minze-, Pfirsich-, Himmel- und Rosé-Akzenten. Flächen- und Texttöne sind adaptiv (sie kippen im Dunkelmodus); die Akzent-Farben bleiben weitgehend stabil. Der Hex-Wert gilt fürs Hell-Theme.

  • Lavendel adaptiv--papier#eae4f8Haupt-Hintergrund
  • Creme adaptiv--flaeche#fffdf7Karten- & Knopf-Fläche
  • Tinten-Violett adaptiv--tinte#33265fText & dunkle Linien
  • Veilchen --signal#6647cfPrimärakzent — CTA, Marke, „neu“
  • Minze --atom#9fe2c5Kühler Begleitakzent
  • Pfirsich --messing#ffc59bWarmer Akzent & Deko
  • Himmelblau --himmel#a5d8f6Zusatzakzent
  • Rosé --rose#f4a2b6Postkarte & Marke
  • Stempel-Rot --stempel#d94f6b„belegt“-Stempel
  • Aubergine --nacht#271b4dDunkle Bänder — Hero, Footer

Typografie

Drei selbst gehostete Familien (latin-Subset, @font-face in styles.css, im <head> vorgeladen) — kein Google-Fonts-Aufruf, passend zur CSP 'self'.

  • Aa Gg 0123 & KI-Depesche

    Fredoka--displayDisplay — Titel & Marke

  • Aa Gg 0123 & KI-Depesche

    Rubik--bodyFließtext & UI

  • Aa Gg 0123 & KI-Depesche

    DM Mono--monoCode, Labels, Kennzahlen

Form & Schatten

Die Signatur: weiche Karten-Schatten für Tiefe und ein harter, versetzter Schatten ohne Weichzeichnung fürs Atomic-Age-Gefühl (Druck/Telegramm). Dazu eine kleine Radius-Skala und Tinten-Rahmen.

Weich--schatten
Weich-tief--schatten-tief
Hart versetztbox-shadow: 6px 6px 0
Pille--radius-pille

Komponenten

Die wiederkehrenden Bausteine — alle aus denselben Tokens.

Knöpfe
Primär ✦MinzePfirsich
Kicker, Pille & Stempel
VorzeileneuOpen Weightbelegt
Karte
Modell

Claude Opus 4.8

Harter Rahmen, weicher Schatten, leichte Hover-Drehung — die Grund-Karte für Katalog und Listen.

Laufband

Barrierefreiheit — verbindlich

Barrierefreiheit ist kein Nachgedanke, sondern Teil des Systems. Was hier gilt:

  • Bewegung respektieren.prefers-reduced-motion: reduce schaltet alle Animationen und View-Transitions ab.
  • Farbe nie allein. Status tragen immer Glyph + Text, nicht nur einen Farbton (Verfügbarkeits-Badges, Tenor-Marken).
  • Sichtbarer Fokus. Tastatur-Fokus bekommt einen deutlichen Ring; jede interaktive Fläche ist per Tastatur erreichbar.
  • Struktur & Sprung. Skip-Link zum Inhalt, saubere Überschriften-Hierarchie, Dekor-Glyphen sind aria-hidden.
  • Kontrast. Text-/Akzenttöne sind in beiden Themes auf WCAG-Lesbarkeit ausgelegt; Akzent-Textfarben kippen im Dunkelmodus eigens.

Technische Machart

Ein statisch vorgerendertes (SSG) Portal ohne Backend — schnell, robust, datensparsam.

Framework
Angular 22, standalone & zoneless (nur Signals, kein zone.js)
Auslieferung
Per Route vorgerendertes HTML (SSG) + PWA / Service Worker
Schrift
Selbst gehostet (Fredoka, Rubik, DM Mono), latin-Subset, vorgeladen
Sicherheit
CSP 'self' — keine externen Skripte, Fonts oder CDNs
Privatsphäre
Keine Cookies, kein Tracking, keine Analytics
Transfer
Brotli- & gzip-vorkomprimiert, immutable-Caching

Mehr zur redaktionellen Arbeitsweise unter Methodik, zur Datenverarbeitung im Datenschutz.

← Zur Startseite