# Design System

vergabe-teilnahme nutzt das `whynot-design`-System (gitea
`whynot/whynot-design`) als visuelle Basis.

## Phase 1 — Tokens + CSS (aktiv, ab WP-0017)

- Vendored CSS unter `static/src/vendor/whynot-design/`.
- Sync via `make sync-whynot-design` (Skript: `scripts/sync-whynot-design.sh`).
- Gepinnter Commit steht in `static/src/vendor/whynot-design/.whynot-design-ref`.
- `static/src/main.css` importiert die Vendor-CSS und mappt die whynot-Tokens
  in den Tailwind-`@theme`-Block: `bg-ink`, `bg-paper`, `text-ink-3`,
  `border-line` usw. sind als Utility-Klassen verfügbar.
- Legacy `bg-brand-*` / `text-brand-*` Utilities sind weiterhin nutzbar; sie
  sind als Aliasse auf die ink/paper-Skala gemappt, damit Page-Templates
  nicht in einer großen Migration mitgezogen werden müssen.

## Phase 2 — Komponenten (offen)

Adoption der whynot-Komponenten erfolgt sobald upstream Lit Web Components
und die fehlenden Atome (`Card`, `Modal`, `Input`, `Table`, `Toast`)
ausliefert. Eigener Workplan wird zu diesem Zeitpunkt angelegt.

## Lokale Abweichungen vom whynot-System

Dokumentiert direkt in `static/src/main.css`:

- **`.btn-danger`** nutzt ein Off-Spec-Rot (`#B22222`, `--danger`-Variable).
  whynot definiert aktuell keine destruktive Farbe; vergabe-Nutzung erfordert
  sie für Löschen-Aktionen. Wird zurückgebaut, sobald upstream eine
  kanonische Lösung definiert.

## Visuelle Hausregeln aus whynot übernommen

- Mostly Black & White; gelber Akzent (`--hi: #FFE14A`) nur als Highlighter /
  Stamp / S4-Signal — nie als Button-Fill oder Hero-Hintergrund.
- 1px-Hairlines (`var(--line)` / `border-line`), großzügiger Weißraum,
  Monospace-Eyebrow-Labels.
- Keine Schatten auf Cards; nur Popovers bekommen einen weichen 4–12px-Shadow.
- 0–4px Border-Radius für Cards/Sheets; 8px nur für große Modale; Pill nur
  für Tag-Capsules.
- IBM Plex Sans / Mono / Serif via Google-Fonts (`@import url(...)` in der
  Vendor-CSS). Build-Container und Browser brauchen Internet-Zugriff zu
  Google Fonts. Air-gapped Deployment würde self-hosting erfordern.

## Hintergrund

- Strategie-Analyse + Komponenten-Lücken-Inventar:
  `history/2026-05-23-whynot-design-cross-framework-analysis.md`.
- Adoption-Workplan: `workplans/WP-0017-whynot-design-tokens.md`.