# barox Design System

Portable Design-Grundlage für alle barox-Projekte – abgeleitet aus dem
CD-Manual (Dez. 2024) und dem Look von **barox.ch**.

## Verwendung in einem neuen Projekt

1. `barox-design-system.css` ins Projekt kopieren (z. B. nach
   `public/assets/css/`).
2. **Vor** dem projektspezifischen CSS einbinden:
   ```html
   <link rel="stylesheet" href="/assets/css/barox-design-system.css">
   <link rel="stylesheet" href="/assets/css/app.css">
   ```
3. Die Helvetica-Now-Schriftdateien (`.otf`) unter `/assets/fonts/` ablegen.
   Fehlen sie, greift automatisch der System-Fallback (Helvetica/Arial).
4. Im projektspezifischen CSS ausschliesslich über die Tokens (CSS-Variablen)
   arbeiten – keine Hex-Werte hart codieren.

## Design-Tokens

| Token | Wert | Verwendung |
|---|---|---|
| `--navy` | `#002D4E` | Nachtblau – Primärfarbe, Header-Topbar, Text |
| `--amber` | `#F7A600` | Bernstein – Akzent, CTA, Karten-Oberkante |
| `--amber-dark` | `#d18d00` | Bernstein-Text auf hellem Grund |
| `--navy-80…10` | Abstufungen | Flächen, Linien, Hover |
| `--ink` `--grey` | `#1a1f24` `#5a6470` | Fliess-/Sekundärtext |
| `--bg` `--white` `--line` | | Hintergrund, Flächen, Trennlinien |
| `--success` `--warning` `--error` | | Semantik (getrennt vom Akzent) |
| `--font-display` | Helvetica Now Display | Titel (h1–h3) |
| `--font-text` | Helvetica Now Text | Fliesstext |

## Kernmuster

- **Zweistufiger Header** (`.site-header` → `.topbar` + `.mainbar`): dunkle
  Utility-Leiste oben, weisse Hauptleiste mit **farbigem** Logo und
  Nachtblau-Navigation; aktiver/hover Link mit Bernstein-Unterstrich; CTA
  (`.nav-cta`) als Bernstein-Button.
- **Hero** (`.hero`): Nachtblau-Verlaufsband mit dezentem Chevron-Motiv,
  weisser Titel, Bernstein-CTA.
- **Feature-Karten** (`.card` / `.card-navy`): weisse Karte mit Bernstein-
  Oberkante, Icon-Disc (`.card-icon`), Hover-Lift; `.card-navy` als gefüllte
  Nachtblau-Variante.
- **Buttons**: `.btn-primary` (Bernstein), `.btn-secondary` (Nachtblau-Outline).
- **Logo**: farbige Variante (Nachtblau-Wortmarke + Bernstein-Chevron) auf
  hellem Grund; weisse Variante nur auf Nachtblau (Footer).

## Grundprinzipien

- Neutraltöne sind bewusst leicht ins Nachtblau gezogen (kein Neutralgrau).
- Bernstein ist **Akzent**, nicht Fläche: sparsam einsetzen (CTA, Kanten, Hover).
- Semantikfarben (grün/gelb/rot) sind vom Akzent getrennt.
- Barrierefreiheit: sichtbarer Fokus (`:focus-visible`), ausreichender Kontrast.