# GEV Design System

Das GEV Design System ist die gemeinsame UI/UX-Grundlage für interne Werkzeuge des Gemeinsamen Einsatzverbands. Es übersetzt die bestehende GEV-Farbwelt in eine moderne, belastbare Oberfläche für zeitkritische und informationsdichte Arbeit.

Der Look ist ernsthaft, ruhig und präzise. „Militärisch“ bedeutet hier: klare Hierarchie, belastbare Zustände, kontrollierte Dichte, eindeutige Aktionen und wenig visuelles Rauschen. Das System verwendet weder Tarnfarben noch militärischen Jargon.

## Sofort ansehen

```bash
cd design-system
npm run dev
```

Danach `http://127.0.0.1:4173/showcase/` öffnen.

Die Referenz ist als Mehrseiten-Anwendung aufgebaut:

- `/showcase/` — Lageübersicht
- `/showcase/arbeitsmuster.html` — Blocker, Verlauf und Quellen
- `/showcase/komponenten.html` — Aktionen, Zustände und Formulare; [Formulargruppen](showcase/komponenten.html#form-groups) mit innenliegendem Titel
- `/showcase/tokens.html` — Farbe, Typografie und technische Tokens
- `/showcase/leitlinien.html` — Prinzipien, Tonalität und Einführung

Der Entwicklungsserver bindet standardmäßig an alle Netzwerkschnittstellen und
gibt beim Start zusätzlich die erreichbaren LAN-Adressen aus. Damit kann die
Referenzansicht beispielsweise auf einem Tablet oder einem zweiten Rechner im
selben Netzwerk geöffnet werden.

Nur lokale Zugriffe zulassen:

```bash
GEV_DESIGN_HOST=127.0.0.1 npm run dev
```

Alle Angaben in der Referenzansicht sind ausdrücklich als Demo gekennzeichnet und keine reale Einsatzlage.

## Firebase-Web-App

Die öffentliche Client-Konfiguration der registrierten Firebase-Web-App
`de-gev-im-drv-design` liegt in
`showcase/firebase-config.js`. Das Firebase-Hosting-Ziel heißt `design`.

Das Design-System lädt selbst kein Firebase-SDK und startet Analytics nicht
automatisch. Eine konsumierende Anwendung darf Analytics erst nach der
erforderlichen Einwilligung initialisieren und keine operativen oder
personenbezogenen Inhalte als Analytics-Parameter übertragen.

## In einer App verwenden

Gesamtes System laden:

```css
@import "@gev/design-system";
```

Oder aus diesem Repository:

```css
@import "../../design-system/src/index.css";
```

Ein einfacher Einstieg:

```html
<main class="gev-page">
  <header class="gev-page-header">
    <div>
      <p class="gev-eyebrow">Lageprüfung · Stand 14:30 UTC</p>
      <h1 class="gev-page-title">Musterlage 04</h1>
    </div>
    <span class="gev-status gev-status--warning">Freigabe offen</span>
  </header>

  <section class="gev-alert gev-alert--warning" role="status">
    <div class="gev-alert__marker" aria-hidden="true">!</div>
    <div>
      <strong>Entscheidung erforderlich</strong>
      <p>Externe Kommunikation bleibt bis zur menschlichen Freigabe gesperrt.</p>
    </div>
  </section>
</main>
```

## Enthalten

- versionierte Design-Tokens als CSS und JSON;
- helle und dunkle Betriebsansicht;
- Grundtypografie, Fokus-, Bewegungs- und Druckregeln;
- Buttons, Formulare, Status, Hinweise, Karten, Tabellen, Tabs, Dialoge, Toasts und Ladezustände;
- App-Shell, Lagekopf, Kennzahlen, Quellenzeilen, Zeitstrahl, Checklisten und Entscheidungsleiste;
- UX-Regeln für zeitkritische Informationen und Freigaben;
- Content- und Tonalitätsleitfaden;
- Barrierefreiheits- und Einführungschecklisten;
- eine responsive, interaktive Referenzansicht;
- eine automatisierte Prüfung der Paketstruktur, Token-Synchronität und zentraler Farbkontraste.

## Ordnerstruktur

```text
design-system/
├── src/
│   ├── tokens.css
│   ├── reset.css
│   ├── base.css
│   ├── components.css
│   ├── patterns.css
│   └── index.css
├── tokens/
│   └── tokens.json
├── docs/
│   ├── 01-website-analyse.md
│   ├── 02-grundlagen.md
│   ├── 03-komponenten.md
│   ├── 04-ux-muster.md
│   ├── 05-tonalitaet.md
│   ├── 06-barrierefreiheit.md
│   └── 07-einfuehrung.md
├── showcase/
│   ├── index.html
│   ├── arbeitsmuster.html
│   ├── komponenten.html
│   ├── tokens.html
│   ├── leitlinien.html
│   ├── showcase.css
│   └── app.js
└── scripts/
    ├── serve.mjs
    └── validate.mjs
```

## Verbindliche Leitplanken

1. Status wird nie nur durch Farbe vermittelt.
2. Operative Angaben zeigen Quelle, Stand und Vertrauensgrad.
3. Verfügbarkeit, Angebot, Annahme, Beauftragung und Entsendung bleiben sprachlich und visuell getrennt.
4. Destruktive oder externe Aktionen verlangen eine ausdrückliche Bestätigung.
5. Unbekannte Werte heißen `NICHT BESTÄTIGT` oder `UNBEKANNT`; Leerstellen werden nicht interpretiert.
6. Rot ist knapp: Marke, primäre Entscheidung und kritischer Zustand – nie dekoratives Flächenrauschen.
7. Komponenten werden nicht app-spezifisch überschrieben. Neue Varianten werden zuerst hier dokumentiert.

## Pflege

Änderungen folgen semantischer Versionierung:

- Patch: Fehlerbehebung ohne visuelle oder technische Vertragsänderung.
- Minor: neue additive Komponente oder Variante.
- Major: Token-Umbenennung, entfernte Klasse oder geänderte Bedeutung.

Vor einer Änderung:

```bash
npm test
```

Neue Muster müssen in der Referenzansicht, in den Dokumenten und – soweit möglich – in der automatisierten Prüfung erscheinen.