Usamos Google Analytics para las estadísticas de tráfico. Las cookies analíticas solo se instalan si las aceptas. Sin tu consentimiento, las estadísticas se estiman a partir de señales sin cookies. Política de cookies.
PDS · Sistema de diseño
PDS es el lenguaje de diseño propio de Protocore, extraído de los productos que construimos y probado en producción. Dark-first, basado en tokens y documentado de principio a fin: los mismos componentes que dan forma a nuestros productos y a los paneles de nuestros clientes, listos para que un equipo los adopte en una tarde.
Funcionalidades
De primitivos a composiciones de página completas: 101 componentes, cada uno extraído de un producto que lanzamos, no diseñado en el vacío. Si un componente está en PDS, ya ha trabajado de verdad: este sitio, las demos de producto y los dashboards de nuestros clientes se renderizan con él.
Color, tipografía, espacio y movimiento salen de una sola capa de tokens. Cambia un token y todos los componentes lo siguen: sin sobrescrituras por componente, sin divergencias entre productos.
Un tema oscuro y uno claro, cinco colores de acento, todo gobernado por los mismos tokens. Variar la marca es cambiar tokens, no hacer un fork: todos los productos de la familia se renderizan desde el mismo sistema.
El contraste, la elevación y el color se resuelven primero en el tema oscuro; el claro se deriva de los mismos tokens. El resultado es un modo oscuro que se siente nativo, no invertido.
Botones, inputs, selects, switches, sliders y andamiaje de campos, con etiquetas, ayudas y errores incluidos. Los estados ya están diseñados: foco, deshabilitado, no válido y carga se comportan igual en todos los productos.
Stacks, grids, divisores y shells de página componen pantallas sin CSS ad hoc. Los componentes más grandes son composiciones de página completas: patrones de hero, sección y footer sacados de páginas que publicamos.
Cabeceras, pestañas, migas de pan y menús con su comportamiento responsive y de teclado ya integrado. La navegación de este sitio es el componente, no una imitación.
Modales, sheets, drawers, popovers y tooltips sobre un único modelo de capas: la captura de foco, el cierre y el apilado se resuelven una vez, de forma centralizada. Ningún producto lleva su propia aritmética de z-index.
Tablas, listas, tarjetas de métricas, badges y líneas de tiempo para productos que viven de los números. Las consolas de operador de toda la familia obtienen su densidad de estos componentes.
Toasts, banners, estados vacíos, progreso y skeletons: los estados poco vistosos, diseñados desde el principio. Un producto construido sobre PDS tiene una respuesta pensada para cargando, vacío y fallido.
Una escala tipográfica editorial con etiquetas mono para el registro técnico: la voz que se ve en todas las superficies de Protocore. La escala son tokens, así que los productos la ajustan sin salir del sistema.
Las duraciones y curvas de easing se entregan como tokens, con los componentes ya usándolos. Las interfaces se mueven igual en todos los productos porque nadie reajusta una animación a mano.
El contraste, los estados de foco y el comportamiento de teclado vienen integrados en los componentes, no se dejan como ejercicio. Usa los valores por defecto y la accesibilidad viene incluida.
Los estilos son CSS estático resuelto en tiempo de compilación: sin runtime de CSS-in-JS, nada se calcula en el navegador. La capa de estilos no añade nada de JavaScript a la página.
El sistema también se publica como paquete CSS puro: tokens y clases de utilidad sin necesidad de React. Las páginas renderizadas en servidor, los emails y los stacks sin React beben de la misma fuente de verdad.
Los tokens se exportan para web como variables CSS, como preset de Tailwind y en formatos nativos para plataformas móviles. Una sola definición de la marca, usada allí donde corra el producto.
La capa de React envuelve las apps en un provider y expone los tokens mediante hooks: los componentes leen el tema y el acento activos en lugar de fijar valores. Cambiar de tema es estado, no una recompilación.
El mismo mecanismo que da a PDS cinco acentos da su marca a un producto whitelabel: se cambian los valores de los tokens y se mantienen los componentes. Cada app whitelabel de la familia es la prueba de que funciona.
Un mapa legible por máquinas de todo el sistema —componentes, tokens, patrones— publicado como llms.txt. Apunta un LLM hacia él y el código generado usa componentes reales de PDS en vez de inventar otros verosímiles.
Un servidor MCP expone el sistema directamente a los agentes de código: componentes, props y tokens, consultables mientras el agente construye. El sistema de diseño responde preguntas en lugar de pegarse en los prompts.
Cada componente vive en pds.protocore.io con ejemplos en vivo, props y código para copiar y pegar. La documentación se renderiza con el propio PDS: lo que lees es lo que publicas.
PDS se publica como paquetes versionados, con versiones semánticas y changelogs. Las actualizaciones son deliberadas: cada equipo se mueve cuando decide, y el changelog dice exactamente qué ha cambiado.
Los paquetes se instalan desde el registro npm privado de Protocore con un token por equipo en .npmrc: el flujo estándar de npm, limitado a equipos con licencia. Sin zips pasados a mano, sin instalaciones por copiar y pegar.
Una clave de licencia firmada se verifica en local: sin phone-home, sin comprobaciones de red en tu build. Los problemas de licencia aparecen como avisos en desarrollo y nunca rompen una app en producción.
PDS es propietario y se licencia por equipo. Solicita acceso y lo dejamos listo —paquetes, documentación y fuentes de tokens— para que un equipo pueda adoptarlo en una tarde.
FAQ
Por equipo, no por usuario ni por proyecto. Una licencia cubre a todas las personas que construyen con PDS dentro de un equipo: tokens, componentes y documentación. El coste depende solo del número de equipos que lo adoptan, y los productos whitelabel que construimos para ti ya se renderizan sobre él.
Desde el registry privado en npm.protocore.io. Las credenciales de acceso permiten que tu build descargue los paquetes @protocore; a partir de ahí, los tokens y componentes se instalan como cualquier otra dependencia.
Los tokens se emiten para web, .NET y nativo, así que un color o un radio significa lo mismo en todas las plataformas que publiques. Los componentes se entregan para React, y una capa CSS independiente del framework lleva los mismos tokens y clases para los equipos que no usan React.
Dark-first y accesible por defecto: dos temas, cinco acentos, todo controlado por tokens, con CSS de cero runtime para que los estilos no cuesten nada en la carga. Los mismos componentes dan vida a nuestros productos y a los dashboards de nuestros clientes.
Está pensado para ello: un mapa llms.txt y un servidor MCP permiten a los agentes leer el sistema y construir con él correctamente, y pds.protocore.io ofrece ejemplos en vivo, props y código listo para copiar y pegar de cada componente y token.
Precios
PDS se licencia por equipo, no por usuario ni por proyecto: una sola licencia cubre a todas las personas que construyen con él dentro de ese equipo: tokens, componentes y documentación.
Empieza con un equipo y amplía a más a medida que crezca la adopción. Lo que determina el coste es el número de equipos que construyen sobre PDS, nada más.
Los productos whitelabel que construimos para ti ya se renderizan sobre PDS; la licencia independiente es para los equipos que lo adoptan en sus propios productos.
La licencia sigue a los equipos, no al número de personas ni al uso. Solicita acceso y la ajustaremos a los equipos que van a construir con él.
Evalúa
Explora el sistema completo en pds.protocore.io: ejemplos en vivo, props y código listo para copiar y pegar de cada componente y token.
Los design tokens emitidos para web, .NET y nativo, de modo que un color o un radio signifique lo mismo en todas las plataformas que publiques.
PDS se licencia por equipo: una sola licencia cubre a todas las personas que construyen con él, tanto tokens como componentes y documentación.
Credenciales del registry privado en npm.protocore.io para instalar los paquetes @protocore de los que depende tu build.
PDS es propietario y se licencia por equipo. Solicita acceso y lo dejamos todo listo.
Todo lo anterior funciona en demos en producción que podemos mostrarte: standalone, whitelabel o como una única plataforma. Cuéntanos qué estás construyendo y te enseñaremos el camino más corto.
