Padrões
Dinheiro e números
Número é Sora tabular, alinhado à direita, com unidade. Variação ruim é aviso, não erro.
Na prática#
Liquidado hoje
Pendente
Taxa de falha
últimos 7 dias
| Conta | Status | Responsável | Valor |
|---|---|---|---|
| Mercado Aurora | Liquidado | AL | R$ 26.300 |
| Ótica Bela Vista | Em análise | ? | R$ 1.100 |
| Farmácia Norte | Pendente | RS | R$ 10.300 |
| Padaria São Jorge | Falhou | AL | R$ 480 |
Métricas e tabela com valores tabulares
Regras#
- 01Use hb-num (Sora, algarismos tabulares) para valor, contagem e percentual.
- 02Em tabela, coluna numérica usa align="right".
- 03Sempre com unidade: R$, %, pp, tokens. Valor em real usa formatBRL / formatCents do Core — o formato não é escolha de cada app.
- 04Guarde dinheiro em centavos e formate só na borda, com formatCents. Float em valor de contrato é bug.
- 05Delta bom usa success; delta ruim usa warning. Danger é só para falha.
- 06Célula vazia segue vazia.
Evite#
- Valor monetário em Inter proporcional.
- Número centralizado em coluna.
- Arredondar sem indicar ("1,2k" sem contexto de milhar).
Peças usadas#
Badge
Badge
Etiqueta de estado com raio 6, nunca pílula. O ponto diz que o estado está vivo. O app mapeia o domínio para um tom do Core.
DataTable
DataTable
Tabela de trabalho em papel. Linha de 48 (36 no denso), cabeçalho de máquina que ordena, número à direita em Sora tabular. O link da linha é o alvo do teclado.
Avatar
Avatar
Iniciais em Sora sobre uma cor de token: Vivid Blue, Graffiti, success-ink, warning-ink ou danger-ink. A cor vem do e-mail, então a mesma pessoa tem sempre a mesma cor. Ninguém atribuído é tracejado.
MetricWidget
MetricWidget
Métrica: rótulo de máquina, número em Sora tabular, contexto embaixo. O tom é luz, não faixa. Bar mostra proporção.