Design System · Plattformunabhängig
Einheitliches Design.
Überall.
Eine umfassende Bibliothek aus 77 CSS-Komponenten, 46 interaktiven Modulen, 589 Design-Tokens und rund 1.900 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
Nutzen
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. Keine manuellen Anpassungen, keine Design-Brüche zwischen Projekten.
Einheitliches Erscheinungsbild
Ein Satz Design-Tokens steuert Farben, Abstände, Schriften und Größen über alle Projekte hinweg. Änderungen an einer Stelle wirken überall. Konsistent und sofort.
Keine Abhängigkeiten
Kein Framework-Zwang: funktioniert mit jedem Framework oder ganz ohne. Keine Bindung an ein bestimmtes Ökosystem. Ihre Designs gehören Ihnen.
Schnellere Umsetzung
Eine umfangreiche Bibliothek fertiger Bausteine für Design und Interaktion. Neue Seiten und Oberflächen entstehen aus vorhandenen Komponenten. Statt jedes Mal bei Null anzufangen.
DV-Nova baut auf offenen Standards statt auf einem fremden Framework-Ökosystem — kombinierbar mit jeder Technik, ohne Lock-in.
Offene Standards, kein Lock-in.
Plattformunabhängig, automatischer Dunkelmodus und an WCAG 2.1 AA orientiert — frei kombinierbar.
02
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. Änderungen wirken überall, sofort und konsistent.
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 gestaltet. Schnell ladend und von Grund auf barrierefrei — für dekorative und informative Verwendung.
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.
03
Bibliothek
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, dasselbe Verhalten und denselben Barrierefreiheits-Standard.
- CSS-Komponenten
- 77
- Interaktive Module
- 46
- Design-Tokens
- 589
- Icons
- 1.942
- Icon-Kategorien
- 9
- Pakete
- 6
Das Gerüst jeder Seite
App-Rahmen, Raster, Stapel, Sektionen, Seiten- und Kopfleisten, geteilte Ansichten und Trenner — die Bausteine für ein stabiles, responsives Layout.
Orientierung & Wege
Menüs, Breadcrumb, Tabs, Seitenblätterung, Befehlspalette, Schritt-für-Schritt-Stepper und Scrollspy für lange Inhalte.
Eingabe & Auswahl
Text-, Zahlen-, Datums-, Zeit- und Farbfelder, Auswahl, Combobox, Mehrfachauswahl, Checkbox, Radio, Schalter, Schieberegler, Datei-Upload und Einmal-Code.
Dialoge & Hinweise
Dialog, Schubladen, Popover, Tooltip, Dropdown-Menü und Toast — mit Fokus-Verwaltung und Tastatur-Bedienung von Haus aus.
Darstellen & ordnen
Tabellen, Listen, Karten, Badges, Avatare, Timeline, Diagramme, Sparklines, Code-Blöcke und Leerzustände.
Status & Fortschritt
Banner, Hinweise, Fortschrittsanzeigen, Spinner und Skeleton-Platzhalter für jeden Lade- und Bearbeitungszustand.
04
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
list_components
Komponenten auflisten
Alle Komponenten mit React-Name, Kurzbeschreibung und CSS-/JS-/React-Verfügbarkeit auf einen Blick.
search_components
Komponenten suchen
Passende Komponente nach Name, Beschreibung oder Variante finden — auch bei vagen Anfragen.
get_component
Komponente abrufen
Vollständiger Datensatz: Basis-Klasse, Varianten, Größen, HTML- und React-Beispiele, Props, Events, Tastatur und A11y-Hinweise.
list_tokens
Tokens auflisten
Alle 589 Design-Tokens als CSS-Variablen mit Wert, optional nach Stichwort gefiltert.
search_icons
Icons 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, nur lesend — keine externen Dienste, keine Datenweitergabe.
05
Features
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. Ein einziger Schalter stellt das gesamte Design um.
Basis-Palette
Base
Grau + Indigo. Die mitgelieferte Palette für die meisten Websites. Keine Angabe nötig, automatischer Dunkelmodus inklusive.
Beispiel-Rezept
Copper
Warme Kupfer-/Gold-Akzente für redaktionelle Seiten. Durch wenige angepasste Akzentfarben umgesetzt. Ein Rezept, kein fertig ausgeliefertes Theme.
Beispiel-Rezept
Steel
Kühle Stahl-/Blau-Akzente für technische Projekte. Ebenfalls über wenige Akzentfarben umgesetzt. Beliebig auf eigene Markenfarben anpassbar.
Token-System
Ein zentraler Satz Design-Werte steuert Farben, Größen und Schriften. Komponenten greifen direkt darauf zu — Änderungen an einer Stelle wirken überall.
Saubere Struktur
Alle Komponenten sind klar strukturiert und konfliktfrei aufgebaut. Vorhersagbares Verhalten und einfaches Anpassen, ohne Überraschungen.
Automatisch startklar
Interaktive Komponenten sind beim Laden der Seite sofort einsatzbereit. Kein manuelles Einrichten nötig — auch bei nachgeladenen Inhalten.
Barrierefreiheit
Alle Komponenten sind an WCAG 2.1 AA orientiert. Keyboard-Navigation, ARIA-Labels und Fokus-Management sind eingebaut. Nicht nachgerüstet.
React-Unterstützung:
Alle Komponenten gibt es auch als fertige React-Bausteine. Gleiches Design wie überall, kein separater Styling-Aufwand.
06
Technik
DV-Nova basiert auf offenen Webstandards und kommt ohne proprietäre Formate aus. Das bedeutet für Sie: keine Anbieterabhängigkeit, volle Datenhoheit und kein proprietäres Format, das Sie später migrieren müssen.
- Standard
- Offenes W3C-DTCG-Format
- Farbraum
- OKLCH
- Barrierefreiheit
- orientiert an WCAG 2.1 AA
- Fremde Lizenzkosten
- keine
- Plattform
- framework-unabhängig
- Schnittstelle
- MCP
Ihr Eigentum
Designs, Code und Inhalte gehören vollständig Ihnen. Keine Lizenzbindung, keine laufenden Gebühren an Dritte, keine Anbieterabhängigkeit.
Offene Webstandards
Aufgebaut auf dem offenen W3C-DTCG-Format. Läuft in jedem modernen Browser und ist mit jedem Framework kombinierbar.
Jedes Gerät
Sieht auf Smartphone, Tablet und Desktop gleich gut aus. Vom kleinen Display bis zum großen Monitor — ohne manuelle Anpassung.
Barrierefrei geprüft
An WCAG 2.1 AA orientiert: Tastatur-Bedienung und Screenreader-Unterstützung von Anfang an eingebaut, nicht nachgerüstet.
DV-Nova ist die Grundlage des DV-Theme für WordPress und über den @dv-nova/mcp-Server KI-nativ ansprechbar. Vollständige technische Dokumentation auf Anfrage verfügbar.