Vi bruker Google Analytics til trafikkstatistikk. Analyseinformasjonskapsler settes bare hvis du godtar. Uten samtykke estimeres statistikken fra signaler uten informasjonskapsler. Retningslinjer for informasjonskapsler.
PDS · Design System
PDS er Protocores eget designspråk, hentet ut fra produktene vi bygger og herdet i produksjon. Dark-first, token-drevet og dokumentert fra ende til ende — de samme komponentene som gjengir produktene våre og kundenes dashboard, pakket slik at et team kan ta dem i bruk på en ettermiddag.
Funksjoner
Fra primitiver til hele sidekomposisjoner – 101 komponenter, hver hentet ut fra et produkt vi leverer, ikke designet i isolasjon. Er en komponent i PDS, har den allerede gjort ekte arbeid: dette nettstedet, produktdemoene og kundenes dashbord er alle bygget på den.
Farge, typografi, avstand og bevegelse hentes fra ett token-lag. Endre en token, og alle komponenter følger etter – ingen overstyringer per komponent, ingen avvik mellom produkter.
Et mørkt og et lyst tema, fem aksentfarger, alt styrt av de samme tokens. Merkevarevariasjon er et token-bytte, ikke en fork – alle produkter i familien rendres fra det samme systemet.
Kontrast, elevasjon og farge utarbeides først i det mørke temaet, og det lyse temaet avledes fra de samme tokens. Resultatet er en mørk modus som føles naturlig, ikke invertert.
Knapper, inndatafelt, nedtrekkslister, brytere, glidere og feltstillas – inkludert etiketter, hjelpetekster og feilmeldinger. Tilstandene er allerede designet: fokus, deaktivert, ugyldig og lasting oppfører seg likt i alle produkter.
Stacks, grids, skillelinjer og sideskall setter sammen skjermbilder uten ad hoc-CSS. De største komponentene er hele sidekomposisjoner – hero-, seksjons- og footer-mønstre hentet fra sider vi leverer.
Headere, faner, brødsmuler og menyer med responsiv oppførsel og tastaturstøtte innebygd. Navigasjonen på dette nettstedet er selve komponenten, ikke en imitasjon av den.
Modaler, sheets, drawers, popovers og tooltips på én lagmodell – fokusfangst, lukking og stabling håndteres én gang, sentralt. Ingen produkt leverer sin egen z-index-regning.
Tabeller, lister, nøkkeltallsfliser, merker og tidslinjer for produkter som lever av tall. Operatørkonsollene i hele familien henter sin tetthet fra disse komponentene.
Toasts, bannere, tomme tilstander, fremdrift og skeletons – de lite glamorøse tilstandene, designet fra start. Et produkt bygget på PDS har et gjennomtenkt svar for lasting, tomt og feilet.
En redaksjonell typeskala med mono-etiketter for det tekniske registeret – stemmen du ser på alle Protocore-flater. Skalaen består av tokens, så produktene kan justere den uten å forlate systemet.
Varigheter og easing-kurver leveres som tokens, og komponentene bruker dem allerede. Grensesnittene beveger seg likt på tvers av produkter fordi ingen tidsjusterer animasjoner for hånd.
Kontrast, fokustilstander og tastaturoppførsel er bygget inn i komponentene, ikke overlatt til deg. Bruk standardene, så følger tilgjengeligheten med.
Styling er statisk CSS som løses ved bygging – ingen CSS-in-JS-runtime, ingenting beregnes i nettleseren. Stylinglaget legger til null JavaScript på siden.
Systemet leveres også som en ren CSS-pakke – tokens og utility-klasser uten krav om React. Servergenererte sider, e-poster og stacker uten React henter fra samme sannhetskilde.
Tokens eksporteres for web som CSS-variabler, som Tailwind-preset og i native formater for mobilplattformer. Én definisjon av merkevaren, brukt overalt der produktet kjører.
React-laget pakker apper inn i en provider og eksponerer tokens gjennom hooks – komponentene leser aktivt tema og aksent i stedet for hardkodede verdier. Å bytte tema er tilstand, ikke en ombygging.
Den samme mekanismen som gir PDS fem aksenter, gir et whitelabel-produkt sin merkevare: bytt tokenverdiene, behold komponentene. Hver whitelabel-app i familien er et bevis på at det fungerer.
Et maskinlesbart kart over hele systemet – komponenter, tokens, mønstre – publisert som llms.txt. Pek en LLM til det, så bruker generert kode ekte PDS-komponenter i stedet for å finne på troverdige.
En MCP-server eksponerer systemet direkte for kodeagenter: komponenter, props og tokens, som kan spørres mens agenten bygger. Designsystemet svarer på spørsmål i stedet for å bli limt inn i prompter.
Hver komponent finnes på pds.protocore.io med live-eksempler, props og kode du kan kopiere. Dokumentasjonen er bygget på PDS selv – det du leser, er det du leverer.
PDS leveres som versjonerte pakker med semantiske versjoner og endringslogger. Oppgraderinger skjer bevisst: et team oppgraderer når det selv vil, og endringsloggen sier nøyaktig hva som er endret.
Pakkene installeres fra Protocores private npm-registry med et token per team i .npmrc – standard npm-arbeidsflyt, avgrenset til lisensierte team. Ingen vendorede zip-filer, ingen kopier-og-lim-inn-installasjoner.
En signert lisensnøkkel verifiseres lokalt – ingen phone-home, ingen nettverkssjekk i bygget ditt. Lisensproblemer vises som advarsler under utvikling og ødelegger aldri en produksjonsapp.
PDS er proprietært og lisensieres per team. Be om tilgang, så setter vi deg opp – pakker, dokumentasjon og token-kilder – slik at et team kan ta det i bruk på en ettermiddag.
FAQ
Per team – ikke per bruker eller per prosjekt. Én lisens dekker alle som bygger med PDS i et team: tokens, komponenter og dokumentasjon. Kostnaden skalerer med antall team som tar det i bruk, ikke noe annet, og whitelabel-produkter vi bygger for deg bruker det allerede.
Fra det private registeret på npm.protocore.io. Med tilgangsopplysningene kan bygget ditt hente @protocore-pakkene, og derfra installeres tokens og komponenter som alle andre avhengigheter.
Tokens leveres for web, .NET og native, så én farge eller radius betyr det samme på alle plattformer du lanserer på. Komponentene leveres for React, og et rammeverkuavhengig CSS-lag har de samme tokens og klassene for team som ikke bruker React.
Dark-first og tilgjengelig som standard – to temaer, fem aksentfarger, alt styrt av tokens, med CSS uten kjøretid, så styling ikke koster noe ved innlasting. De samme komponentene driver både produktene våre og kundenes dashbord.
Det er laget for det: et llms.txt-kart og en MCP-server lar agenter lese systemet og bygge riktig med det, og pds.protocore.io har live-eksempler, props og kode du kan kopiere for hver komponent og token.
Priser
PDS lisensieres per team, ikke per bruker eller per prosjekt – én lisens dekker alle som bygger med det i teamet: tokens, komponenter og dokumentasjon.
Start med ett team og utvid til flere etter hvert som bruken vokser. Det eneste som styrer kostnaden, er antall team som bygger på PDS.
Whitelabel-produkter vi bygger for deg, bruker allerede PDS – den frittstående lisensen er for team som tar det i bruk på egne produkter.
Lisensieringen følger team, ikke antall ansatte eller bruk. Be om tilgang, så tilpasser vi den til teamene som skal bygge med det.
Vurder
Utforsk hele systemet på pds.protocore.io – live-eksempler, props og kode du kan kopiere for hver komponent og token.
Design-tokens levert for web, .NET og native, slik at én farge eller radius betyr det samme på alle plattformer du lanserer på.
PDS lisensieres per team – én lisens dekker alle som bygger med det, både tokens, komponenter og dokumentasjon.
Legitimasjon til det private registeret på npm.protocore.io, slik at du kan installere @protocore-pakkene som bygget ditt henter.
PDS er proprietært og lisensieres per team. Be om tilgang, så setter vi deg i gang.
Alt ovenfor kjører i produksjonsdemoer vi kan vise deg – frittstående, whitelabel eller som én plattform. Fortell oss hva du bygger, så viser vi deg den korteste veien dit.
