Design System · Plattformunabhängig

Einheitliches Design.
Überall.

Eine umfassende Bibliothek aus 77 CSS-Komponenten, 46 interaktiven Modulen, 589 Design-Tokens und 1.942 Icons: die Grundlage für alle Websites und Oberflächen von Dynamic Visual. Ein Design-System nach W3C-Standard, ohne Abhängigkeit von Frameworks oder Drittanbietern.

Und KI-nativ: Coding-Agenten greifen über einen eigenen MCP-Server direkt auf Komponenten, Tokens und Icons zu, damit KI-generierter Code korrekt und markenkonform bleibt.

01 · Umfang

77 Komponenten, 46 Module, 1.942 Icons

DV-Nova deckt ab, was ein modernes Web-Projekt braucht: von der Seitenstruktur über Formulare und Datentabellen bis zu Overlays und Diagrammen. Alle Bausteine teilen sich dieselben Tokens und dasselbe Verhalten.

CSS-Komponenten: 77
Interaktive Module: 46
Design-Tokens: 589
Icons: 1.942
Icon-Kategorien: 9
Pakete: 6

Komponenten-Gruppen

Layout & Struktur: App-Rahmen, Raster, Stapel, Sektionen, Seiten- und Kopfleisten, geteilte Ansichten und Trenner: die Bausteine für ein stabiles, responsives Layout.
Navigation: Menüs, Breadcrumb, Tabs, Seitenblätterung, Befehlspalette, Schritt-für-Schritt-Stepper und Scrollspy für lange Inhalte.
Formulare: Text-, Zahlen-, Datums-, Zeit- und Farbfelder, Auswahl, Combobox, Mehrfachauswahl, Checkbox, Radio, Schalter, Schieberegler, Datei-Upload und Einmal-Code.
Overlays: Dialog, Schubladen, Popover, Tooltip, Dropdown-Menü und Toast, mit Fokus-Verwaltung und Tastatur-Bedienung von Haus aus.
Daten & Inhalte: Tabellen, Listen, Karten, Badges, Avatare, Timeline, Diagramme, Sparklines, Code-Blöcke und Leerzustände.
Feedback: Banner, Hinweise, Fortschrittsanzeigen, Spinner und Skeleton-Platzhalter für jeden Lade- und Bearbeitungszustand.

02 · MCP-Server

KI-Integration

DV-Nova ist ein Design-System, das KI-Coding-Agenten lesen können. Über das Model Context Protocol (MCP), den offenen Standard für KI-Werkzeuge, fragen Agenten wie Claude Code oder Cursor Komponenten, Tokens und Icons direkt ab.

MCP-Server · @dv-nova/mcp

Das Design-System aus der echten Quelle

Statt Komponenten und Markenfarben zu halluzinieren, liest der Agent sie aus der echten Quelle. Die Daten stammen direkt aus den Quell-Headern des Design-Systems. Was die KI sieht, weicht nie vom Code ab. Ergebnis: KI-generierter Code ist von Anfang an korrekt, konsistent und markenkonform.

Eingebunden mit einer Zeile: claude mcp add dv-nova -- npx -y @dv-nova/mcp

5 Werkzeuge

list_componentsKomponenten auflisten: Alle Komponenten mit React-Name, Kurzbeschreibung und CSS-/JS-/React-Verfügbarkeit auf einen Blick.
search_componentsKomponenten suchen: Passende Komponente nach Name, Beschreibung oder Variante finden, auch bei vagen Anfragen.
get_componentKomponente abrufen: Vollständiger Datensatz: Basis-Klasse, Varianten, Größen, HTML- und React-Beispiele, Props, Events, Tastatur und A11y-Hinweise.
list_tokensTokens auflisten: Alle 589 Design-Tokens als CSS-Variablen mit Wert, optional nach Stichwort gefiltert.
search_iconsIcons suchen: Aus 1.942 Icons das passende nach Name oder Schlagwort finden.

So läuft es

Lokal & schreibgeschützt

Der Server läuft lokal über stdio und nur lesend: keine externen Dienste, keine Datenweitergabe.

03 · Nutzen

Ein Design für jede Oberfläche

DV-Nova sorgt dafür, dass jede Website, jede Oberfläche und jeder Baustein von Dynamic Visual gleich aussieht und gleich funktioniert. Auf Desktop, Tablet und Smartphone, ohne manuelle Anpassungen und ohne Design-Brüche zwischen Projekten.

Einheitliches Erscheinungsbild: Jede Website und jede Oberfläche greift auf denselben Satz Design-Werte zu. Eine geänderte Akzentfarbe wirkt deshalb in jeder Komponente, nicht nur dort, wo sie jemand nachträgt.
Keine Abhängigkeiten: Kein Framework-Zwang: funktioniert mit jedem Framework oder ganz ohne. Keine Bindung an ein bestimmtes Ökosystem, kein Umbau, wenn das Projekt später das Framework wechselt.
Schnellere Umsetzung: Eine umfangreiche Bibliothek fertiger Bausteine für Design und Interaktion. Neue Seiten und Oberflächen entstehen aus vorhandenen Komponenten, nicht aus leeren Dateien.

