Pulse v2.5.3

Design-System · Live im Browser

Pulse. Ein System, das den Takt vorgibt.

Pulse bündelt Farben, Typografie und Komponenten für datenintensive Produkte. Entworfen wurde dark-first, gesteuert wird alles über Design-Tokens. Alles auf dieser Seite ist echt: klicken, kopieren, umschalten.

  • 75dokumentierte Tokens
  • 31Komponenten
  • 2Themes (Dark / Light)
  • 0externe Requests
Changelog
  • 2.5.3 · 09.07.2026 · Sortierpfeile der Tabelle setzten sich nach einem Kategoriewechsel nicht zurück. Behoben.
  • 2.5.1 · 24.06.2026 · Chip-Kontrast im Light-Theme.
  • 2.5.0 · 28.05.2026 · Sechs neue Komponenten, darunter Tabelle, Stepper und der Theme-Editor.

01 · Fundament

Tokens

75 dokumentierte Design-Tokens: Farb-Primitives, semantische Rollen, Spacing, Radien und Schatten. Ein Klick auf eine Zeile kopiert den Token-Namen in die Zwischenablage.

Farb-Primitives (33)

Semantische Tokens (25)

Semantische Tokens wechseln ihren Wert mit dem Theme. Die Swatches oben zeigen immer den aktuell aktiven Wert.

Spacing-Skala (8)

Radius-Specimens (5)

Schatten-Specimens (4)

02 · Stimme

Typografie

Neun Stufen auf Basis des System-Font-Stacks, ganz ohne Webfont: nichts lädt nach, nichts springt beim Rendern. Jede Stufe lässt sich als fertiges CSS kopieren.

display2.75rem / 1.1 / 700

Schnelle Systeme, klare Signale

heading-12.25rem / 1.15 / 700

Komponenten, die mitdenken

heading-21.75rem / 1.2 / 650

Vom Token bis zum Produkt

heading-31.375rem / 1.3 / 600

Ein Takt für alle Teams

heading-41.125rem / 1.4 / 600

Abschnitte, Karten, Dialoge

body1rem / 1.55 / 400

Fließtext trägt die Hauptlast jeder Oberfläche. Pulse setzt auf 16 Pixel Grundgröße, großzügige Zeilenhöhe und maximal 62 Zeichen pro Zeile, damit es auf jedem Display lesbar bleibt.

small0.875rem / 1.5 / 400

Sekundärtexte, Hilfetexte und Metadaten: eine Stufe leiser, nie unleserlich.

caption0.75rem / 1.4 / 600 / caps

Eyebrow · Label · Status

code0.875rem / 1.6 / mono

const theme = localStorage.getItem('pulse-theme');

03 · Aktion

Buttons

Vier Varianten in drei Größen, dazu fünf Zustände. Hover und Fokus sind in der Matrix eingefroren dargestellt, jeder Button reagiert aber auch live.

Zustands-Matrix

Variante Default Hover Fokus Deaktiviert Loading
primary
secondary
ghost
destructive

Loading-Buttons sind mit aria-disabled markiert; bei reduzierter Bewegung wird der Spinner zum statischen Punkt.

Größen

Playground

Variante
Größe
Optionen
CSS-Schnipsel

04 · Eingabe

Formulare

Alle Eingabeelemente mit sichtbarem Label, klaren Zuständen und Live-Validierung am E-Mail-Feld. Fehlermeldungen landen in einer aria-live-Region.

Standardzustand mit Platzhalter.

So sieht :focus-visible aus.

Bitte eine vollständige Adresse angeben.

Adresse bestätigt.

Nur lesbar, der Wert wird verwaltet.

Natives Select, per Token eingefärbt.

40 %

Range-Slider mit Live-Ausgabe.

Benachrichtigungen
Plan
Automatische Updates

Switch auf Basis einer nativen Checkbox.

Slider

40 %

Pfeiltasten ±1, Bild-Tasten ±10, Pos1/Ende für Min/Max.

Fokuszustand (eingefroren)
Deaktiviert

Tag-Input

Design-Tokens Dark-Mode

Enter fügt hinzu, ⌫ im leeren Feld entfernt den letzten Tag. Maximal 8 Tags.

05 · Baukasten

Komponenten

Karten, Badges, Tabs, Akkordeon, Stepper & Co., alle aus denselben Tokens gebaut und alle funktionsfähig. Zusammen mit Buttons, Formularen, Daten und Feedback sind es 31 Komponenten.

Card

Beta

Realtime-Dashboard

Metriken im Sekundentakt, gebaut aus vier Pulse-Kernkomponenten und 14 Tokens.

Badges & Avatare

