# Plenea Brand Design System

## Markenkern

Plenea macht komplexe Leistungsdaten handhabbar. Die Marke ist ruhig, präzise und menschlich. Sie verbindet vier gleichwertige Perspektiven: Praxen, Athlet:innen, Solo-Selbstständige sowie Vereine und Verbände. Der Markteintritt beginnt bei Praxen, danach folgen Athlet:innen und Solo-Selbstständige.

Leitversprechen: **Leistung, die weiterführt.**

Produktlogik: **Messen → Entscheiden → Begleiten**

## Logo

- Horizontale Wort- und Bildmarke ab 120 px Breite verwenden.
- Bildmarke ab 16 px; unter 640 px in der Navigation ausschließlich die Bildmarke zeigen.
- Schutzraum: mindestens der Durchmesser der inneren Öffnung der Bildmarke.
- Keine Verzerrung, Effekte, Konturen, Verläufe oder fremde Farben.
- Keine Sport- oder Medizin-Klischees wie Läufer, Kreuz oder EKG ergänzen.

Dateien: `/plenea-wordmark.svg` und `/plenea-logomark.svg`.

## Farbe

- Cobalt `#0F4DD5`: Marke, Fokus und Primäraktion.
- Deep Ink `#101116`: Text und dunkle Flächen.
- Mineral `#F6F7F9`: Grundfläche.
- Silver `#D9DDE5`: Regeln und Trennung.
- Erfolg `#059669`, Prüfung `#F59E0B`, Handlung nötig `#E11D48`: ausschließlich semantisch, immer mit Text oder Symbol.

Dark Mode: Hintergrund `#0C1119`, Oberfläche `#121923`, Text `#F4F6FB`, gedämpfter Text `#AAB2BF`, Linie `#303745`.

## Typografie

Manrope trägt Marke und Interface. JetBrains Mono ist Daten, Einheiten, Zeitpunkten und technischen Tokens vorbehalten. Die Wortmarke wird nie aus einer Schrift nachgesetzt.

- Display: 72/68, 720
- Heading: 48/48, 690
- Body: 17/28, 430
- Data: 14/20, 600 Mono

## Layout und UI

- 8-Pixel-Grundraster; bevorzugte Abstände 8, 16, 24, 40, 64, 96 und 128 px.
- Maximalbreite 1536 px, häufige 7/5-Aufteilung.
- Radien: 6 px Controls, 10 px Panels, 28 px mobile Geräte.
- Präzise Regeln verbinden Inhalte. Keine Sammlung schwebender Kacheln.
- Eine Primäraktion pro Entscheidungskontext; Touch-Ziele mindestens 44 px.
- Status nie nur über Farbe vermitteln.
- Zahl, Einheit und Vergleich als feste Informationsgruppe behandeln.
- Reale Produkt-Screens immer vollständig und im Original-Seitenverhältnis zeigen (`object-fit: contain`), nie als dekorativen Ausschnitt.

## Bewegung

- Seitenwechsel: 180 ms reines Einblenden.
- Scroll-Reveals: höchstens 260 ms reines Einblenden.
- Kein Blur, Zoom, Parallax oder großer Versatz für Produkt- und Markenflächen.
- `prefers-reduced-motion` vollständig respektieren.

## UX

Jede Ansicht beantwortet: Wo bin ich, worum geht es und was ist der nächste sichere Schritt? Aktionen benennen ihre Wirkung. Fachliche Unsicherheit bleibt als Prüfung sichtbar. Desktop zeigt Zusammenhänge; Mobile priorisiert eine Aufgabe. Tastaturbedienung, sichtbarer Fokus, ausreichender Kontrast und reduzierte Bewegung sind Pflicht.

## Tonalität

Ruhig, konkret, zugewandt. Wirkung vor Feature, Klartext vor Fachjargon und kein falsches Erfolgsversprechen.

Gut: „Dein Befund ist zur Prüfung bereit.“

Nicht: „Super! Deine magische Analyse ist fertig 🚀“

## Vorlagen und Übergabe

Corporate Vorlagen liegen unter `/brand/templates/`. Maschinenlesbare Tokens stehen in `/brand/plenea-brand-system.json`. Platzhalterinhalte sind vor Veröffentlichung fachlich und rechtlich zu prüfen.