Começar
Introdução
O que é o sistema, o que ele resolve e como esta documentação se organiza.
Papel para decidir. Vidro para navegar.
A fonte de cor, espaço, vidro e comportamento do checkout, do backoffice e dos produtos que vierem depois. Cada peça tem uma razão escrita.
O que é#
O HibouPay Design System é a fonte de cor, espaço, vidro, movimento, marca e comportamento dos produtos HibouPay: o checkout, o backoffice e os que vierem depois.
Cobrança, pagamento e crédito são o assunto dos exemplos. Funil, estágio e o texto de um aplicativo ficam no produto, não aqui.
O que uma pessoa lê nesta documentação, um agente lê como JSON. O site, o PDF, o Markdown e os componentes saem da mesma fonte. O check de drift impede que divirjam.
Pacotes#
| Pacote | Camada | O que entrega |
|---|---|---|
| @hiboupay/tokens | Domínio | DTCG JSON → CSS, JS, tipos e tokenList com a classe Tailwind de cada token. |
| @hiboupay/content | Domínio | Princípios, padrões, voz, governança e o registry de componentes. Validado por schema. |
| @hiboupay/react | Adaptador | Componentes, preset do Tailwind, styles.css (vidro, labels, animações) e base.css. |
| @hiboupay/icons | Adaptador | HibouMark e Wordmark com o traço exato do imagotipo. |
Como esta documentação se organiza#
Fundamentos
As decisões
Princípios, cor, tipo, espaço, raio, superfície, vidro, movimento, marca e todos os tokens.
Componentes
As peças
Cada uma com exemplos vivos, anatomia, estados, API, teclado, leitor de tela e tokens.
Padrões
Os fluxos
Gate de decisão, proposta da coruja, dinheiro, filtros, formulários e checkout.
Diretrizes
As regras
Acessibilidade, voz e governança.