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 Layer 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 Layer 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-layer/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.

Der MCP-Server läuft lokal über stdio und liest die gebaute Referenz im DV-Layer-Checkout. Er wird einmal pro KI-Client registriert; ein gehosteter Endpunkt ist nicht erforderlich.

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 Layer 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 Layer 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 Layer 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 Layer 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 Layer 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 Layer ist die Grundlage des DV-Theme für WordPress und über den @dv-layer/mcp-Server KI-nativ ansprechbar. Die Pakete werden als lokale Release-Archive eingebunden. Fragen zur technischen Integration über die Kontaktseite.

Einheitliches Design. Überall.