Wir nutzen Google Analytics für Besucherstatistiken. Analyse-Cookies werden nur gesetzt, wenn Sie zustimmen. Ohne Einwilligung werden die Statistiken anhand cookieloser Signale geschätzt. Cookie-Richtlinie.
PDS · Design System
PDS ist die eigene Designsprache von Protocore, extrahiert aus den Produkten, die wir bauen, und im Produktivbetrieb gehärtet. Dark-first, token-basiert und durchgängig dokumentiert — dieselben Komponenten, die unsere Produkte und die Dashboards unserer Kunden rendern, so verpackt, dass ein Team sie an einem Nachmittag übernehmen kann.
Features
Von Primitiven bis zu vollständigen Seitenkompositionen — 101 Komponenten, jede aus einem ausgelieferten Produkt extrahiert statt isoliert entworfen. Was in PDS steckt, hat bereits echte Arbeit geleistet: Diese Website, die Produkt-Demos und unsere Kunden-Dashboards werden damit gerendert.
Farbe, Typografie, Abstände und Bewegung stammen aus einer einzigen Token-Ebene. Ändern Sie ein Token, und jede Komponente folgt — keine Overrides pro Komponente, keine Abweichungen zwischen Produkten.
Ein dunkles und ein helles Theme, fünf Akzentfarben, alles von denselben Tokens gesteuert. Markenvarianten sind ein Token-Tausch, kein Fork — jedes Produkt der Familie wird aus demselben System gerendert.
Kontrast, Elevation und Farbe werden zuerst im dunklen Theme ausgearbeitet; das helle Theme leitet sich aus denselben Tokens ab. Das Ergebnis ist ein Dark Mode, der sich nativ anfühlt und nicht invertiert.
Buttons, Inputs, Selects, Switches, Slider und Feld-Grundgerüste — inklusive Labels, Hinweisen und Fehlern. Die Zustände sind bereits gestaltet: Fokus, deaktiviert, ungültig und Laden verhalten sich in jedem Produkt gleich.
Stacks, Grids, Trenner und Seitenrahmen setzen Screens ohne Ad-hoc-CSS zusammen. Die größten Komponenten sind vollständige Seitenkompositionen — Hero-, Section- und Footer-Muster aus ausgelieferten Seiten.
Header, Tabs, Breadcrumbs und Menüs mit integriertem Responsive- und Tastaturverhalten. Die Navigation dieser Website ist die Komponente selbst, keine Nachbildung.
Modals, Sheets, Drawer, Popovers und Tooltips auf einem gemeinsamen Layering-Modell — Fokus-Trapping, Schließen und Stapelung werden einmal zentral gelöst. Kein Produkt liefert seine eigene z-index-Arithmetik aus.
Tabellen, Listen, Kennzahlen-Kacheln, Badges und Timelines für Produkte, die von Zahlen leben. Die Operator-Konsolen der gesamten Familie beziehen ihre Informationsdichte aus diesen Komponenten.
Toasts, Banner, Empty States, Fortschrittsanzeigen und Skeletons — die unscheinbaren Zustände, von Anfang an gestaltet. Ein Produkt auf PDS-Basis hat eine durchdachte Antwort für Laden, Leer und Fehlgeschlagen.
Eine redaktionelle Typo-Skala mit Mono-Labels für das technische Register — die Stimme, die Sie auf jeder Protocore-Oberfläche sehen. Die Skala besteht aus Tokens, sodass Produkte sie anpassen können, ohne das System zu verlassen.
Dauern und Easings werden als Tokens ausgeliefert, und die Komponenten verwenden sie bereits. Oberflächen bewegen sich produktübergreifend einheitlich, weil niemand eine Animation von Hand neu timt.
Kontrast, Fokuszustände und Tastaturverhalten sind in die Komponenten eingebaut und nicht dem Zufall überlassen. Wer die Defaults nutzt, bekommt Barrierefreiheit gleich mit.
Styling ist statisches CSS, das zur Build-Zeit aufgelöst wird — keine CSS-in-JS-Runtime, nichts wird im Browser berechnet. Die Styling-Ebene fügt der Seite null JavaScript hinzu.
Das System gibt es auch als reines CSS-Paket — Tokens und Utility-Klassen, ganz ohne React. Server-gerenderte Seiten, E-Mails und Nicht-React-Stacks schöpfen aus derselben Single Source of Truth.
Tokens werden für das Web als CSS-Variablen, als Tailwind-Preset und in nativen Formaten für mobile Plattformen exportiert. Eine Definition der Marke, genutzt überall dort, wo das Produkt läuft.
Die React-Ebene umschließt Apps mit einem Provider und stellt Tokens über Hooks bereit — Komponenten lesen das aktive Theme und den Akzent, statt Werte fest zu verdrahten. Ein Theme-Wechsel ist State, kein Rebuild.
Derselbe Mechanismus, der PDS fünf Akzente gibt, verleiht einem Whitelabel-Produkt seine Marke: Token-Werte tauschen, Komponenten behalten. Jede Whitelabel-App der Familie belegt, dass es funktioniert.
Eine maschinenlesbare Karte des gesamten Systems — Komponenten, Tokens, Patterns — veröffentlicht als llms.txt. Richten Sie ein LLM darauf aus, und generierter Code nutzt echte PDS-Komponenten, statt plausible zu erfinden.
Ein MCP-Server stellt das System Coding-Agents direkt bereit: Komponenten, Props und Tokens, abfragbar, während der Agent baut. Das Design System beantwortet Fragen, statt in Prompts eingefügt zu werden.
Jede Komponente finden Sie unter pds.protocore.io mit Live-Beispielen, Props und Code zum Kopieren. Die Doku wird selbst mit PDS gerendert — was Sie lesen, ist, was Sie ausliefern.
PDS erscheint als versionierte Pakete mit Semantic Versioning und Changelogs. Upgrades sind eine bewusste Entscheidung: Ein Team wechselt, wann es will, und der Changelog zeigt genau, was sich geändert hat.
Pakete werden aus der privaten npm-Registry von Protocore installiert, mit einem Token pro Team in der .npmrc — der übliche npm-Workflow, begrenzt auf lizenzierte Teams. Keine gebündelten Zip-Dateien, keine Copy-and-paste-Installationen.
Ein signierter Lizenzschlüssel wird lokal verifiziert — kein Phone-home, keine Netzwerkprüfung in Ihrem Build. Lizenzprobleme erscheinen als Warnungen zur Entwicklungszeit und legen nie eine Produktions-App lahm.
PDS ist proprietär und wird pro Team lizenziert. Fragen Sie den Zugang an, und wir richten alles für Sie ein — Pakete, Doku und Token-Quellen —, sodass ein Team es an einem Nachmittag übernehmen kann.
FAQ
Pro Team, nicht pro Seat oder Projekt. Eine Lizenz deckt alle ab, die innerhalb eines Teams mit PDS arbeiten: Tokens, Komponenten und Dokumentation. Die Kosten skalieren allein mit der Zahl der Teams, die es einsetzen, und Whitelabel-Produkte, die wir für Sie bauen, laufen bereits darauf.
Über die private Registry unter npm.protocore.io. Mit den Zugangsdaten zieht Ihr Build die @protocore-Pakete; Tokens und Komponenten installieren Sie danach wie jede andere Abhängigkeit.
Die Tokens werden für Web, .NET und Native ausgegeben, sodass eine Farbe oder ein Radius auf jeder Plattform dasselbe bedeutet. Komponenten gibt es für React; eine Framework-unabhängige CSS-Ebene liefert dieselben Tokens und Klassen für Teams, die nicht auf React setzen.
Dark-first und standardmäßig barrierefrei: zwei Themes, fünf Akzentfarben, alles über Tokens gesteuert, mit Zero-Runtime-CSS, sodass das Styling beim Laden nichts kostet. Dieselben Komponenten rendern unsere Produkte und die Dashboards unserer Kunden.
Dafür ist es gemacht: Eine llms.txt-Übersicht und ein MCP-Server ermöglichen es Agenten, das System zu lesen und korrekt damit zu bauen. Unter pds.protocore.io finden sich Live-Beispiele, Props und Copy-and-paste-Code für jede Komponente und jeden Token.
Preise
PDS wird pro Team lizenziert, nicht pro Seat oder Projekt: Eine Lizenz deckt alle ab, die innerhalb dieses Teams damit arbeiten – Tokens, Komponenten und Dokumentation.
Starten Sie mit einem Team und erweitern Sie auf weitere, wenn die Nutzung wächst. Kosten entstehen allein durch die Anzahl der Teams, die auf PDS aufbauen.
Whitelabel-Produkte, die wir für Sie bauen, laufen bereits auf PDS. Die Standalone-Lizenz ist für Teams gedacht, die es in ihren eigenen Produkten einsetzen.
Die Lizenzierung richtet sich nach Teams, nicht nach Mitarbeiterzahl oder Nutzung. Fordern Sie Zugang an, und wir stimmen den Umfang auf die Teams ab, die damit arbeiten werden.
Bewerten
Das gesamte System finden Sie unter pds.protocore.io – mit Live-Beispielen, Props und Copy-and-paste-Code für jede Komponente und jeden Token.
Die Design-Tokens werden für Web, .NET und Native ausgegeben, sodass eine Farbe oder ein Radius auf jeder Plattform dasselbe bedeutet.
PDS wird pro Team lizenziert: Eine Lizenz deckt alle ab, die damit arbeiten – Tokens, Komponenten und Dokumentation gleichermaßen.
Zugangsdaten für die private Registry unter npm.protocore.io, um die @protocore-Pakete zu installieren, die Ihr Build benötigt.
PDS ist proprietär und wird pro Team lizenziert. Fordern Sie Zugang an, wir richten alles für Sie ein.
Alles oben Gezeigte läuft in Produktivdemos, die wir Ihnen gern vorführen – standalone, als Whitelabel oder als eine Plattform. Sagen Sie uns, was Sie bauen, und wir zeigen Ihnen den kürzesten Weg dorthin.
