Usamos o Google Analytics para estatísticas de tráfego. Os cookies de análise só são definidos se você aceitar. Sem consentimento, as estatísticas são estimadas a partir de sinais sem cookies. Política de Cookies.
PDS · Design System
O PDS é a linguagem de design própria da Protocore, extraída dos produtos que construímos e testada em produção. Dark-first, orientado a tokens e documentado de ponta a ponta — os mesmos componentes que renderizam nossos produtos e os dashboards de nossos clientes, empacotados para que um time os adote em uma tarde.
Recursos
De primitivos a composições completas de página — 101 componentes, cada um extraído de um produto que entregamos, e não desenhado de forma isolada. Se um componente está no PDS, ele já trabalhou de verdade: este site, as demos dos produtos e os dashboards dos nossos clientes são renderizados com ele.
Cor, tipografia, espaçamento e movimento partem de uma única camada de tokens. Mude um token e todos os componentes acompanham — sem overrides por componente, sem divergência entre produtos.
Um tema escuro e um claro, cinco cores de destaque, tudo guiado pelos mesmos tokens. Variar a marca é trocar tokens, não criar um fork — todos os produtos da família são renderizados a partir do mesmo sistema.
Contraste, elevação e cor são definidos primeiro no tema escuro; o tema claro deriva dos mesmos tokens. O resultado é um modo escuro que parece nativo, não invertido.
Botões, inputs, selects, switches, sliders e a estrutura dos campos — rótulos, dicas e erros incluídos. Os estados já estão desenhados: foco, desabilitado, inválido e carregando se comportam igual em todos os produtos.
Stacks, grids, divisores e shells de página compõem telas sem CSS ad hoc. Os maiores componentes são composições completas de página — padrões de hero, seção e rodapé extraídos de páginas que entregamos.
Headers, tabs, breadcrumbs e menus com comportamento responsivo e de teclado já embutido. A navegação deste site é o próprio componente, não uma imitação dele.
Modais, sheets, drawers, popovers e tooltips em um único modelo de camadas — focus trap, fechamento e empilhamento resolvidos uma vez, de forma central. Nenhum produto precisa de sua própria aritmética de z-index.
Tabelas, listas, stat tiles, badges e timelines para produtos que vivem de números. Os consoles de operação de toda a família ganham sua densidade a partir desses componentes.
Toasts, banners, estados vazios, progresso e skeletons — os estados pouco glamorosos, desenhados desde o início. Um produto construído sobre o PDS tem uma resposta pensada para carregando, vazio e falha.
Uma escala tipográfica editorial com rótulos mono para o registro técnico — a voz que você vê em todas as superfícies da Protocore. A escala é feita de tokens, então os produtos a ajustam sem sair do sistema.
Durações e easings são entregues como tokens, com os componentes já usando-os. As interfaces se movem de forma consistente entre os produtos porque ninguém reajusta o tempo de uma animação à mão.
Contraste, estados de foco e comportamento de teclado vêm embutidos nos componentes, não ficam como exercício para o leitor. Use os padrões e a acessibilidade vem junto.
A estilização é CSS estático resolvido em tempo de build — sem runtime de CSS-in-JS, nada calculado no navegador. A camada de estilo adiciona zero JavaScript à página.
O sistema também é distribuído como um pacote CSS puro — tokens e classes utilitárias, sem precisar de React. Páginas renderizadas no servidor, e-mails e stacks sem React usam a mesma fonte única de verdade.
Os tokens são exportados para a web como variáveis CSS, como preset do Tailwind e em formatos nativos para plataformas mobile. Uma única definição da marca, consumida onde quer que o produto rode.
A camada React envolve os apps em um provider e expõe os tokens por meio de hooks — os componentes leem o tema e o acento ativos em vez de fixar valores no código. Trocar de tema é estado, não rebuild.
O mesmo mecanismo que dá cinco acentos ao PDS dá a marca a um produto whitelabel: troque os valores dos tokens, mantenha os componentes. Cada app whitelabel da família é prova de que funciona.
Um mapa legível por máquina de todo o sistema — componentes, tokens, padrões — publicado como llms.txt. Aponte um LLM para ele e o código gerado usa componentes reais do PDS em vez de inventar outros plausíveis.
Um servidor MCP expõe o sistema diretamente aos agentes de código: componentes, props e tokens, consultáveis enquanto o agente constrói. O design system responde a perguntas em vez de ser colado em prompts.
Cada componente vive em pds.protocore.io com exemplos ao vivo, props e código para copiar e colar. A documentação é renderizada no próprio PDS — o que você lê é o que você entrega.
O PDS é distribuído em pacotes versionados, com versionamento semântico e changelogs. As atualizações são deliberadas: a equipe migra quando decide, e o changelog diz exatamente o que mudou.
Os pacotes são instalados a partir do registry npm privado da Protocore, com um token por equipe no .npmrc — o fluxo padrão do npm, restrito a equipes licenciadas. Sem arquivos zip embutidos, sem instalação por copiar e colar.
Uma chave de licença assinada é verificada localmente — sem phone-home, sem checagem de rede no seu build. Problemas de licenciamento aparecem como avisos em tempo de desenvolvimento e nunca quebram um app em produção.
O PDS é proprietário e licenciado por equipe. Solicite acesso e nós configuramos tudo para você — pacotes, documentação e fontes dos tokens — para que uma equipe o adote em uma tarde.
FAQ
Por equipe — não por usuário nem por projeto. Uma licença cobre todos que constroem com o PDS dentro de uma equipe: tokens, componentes e documentação. O custo cresce com o número de equipes que o adotam, nada mais, e os produtos whitelabel que construímos para você já são renderizados com ele.
Pelo registry privado em npm.protocore.io. As credenciais de acesso permitem que o seu build baixe os pacotes @protocore; a partir daí, tokens e componentes são instalados como qualquer dependência.
Os tokens são gerados para web, .NET e nativo, então uma cor ou um raio significa a mesma coisa em todas as plataformas que você publica. Os componentes são entregues para React, e uma camada CSS agnóstica de framework traz os mesmos tokens e classes para equipes que não usam React.
Dark-first e acessível por padrão — dois temas, cinco cores de destaque, tudo orientado a tokens, com CSS zero-runtime para que o estilo não pese no carregamento. Os mesmos componentes renderizam nossos produtos e os dashboards dos nossos clientes.
Foi feito para isso: um mapa llms.txt e um servidor MCP permitem que agentes leiam o sistema e construam com ele corretamente, e o pds.protocore.io traz exemplos ao vivo, props e código para copiar e colar de cada componente e token.
Preços
O PDS é licenciado por equipe, não por usuário nem por projeto: uma licença cobre todos que constroem com ele dentro da equipe — tokens, componentes e documentação.
Comece com uma equipe e amplie para outras conforme a adoção cresce. O que define o custo é o número de equipes construindo sobre o PDS, nada mais.
Os produtos whitelabel que construímos para você já são renderizados com o PDS — a licença avulsa é para equipes que o adotam nos próprios produtos.
A licença segue as equipes, não o número de pessoas nem o uso. Solicite acesso e dimensionamos para as equipes que vão construir com ele.
Avalie
Navegue por todo o sistema em pds.protocore.io — exemplos ao vivo, props e código para copiar e colar de cada componente e token.
Os design tokens gerados para web, .NET e nativo, para que uma cor ou um raio signifique a mesma coisa em todas as plataformas que você publica.
O PDS é licenciado por equipe — uma licença cobre todos que constroem com ele, seja em tokens, componentes ou documentação.
Credenciais do registry privado em npm.protocore.io para instalar os pacotes @protocore que o seu build utiliza.
O PDS é proprietário e licenciado por equipe. Solicite acesso e nós cuidamos da configuração.
Tudo acima roda em demos de produção que podemos apresentar a você — standalone, whitelabel ou como uma única plataforma. Conte o que você está construindo e mostraremos o caminho mais curto até lá.
