PotenZIA Digital: Design System

BrandingDesign EngineeringUI/UX Design

O projeto é um repositório versionado dividido em nove camadas, da entrada de materiais à documentação. Cada camada é a fonte da verdade de uma única coisa. A normalização da marca partiu de três briefings. Cada afirmação recebeu uma etiqueta de origem: oficial, técnico, inferido, proposta ou pendente. Lacunas e conflitos foram registrados em um arquivo de pendências rastreável, em vez de serem preenchidos com suposições. Um AGENTS.md com regras obrigatórias e ordem de execução permite que agentes de IA trabalhem no sistema sem inventar informação de marca nem sair dos tokens. O logo aprovado, a Linhagem W → Z, é gerado por scripts Python modulares com uma base geométrica comum. O Z usa só vértices que já existem no W, e cada peça sai em SVG nas variantes positiva, negativa e monocromáticas. Um script com Chrome headless exporta os PNG e o ICO.

Os design tokens nascem em dez arquivos JSON: cor, tipografia, espaço, dimensões, raio, bordas, sombras, vidro, motion e breakpoints. Um build em Node sem dependências gera quatro saídas: tokens.css com 214 variáveis, tokens.tstipado, fontes.css com Archivo e JetBrains Mono locais, e um relatório de contraste. O build falha se algum par de contraste reprovar. São 60 pares validados em AA, incluindo texto sobre vidro no pior caso de luz por trás. Os componentes nunca usam hex: usam papéis semânticos (accent, text-primary, surface-base) remapeados por data-tema. Assim, qualquer seção troca entre claro e escuro com um atributo. A tipografia usa o eixo de largura da Archivo (100%, 110% e 118%) para ganhar precisão sem sair dos três pesos permitidos. A escala é fluida, com clamp() e unidades cqi, e cresce pelo contêiner, não pela viewport.

O UI kit tem 13 componentes em HTML e CSS puros, com JavaScript só como camada progressiva. O glassmorphism combina preenchimento translúcido, backdrop-filter com desfoque e saturação, borda de luz de 1 px e brilho interno no topo. Ele só aparece sobre um campo de luz real (gradientes radiais, orbes e a diagonal de impulso). Quando o navegador não tem backdrop-filter ou o usuário ativa prefers-reduced-transparency, o vidro vira superfície sólida. O brilho de hover acompanha o cursor pelas variáveis --pz-mx e --pz-my. Ele é feito com mask-composite para desenhar só o anel da borda e com uma propriedade @property animada para a cintilação. O halo fica recortado fora do elemento, para nunca passar por trás do texto nem alterar o contraste. Movimento reduzido leva todas as durações a 1 ms. O foco fica sempre visível, o alvo mínimo de toque é de 44 px e nenhum estado depende só da cor.

A documentação é uma plataforma estática servida por um servidor Node de poucas linhas, sem build e sem dependências. Ela lê diretamente os JSON, os Markdown e os SVG do repositório: a página apenas apresenta os arquivos, então mudar um token muda a documentação. Os blocos de código marcados como demo viram exemplos vivos, com alternância claro/escuro e código copiável. Há laboratórios interativos de largura tipográfica e de vidro. Um seletor troca a proposta de logo no site inteiro, o que permitiu comparar as três hipóteses em uso real antes da aprovação. O case de apresentação reaproveita os próprios tokens e componentes do sistema. As capturas vêm da plataforma real e a exportação das fatias em 1920×1080 é feita por script, via Chrome DevTools Protocol.

PotenZIA Digital: Design System - imagem 1

PotenZIA Digital: Design System - imagem 2

PotenZIA Digital: Design System - imagem 3

PotenZIA Digital: Design System - imagem 4

PotenZIA Digital: Design System - imagem 5

PotenZIA Digital: Design System - imagem 6

PotenZIA Digital: Design System - imagem 7

PotenZIA Digital: Design System - imagem 8

PotenZIA Digital: Design System - imagem 9

PotenZIA Digital: Design System - imagem 10

PotenZIA Digital: Design System - imagem 11

PotenZIA Digital: Design System - imagem 12

PotenZIA Digital: Design System - imagem 13

PotenZIA Digital: Design System - imagem 14

PotenZIA Digital: Design System - imagem 15

PotenZIA Digital: Design System - imagem 16

PotenZIA Digital: Design System - imagem 17

PotenZIA Digital: Design System - imagem 18

PotenZIA Digital: Design System - imagem 19

PotenZIA Digital: Design System - imagem 20

PotenZIA Digital: Design System - imagem 21

PotenZIA Digital: Design System - imagem 22

PotenZIA Digital: Design System - imagem 23

PotenZIA Digital: Design System - imagem 24

PotenZIA Digital: Design System - imagem 25