Vi bruger Google Analytics til trafikstatistik. Analysecookies sættes kun, hvis du accepterer. Uden samtykke estimeres statistikken ud fra cookiefri signaler. Cookiepolitik.
PDS · Design System
PDS er Protocores eget designsprog, udledt af de produkter, vi bygger, og hærdet i produktion. Dark-first, token-drevet og dokumenteret fra ende til anden — de samme komponenter, der renderer vores produkter og vores kundedashboards, pakket så et team kan tage dem i brug på en eftermiddag.
Funktioner
Fra primitiver til komplette sidekompositioner — 101 komponenter, hver især udledt af et produkt, vi leverer, og ikke designet i isolation. Hvis en komponent er i PDS, har den allerede gjort reelt arbejde: dette site, produktdemoerne og vores kundedashboards er alle bygget på den.
Farve, typografi, afstand og bevægelse udledes af ét token-lag. Ret et token, og alle komponenter følger med — ingen overstyringer pr. komponent, ingen drift mellem produkter.
Et mørkt og et lyst tema, fem accentfarver, alt styret af de samme tokens. Brandvariation er et token-skift, ikke en fork — alle produkter i familien rendres fra det samme system.
Kontrast, elevation og farve udarbejdes først på det mørke tema; det lyse tema udledes af de samme tokens. Resultatet er en dark mode, der føles native og ikke inverteret.
Knapper, inputfelter, selects, switches, sliders og feltstruktur — inklusive labels, hjælpetekster og fejlmeddelelser. Tilstandene er allerede designet: fokus, deaktiveret, ugyldig og indlæser opfører sig ens i alle produkter.
Stacks, grids, skillelinjer og sideskaller sammensætter skærmbilleder uden ad hoc-CSS. De største komponenter er komplette sidekompositioner — hero-, sektions- og footer-mønstre hentet fra sider, vi leverer.
Headere, faner, brødkrummer og menuer med responsiv adfærd og tastaturstyring indbygget. Navigationen på dette site er selve komponenten, ikke en efterligning af den.
Modaler, sheets, drawers, popovers og tooltips på én lagmodel — fokusfangst, lukning og stakning håndteres én gang, centralt. Intet produkt leverer sin egen z-index-regning.
Tabeller, lister, nøgletalsfliser, badges og tidslinjer til produkter, der lever af tal. Operatørkonsollerne på tværs af familien henter deres informationstæthed fra disse komponenter.
Toasts, bannere, tomme tilstande, fremdrift og skeletons — de mindre glamourøse tilstande, designet fra start. Et produkt bygget på PDS har et gennemtænkt svar på indlæsning, tomt og fejlet.
En redaktionel typeskala med mono-labels til det tekniske register — stemmen, du møder på alle Protocore-flader. Skalaen består af tokens, så produkter kan tilpasse den uden at forlade systemet.
Varigheder og easings leveres som tokens, og komponenterne bruger dem allerede. Grænseflader bevæger sig ensartet på tværs af produkter, fordi ingen timer en animation om i hånden.
Kontrast, fokustilstande og tastaturstyring er indbygget i komponenterne og ikke overladt til dig. Brug standardindstillingerne, så følger tilgængeligheden med.
Styling er statisk CSS, der opløses ved build — ingen CSS-in-JS-runtime, intet beregnes i browseren. Stylinglaget tilføjer nul JavaScript til siden.
Systemet leveres også som en ren CSS-pakke — tokens og utility-klasser uden krav om React. Serverrenderede sider, e-mails og stacks uden React henter fra den samme sandhedskilde.
Tokens eksporteres til web som CSS-variabler, som Tailwind-preset og i native formater til mobilplatforme. Én definition af brandet, brugt overalt, hvor produktet kører.
React-laget pakker apps ind i en provider og eksponerer tokens via hooks — komponenter læser det aktive tema og den aktive accent i stedet for at hardcode værdier. At skifte tema er state, ikke en ny build.
Den samme mekanisme, der giver PDS fem accenter, giver et whitelabel-produkt sit brand: skift token-værdierne, behold komponenterne. Alle whitelabel-apps i familien er et bevis på, at det virker.
Et maskinlæsbart kort over hele systemet — komponenter, tokens, mønstre — udgivet som llms.txt. Peg en LLM på det, og genereret kode bruger rigtige PDS-komponenter i stedet for at opfinde plausible.
En MCP-server giver coding-agenter direkte adgang til systemet: komponenter, props og tokens, som kan forespørges, mens agenten bygger. Designsystemet svarer på spørgsmål i stedet for at blive indsat i prompts.
Hver komponent findes på pds.protocore.io med live-eksempler, props og kode til copy-paste. Dokumentationen er bygget på PDS selv — det, du læser, er det, du leverer.
PDS leveres som versionerede pakker med semantisk versionering og changelogs. Opgraderinger er bevidste: et team skifter, når det vælger det, og changeloggen angiver præcis, hvad der er ændret.
Pakker installeres fra Protocores private npm-registry med et token pr. team i .npmrc — den almindelige npm-arbejdsgang, afgrænset til licenserede teams. Ingen vendorede zip-filer, ingen copy-paste-installationer.
En signeret licensnøgle verificeres lokalt — ingen phone-home, intet netværkstjek i dit build. Licensproblemer vises som advarsler under udvikling og får aldrig en produktionsapp til at fejle.
PDS er proprietært og licenseres pr. team. Anmod om adgang, så sætter vi jer op — pakker, dokumentation og token-kilder — så et team kan tage det i brug på en eftermiddag.
FAQ
Pr. team – ikke pr. bruger eller pr. projekt. Én licens dækker alle, der bygger med PDS i et team: tokens, komponenter og dokumentation. Prisen vokser med antallet af teams, der tager det i brug – intet andet – og whitelabel-produkter, vi bygger til jer, kører allerede på det.
Fra det private registry på npm.protocore.io. Med adgangsoplysningerne kan jeres build hente @protocore-pakkerne, og derfra installeres tokens og komponenter som enhver anden afhængighed.
Tokens udstilles til web, .NET og native, så én farve eller radius betyder det samme på alle platforme, I leverer til. Komponenterne leveres til React, og et frameworkuafhængigt CSS-lag bærer de samme tokens og klasser til teams, der ikke bruger React.
Dark-first og tilgængeligt som standard – to temaer, fem accentfarver, alt styret af tokens, med zero-runtime CSS, så styling ikke koster noget ved indlæsning. De samme komponenter driver både vores produkter og vores kundedashboards.
Det er bygget til det: et llms.txt-kort og en MCP-server lader agenter læse systemet og bygge korrekt med det, og pds.protocore.io har live eksempler, props og kode til copy-paste for hver komponent og token.
Priser
PDS licenseres pr. team – ikke pr. bruger eller pr. projekt. Én licens dækker alle, der bygger med det i teamet: tokens, komponenter og dokumentation.
Start med ét team, og udvid til flere i takt med, at brugen vokser. Prisen styres af antallet af teams, der bygger på PDS – intet andet.
Whitelabel-produkter, vi bygger til jer, kører allerede på PDS – den selvstændige licens er til teams, der tager det i brug på egne produkter.
Licensering følger teams, ikke antal medarbejdere eller forbrug. Anmod om adgang, så afgrænser vi den til de teams, der skal bygge med det.
Vurdér
Udforsk hele systemet på pds.protocore.io – live eksempler, props og kode til copy-paste for hver komponent og token.
Designtokens udstillet til web, .NET og native, så én farve eller radius betyder det samme på alle platforme, I leverer til.
PDS licenseres pr. team – én licens dækker alle, der bygger med det: tokens, komponenter og dokumentation.
Adgangsoplysninger til det private registry på npm.protocore.io, så jeres build kan hente de @protocore-pakker, det bruger.
PDS er proprietært og licenseres pr. team. Anmod om adgang, så sætter vi jer op.
Alt ovenfor kører i produktionsdemoer, vi kan gennemgå med jer – standalone, whitelabel eller som én platform. Fortæl os, hvad I bygger, så viser vi jer den korteste vej.
