# Semantische Tokens und Diagramme ohne Abhängigkeiten: wie eine visuelle Basis entsteht

Farbe läuft nur über semantische Tokens, sechs Preset-Paletten verbinden sich mit Basis- und Themenfarbe, und jedes Diagramm wird als SVG gezeichnet.

> Runlume bietet kombinierbare Plattformfunktionen, unabhängige Geschäftsanwendungen und Dienstleistungen. Funktionen, Kontingente und Lieferung folgen Tarif oder Vereinbarung. Geschäftsanwendungen sind einzeln wählbar; Zusammenarbeit folgt konfigurierter Integration und Freigaben.

Originalseite: https://runlume.app/de/blog/admin-design-tokens-and-charts

Entwicklerleitfäden · Theme und Farbe / Komponenten / Barrierefreiheit

Veröffentlicht：2026-09-17 · Autor：Runlume-Team

Visuelle Abweichungen in Backends entstehen selten durch eine große Änderung, sondern durch verstreute Farbwerte, Abstände und Einmal-Komponenten: Dasselbe „Erfolg“ erscheint in drei Grüntönen, und ein Themenwechsel berührt Dutzende Dateien.

admin-design beginnt bei Tokens und Layout-Hüllen und spricht erst danach über Seiten.

## Farbe beschreibt den Zweck, nicht den Wert

Farbe läuft ausschließlich über semantische Utility-Klassen: `bg-card`, `text-muted-foreground`, `text-success`, `border-destructive`. Ein Themenwechsel ändert Tokens, nicht Geschäftscode.

Paletten arbeiten in zwei Ebenen: sechs Presets (teal, blue, forest, violet, amber, graphite und eigener Wert) setzen den Grundton, Basis-Farben (neutral, stone, zinc und weitere) sowie Themenfarben in achtzehn Nuancen justieren ihn. Heller und dunkler Modus speichern getrennte Auswahlen.

Barrierefreiheit ist kein Anhang: Schriftgröße, Schriftschnitt, hoher Kontrast, Farbsehunterstützung, reduzierte Bewegung und unterstrichene Links liegen in den Einstellungen. Präferenzen bleiben im Browser und gelangen nie in Geschäftsdaten.

## Jedes Diagramm ist selbst gezeichnetes SVG

Linien-, Balken-, Ring-, Mini-Balken-, horizontale Balken-, Heatmap-, Radar-, Trichter- und Gantt-Diagramme teilen dieselben semantischen Farben, folgen hellen und dunklen Modi und tragen `role="img"` mit einem `aria-label`, das erklärt, was das Diagramm zeigt.

Der Preis fehlender Abhängigkeiten ist die eigene Pflege von Koordinaten und Maßstäben. Der Gewinn ist Kontrolle über Paketgröße, Audits und Theme-Konsistenz: Es gibt kein zweites Farbsystem, das mitgeführt werden muss.

## Die Komponentenübersicht ist die Abnahmefläche

Neun Komponentenkategorien liegen auf neun Seiten, und jedes Element hat einen echten Einsatzort. Wer eine Komponente ändert, aktualisiert zuerst das Beispiel in der Übersicht; eine neue Fähigkeit kommt als Beispiel, echter Einsatzort und Test. Dokumentation kann nicht von der Umsetzung abweichen, und Reviews haben eine gemeinsame Vergleichsfläche.

## Verwandte Seiten

- [Plattform](https://runlume.app/de/platform)
- [Geschäftsanwendungen](https://runlume.app/de/apps)
- [Entwickler](https://runlume.app/de/developers)
- [Über Runlume](https://runlume.app/de/about)