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.