HibouPay Design System · v0.4.0
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.
- tokens
- 118
- componentes
- 35
- padrões
- 8
- níveis de vidro
- 3
00
Vidro · comparar
Mesmo fundo, mesmo desenho, três níveis de transparência. Escolha um e ele vale para barra, busca, popover, toast, sidebar e dock no produto inteiro.
Documentação completaBase
branco 56→40% · blur 32 · sat 200%
Lê a cor de trás, não a forma. Mais sóbrio, mais corporativo.
Mediano
branco 40→24% · blur 24 · sat 220%
A forma de trás aparece borrada. Brilho na quina superior.
Intenso
branco 20→8% · blur 14 · sat 250%
Quase líquido: vê-se o que está atrás. Borda e brilho seguram a leitura.
Liquidado · 30 dias
R$ 809k
O dado fica no papel. O vidro ao lado só navega.
Mercado Aurora
PG-24A7-96F844
R$ 26,3 mil
LiquidadoÓtica Bela Vista
PG-24A7-724AA0
R$ 1,1 mil
Em análiseFarmácia Norte
PG-24A7-BAAEBC
R$ 10,3 mil
Pendente
01
Princípios
Seis regras. Quando um componente novo não cabe nelas, a regra muda antes do componente.
Documentação completa01
Papel e vidro
Papel guarda dado e decisão. Vidro só no que navega por cima: barras, busca, compositor, toast.
02
A coruja é o agente
Nenhum ícone genérico de IA. A coruja pisca quando vigia e ganha órbita quando trabalha.
03
Mono é máquina
Índices, IDs, rótulos e estados em mono. O que a pessoa lê fica em Inter; o que decide, em Sora.
04
Raios concêntricos
Raio interno = externo − padding. Cartão 16 com 4 de respiro abriga controle 12.
05
Uma margem só
16 · 24 · 40 por largura. Nenhuma tela inventa o próprio padding lateral.
06
Luz, não faixa
Tom aparece como ponto e brilho. Nada de barra colorida no topo do cartão.
02
Cor
Quatro cores de marca, uma escala de tom. Segura, acessível e inovadora. O resto é neutro de Graffiti e cor de estado.
Documentação completa#000000 · 0 · 0 · 0
Black
Robustez. Fim da escala corporativa, fundo da superfície escura.
#2E3440 · 46 · 52 · 64
Graffiti
Credibilidade. Tinta de texto, sidebar, dock e toda sombra.
#0061F1 · 0 · 97 · 241
Vivid Blue
Confiança e tecnologia. Ação principal, foco e luz.
#FFFFFF · 255 · 255 · 255
White
Transparência. Papel onde o dado mora.
Escala de tom
Cada tela escolhe onde pousa. Relatório e dinheiro puxam para o corporativo; convite e ação puxam para o popular.
Neutros e estado · funcionais, nunca de marca
canvas
#F3F5F8
paper
#FFFFFF
wash
#EEF0F3
muted
#686D75
success
#2BC155
warning
#FFBC11
danger
#F94687
primary-deep
#0048B8
secondary
#A02CFA
Display · Sora 600 · −0.035em
O dinheiro, com lastro.
Título · Sora 600 · 16
A cobrança nasce pendente e só liquida com confirmação
Número · Sora tabular
R$ 809,4k
Corpo · Inter 15 · 1.55
As colunas e os estados vêm da operação publicada. Estorno e cancelamento continuam pedindo motivo.
Máquina · JetBrains Mono
PG-24A7-BAAEBC · gpt-6-luna · $0.0090
04
Espaço
Grade de 4pt. Os passos pulam de propósito para manter ritmo. Raios concêntricos seguram o encaixe.
Documentação completaxs
6px
sm
8px
md
12px
lg
16px
xl
22px
ear
9px
Concêntrico · 16 − 4 = 12
05
Superfície
Quatro materiais e quatro alturas. Sombra tingida de Graffiti; Black só como fundo, nunca como sombra.
Documentação completapaper · e1
Papel
O padrão. Dado, formulário, decisão.
sunken · e0
Rebaixado
Trilho de segmento, área de teste, prévia.
glass · e2
Vidro
Só no que flutua. Tem borda de luz nas quinas.
night · e2
Graffiti
Superfície da marca. Sidebar, cabeçalho do agente, dock.
04Cartão interativo
Passe o mouse: o papel fica; a borda de luz acende depois do olhar chegar
Cabeçalho com índice, rótulo, título e descrição. As ações descem no celular em vez de espremer o título.
06
Ação
Uma altura por tamanho, compartilhada com input e chip. Toque afunda 2%. Foco é o mesmo anel em toda peça: 2px agora, halo depois.
Documentação completaVariantes · md 40
Tamanhos · xs 28 · sm 32 · md 40 · lg 48 · ícone
Estados · carregando mantém a largura · desabilitado
Sobre vidro e noite
07
Entrada
Papel com anel fino. Foco vira azul com halo de 4px. Erro diz o que fazer, com ícone e aria.
Documentação completaFalta o domínio. Ex.: financeiro@aurora.com.br
Para barras densas.
Vai para o histórico. Estorno não passa sem.
Filtro · chip ativo vira papel com anel azul · popover de vidro
Sete execuções, todos os agentes.
Segmento · papel desliza até a aba ativa
Etiquetas
Códigos · pessoas · carregando
Liquidado
Últimos 30 dias
Aguardando
Decisões
Custo do agente
3.520 tokens
Conciliado
Nenhuma cobrança com esses filtros
Ajuste ou limpe os filtros.
09
Dados
Linha de 48, cabeçalho que ordena, número à direita em Sora tabular. O link da linha é o alvo do teclado.
Documentação completa| Conta | ID | Status | Método | Responsável | Valor |
|---|---|---|---|---|---|
| PG-24A7-96F844 | Liquidado | PIX | AL | R$ 26,3 mil | |
| PG-24A7-724AA0 | Em análise | Cartão | ? | R$ 1,1 mil | |
| PG-24A7-BAAEBC | Pendente | Boleto | RS | R$ 10,3 mil | |
| PG-24A7-11C0D2 | Falhou | PIX | AL | R$ 480 |
10
Diálogo
Papel sobre scrim de Graffiti. No celular vira folha que sobe; no desktop pousa no centro. Gate pede motivo.
Documentação completaAbrir
11
Coruja
O símbolo oficial, com o traço exato do imagotipo. Ocioso ele pisca a cada 6s; trabalhando ganha órbita.
Documentação completabrand · idle · working
Sobre noite