Utilizamos o Google Analytics para estatísticas de tráfego. Os cookies de análise só são definidos se 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 robustecida em produção. Dark-first, orientada por tokens e documentada de ponta a ponta — os mesmos componentes que dão vida aos nossos produtos e aos dashboards dos clientes, prontos para uma equipa os adotar numa tarde.
Funcionalidades
Das primitivas às composições de página completas — 101 componentes, cada um extraído de um produto que entregamos, em vez de desenhado isoladamente. Se um componente está no PDS, já fez trabalho a sério: este site, as demos dos produtos e os dashboards dos nossos clientes assentam todos nele.
Cor, tipografia, espaçamento e movimento resolvem-se a partir de uma única camada de tokens. Altere um token e todos os componentes acompanham — sem overrides por componente, sem divergências entre produtos.
Um tema escuro e um claro, cinco cores de destaque, tudo orientado pelos mesmos tokens. A variação de marca é uma troca de tokens, não um fork — todos os produtos da família assentam no mesmo sistema.
Contraste, elevação e cor são trabalhados 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 estrutura de campos — com labels, dicas e erros incluídos. Os estados já estão desenhados: foco, desativado, inválido e a carregar comportam-se da mesma forma em todos os produtos.
Stacks, grids, divisores e shells de página compõem ecrãs sem CSS ad hoc. Os maiores componentes são composições de página completas — padrões de hero, secção e rodapé extraídos de páginas que entregamos.
Cabeçalhos, separadores, breadcrumbs e menus com comportamento responsivo e de teclado já integrado. A navegação deste site é o próprio componente, não uma imitação.
Modais, sheets, drawers, popovers e tooltips num único modelo de camadas — focus trapping, fecho e empilhamento tratados uma só vez, de forma centralizada. Nenhum produto traz a sua própria aritmética de z-index.
Tabelas, listas, tiles de métricas, badges e timelines para produtos que vivem de números. As consolas de operação de toda a família obtêm a sua densidade a partir destes componentes.
Toasts, banners, estados vazios, progresso e skeletons — os estados menos glamorosos, desenhados à partida. Um produto construído sobre o PDS tem uma resposta ponderada para carregamento, vazio e falha.
Uma escala tipográfica editorial com labels mono para o registo técnico — a voz que se vê em todas as superfícies da Protocore. A escala é feita de tokens, por isso os produtos ajustam-na sem sair do sistema.
Durações e easings são entregues como tokens, com os componentes a usá-los desde o início. As interfaces movem-se de forma consistente entre produtos porque ninguém reajusta uma animação à mão.
Contraste, estados de foco e comportamento de teclado estão integrados nos componentes, não ficam como exercício. Use as predefinições e a acessibilidade vem incluída.
O estilo é CSS estático resolvido em tempo de build — sem runtime de CSS-in-JS, nada calculado no browser. A camada de estilo não acrescenta JavaScript à página.
O sistema também é distribuído como um pacote CSS simples — tokens e classes utilitárias sem necessidade de React. Páginas renderizadas no servidor, emails e stacks sem React partilham a mesma fonte de verdade.
Os tokens são exportados para a web como variáveis CSS, como preset de Tailwind e em formatos nativos para plataformas móveis. Uma única definição da marca, usada onde quer que o produto corra.
A camada React envolve as apps num provider e expõe os tokens através de hooks — os componentes leem o tema e o acento ativos em vez de valores fixos no código. Mudar de tema é estado, não um 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áquinas de todo o sistema — componentes, tokens, padrões — publicado como llms.txt. Aponte um LLM para ele e o código gerado usa componentes PDS reais, em vez de inventar outros plausíveis.
Um servidor MCP expõe o sistema diretamente aos agentes de programação: 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 lê é o que entrega.
O PDS é distribuído em pacotes versionados, com versões semânticas e changelogs. As atualizações são deliberadas: a equipa muda quando quiser, e o changelog diz exatamente o que mudou.
Os pacotes instalam-se a partir do registry npm privado da Protocore com um token por equipa no .npmrc — o fluxo npm habitual, restrito a equipas licenciadas. Sem ficheiros zip avulsos, sem instalações por copiar e colar.
Uma chave de licença assinada é verificada localmente — sem phone-home, sem verificação de rede no seu build. Os problemas de licenciamento surgem como avisos em tempo de desenvolvimento e nunca quebram uma app em produção.
O PDS é proprietário e licenciado por equipa. Peça acesso e tratamos da configuração — pacotes, documentação e fontes dos tokens — para que uma equipa o adote numa tarde.
FAQ
Por equipa — não por utilizador nem por projeto. Uma licença cobre todos os que trabalham com o PDS dentro de uma equipa: tokens, componentes e documentação. O custo cresce apenas com o número de equipas que o adotam, e os produtos whitelabel que construímos para si já são renderizados com ele.
A partir do registry privado em npm.protocore.io. As credenciais de acesso permitem ao seu build obter os pacotes @protocore; a partir daí, os tokens e os componentes instalam-se como qualquer dependência.
Os tokens são gerados para web, .NET e nativo, pelo que uma cor ou um raio significa o mesmo em todas as plataformas que lança. Os componentes são disponibilizados para React, e uma camada CSS independente de framework transporta os mesmos tokens e classes para as equipas que não usam React.
Dark-first e acessível por defeito — dois temas, cinco cores de destaque, tudo orientado por tokens, com CSS zero-runtime para que o estilo não custe nada no carregamento. Os mesmos componentes renderizam os nossos produtos e os dashboards dos nossos clientes.
Foi pensado para isso: um mapa llms.txt e um servidor MCP permitem aos agentes ler o sistema e construir com ele corretamente, e o pds.protocore.io reúne exemplos em direto, props e código para copiar e colar de cada componente e token.
Preços
O PDS é licenciado por equipa, não por utilizador nem por projeto — uma licença cobre todos os que trabalham com ele dentro dessa equipa: tokens, componentes e documentação.
Comece com uma equipa e alargue a mais à medida que a adoção cresce. O que determina o custo é o número de equipas que desenvolvem sobre o PDS, e mais nada.
Os produtos whitelabel que construímos para si já são renderizados com o PDS — a licença autónoma destina-se a equipas que o adotem nos seus próprios produtos.
O licenciamento segue as equipas, não o número de pessoas nem a utilização. Peça acesso e definimos o âmbito com as equipas que vão desenvolver com ele.
Avaliar
Explore o sistema completo em pds.protocore.io — exemplos em direto, 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 o mesmo em todas as plataformas que lança.
O PDS é licenciado por equipa — uma licença cobre todos os que trabalham com ele: tokens, componentes e documentação.
Credenciais para o registry privado em npm.protocore.io, para instalar os pacotes @protocore de que o seu build depende.
O PDS é proprietário e licenciado por equipa. Peça acesso e tratamos da configuração.
Tudo o que vê acima corre em demos de produção que lhe podemos mostrar — autónomo, whitelabel ou como uma única plataforma. Diga-nos o que está a construir e mostramos-lhe o caminho mais curto.