Standard Beta Stabil Veraltet Breaking Neu in 2.5

Tastaturkürzel: Strg + K fokussiert die Komponenten-Suche.

Tabs

Tabs gliedern verwandte Inhalte auf gleicher Ebene. Pulse setzt auf eine Linie als Indikator: ruhig im Dark-Theme, präzise im Light-Theme.

Pfeiltasten wechseln den Tab, Pos1 und Ende springen an Anfang und Ende.

Accordion

Wie installiere ich Pulse?

Tokens als CSS-Datei einbinden, Komponenten-Stile dazunehmen, fertig. Ein Build-Schritt ist nicht nötig, das System ist bewusst kopierbar gehalten.

Unterstützt Pulse Light- und Dark-Mode?

Ja. Alle semantischen Tokens existieren in beiden Themes. Der Wechsel ist eine einzige Klasse auf dem Wurzelelement, genau wie oben rechts im Toggle.

Wie trage ich neue Tokens bei?

Primitives zuerst, dann die semantische Rolle. Jeder Token braucht einen Namen, beide Theme-Werte und ein Specimen in dieser Dokumentation.

Progress

Token-Migration v2.564 %

Verlauf von --cyan-400 nach --magenta-400, das Signatur-Element der Marke.

Skeleton-Loading

Wöchentlicher Report

Zustellung jeden Montag, 08:00 Uhr

Stepper / Wizard

Konto anlegen: Name, E-Mail und Organisation der Werkstatt eintragen.

Schritt 1 von 4: Konto

06 · Rückmeldung

Feedback

Alerts für persistente Hinweise, Toasts für flüchtige Bestätigungen. Blockierende Entscheidungen landen im nativen <dialog>.

Alert-Banner

Hinweis Version 2.5 führt sechs neue Komponenten ein. Bestehende Tokens bleiben gültig.
Erfolg Alle 75 Tokens wurden exportiert und in die Pipeline übernommen.
Warnung --gray-850 ist veraltet und wird in Version 3.0 entfernt.
Fehler Der Token-Export ist fehlgeschlagen. Bitte Verbindung prüfen und erneut versuchen.

Toasts

Toasts stapeln sich unten rechts, verschwinden nach ~4 Sekunden automatisch und werden über eine aria-live-Region angekündigt.

Modal

Natives <dialog> mit showModal(): Fokusfalle und Esc liefert der Browser kostenlos mit.

07 · Daten

Tabelle

Sortierbare Datentabelle mit echten Sortier-Buttons im Spaltenkopf. Der Sortierzustand steht als aria-sort am <th>, Screenreader lesen ihn mit.

Sortierbare Tabelle
Button Aktion 12 Stabil
Card Container 14 Stabil
Tabs Navigation 9 Stabil
Toast Feedback 11 Beta
Tabelle Daten 16 Neu in 2.5
Stepper Navigation 13 Neu in 2.5
Tag-Input Eingabe 10 Beta

Klick auf einen Spaltenkopf sortiert auf- bzw. absteigend; Zahlen numerisch, Text nach deutschem Alphabet.

08 · Werkzeug

Theme-Editor

Akzent-Farbton, Eckenradius und Dichte zentral verstellen: alle Komponenten dieser Seite reagieren sofort, weil sie ausschließlich über Tokens gefärbt sind. Das Ergebnis lässt sich als CSS-Token-Block kopieren.

196°

Verschiebt --accent, --accent-2, --link und --focus-ring in beiden Themes.

Eckenradius
Dichte
Akzent
Token-Export

Einstellungen werden lokal gespeichert (sofern verfügbar) und beim nächsten Besuch wiederhergestellt. Die Beschriftungen der Token-Specimens oben zeigen weiterhin die Standardwerte.

09 · Bedienung

Tastatur & Fokus

Pulse ist vollständig per Tastatur bedienbar. Die Sandbox macht die Fokus-Reihenfolge sichtbar: Hineinspringen, Tab drücken, zuschauen.

Fokus-Sandbox

Per Tab in die Sandbox springen. Das fokussierte Feld erhält einen markierten Ring, die Nummern zeigen die Reihenfolge.

Kein Fokus in der Sandbox.

Shortcuts im Kit

  • Strg + KKomponenten-Suche fokussieren
  • Tab / Shift+TabFokus vor / zurück
  • ← →Tab-Wechsel in Tab-Leisten
  • Pos1 / EndeErster / letzter Tab
  • EscModal schließen
  • EnterTag im Tag-Input anlegen
  • ⌫Letzten Tag entfernen (leeres Feld)
Demo-Projekt · Eric Lubczynski

Projekt umbenennen

Der Name erscheint in Navigation und Reports.