Zum Hauptinhalt
GEV Design System / Tokens Demo

Visuelle DNA

Tokens

CSS Custom Properties JSON-Quelle Zwei Themes
JSON öffnen CSS öffnen
Semantische Tokens zuerst

Anwendungen verwenden `--gev-color-brand` oder `--gev-status-warning`, nicht direkt `--gev-red-600`.

Herkunft

Marke und neutrale Flächen

GEV Rot#a92331
Navigation#171b1e
Arbeitsgrund#f1f0ec
Arbeitsfläche#ffffff

Fachliche Bedeutung

Statusfarben

Bestätigt#146b46
Prüfung#945700
Blockiert#b4232d
Information#246784

Informationshierarchie

Typografie

36 / 45

Lageübersicht

22 / 28

Entscheidungsgrundlage

16 / 25

Fließtext bleibt ruhig, lesbar und konkret.

12 / Mono

30.07.2026 · 14:30 UTC

Präzise statt dekorativ

Systemprinzip

044-Pixel-Raster
01Primäre Aktion
44Pixel Mindestziel
AAKontrastziel

Direkte Verwendung

CSS-Beispiel

.lagekarte {
  background: var(--gev-color-surface);
  color: var(--gev-color-text);
  border: 1px solid var(--gev-color-border);
  border-radius: var(--gev-radius-lg);
  padding: var(--gev-space-5);
}