Token-System Nordwerk Steuerberatung

Abgeleitet aus Primär #1d3557, Sekundär #e07a2f und der Systemschrift. Alle Farbwerte in OKLCH, alle Komponenten greifen nur auf diese Variablen zu.

1. Farbskalen

Zehn Stufen je Farbe. Die Stufe mit Markierung ist die unveränderte Markenfarbe.

2. Semantische Tokens

Werte für den aktuell gewählten Modus. Umschalter oben rechts wechselt zwischen hell und dunkel.

Kontrastprüfung WCAG AA

Alle Paare Text auf Hintergrund in beiden Modi, berechnet aus den OKLCH-Werten. Fließtext braucht mindestens 4,5:1, große Schrift und Bedienelemente 3:1. Markierte Zeilen bekommen einen Ersatzvorschlag.

Modus	Vordergrund	Hintergrund	Probe	Kontrast	AA Fließtext	Ersatz

3. Typografie

Sieben Stufen, fluid zwischen 360 und 1280 px Fensterbreite.

4. Abstände, Radien, Elevation

Abstände (4-px-Raster)

Radien

sm · 4 px

md · 8 px

lg · 12 px

xl · 20 px

Elevation

Ruhe--shadow-rest · Karten, Header

Hover-Lift--shadow-hover · Karte unter dem Zeiger

Dropdown--shadow-dropdown · Menüs, Popover

Dialog--shadow-dialog · Modale Fenster

5. Motion

Klick auf „Abspielen“ startet die Bewegung. Unter „Bewegung reduzieren“ im Betriebssystem setzen sich alle Dauern auf 0,01 ms, die Kästen springen dann direkt ans Ziel.

6. z-index-Skala

Inhalt · 0

Sticky-Header · 100

Dropdown · 200

Off-Canvas · 300

Dialog · 400

Toast · 500

CSS zum Kopieren

Genau der Token-Block, den diese Seite nutzt.