# SupplierPulse — Design System

> **Kanonische Design-System-Referenz** für SupplierPulse (APP-48999).
> Single Source of Truth der Tokens ist **`app/globals.css`** (`:root` + `@theme inline`).
> Dieses Dokument spiegelt diese Werte für Menschen und für Design-Tools
> (z. B. Claude Design `/design-sync`). Bei Abweichung gilt **`globals.css`**.
>
> Ausrichtung: **BMW DCT** (Live-Export dct.bmwgroup.net, 22.05.2026),
> Constitution v1.1 — App-Primary ist **DCT Petrol #037493** (nicht das Logo-Blau).

## 1. Farben (Light Theme)

### Marke / Primary
| Token | Hex | Verwendung |
|---|---|---|
| `--primary` | `#037493` | App-Primary (DCT Petrol) — Primäraktion, Links, aktive Zustände |
| `--primary-dark` | `#035970` | Hover/Pressed auf Primary |
| `--ci-primary-light` | `#A8DFFF` | Petrol-Tint (Active-Tab-BG, PROD-Badge) |
| `--secondary` / `--accent` | `#E0F2FF` | Petrol-Soft (Selected-Item-BG) |
| `--secondary-foreground` | `#035970` | Text auf Petrol-Soft |
| `--ring` | `#037493` | Focus-Ring |

> **Reserviert — NICHT als UI-Farbe:** `#0066B1` (BMW-Roundel-Blau) darf laut
> Constitution v1.1 **ausschließlich im BMW-Logo-SVG** vorkommen, nie in UI.
> `check:hardcoded-colors` blockt es in `*.tsx`/`*.css`.

### Neutrale / Flächen / Text
| Token | Hex | Verwendung |
|---|---|---|
| `--background` / `--card` / `--popover` | `#FFFFFF` | Canvas / Karten / Popover |
| `--foreground` | `#353A41` | Text Primary |
| `--muted-foreground` | `#69707A` | Text Muted |
| `--muted` | `#EFEFEF` | Disabled-BG |
| `--border` / `--input` | `#C1C5CB` | Border Subtle / Input-Rand |
| `--sidebar-border` | `#DCDEE1` | Border Faint |

### Status / Semantik
| Token | Hex | Bedeutung |
|---|---|---|
| `--success` | `#4CAF6A` | OK / Risiko niedrig (Simply Green) |
| `--success-text` | `#1E7C3A` | Success-Text (AA-Kontrast auf hell) |
| `--warning` | `#D48830` | Risiko mittel (Orange Ochre) |
| `--destructive` | `#D93025` | Fehler / destruktiv |
| `--info` | `#037493` | Info (nutzt Primary-Petrol) |

### DCT Status-Palette (Risikomatrix / KPI-Cards)
| Token | Hex | Stufe |
|---|---|---|
| `--status-red-strong` | `#F8BBD0` | Risiko hoch |
| `--status-red-soft` | `#FCE4EC` | Risiko sehr hoch (leichtere Stufe) |
| `--status-yellow` | `#FFE082` | Risiko mittel |
| `--status-grey` | `#D7D8DA` | neutral |
| `--status-green` | `#C8E6C9` | Risiko niedrig / OK |

### Charts
`--chart-1` `#4CAF6A` · `--chart-2` `#037493` (Primary) · `--chart-3` `#FFE082` ·
`--chart-4` `#F8BBD0` · `--chart-5` `#69707A`

> Dark Mode existiert (`.dark` in `globals.css`, Kadi-v2-Erweiterung, KAR-521):
> Primary → `#4DAFC9`, saturiertere Status-Varianten. DCT liefert nur Light.

### Genehmigte Ausnahmen außerhalb der DCT-Palette
Beide Ausnahmen sind key-stabile Darstellungskonstanten für ein einzelnes
Modul, ausschließlich über CSS-Vars konsumiert (nie als lose Hex in `*.tsx`),
mit eigenen Dark-Varianten — siehe CLAUDE.md "BMW Color System" für Details.

| Token-Präfix | Modul | Referenz |
|---|---|---|
| `--qaf-stand-*` / `--qaf-bucket-*` | QAF-Vergleichs-Charts | KAR-840 |
| `--vsm-node-*` / `--vsm-edge*` / `--vsm-grid-*` / `--vsm-connect-preview` | Wertstrom (VSM) Editor | Wertstrom P0, KAR-878 |

## 2. Typografie

| Rolle | Font-Stack |
|---|---|
| Headings | `'BMW Group TN Condensed Pro', system-ui, sans-serif` (`--font-condensed`) |
| Body / UI | `'BMW Group TN Pro', system-ui, -apple-system, sans-serif` (`--font-sans` / `--font-heading`) |
| Mono | `ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace` (`--font-mono`) — Lieferantennummern/Code |

> **BMW-Fonts sind lizenzgebunden:** `.woff2` sind `.gitignore`d und werden nur
> auf operator-managed Hosting ausgeliefert (`scripts/sync-bmw-fonts.sh`).
> Fallback = System-Stack (Inter/system-ui). Design-Tools ohne die Font-Dateien
> müssen mit dem System-Fallback rendern.
> Typ-Skala: bestehende Komponenten / Tailwind-`text-*`-Scale sind maßgeblich
> (kompakt, DCT-Industrial). Keine eigene Skala erfinden.

## 3. Form / Radius / Spacing

- **Radius:** `--radius: 2px` (DCT Industrial-Flat). Skala: `sm/md/lg/xl = 2px`,
  `2xl = 4px`, `3xl = 6px`, `4xl = 8px`. **Keine** großen `rounded-xl`-Radien.
- **Schatten:** DCT ist flach — Schatten sparsam / vermeiden.
- **Spacing:** Tailwind-Default-Scale (4px-Basis).

## 4. Komponenten-Inventar (`components/ui/`, shadcn/Radix)

avatar · badge · breadcrumb · button · card · date-picker-kw · dialog ·
dropdown-menu · field-hint · formula-tooltip · input · label · loading-skeleton ·
sheet · supplier-display · supplier-search · tooltip · undo-banner

Basis: shadcn/ui auf Radix-Primitiven, Tailwind v4, Tokens via CSS-Variablen
(`bg-primary`, `text-muted-foreground`, `border-border`, …). Neue Komponenten
müssen die obigen Tokens nutzen — **keine hartkodierten Hex-Werte** außerhalb der Palette.

## 5. Regeln für Design-Tools / Sync

1. **Nur die Tokens aus diesem Dokument / `globals.css` verwenden.** `check:hardcoded-colors`
   blockt palette-fremde Farben.
2. **`#0066B1` nie als UI-Farbe** (Logo-SVG only).
3. **Petrol #037493 ist die Primäraktion** — nicht Grau, nicht Marketing-Blau.
4. Flach + kompakt (2px-Radius, wenig Schatten, dichte Typo).
5. Ignoriere `lib/customers/bmw/branding/design-system.ts` — **deprecated/ungenutzt**
   (ältere Extraktion mit abweichenden Werten; nicht die SoT).