Globale Farben

Die vier Systemfarben des Projekts. Verwende sie konsistent für Hintergründe, Text, Trennlinien und Akzente, um ein einheitliches visuelles Bild über alle Oberflächen zu erhalten.

System Farben

04 / Tokens

Primär 01 · Base

#000000

hex#000000 rgb0, 0, 0 alpha100 % roleText, Linien, Logo

Sekundäre 02 · Surface

#7086A0 · 24 %

hex#7086A03D rgb112, 134, 160 alpha24 % roleFlächen, Karten

Text 03 · Warm

#FF8F00 · 70 %

hex#FF8F00B3 rgb255, 143, 0 alpha70 % roleSekundärer Text

Accent 04 · Signal

#FF7C02

hex#FF7C02 rgb255, 124, 2 alpha100 % roleButtons, Links, CTA

Verwendung

Token Map

Token	Wert	CSS-Variable	Typische Anwendung
Primär	#000000	--color-primar	Haupttext, Überschriften, Trennlinien, Logo
Sekundäre	#7086A03D	--color-sekundar	Kartenhintergrund, hervorgehobene Sektionen, Hover-States
Text	#FF8F00B3	--color-text	Sekundärer Text, Hinweise, dezente Highlights
Accent	#FF7C02	--color-accent	Buttons, aktive Links, Call-to-Actions, Fokus-Ringe

In Anwendung

03 · Beispiele

Primär · Hintergrund

Starker Kontrast für Hero-Bereiche.

Sekundäre · Fläche

Ruhige, kühle Tönung für Karten und Sektionen.

Sekundärer Hilfstext in der Text-Farbe — gut lesbar, dennoch zurückhaltend.

Accent · Aktion