---
title: Brand-Spec Exner (abgeleitet aus EXNER_Brand-Color.png + Logo)
date: 2026-08-06
status: locked
---

# Brand-Spec — Bau- und Kunstglaserei Exner

**Ein Satz:** Ruhiges, helles Handwerks-System auf viel Weißraum, geführt von einem präzisen Petrol, mit Aqua als Fläche, Dunkelgrau als Text/Footer und dem Logo-Gelb ausschließlich als feinem Grafik-Marker.

## Tokens (OKLch, 1:1 aus den Brand-Hexwerten abgeleitet)

| Token | OKLch | Quelle | Einsatz |
|---|---|---|---|
| `--bg` | `oklch(0.995 0.004 202)` | Neutral/Weiß | Grundfläche, viel Weißraum |
| `--surface` | `oklch(0.961 0.024 202)` | Aqua `#A0D5D9`, aufgehellt | Sektionsbänder (Kontakt, Karten) |
| `--fg` | `oklch(0.3446 0.004 202)` | Dunkelgrau `#393939` | Fließtext, Footer-/Dark-Flächen |
| `--muted` | `oklch(0.500 0.015 202)` | aus `#393939` abgeleitet | Sekundärtext (≥ 4,5:1 auf Weiß) |
| `--border` | `oklch(0.908 0.012 202)` | Hellgrau `#CCCCCC`, Richtung Aqua | Linien, Card-Borders |
| `--accent` | `oklch(0.5717 0.0941 201.4)` | Petrol `#11888F` | Trust-Band, Icons, große Zahlen, Grafik |

### Abgeleitete Zustände (Kontrast-geprüft)
| Token | OKLch | Kontrast | Einsatz |
|---|---|---|---|
| `--accent-cta` | `oklch(0.55 0.092 201)` | 4,6:1 zu Weiß | Button-Bg + Link-Text auf Weiß |
| `--accent-strong` | `oklch(0.49 0.085 201)` | 5,9:1 zu Weiß | Hover auf Buttons/Links |
| `--surface-strong` | `oklch(0.8377 0.0549 202)` | 7,2:1 zu `--fg` | Original-Aqua, Akzentflächen |
| `--mark` | `oklch(0.8972 0.1892 104.4)` | — | **Nur Grafik** (Hero-Marker, Logo) — nie Text, nie Fläche hinter Text |
| `--danger` | `oklch(0.577 0.215 27)` | ≥ 4,5:1 | Formular-Fehler |

## Typografie
- **Display:** `"DM Serif Display", Georgia, "Times New Roman", serif` — nur Schnitt 400 (kein Faux-Bold), Headlines, große Trust-Zahlen. Wärme, Erfahrung, handwerkliche Persönlichkeit.
- **Body/UI:** `"Manrope", "Segoe UI", system-ui, sans-serif` — 400–800, Fließtext, Navigation, Buttons, Labels, Formulare.
- **Mono:** `ui-monospace, SFMono-Regular, Menlo, monospace` — nur für kleine Labels/Nummern, sparsam.
- Regeln: Eyebrows ALL-CAPS mit `0.09em`; Display-Serifen mit leicht negativem Tracking (`-0.005em` bis `-0.01em`), Zeilenabstand `1.14–1.15`; Body `1.6`, max. `65ch`; Headlines bewusst kleiner und luftiger, mit klaren Zeilenumbrüchen.

## Beobachtete Marken-Regeln
1. **Petrol führt, Gelb zeichnet nur.** Gelb aus dem Logo erscheint maximal als feiner Marker-Strich (z. B. unter einem Hero-Wort) — niemals als Text- oder Hintergrundfarbe (Kontrast).
2. **Weißraum ist das Material.** Wie Glas: hell, klar, großzügige Abstände; Sektionen atmen (≥ 96 px Padding desktop).
3. **Bilder sind der Beweis.** Große, helle, echte Werkstatt-/Projektfotos mit ruhigem Zuschnitt; keine Stock-Ästhetik, keine schweren Overlays — Badges nur als frostige Eck-Karten.
4. **Zwei Pfade, eine Hierarchie.** Kunden-CTA (solid Petrol) und Karriere-CTA (Outline Dunkelgrau) sind gleichwertig sichtbar, aber klar unterscheidbar; pro Viewport nur eine Solid-Fläche.
5. **Handwerk ohne Kitsch.** Keine Deko-Icons neben Headlines, keine Verläufe, keine Stockfoto-Fröhlichkeit — Vertrauen entsteht über Fakten (1973, 2. Generation, 100 % eigene Montage).