DV-Nova baut auf offenen Standards statt auf einem fremden Framework-Ökosystem. Kombinierbar mit jeder Technik, ohne Bindung an ein Produkt.

Offene Standards statt eigener Formate.

Plattformunabhängig, mit automatischem Dunkelmodus und frei kombinierbar mit jedem Framework.

04 · Was drin ist

Pakete

DV-Nova besteht aus sechs Paketen, die unabhängig voneinander oder zusammen eingesetzt werden können. Jedes Paket hat eine klare Aufgabe und ist für sich allein funktionsfähig.

Grundlage

Design-Tokens

Farben, Abstände, Schriftgrößen und Effekte als strukturierte Werte nach W3C-Standard: 589 Tokens in einer zentralen Quelle. Wird ein Wert dort geändert, übernehmen ihn alle Komponenten.

Komponenten

CSS-Komponenten & Module

77 fertige CSS-Komponenten plus 46 interaktive Module in einem Paket. Mehrere Ausgabeformate, passend für jedes Projekt, auch ein eigenes Bundle für WordPress.

React

React-Bausteine

Alle Komponenten gibt es auch als typisierte React-Bausteine. Gleiches Design wie überall, ohne Framework-Zwang für den Rest Ihrer Seite.

Icons

Icon-Bibliothek

1.942 Icons in 9 Kategorien, einheitlich in Strichstärke und Raster gezeichnet. Jedes lässt sich dekorativ einbinden (vom Screenreader übersprungen) oder informativ (mit eigener Beschriftung).

Animation

Animations-Engine

Eigenständige Animations-Bibliothek: weiche Übergänge, Federn, Scroll-Effekte und Gesten. Ohne externe Abhängigkeit, achtet automatisch auf reduzierte Bewegung.

KI / MCP

MCP-Server

Ein eigener Server stellt das Design-System für KI-Coding-Agenten bereit. Komponenten, Tokens und Icons werden direkt aus dem Quellcode abfragbar. KI-generierter Code bleibt korrekt und markenkonform.

05 · Technik

Farben, Dunkelmodus, offene Formate

DV-Nova liefert eine fertige Basis-Palette (Grau + Indigo) inklusive automatischem Dunkelmodus, der auf die Systemeinstellung des Besuchers reagiert. Eigene Markenfarben entstehen durch das Anpassen weniger Akzentfarben, ohne separate Theme-Dateien. DV-Nova basiert auf offenen Webstandards und kommt ohne proprietäre Formate aus: Die Tokens liegen im W3C-DTCG-JSON, das jedes andere Design-Werkzeug importieren kann.

Basis-PaletteBase: Grau + Indigo. Die mitgelieferte Palette für die meisten Websites. Keine Angabe nötig, automatischer Dunkelmodus inklusive.
Beispiel-RezeptCopper: Warme Kupfer-/Gold-Akzente für redaktionelle Seiten. Durch wenige angepasste Akzentfarben umgesetzt. Ein Rezept, kein fertig ausgeliefertes Theme.
Beispiel-RezeptSteel: Kühle Stahl-/Blau-Akzente für technische Projekte. Ebenfalls über wenige Akzentfarben umgesetzt. Beliebig auf eigene Markenfarben anpassbar.
CSS-Layer statt !important: Das Bundle liegt in benannten CSS-Layern: Reset, Tokens, Komponenten, Utilities. Eigene Regeln außerhalb dieser Layer setzen sich ohne !important durch und überleben ein Bundle-Update.
Automatisch startklar: Interaktive Komponenten sind beim Laden der Seite sofort einsatzbereit, auch bei Inhalten, die erst später nachgeladen werden. Kein manuelles Einrichten je Instanz.

Standard: Offenes W3C-DTCG-Format
Farbraum: OKLCH
Barrierefreiheit: orientiert an WCAG 2.1 AA
Plattform: framework-unabhängig
Schnittstelle: MCP

Designs, Code und Inhalte gehören vollständig Ihnen: keine Lizenzbindung, keine laufenden Gebühren an Dritte. Die Bibliothek läuft in jedem modernen Browser; Tastatur-Bedienung und Screenreader-Unterstützung stecken in den Komponenten und sind nicht nachgerüstet.

DV-Nova ist die Grundlage des DV-Theme für WordPress und über den @dv-nova/mcp-Server KI-nativ ansprechbar. Technische Dokumentation und Zugang zum Paket-Repository über die Kontaktseite.

Einheitliches Design. Überall.