1. Tokens & Farb-System

Alle Farben, Abstände und Typografie-Werte werden über CSS Custom Properties gesteuert.

Farb-Tokens

Token	Swatch	Beschreibung
`--xpulse-bg`		Seitenhintergrund – größte Fläche der App
`--xpulse-surface`		Karten, Panels, Boxen
`--xpulse-surface-strong`		Hover, Active und hervorgehobene Flächen
`--xpulse-text`		Primärer Text
`--xpulse-text-dim`		Sekundärer Text, Meta-Infos
`--xpulse-border`		Linien, Trennungen, Feldränder
`--xpulse-accent`		Primäre Aktionsfarbe – Buttons, Fokus, aktive Navigation
`--xpulse-accent2`		Sekundäre Akzentfarbe – positive States, Hinweise
`--xpulse-warning`		Warnungen und Pending-Zustände
`--xpulse-danger`		Fehler und destruktive Aktionen

Layout & Größen-Tokens

Token	Standardwert	Beschreibung
`--xpulse-content-width`	`1100px`	Maximale Inhaltsbreite der App-Shell
`--xpulse-sidebar-width`	`260px`	Breite von Sidebars und TOC-Navigation
`--xpulse-gap-layout`	`24px`	Standard-Abstand zwischen Layout-Elementen
`--xpulse-font-size-display`	`clamp(34px, 5vw, 56px)`	H1 und Display-Texte
`--xpulse-font-size-lead`	`19px`	Lead-Absätze und Einleitungen
`--xpulse-button-radius`	`14px`	Form der Buttons
`--xpulse-button-padding-x`	`18px`	Seitlicher Abstand in Buttons
`--xpulse-radius-md`	`2px`	Standard-Radius für Elemente

Noise Overlay

Das charakteristische xPulse-Rauschen erscheint nur im Dark Mode.

1 html[data-theme="dark"] body::before { /* grain texture */ }

Tokens überschreiben

In deinem eigenen Theme reicht es, die benötigten Variablen neu zu setzen:

1 html[data-theme="mein-theme"] {
2   --xpulse-bg: #0a0a1f;
3   --xpulse-accent: #00ffcc;
4   --xpulse-accent2: #ff00aa;
5   --xpulse-warning: #d6a43a;
6   --xpulse-danger: #d46a7a;
7 }

Tipp: Immer zuerst Tokens überschreiben, bevor du neue Klassen schreibst. So bleiben alle Komponenten automatisch konsistent.

1	html[data-theme="mein-theme"] {
2	--xpulse-bg: #0a0a1f;
3	--xpulse-accent: #00ffcc;
4	--xpulse-accent2: #ff00aa;
5	--xpulse-warning: #d6a43a;
6	--xpulse-danger: #d46a7a;
7	}