Tinta para agir, lacre para certificar.
O z-ui é um design system genérico, para qualquer tipo de sistema. A identidade padrão vem do mundo do documento: a cor de ação é o índigo da tinta de caneta. O lacre, um vinho de cera de lacre, marca selos e certificados, e os neutros têm um leve tom de papel. A folha do documento é sempre clara, mesmo no tema escuro. Os esquemas de cor trocam essa identidade sem mexer nos componentes.
Como os tokens se organizam
Tokens em CSS puro, ligados ao Tailwind v4 por uma ponte gerada. Os componentes usam apenas classes semânticas.
Escalas OKLCH de 50 a 950, de 50 em 50 (brand, accent, neutral, success, warning, caution, danger, info), mais signer e static, e tamanhos crus. Nunca aparecem em componente.
Intenção, em quatro arquivos: background (bg-*), foreground (fg-*), border e ring, mais domain (doc-*, status-*, signer-*). Trocam de valor no .dark e nas ilhas .theme-light/.theme-dark.
Bloco @theme gerado por pnpm theme:sync. Registra cada variável no Tailwind v4 para virar classe.
Variáveis do shadcn (--primary, --background, --ring) apontando para os semânticos.
Uso rápido
<button className="h-form-md rounded-base bg-bg-primary px-4 text-button-sm text-fg-on-primary hover:bg-bg-primary-hover focus-ring">
Enviar para assinatura
</button>
<span className="text-data-sm text-doc-hash">SHA-256 9f2c41ab…</span>
<span className="text-signature-lg text-doc-ink">Marina A. Costa</span>Próximo passo: veja as cores ou a tela de assinatura montada com os componentes.