Vi använder Google Analytics för trafikstatistik. Analyscookies placeras bara om du godkänner. Utan samtycke uppskattas statistiken utifrån cookielösa signaler. Cookiepolicy.
PDS · Design System
PDS är Protocores eget designspråk, utvunnet ur produkterna vi bygger och härdat i produktion. Dark-first, token-drivet och dokumenterat från början till slut — samma komponenter som renderar våra produkter och våra kunddashboards, paketerade så att ett team kan ta dem i bruk på en eftermiddag.
Funktioner
Från primitiver till kompletta sidkompositioner — 101 komponenter, var och en framtagen ur en produkt vi levererar i stället för att ha ritats i isolering. Finns en komponent i PDS har den redan gjort verklig nytta: den här webbplatsen, produktdemorna och våra kunddashboards renderas alla med den.
Färg, typografi, avstånd och rörelse utgår från ett enda tokenlager. Ändra en token och alla komponenter följer med — inga överskrivningar per komponent, ingen glidning mellan produkter.
Ett mörkt och ett ljust tema, fem accentfärger, allt styrt av samma tokens. Varumärkesvariation är ett tokenbyte, inte en fork — varje produkt i familjen renderas från samma system.
Kontrast, elevation och färg utformas först för det mörka temat; det ljusa temat härleds från samma tokens. Resultatet är ett mörkt läge som känns naturligt, inte inverterat.
Knappar, inmatningsfält, väljare, reglage, slider och fältstruktur — inklusive etiketter, hjälptexter och felmeddelanden. Tillstånden är redan designade: fokus, inaktiverad, ogiltig och laddning beter sig likadant i varje produkt.
Stackar, rutnät, avdelare och sidskal bygger vyer utan ad hoc-CSS. De största komponenterna är kompletta sidkompositioner — hero-, sektions- och sidfotsmönster hämtade från sidor vi levererar.
Headers, flikar, brödsmulor och menyer med responsivt beteende och tangentbordsstöd inbyggt. Navigationen på den här webbplatsen är komponenten själv, inte en imitation.
Modaler, sheets, drawers, popovers och tooltips i en gemensam lagermodell — fokusfångst, stängning och staplingsordning hanteras en gång, centralt. Ingen produkt levererar sin egen z-index-aritmetik.
Tabeller, listor, statistikrutor, badges och tidslinjer för produkter som lever på siffror. Operatörskonsolerna i hela familjen får sin täthet från dessa komponenter.
Toasts, banners, tomma tillstånd, förlopp och skeletons — de oglamorösa tillstånden, designade från början. En produkt byggd på PDS har ett genomtänkt svar för laddning, tomt och misslyckat.
En redaktionell typskala med mono-etiketter för det tekniska registret — rösten du ser på alla Protocore-ytor. Skalan består av tokens, så produkterna kan justera den utan att lämna systemet.
Varaktigheter och easings levereras som tokens, med komponenter som redan använder dem. Gränssnitt rör sig konsekvent mellan produkter eftersom ingen tidsätter en animation för hand.
Kontrast, fokustillstånd och tangentbordsbeteende är inbyggda i komponenterna, inte lämnade som en övning. Använd standardinställningarna så följer tillgängligheten med.
Styling är statisk CSS som löses vid bygget — ingen CSS-in-JS-runtime, inget som beräknas i webbläsaren. Stylinglagret tillför noll JavaScript på sidan.
Systemet levereras också som ett rent CSS-paket — tokens och utility-klasser utan krav på React. Serverrenderade sidor, e-post och stackar utan React hämtar från samma sanningskälla.
Tokens exporteras för webben som CSS-variabler, som Tailwind-preset och i nativa format för mobila plattformar. En definition av varumärket, använd överallt där produkten körs.
React-lagret omsluter appar med en provider och exponerar tokens via hooks — komponenter läser aktivt tema och accent i stället för hårdkodade värden. Att byta tema är state, inte en ombyggnad.
Samma mekanism som ger PDS fem accenter ger en whitelabel-produkt dess varumärke: byt tokenvärdena, behåll komponenterna. Varje whitelabel-app i familjen är ett bevis på att det fungerar.
En maskinläsbar karta över hela systemet — komponenter, tokens, mönster — publicerad som llms.txt. Peka en LLM mot den så använder genererad kod riktiga PDS-komponenter i stället för att hitta på trovärdiga.
En MCP-server exponerar systemet direkt för kodagenter: komponenter, props och tokens, sökbara medan agenten bygger. Designsystemet svarar på frågor i stället för att klistras in i prompts.
Varje komponent finns på pds.protocore.io med live-exempel, props och kod att kopiera. Dokumentationen renderas på PDS självt — det du läser är det du levererar.
PDS levereras som versionerade paket med semantisk versionshantering och changelogs. Uppgraderingar är medvetna: ett team flyttar när det vill, och changeloggen säger exakt vad som ändrats.
Paket installeras från Protocores privata npm-registry med en teamspecifik token i .npmrc — standardflödet för npm, avgränsat till licensierade team. Inga medföljande zip-filer, inga installationer via kopiera och klistra in.
En signerad licensnyckel verifieras lokalt — ingen phone-home, ingen nätverkskontroll i ditt bygge. Licensproblem visas som varningar under utveckling och bryter aldrig en app i produktion.
PDS är proprietärt och licensieras per team. Begär åtkomst så sätter vi upp er — paket, dokumentation och tokenkällor — så att ett team kan komma igång på en eftermiddag.
FAQ
Per team – inte per användare eller projekt. En licens täcker alla som bygger med PDS inom ett team: tokens, komponenter och dokumentation. Kostnaden växer med antalet team som använder det, inget annat, och whitelabel-produkter som vi bygger åt dig renderas redan på det.
Från det privata registret på npm.protocore.io. Med åtkomstuppgifterna kan ert bygge hämta @protocore-paketen, och därefter installeras tokens och komponenter som vilket beroende som helst.
Tokens finns för webb, .NET och native, så att en färg eller en radie betyder samma sak på varje plattform ni levererar till. Komponenterna levereras för React, och ett ramverksoberoende CSS-lager har samma tokens och klasser för team som inte använder React.
Dark-first och tillgängligt som standard – två teman, fem accentfärger, allt styrt av tokens, med CSS utan runtime så att stylingen inte kostar något vid laddning. Samma komponenter renderar både våra produkter och våra kunddashboards.
Det är byggt för det: en llms.txt-karta och en MCP-server gör att agenter kan läsa systemet och bygga rätt med det, och pds.protocore.io har liveexempel, props och kod att kopiera för varje komponent och token.
Priser
PDS licensieras per team, inte per användare eller projekt – en licens täcker alla som bygger med systemet inom teamet: tokens, komponenter och dokumentation.
Börja med ett team och utöka till fler i takt med att användningen växer. Kostnaden styrs av antalet team som bygger på PDS, inget annat.
Whitelabel-produkter som vi bygger åt dig renderas redan på PDS – den fristående licensen är till för team som vill använda det i sina egna produkter.
Licensieringen följer team, inte antal anställda eller användning. Begär åtkomst så avgränsar vi den till de team som ska bygga med det.
Utvärdera
Utforska hela systemet på pds.protocore.io – liveexempel, props och kod att kopiera för varje komponent och token.
Designtokens för webb, .NET och native, så att en färg eller en radie betyder samma sak på varje plattform ni levererar till.
PDS licensieras per team – en licens täcker alla som bygger med det, både tokens, komponenter och dokumentation.
Inloggningsuppgifter till det privata registret på npm.protocore.io, så att ert bygge kan hämta @protocore-paketen.
PDS är proprietärt och licensieras per team. Begär åtkomst så sätter vi upp er.
Allt ovan körs i produktionsdemos som vi gärna går igenom med dig – fristående, som whitelabel eller som en samlad plattform. Berätta vad ni bygger så visar vi den kortaste vägen dit.
