Fem servir Google Analytics per a les estadístiques de trànsit. Les cookies d'analítica només s'activen si les accepteu. Sense consentiment, les estadístiques s'estimen a partir de senyals sense cookies. Política de cookies.
PDS · Sistema de disseny
PDS és el llenguatge de disseny propi de Protocore, extret dels productes que construïm i enfortit en producció. Dark-first, basat en tokens i documentat de cap a cap — els mateixos components que renderitzen els nostres productes i els panells dels clients, empaquetats perquè un equip els pugui adoptar en una tarda.
Funcionalitats
De les primitives a composicions de pàgina completes: 101 components, cadascun extret d'un producte que lliurem, no dissenyat de manera aïllada. Si un component és a PDS, ja ha fet feina real: aquest web, les demos dels productes i els panells dels nostres clients s'hi renderitzen.
Color, tipografia, espai i moviment es resolen des d'una única capa de tokens. Canvia un token i tots els components el segueixen: sense sobreescriptures per component, sense desviacions entre productes.
Un tema fosc i un de clar, cinc colors d'accent, tots governats pels mateixos tokens. La variació de marca és un canvi de tokens, no un fork: tots els productes de la família es renderitzen des del mateix sistema.
Contrast, elevació i color es treballen primer sobre el tema fosc; el tema clar es deriva dels mateixos tokens. El resultat és un mode fosc que se sent natiu, no invertit.
Botons, camps d'entrada, selectors, interruptors, lliscadors i l'estructura dels camps: etiquetes, ajudes i errors inclosos. Els estats ja estan dissenyats: focus, desactivat, no vàlid i càrrega es comporten igual a tots els productes.
Stacks, graelles, separadors i estructures de pàgina permeten compondre pantalles sense CSS ad hoc. Els components més grans són composicions de pàgina completes: patrons de hero, secció i peu de pàgina extrets de pàgines que lliurem.
Capçaleres, pestanyes, fils d'Ariadna i menús amb el comportament responsiu i de teclat ja integrat. La navegació d'aquest web és el component, no una imitació.
Modals, sheets, calaixos, popovers i tooltips sobre un únic model de capes: captura del focus, tancament i apilament resolts una sola vegada, de manera centralitzada. Cap producte porta la seva pròpia aritmètica de z-index.
Taules, llistes, targetes d'estadístiques, insígnies i cronologies per a productes que viuen de números. Les consoles d'operador de tota la família hi troben la seva densitat.
Toasts, banners, estats buits, progrés i skeletons: els estats poc lluïts, dissenyats des del principi. Un producte construït sobre PDS té una resposta meditada per a la càrrega, el buit i l'error.
Una escala tipogràfica editorial amb etiquetes monoespaiades per al registre tècnic: la veu que es veu a totes les superfícies de Protocore. L'escala són tokens, de manera que els productes l'ajusten sense sortir del sistema.
Les durades i les corbes d'acceleració s'ofereixen com a tokens, amb els components que ja les fan servir. Les interfícies es mouen de manera coherent entre productes perquè ningú no reajusta una animació a mà.
El contrast, els estats de focus i el comportament de teclat van integrats als components, no es deixen com a exercici. Utilitza els valors per defecte i l'accessibilitat hi ve inclosa.
L'estil és CSS estàtic resolt en temps de compilació: sense runtime de CSS-in-JS, sense res calculat al navegador. La capa d'estils afegeix zero JavaScript a la pàgina.
El sistema també es lliura com a paquet de CSS pur: tokens i classes d'utilitat sense necessitat de React. Les pàgines renderitzades al servidor, els correus i els stacks sense React beuen de la mateixa font de veritat.
Els tokens s'exporten per al web com a variables CSS, com a preset de Tailwind i en formats natius per a plataformes mòbils. Una sola definició de la marca, consumida allà on s'executa el producte.
La capa de React embolcalla les apps en un provider i exposa els tokens mitjançant hooks: els components llegeixen el tema i l'accent actius en lloc de codificar els valors. Canviar de tema és estat, no una recompilació.
El mateix mecanisme que dona cinc accents a PDS dona la seva marca a un producte whitelabel: canvia els valors dels tokens i conserva els components. Cada aplicació whitelabel de la família n'és la prova que funciona.
Un mapa llegible per màquines de tot el sistema —components, tokens, patrons— publicat com a llms.txt. Apunta-hi un LLM i el codi generat fa servir components reals de PDS en lloc d'inventar-ne de versemblants.
Un servidor MCP exposa el sistema directament als agents de programació: components, props i tokens, consultables mentre l'agent construeix. El sistema de disseny respon preguntes en lloc de ser enganxat als prompts.
Cada component viu a pds.protocore.io amb exemples en directe, props i codi per copiar i enganxar. La documentació es renderitza amb el mateix PDS: el que llegeixes és el que lliures.
PDS es lliura en paquets versionats, amb versions semàntiques i registres de canvis. Les actualitzacions són deliberades: un equip s'hi mou quan vol, i el changelog diu exactament què ha canviat.
Els paquets s'instal·len des del registre npm privat de Protocore amb un token per equip a .npmrc: el flux estàndard de npm, limitat als equips amb llicència. Sense fitxers zip inclosos al repositori, sense instal·lacions per còpia i enganxa.
Una clau de llicència signada es verifica en local: sense phone-home, sense cap comprovació de xarxa al build. Els problemes de llicència apareixen com a avisos en desenvolupament i mai no trenquen una aplicació en producció.
PDS és propietari i es llicencia per equip. Sol·licita accés i ho configurem tot —paquets, documentació i fonts dels tokens— perquè un equip pugui adoptar-lo en una tarda.
FAQ
Per equip, no per usuari ni per projecte. Una llicència cobreix tothom qui construeix amb PDS dins d'un equip: tokens, components i documentació. El cost depèn només del nombre d'equips que l'adopten, i els productes whitelabel que construïm per a tu ja funcionen amb PDS.
Des del registre privat a npm.protocore.io. Les credencials d'accés permeten que el teu projecte descarregui els paquets @protocore; a partir d'aquí, els tokens i els components s'instal·len com qualsevol altra dependència.
Els tokens es generen per a web, .NET i natiu, de manera que un color o un radi vol dir el mateix a totes les plataformes on publiquis. Els components es publiquen per a React, i una capa CSS independent del framework aporta els mateixos tokens i classes als equips que no fan servir React.
Dark-first i accessible de ssèrie: dos temes, cinc accents, tot basat en tokens, amb CSS zero-runtime perquè els estils no costin res en la càrrega. Els mateixos components renderitzen els nostres productes i els dashboards dels nostres clients.
Està pensat per a això: un mapa llms.txt i un servidor MCP permeten que els agents llegeixin el sistema i hi construeixin correctament, i pds.protocore.io ofereix exemples en directe, props i codi per copiar i enganxar de cada component i token.
Preus
PDS es llicencia per equip, no per usuari ni per projecte: una sola llicència cobreix tothom qui hi treballa dins d'aquest equip — tokens, components i documentació.
Comença amb un equip i amplia'n el nombre a mesura que creixi l'adopció. El cost depèn només del nombre d'equips que construeixen amb PDS, res més.
Els productes whitelabel que construïm per a tu ja funcionen amb PDS — la llicència independent és per als equips que l'adopten en els seus propis productes.
La llicència segueix els equips, no el nombre de persones ni l'ús. Sol·licita accés i l'ajustarem als equips que hi construiran.
Avalua
Explora el sistema complet a pds.protocore.io: exemples en directe, props i codi per copiar i enganxar de cada component i token.
Els design tokens es generen per a web, .NET i natiu, de manera que un color o un radi vol dir el mateix a totes les plataformes on publiquis.
PDS es llicencia per equip: una sola llicència cobreix tothom qui hi treballa, tant els tokens com els components i la documentació.
Credencials del registre privat a npm.protocore.io per instal·lar els paquets @protocore dels quals depèn el teu projecte.
PDS és propietari i es llicencia per equip. Sol·licita accés i ho deixem tot a punt.
Tot el que has vist funciona en demos en producció que et podem ensenyar: independent, whitelabel o com una sola plataforma. Explica'ns què construeixes i et mostrarem el camí més curt.
