We gebruiken Google Analytics voor verkeersstatistieken. Analytische cookies worden alleen geplaatst als je accepteert. Zonder toestemming worden statistieken geschat op basis van cookieloze signalen. Cookiebeleid.
PDS · Design System
PDS is de eigen designtaal van Protocore, gedestilleerd uit de producten die we bouwen en in productie gehard. Dark-first, token-gedreven en van begin tot eind gedocumenteerd — dezelfde componenten waarmee onze producten en klantdashboards worden gerenderd, verpakt zodat een team ze in een middag kan overnemen.
Features
Van primitives tot complete paginacomposities — 101 componenten, elk afgeleid van een product dat we opleveren in plaats van los ontworpen. Zit een component in PDS, dan heeft hij al echt werk verricht: deze site, de productdemo's en onze klantdashboards draaien erop.
Kleur, typografie, ruimte en beweging komen uit één tokenlaag. Pas een token aan en elke component volgt — geen overrides per component, geen verschillen tussen producten.
Een donker en een licht thema, vijf accentkleuren, allemaal aangestuurd door dezelfde tokens. Merkvariatie is een tokenwissel, geen fork — elk product in de familie wordt vanuit hetzelfde systeem gerenderd.
Contrast, elevatie en kleur worden eerst op het donkere thema uitgewerkt; het lichte thema is afgeleid van dezelfde tokens. Het resultaat is een donkere modus die native aanvoelt, niet geïnverteerd.
Buttons, inputs, selects, switches, sliders en veldopbouw — inclusief labels, hints en foutmeldingen. De states zijn al ontworpen: focus, disabled, invalid en loading gedragen zich in elk product hetzelfde.
Stacks, grids, dividers en paginashells stellen schermen samen zonder ad-hoc CSS. De grootste componenten zijn complete paginacomposities — hero-, sectie- en footerpatronen afkomstig van pagina's die we opleveren.
Headers, tabs, breadcrumbs en menu's met ingebouwd responsief gedrag en toetsenbordbediening. De navigatie op deze site is de component zelf, geen imitatie ervan.
Modals, sheets, drawers, popovers en tooltips op één gelaagdheidsmodel — focus trapping, sluiten en stapelen eenmalig en centraal afgehandeld. Geen enkel product levert zijn eigen z-index-rekenwerk mee.
Tabellen, lijsten, stattegels, badges en tijdlijnen voor producten die op cijfers draaien. De operatorconsoles van de hele familie ontlenen hun dichtheid aan deze componenten.
Toasts, banners, lege staten, voortgang en skeletons — de onopvallende states, vooraf ontworpen. Een product op basis van PDS heeft een doordacht antwoord voor laden, leeg en mislukt.
Een redactionele typeschaal met mono-labels voor het technische register — de stem die je op elk Protocore-oppervlak ziet. De schaal bestaat uit tokens, dus producten stemmen hem af zonder het systeem te verlaten.
Duur en easing worden als tokens geleverd, met componenten die ze al gebruiken. Interfaces bewegen consistent in alle producten, omdat niemand een animatie met de hand opnieuw timet.
Contrast, focusstates en toetsenbordgedrag zitten in de componenten ingebouwd en worden niet aan jou overgelaten. Lever de defaults op en toegankelijkheid komt vanzelf mee.
Styling is statische CSS die tijdens de build wordt opgelost — geen CSS-in-JS-runtime, niets wat in de browser wordt berekend. De stylinglaag voegt nul JavaScript toe aan de pagina.
Het systeem wordt ook geleverd als gewoon CSS-pakket — tokens en utility classes zonder dat React nodig is. Server-side gerenderde pagina's, e-mails en niet-React-stacks putten uit dezelfde single source of truth.
Tokens worden voor het web geëxporteerd als CSS-variabelen, als Tailwind-preset en in native formaten voor mobiele platforms. Eén definitie van het merk, gebruikt overal waar het product draait.
De React-laag verpakt apps in een provider en stelt tokens beschikbaar via hooks — componenten lezen het actieve thema en accent in plaats van waarden hard te coderen. Van thema wisselen is state, geen rebuild.
Hetzelfde mechanisme dat PDS vijf accenten geeft, geeft een whitelabelproduct zijn merk: wissel de tokenwaarden, behoud de componenten. Elke whitelabel-app in de familie is het bewijs dat het werkt.
Een machineleesbare kaart van het hele systeem — componenten, tokens, patronen — gepubliceerd als llms.txt. Wijs een LLM ernaartoe en gegenereerde code gebruikt echte PDS-componenten in plaats van aannemelijke verzinsels.
Een MCP-server stelt het systeem rechtstreeks beschikbaar aan coding agents: componenten, props en tokens, te bevragen terwijl de agent bouwt. Het designsysteem beantwoordt vragen in plaats van in prompts te worden geplakt.
Elke component staat op pds.protocore.io met live voorbeelden, props en code om te kopiëren. De documentatie draait zelf op PDS — wat je leest, is wat je oplevert.
PDS wordt geleverd als pakketten met semantische versies en changelogs. Upgraden doe je bewust: een team stapt over wanneer het dat wil, en de changelog vertelt precies wat er is veranderd.
Pakketten installeer je vanuit de private npm-registry van Protocore met een token per team in .npmrc — de standaard npm-workflow, afgebakend tot teams met een licentie. Geen meegeleverde zipbestanden, geen installaties via kopiëren en plakken.
Een ondertekende licentiesleutel wordt lokaal geverifieerd — geen phone-home, geen netwerkcontrole in je build. Licentieproblemen verschijnen als waarschuwingen tijdens development en laten een productie-app nooit crashen.
PDS is propriëtair en wordt per team in licentie gegeven. Vraag toegang aan en wij richten alles voor je in — pakketten, docs en tokenbronnen — zodat een team het in een middag kan overnemen.
FAQ
Per team — niet per gebruiker of per project. Eén licentie dekt iedereen binnen een team die met PDS bouwt: tokens, componenten en documentatie. De kosten schalen alleen mee met het aantal teams dat het adopteert, en whitelabel-producten die wij voor je bouwen draaien er al op.
Via de private registry op npm.protocore.io. Met de toegangsgegevens haalt je build de @protocore-pakketten op; daarna installeer je tokens en componenten als elke andere dependency.
De tokens worden uitgegeven voor web, .NET en native, zodat één kleur of radius op elk platform dat je uitbrengt hetzelfde betekent. Componenten zijn beschikbaar voor React, en een frameworkonafhankelijke CSS-laag levert dezelfde tokens en klassen voor teams die niet op React draaien.
Standaard dark-first en toegankelijk — twee thema's, vijf accenten, allemaal via tokens aangestuurd, met zero-runtime CSS zodat styling bij het laden niets kost. Dezelfde componenten renderen onze producten en de dashboards van onze klanten.
Daar is het voor gemaakt: een llms.txt-map en een MCP-server laten agents het systeem lezen en er correct mee bouwen, en pds.protocore.io bevat live voorbeelden, props en kopieerbare code voor elke component en token.
Prijzen
PDS wordt per team gelicentieerd, niet per gebruiker of per project — één licentie dekt iedereen binnen dat team die ermee bouwt: tokens, componenten en documentatie.
Begin met één team en breid uit naarmate het gebruik groeit. De kosten hangen af van het aantal teams dat op PDS bouwt, niets anders.
Whitelabel-producten die wij voor je bouwen draaien al op PDS — de losse licentie is voor teams die het op hun eigen producten inzetten.
De licentie volgt teams, niet headcount of gebruik. Vraag toegang aan en we stemmen de scope af op de teams die ermee gaan bouwen.
Beoordelen
Bekijk het volledige systeem op pds.protocore.io — live voorbeelden, props en kopieerbare code voor elke component en token.
De designtokens worden uitgegeven voor web, .NET en native, zodat één kleur of radius op elk platform dat je uitbrengt hetzelfde betekent.
PDS wordt per team gelicentieerd — één licentie dekt iedereen die ermee bouwt, of het nu gaat om tokens, componenten of docs.
Inloggegevens voor de private registry op npm.protocore.io om de @protocore-pakketten te installeren die je build ophaalt.
PDS is propriëtair en wordt per team gelicentieerd. Vraag toegang aan en wij zorgen voor de rest.
Alles hierboven draait in productiedemo's waar we je doorheen leiden — standalone, whitelabel of als één platform. Vertel ons wat je bouwt en we laten je de kortste weg ernaartoe zien.
