Design System · Documentos BHub

Guia de Relatórios.

Tudo o que um relatório dos Motores precisa ter: tokens, página, componentes, formatos de dados e as regras de quando usar cada coisa. Vale para quem desenha, para os devs e para o gerador automático do HubReport.

Vai criar um relatório?

Comece por Anatomia, depois Qual componente usar. Copie o CSS canônico do topo deste arquivo.

Vai revisar um relatório?

Use Formatação, Valores vazios e o Catálogo para conferir conformidade.

Vai automatizar?

A Especificação para máquina traz tokens, componentes e regras em JSON, na mesma fonte deste guia.

Fonte única: o bloco <style> deste arquivo tem três partes. A Parte 1 são os tokens, a Parte 2 é o CSS canônico doc-* que os relatórios copiam, e a Parte 3 é só o layout deste guia. Os exemplos abaixo usam as classes reais da Parte 2.

Princípios.

Quando uma regra não cobrir o caso, decida pelo princípio.

1. O documento é uma folha real

A4 com altura fixa, cabeçalho e rodapé em toda página. O que aparece na tela é o que sai no PDF: nada rola, nada corta.

2. A cor tem significado

Rosa abre bloco e agrupa. Azul totaliza. Cinza é total geral e apoio. Nenhuma outra cor entra no corpo do documento.

3. Um componente por necessidade

Se já existe componente para o caso, use-o. Padrão novo entra primeiro neste guia, depois no relatório.

4. Dado fictício e coerente

Só o conjunto fictício oficial. E os números precisam fechar: total soma, saldo bate, PDF e Excel mostram o mesmo.

O que mudou na v2.

A v1 descrevia tokens e alguns padrões fiscais. A v2 foi escrita a partir da leitura dos 45 relatórios do repositório (22/10/2026), resolve as contradições da v1 e cobre o que os relatórios já usavam sem documentação.

Tema	v1	v2
Logo do cabeçalho	Texto dizia "só CONTJET", a nota dizia "BHub + régua + empresa"	Logo cadastrada pela empresa que emite. Sem logo cadastrada, entra a LogoBHub. BHub sempre no rodapé, nunca no corpo
Página	Não definida (relatórios com 900px, altura livre, 1123×700…)	A4 794×1123 ou 1123×794, altura fixa, regras de quebra e folga
Títulos de bloco	"SectionDivider substituído por h2 centralizado" × CLAUDE.md "barra rosa"	Barra de bloco rosa para dados; título de cláusula em texto rosa só em texto jurídico; divisor e h2 fora de uso
Totais	Três exemplos com specs diferentes	Quatro níveis fixos: subtotal, total, total geral e Total Banner (sempre azul)
Tipografia	Escala 10/11/13/15/18/24 (da página do guia, não dos documentos)	Escala real dos documentos: 8,5 a 15px, nove tamanhos
Componentes	Totalizadores, agrupamentos, banner	+ cabeçalho, rodapé, grade de campos, indicadores, plano de contas, memória de cálculo, texto jurídico, opções, assinaturas, notas, estado vazio, Excel
Dados	brl × n2	Formatos de todos os dados (datas, documentos, negativos, natureza D/C, percentuais…) e regra de vazio
Regras	—	Fluxograma de decisão, condicionais por documento e especificação em JSON
Cores de área	Contábil verde, Fiscal #2563eb	Iguais às do HubReport (interface apenas)

Cores.

Todas as cores do documento vêm destes tokens. Cor fora da lista é desvio.

Documento

brandPink#f25461
Barra de bloco, cabeçalho de tabela, borda do agrupamento N1, nome do N2, título de cláusula.

pinkSoft#fde7ea
Fundo de agrupamento N1 e N2. Só dentro de tabela.

brandBlue#0171e4
Texto de total e do Total Banner.

blueSoft · blueSoftBorderrgba(1,113,228,.08) · .35
Fundo e borda de total e do Total Banner.

textPrimary#18181b
Texto, valores, títulos, linha de assinatura.

textSecondary#52525b
Rótulos, códigos, datas em tabela, notas, rodapé.

border#e4e4e7
Linhas de tabela, divisórias internas, rodapé.

borderStrong#d4d4d8
Base do cabeçalho, topo do Total Geral, contorno da grade de campos.

surface#ffffff
Folha e linhas ímpares.

surfaceMuted#f7f7f8
Zebra, Total Geral, indicadores, legenda, folga.

credit#2748B2
Provento, só quando divide coluna com desconto.

debit#dc2626
Desconto, mesma condição do provento.

Fora da folha

chrome#0f1726
Topbar de visualização.

pageBg#ebebed
Fundo atrás das folhas. Substitui o #f0f0f2.

textMuted#71717a
Só o texto do banner de dados fictícios.

excel · excelDark#16a34a · #15803d
Interface dos relatórios Excel (botão, aba, card). Nunca na grade.

Cores das áreas

Usadas só na interface (HubReport, vitrine, cards). Nunca dentro do documento.

DP#7c3aed

Fiscal#0171e4

Contábil#0d9488

BPO#16a34a

Tipografia.

Nunito Sans, carregada só nos pesos 500, 700, 800 e 900. Sem itálico: a fonte não carrega itálico e o navegador inventaria um. Os tamanhos abaixo são os únicos válidos no documento.

15 / 900R$ 12.405,70Valor do Total Banner

14 / 800Recibo de fériasTítulo no cabeçalho (maiúsculas, +.3px)

13 / 800Contrato de trabalhoTítulo principal no corpo, página 1 (documento jurídico ou formulário)

11,5 / 900TOTAL GERAL 101.922,48Linha de Total Geral

11 / 500Texto corrido, parágrafos e cláusulas.Corpo de texto (line-height 1.5); destaque em 800

10,5 / 7004.250,00 · FERNANDA COSTA ALVESCélula de tabela, valor de campo, nome na assinatura (800), título de cláusula (800)

10 / 500·700CNPJ 41.520.419/0001-51Metadados do cabeçalho, subtítulo, nome de N2

9,5 / 500Não há informações do consignado.Notas, legenda de assinatura, estado vazio, memória de cálculo

9 / 800ProventosCabeçalho de tabela e barra de bloco (maiúsculas); rodapé (500)

8,5 / 700Data de admissãoRótulo na grade de campos e nos indicadores

8 / 800IPISó cabeçalho da tabela .mini (7 colunas ou mais)

Faça

Maiúsculas só em título, barra, cabeçalho de tabela e rótulo de campo.
Números alinhados à direita com tabular-nums.
Destaque em texto corrido com 800.

Não faça

Pesos 400 ou 600, inclusive no link do Google Fonts.
Itálico (use textSecondary 700 e explique na legenda).
Tamanhos fora da escala: 9,3 · 12 · 12,5 · 16px.

Espaço, bordas e raio.

Espaçamento

4px	Entre rótulo e valor
6–8px	Gap de campos e indicadores; padding vertical de barra
16px	Entre blocos
24 × 32px	Padding do conteúdo da folha (vertical × lateral)
40px	Assinaturas: gap e margem acima; espaço entre folhas

Bordas

1px border	Linhas de tabela, rodapé, células
1px borderStrong	Contorno da grade de campos
2px borderStrong	Base do cabeçalho; topo do Total Geral
2px brandPink	Base do agrupamento N1
2px blue .35	Topo do total
1.5px blue .35	Contorno do Total Banner
1px dashed	Estado vazio, transporte

Raio

4px	Checkbox, quadro de digital
8px	Tabela, grade de campos, banner, indicadores, legenda
12px	Só interface (cards da vitrine)
pill	Só interface (badges)

2px, 6px e 10px estão fora da escala.

Marcas e logos.

Regra combinada com o time de desenvolvimento em 02/09/2026 e em produção desde 03/09/2026.

Cabeçalho do documento

Mostra apenas a logo cadastrada pela empresa que emite o documento. Se a empresa não tiver logo cadastrada, mostra a LogoBHub no lugar. Se a logo cadastrada já vier com a BHub junto, ela aparece como foi cadastrada.

Empresa com logo (exemplo: CONTJET)
svg 92×28,1 · viewBox 1088 33 1056 322

Empresa sem logo
LogoBHub 92 de largura

Rodapé e moldura

O rodapé de toda página traz "powered by" + LogoBHub 48,8×11 em textPrimary. A topbar de visualização traz a LogoBHub branca 97,5×22.

Faça

Uma logo só no cabeçalho, à esquerda, com altura de 28px.
LogoBHub em currentColor: #18181b na folha, branca na topbar.

Não faça

BHub no corpo do documento (ex.: "Sistema licenciado para…", "Emitida por… BHUB").
Montar BHub + régua + logo da empresa por conta própria.
Citar fornecedor de software de terceiros no conteúdo.

Formatos de página.

Todo documento em PDF é A4 com altura fixa. A folha não cresce: o que não cabe vai para a próxima página.

Formato	Classe	Tamanho	Quando usar
A4 retrato	`.doc-page`	794 × 1123px	Padrão. Recibos, fichas, contratos, demonstrações, relações com até 9 colunas.
A4 paisagem	`.doc-page.land`	1123 × 794px	Tabela principal com mais de 9 colunas, ou que não cabe legível em 794px: livros fiscais, ficha financeira, grades mensais.
Planilha	`.xl-*`	largura livre (1180px)	Relatórios entregues como Excel. Ver Relatórios Excel.

Fora de uso

.shell com 900px e altura livre; min-height na folha; 900×1100, 900×1123 e 1123×700.
Rolagem horizontal dentro do documento (white-space:nowrap + overflow-x:auto). No PDF ela corta a tabela.

Anatomia.

De cima para baixo, toda folha tem as mesmas três faixas. O que muda é o conteúdo.

1Cabeçalho (.doc-cabecalho, 88px): logo à esquerda, título à direita, grade de metadados em 2 colunas e borda inferior de 2px borderStrong. Repete inteiro em toda página.
2Título principal (opcional): só em documento jurídico ou formulário, só na página 1.
3Blocos, cada um aberto por uma barra de bloco: grade de campos, tabela, indicadores, memória de cálculo, texto.
4Fechamento: Total Geral ou Total Banner, notas e legenda, local e data, assinaturas.
5Rodapé (.doc-rodape, 40px): "powered by" BHub à esquerda e "Página X de Y" à direita.

Paginação e quebras.

Regras

Cada folha é um .doc-page com cabeçalho e rodapé completos.
"Página X de Y" conta as folhas do documento. Documentos anexos (ex.: Termo de Quitação) podem ter numeração própria.
Tabela que continua na folha seguinte repete o thead (incluindo a linha de título).
Nunca quebre entre um agrupamento e sua primeira linha, nem entre a última linha e o total.
Assinaturas ficam juntas na mesma folha, com o local e a data.
Folga mínima de 24px no fim de cada folha. O conteúdo tem overflow:hidden: sem folga, dado maior corta sem aviso.
Folha com menos de um terço ocupado só existe se for exigência do documento.

Livros fiscais: transporte

Livro com mais de uma folha fecha cada folha com "A transportar" e abre a seguinte com "Transporte", com os mesmos valores.

Documento	Valor contábil	Base	Imposto
NF-e 1.203	1.206,10	1.206,10	144,73
A transportar	48.310,22	45.002,10	5.400,25

Moldura de visualização.

Fica fora da folha e não sai no PDF. Serve para navegar entre os protótipos.

Os dados exibidos neste documento são fictícios e servem apenas para demonstração do layout.

Voltar aponta para ../../index.html#<categoria>:<secao>. O subtítulo é "Motor <Área> · <Nome do relatório>", com o mesmo nome do manifesto do HubReport.

Componentes

Cabeçalho do documento.

Cada componente traz um exemplo feito com as classes reais, a especificação e quando usar.

Cabeçalho

obrigatório.doc-cabecalho

Recibo de pagamento de salário

Empresa: BABY E BAG COMERCIO DE PRESENTE LTDA

Competência: 09/2026

CNPJ: 41.520.419/0001-51

Emissão: 05/10/2026 10:48:59

Altura

88px fixos; padding 12 × 24 × 8; base 2px borderStrong.

Esquerda

Logo (ver Marcas) e quem emite: Empresa, CNPJ; IE nos fiscais.

Direita

Título 14px/800 maiúsculo. Depois, do que trata o documento: Competência ou Período; Empregado e Matrícula quando é de uma pessoa; Código de Acesso quando houver. Emissão sempre por último.

Metadados

10px; rótulo 500 textSecondary, valor 700. Grade de 2 colunas, até 3 linhas.

Regras

Toda página tem Emissão (dd/mm/aaaa hh:mm:ss, num campo só).
Mesmo título no cabeçalho, na topbar e no manifesto do HubReport.

Rodapé.

Rodapé

obrigatório.doc-rodape

Altura: 40px; padding lateral 24px; topo 1px border.
Texto: 9px/500 textSecondary; "Página X de Y" em 700.
Regras: Nada além disso no rodapé: nem data, nem nome do sistema, nem assinatura.

Títulos.

Três níveis, cada um com um papel. Não troque um pelo outro.

Nível	Classe	Spec	Onde
Título do documento	`.doc-cabecalho-titulo`	14px/800 maiúsculo, à direita no cabeçalho	Todo documento, toda página
Título principal	`.doc-titulo-principal` + `.doc-subtitulo`	13px/800 maiúsculo centralizado; subtítulo 10px/700 secundário	Só documento jurídico ou formulário, só na página 1
Barra de bloco	`.doc-barra` ou `thead tr.titulo`	Barra rosa, 9px/800 branco maiúsculo	Abre todo bloco de dados
Título de cláusula	`.doc-clausula`	10,5px/800 rosa maiúsculo, sem barra	Só dentro de texto jurídico

Barra de bloco.

Barra de bloco

regra principal.doc-barra · thead tr.titulo

Dados do colaborador

NomeFERNANDA COSTA ALVES

Matrícula0042

Eventos
Descrição	Proventos (R$)	Descontos (R$)
Salário base	4.250,00	0,00

Spec

brandPink sólido, texto branco 9px/800 maiúsculo, letter-spacing .05em, padding 7 × 10.

Regra

O primeiro cabeçalho de todo bloco de dados é rosa sólido. Vale para grade de campos, card do colaborador, indicadores, PIX, observações e resumos.

Em tabela

O título vira a primeira linha do thead (tr.titulo, colspan total), separada das colunas por 1px branco 28%. Não empilhe barra solta e thead.

Não use

Cabeçalho de bloco em pinkSoft ou surfaceMuted.
Título em texto rosa para bloco de dados.
Divisor com linhas e rótulo no meio, ou h2 centralizado.

Tabela de dados.

Tabela

.doc-table-wrap › table.doc-table

Cód.	Descrição	Ref.	Valor (R$)
0001	Salário base	30,00	4.250,00
0910	INSS	11,68%	-496,40
0920	IRRF	7,50%	-89,12
8001	Base FGTS	0,00	4.250,00

Valores em azul somam, em vermelho descontam, em cinza são informativos e não entram no líquido.

Contorno: Borda 1px border, raio 8, margem inferior 16.
Cabeçalho: Rosa sólido, 24px de altura, 9px/800 branco maiúsculo. Dois níveis: separadores de 1px branco 28%.
Linhas: 22px, 10,5px/700, zebra surface/surfaceMuted, linha 1px border.
Alinhamento: Texto à esquerda; números à direita (.r); datas, UF, CFOP e referências centralizados (.c).
Códigos: td.secundario: 500 textSecondary (vale também em span.secundario).
Natureza: Cor de provento e desconto só quando os dois dividem a mesma coluna. Com colunas separadas, os dois ficam em textPrimary. Informativo: textSecondary 700, sem itálico, com legenda.
Larga: 7 colunas ou mais: .mini (8/9px). Mais de 9: paisagem. Texto longo quebra linha; nada de rolagem.
Ponto: .ponto: uma linha por dia (cabe 31), divisórias verticais, dia da semana em .dds; folga, DSR e feriado em tr.folga (surfaceMuted). Horários para preencher à mão ficam em branco.

Agrupamentos.

N1 e N2

tr.grupo · tr.subgrupo

Fornecedor / Documento	Base (R$)	Imposto (R$)
Imposto: 1708 · IRRF
20012CONSULTORIA MODELO LTDA
NF-e 61280 · 06/05/2026	44.484,24	667,26
NF-e 61670 · 29/05/2026	38.220,26	573,30
Total fornecedor	82.704,50	1.240,56

N1

pinkSoft, base 2px brandPink, 10,5px/800 textPrimary. Ex.: imposto, evento, seção do balanço, colaborador numa relação.

N2

pinkSoft, base 1px border, 10px; código 800 textSecondary + nome 700 brandPink. Ex.: fornecedor, conta do razão.

Regras

Cada nível fecha com seu total antes de subir (ver Totalizadores).
pinkSoft só existe aqui. Nunca em banner, card, líquido ou folga.
Mais de dois níveis: use o plano de contas com recuo.

Totalizadores.

Quatro níveis, do menor para o maior. Cada um tem uma aparência só.

Subtotal, total e total geral

tr.subtotal · tr.total · tr.totalGeral

Descrição	Base (R$)	Imposto (R$)
NF-e 61280	44.484,24	667,26
Total fornecedor	44.484,24	667,26
Total IRRF	82.704,50	1.240,56
TOTAL GERAL A RECOLHER	146.022,10	4.802,48

Subtotal: Fecha um N2. Fundo branco; rótulo 800 textSecondary à direita; valor 900.
Total: Fecha um N1 ou a tabela (Total Bruto, Total Deduções, Total Entradas, Total da empresa). blueSoft, topo 2px blueSoftBorder, texto brandBlue 900.
Total Geral: Soma de tudo no documento. surfaceMuted, topo 2px borderStrong, 900, 11,5px, 26px de altura.
Obrigatório: Documento com mais de um grupo que soma precisa de Total Geral (Balancete: débitos e créditos; Balanço: Ativo e Passivo + PL; livros).
Fora de uso: Total verde, total em pinkSoft, total cinza sem borda, bordas 1,5px sólidas ou com opacidade .25/.3.

Total Banner.

Total Banner

.doc-banner

Para que

O valor final do documento, fora da tabela: líquido do holerite e dos recibos, valor líquido do TRCT, total da guia, imposto a recolher.

Spec

Sempre azul. blueSoft, borda 1,5px blueSoftBorder, raio 8, padding 10 × 16. Rótulo 10,5px/800 maiúsculo; valor 15px/900 em brl.

Regras

No máximo um por documento (ou um por pessoa, em documento com várias pessoas).
O mesmo valor não aparece em dois destaques.
Não existe banner rosa nem verde.

Grade de campos.

Grade de campos e campo em linha

.doc-form-grid · .doc-field-row

Identificação do empregador

01 CNPJ/CEI41.520.419/0001-51

02 Razão socialBABY E BAG COMERCIO DE PRESENTE LTDA

03 EndereçoRUA EXEMPLO, 100 – CENTRO

04 CEP01000-000

05 Município/UFSÃO PAULO/SP

Cargo:ASSISTENTE ADMINISTRATIVO

Grade: Contorno 1px borderStrong, raio 8; células com padding 5 × 8, divisórias 1px border; largura por .w2/.w3/.w4.
Célula: Rótulo 8,5px/700 maiúsculo textSecondary; valor 10,5px/700.
Campo legal: Em layout oficial (TRCT, GFD), o número do campo vai como prefixo do rótulo: "01 CNPJ/CEI".
Em linha: .doc-field-row: rótulo 700 secundário + valor 700, para 1 a 3 campos soltos no texto.
Regras: Abre com barra de bloco. Campo de texto vazio leva "—"; numérico leva 0,00.

Indicadores.

Indicadores

.doc-indicadores › .doc-indicador

Salário base4.250,00

Base INSS4.250,00

Base FGTS4.250,00

FGTS do mês340,00

Para que: Bases e números de referência que não somam no documento (bases de cálculo, contagens, resumo da folha).
Spec: Grade de 4 (ou 6) colunas, gap 8. Caixa surfaceMuted, borda 1px, raio 8; rótulo 8,5px/500 maiúsculo; valor 11px/800.
Não use: Para o valor final (isso é Total Banner) ou para dados cadastrais (isso é grade de campos).

Plano de contas.

Árvore de contas e natureza

td.nivel1…5 · tr.sintetica · span.nat

Conta	Descrição	Saldo atual
1	ATIVO	152.310,40D
1.1	ATIVO CIRCULANTE	98.120,15D
1.1.01	Disponível	12.405,70D
1.1.01.001	Caixa geral	1.420,31D
1.1.01.002	Banco conta movimento	10.985,39D

Recuo: 14px por nível (.nivel1 a .nivel5) na coluna de descrição. Código sempre em coluna própria, em secundario.
Peso: Sintética 800 (tr.sintetica); analítica 500 (tr.analitica), valores 700.
Natureza: Saldo de conta (Balancete, Balanço, Razão): valor positivo + <span class="nat">D</span> ou C, 9px/700 secundário. DRE: redutores entre parênteses.
Zeradas: Conta sem saldo e sem movimento não aparece. Com movimento e saldo final zero, aparece com 0,00.

Memória de cálculo.

Cartão de rubrica

.doc-rub

0150 · Média de horas extras 50%

Meses12

Período09/2025 a 08/2026

TipoValor

Soma no período: 5.280,00

5.280,00 ÷ 12 meses = 440,00

Média: 440,00

Para que: Mostrar como um valor foi calculado: médias de férias e rescisão, cálculo do Simples, DIFAL.
Spec: Barra de bloco com código e nome; coluna de configuração de 215px (rótulo secundário, valor 700); coluna de cálculo 9,5px/500; rodapé surfaceMuted 800 à direita.
Fórmula: Números com separador de milhar (5.280,00), operadores ×, ÷, =, uma etapa por linha.

Texto jurídico.

Cláusulas, itens e listas

.doc-paragraph · .doc-clausula · .doc-item · ol.doc-list-numbered

Cláusula 1ª · Do prazo

1.1. O presente contrato vigora por 45 dias, com início em 01/09/2026, podendo ser prorrogado uma única vez.

1.2. A prorrogação observa as condições abaixo:

a) mesma jornada e remuneração;
b) soma dos períodos não superior a 90 dias.

Documento de identificação.
Comprovante de residência.

Parágrafo: 11px/500, line-height 1,5, justificado; destaque em 800.
Cláusula: "Cláusula 1ª · Título": 10,5px/800 rosa maiúsculo, com o título em textPrimary. Itens "1.1." em 800.
Numeração: Um sistema por documento. Lista numerada mostra os números (list-style:decimal). Subitens "a)" ou "I –".
Data: Por extenso com mês em minúscula: "10 de setembro de 2026".
Não use: Título de cláusula fora de texto jurídico; itálico; numeração manual misturada com automática.

Opções e campos em branco.

Checkbox e preenchimento

.doc-checkbox-row › .doc-checkbox-box

✓Opto pelo recebimento do vale-transporte

Não opto pelo recebimento do vale-transporte

CPF nº ____.____.____-___ · Data: ____/____/________

Checkbox: 12px, borda 1,5px textPrimary, raio 4; marcado com "✓" 8px/900. Rótulo 700.
Em branco: Campo para preencher à mão: sublinhados no formato do dado (data, CPF, valor).
Regra: Em protótipo, marque a opção do cenário simulado e deixe a alternativa visível.

Assinaturas.

Assinaturas, testemunhas e digital

.doc-signature-row · .doc-testemunha · .doc-digital

SÃO PAULO/SP, 10 de setembro de 2026.

BABY E BAG COMERCIO DE PRESENTE LTDA

Empregador

FERNANDA COSTA ALVES

Empregada

Testemunha 1 · Nome: ____________ · CPF: ____________

Impressão digital

Bloco

Linha 1px textPrimary; nome 10,5px/800; papel 9,5px/500 secundário.

Arranjos

Par lado a lado (gap 40, 40px acima); única com 320px à esquerda (.unica); testemunhas em segunda fila; digital em .doc-digital 90×70, alinhada pela base com .com-digital.

Local e data

Antes das assinaturas: "CIDADE/UF, dd de mês de aaaa."

Regras

Assinaturas e local/data na mesma folha.
Margens por classe, nunca inline.
Empregado menor: inclui o responsável legal.

Notas, legendas e vazios.

Apoio ao conteúdo

.doc-note · .doc-legenda · .doc-info · .doc-vazio

* Valores de referência conforme convenção coletiva vigente.

D saldo devedor · C saldo credor

O FGTS desta competência será recolhido pela guia do FGTS Digital.

Não há informações do consignado neste período.

Nota: .doc-note 9,5px/500 secundário. Observações de rodapé de bloco.
Legenda: .doc-legenda surfaceMuted, borda 1px, raio 8, 9px. Explica cores, siglas e códigos da tabela acima.
Informação: .doc-info azul .06/.25 com "i". Aviso que muda a leitura do documento. No máximo um por página.
Vazio: .doc-vazio tracejado. Bloco inteiro sem dados, com frase objetiva. Ver Valores vazios.

Relatórios Excel.

Relatórios entregues em planilha (ex.: Relação de Líquidos) têm visualizador próprio (.xl-*).

Regras

A grade reproduz a planilha como ela é: fonte, colunas e formatos do arquivo. Sem cores da marca na grade.
Verde (excel, excelDark, excelSoft, excelMid) só na interface: botão "Baixar Excel", aba ativa, borda do card, célula selecionada.
Mesmos dados do PDF correspondente (empresa, pessoas, competência).
CPF pode ficar só com dígitos; valores no formato da planilha.

Não faça

Rosa ou azul da marca dentro da grade.
Nome de software de terceiros em notas ("exportado do sistema X").
Dados diferentes do PDF do mesmo relatório.

Dados

Formatação de dados.

Um formato por tipo de dado, em todos os documentos. O que não está aqui segue o padrão brasileiro (vírgula decimal, ponto de milhar).

Dado	Formato	Exemplo	Observação
Moeda em tabela	n2	`12.405,70`	Com "(R$)" no cabeçalho da coluna
Moeda isolada	brl	`R$ 12.405,70`	Banner, campo, texto corrido, extenso
Não monetário	n2	`220,00`	Bases, quantidades, horas decimais
Negativo	hífen antes	`-1.234,56` · `R$ -1.234,56`	Nunca `-R$`
Saldo de conta	valor + natureza	`1.420,31 D`	Balancete, Balanço, Razão (`span.nat`)
Redutor na DRE	parênteses	`(1.234,56)`	Só demonstração de resultado
Percentual	2 casas, vírgula	`7,60%`	Alíquota efetiva do Simples: até 4 casas, `5,4321%`
Data	dd/mm/aaaa	`05/10/2026`
Data por extenso	dia de mês de ano	`10 de setembro de 2026`	Mês em minúscula
Competência	mm/aaaa	`09/2026`
Período	data a data	`01/09/2026 a 30/09/2026`	"a" minúsculo; nada de "–", "-" ou "A"
Emissão	data e hora juntas	`05/10/2026 10:48:59`	Um campo só, chamado "Emissão"
Hora	hh:mm	`08:00` · `08:00 às 17:00`	Vazio: `00:00`
CNPJ	máscara completa	`41.520.419/0001-51`
CPF	máscara completa	`000.000.001-00`	No Excel pode ficar só com dígitos
PIS		`000.00000.01-0`
CTPS	número série	`0000001 série 0001`
IE	máscara da UF	`000.000.000.000`
CEP		`01000-000`
Telefone		`(11) 90000-0000`
CFOP	com ponto	`1.102`
Conta contábil	níveis com ponto	`1.1.01.001`
Código de evento	4 dígitos	`0001`	Em `secundario`
Cidade/UF	maiúsculas com acento	`SÃO PAULO/SP`
Nome e razão social	maiúsculas	`FERNANDA COSTA ALVES`

Não misture brl e n2 na mesma tabela, nem dois formatos de data, período ou percentual no mesmo documento.

Valores vazios.

Situação	Mostre	Nunca
Número sem valor (moeda, base, alíquota, quantidade)	`0,00`	"—", célula em branco
Hora sem valor	`00:00`	Célula em branco ao lado de `00:00`
Texto, código ou data sem informação	"—"	"N/A", "null", em branco
Bloco inteiro sem dados	Estado vazio (`.doc-vazio`) com frase objetiva	Esconder o bloco sem aviso, ou tabela só com cabeçalho
Período sem movimento	"Sem movimento no período." e totais em `0,00`	Documento em branco
Evento ou rubrica sem valor no período	Não lista a linha (bases e totais continuam com `0,00`)	Linhas de rubrica zeradas

Dados fictícios.

Só estes dados entram nos protótipos. CPFs e CNPJs têm dígito verificador inválido de propósito, para nunca coincidir com uma pessoa ou empresa real. Nunca copie dados de PDF de cliente.

Empresas

BABY E BAG COMERCIO DE PRESENTE LTDA	41.520.419/0001-51 · empregadora padrão
EMPRESA MODELO S.A.	00.000.000/0001-00
Fornecedores e demais	COMERCIAL EXEMPLO LTDA, SERVICOS MODELO LTDA, TRANSPORTES EXEMPLO LTDA, CONSULTORIA MODELO LTDA, TECNOLOGIA EXEMPLO LTDA, DISTRIBUIDORA MODELO LTDA, INDUSTRIA EXEMPLO S.A., LOGISTICA MODELO LTDA, ENGENHARIA EXEMPLO LTDA, ALIMENTOS MODELO LTDA · CNPJ `00.000.0NN/0001-00`
IE	`000.000.000.000`

Pessoas

FERNANDA COSTA ALVES	Pessoa principal · CPF 000.000.001-00 · PIS 000.00000.01-0 · RG 00.000.001-0 · CTPS 0000001 série 0001
Filiação e cônjuge	MARIA MODELO COSTA, JOSE EXEMPLO ALVES · PAULO MODELO ALVES
Dependentes	LUCAS MODELO ALVES, SOFIA MODELO ALVES
Endereço	RUA EXEMPLO, 100 – CENTRO – SÃO PAULO/SP – 01000-000 · (11) 90000-0000
Demais pessoas	JOAO DA SILVA MODELO (representante legal), MARIA EXEMPLO SANTOS, CARLOS FICTICIO PEREIRA (contador, CRC SP-000000/O-0), ANA MODELO RIBEIRO, PEDRO EXEMPLO LIMA, JULIA TESTE ROCHA, RAFAEL MODELO SOUZA, BEATRIZ EXEMPLO NUNES, LUCAS FICTICIO ALMEIDA, CAMILA MODELO DIAS · CPF `000.000.0NN-00` na ordem

Coerência: totais somam, saldos fecham, PDF e Excel do mesmo relatório mostram os mesmos dados, e a emissão vem depois da competência.

Regras

Qual componente usar.

Para cada bloco de informação do documento, siga as perguntas de cima para baixo. A primeira resposta "sim" decide o componente.

Depois de escolher

Se o bloco…	Então
é o primeiro de um assunto	Abra com barra de bloco (ou `tr.titulo` na tabela)
tem linhas que se agrupam	N1 `tr.grupo`; um segundo nível vira N2 `tr.subgrupo`
tem grupos que somam	N2 fecha com subtotal, N1 com total, documento com Total Geral
tem mais de 9 colunas	Folha em paisagem; 7 ou mais colunas usam `.mini`
mistura proventos e descontos na mesma coluna	Cores `credit`/`debit` + legenda
tem siglas, cores ou códigos	Legenda logo abaixo
exige aceite de alguém	Local e data + assinaturas na mesma folha
não cabe na folha	Quebra com cabeçalho repetido, thead repetido e folga de 24px

Condicionais por documento.

O que muda no documento conforme o caso. A coluna "Protótipo" mostra se algum relatório do repositório já simula a variação. Regras de negócio marcadas com * precisam de confirmação do especialista da área antes de virar regra do gerador.

Documento	Condição	O que muda	Protótipo
Holerite, extrato, relação de líquidos	Evento informativo	Aparece em `textSecondary` e não soma no líquido; legenda explica	sim
Holerite, extrato	Evento sem valor no mês	Linha não aparece; bases continuam com `0,00`	sim
Holerite, extrato	Consignado ou pensão	Bloco próprio; sem dados, estado vazio "Não há informações do consignado"	parcial
Relações e extratos	Mais de um colaborador	N1 por colaborador; total por colaborador; Total Geral da empresa	sim
Relações	Forma de pagamento	Coluna de forma (PIX, banco) e chave ou conta; PIX abre bloco próprio	sim
Adiantamento	Percentual ou valor fixo*	Coluna de referência mostra o % ou "valor fixo"	parcial
Aviso e recibo de férias	Abono pecuniário*	Linhas de abono e 1/3 do abono; dias de gozo reduzidos	não
Recibo de férias	Adiantamento de 13º*	Linha própria nos proventos	não
Recibo de férias	Férias em dobro (fora do período concessivo)*	Rubrica de dobra com memória de cálculo	não
Memória de médias	Rubrica variável no período	Um cartão de rubrica por verba; sem verba variável, estado vazio	sim
TRCT e anexos	Tipo de desligamento*	Sem justa causa: aviso, 13º e férias proporcionais, multa 40%. Pedido de demissão: sem multa, aviso trabalhado ou descontado. Justa causa: sem proporcionais nem multa. Acordo: multa 20% e metade do aviso. Término de experiência: sem aviso	só sem justa causa
TRCT, ficha	Aviso indenizado ou trabalhado*	Indenizado: rubrica de aviso e data de projeção. Trabalhado: sem rubrica, sem projeção	só indenizado
TRCT	Férias vencidas*	Linha de férias vencidas + 1/3	não
GFD, detalhe da guia	Multa rescisória do FGTS*	Valor e base da multa só quando o desligamento gera multa	sim
Contratos	Tipo de contrato	Experiência, indeterminado, intermitente e teletrabalho têm cláusulas próprias	sim
Ficha de registro, declaração, salário-família	Com dependentes	Tabela de dependentes (nome, parentesco, nascimento, CPF). Sem dependentes: frase "não possuo dependentes"	só sem
Contratos e termos	Empregado menor de idade	Assinatura do responsável legal com nome e CPF	rótulo fixo
Solicitação de vale-transporte	Opta ou não opta	Opta: tabela de meios de transporte. Não opta: só a declaração	só opta
Folha de ponto	Mês com 28 a 31 dias	Uma linha por dia; folga, DSR e feriado em `surfaceMuted`. A folha precisa caber 31 dias	sim
Apuração	Regime tributário	Simples Nacional: memória de cálculo do Simples. Demais regimes: livros e apuração de ICMS/IPI	sim
Livros e apurações	Sem movimento	"Sem movimento no período." e totais em `0,00`	não
Livros	Mais de uma folha	"A transportar" e "Transporte" entre folhas	não
Livros	Não contribuinte do IPI*	Coluna de IPI com `0,00`	sim
Retenções	Vários impostos e fornecedores	N1 imposto, N2 fornecedor, subtotal do fornecedor, total do imposto, Total Geral	sim
DIFAL	Entrada interestadual para uso, consumo ou ativo*	Só essas notas entram; Total Banner com o DIFAL a recolher	sim
Balancete, Balanço	Conta sem saldo	Sem saldo e sem movimento: não aparece. Com movimento e saldo zero: aparece com `0,00`	parcial
Balancete, Balanço, Razão	Natureza do saldo	Valor positivo + D ou C	sim
Razão	Conta sem movimento no período	Só saldo anterior e saldo atual	não
Demonstrações	Encerramento	Assinaturas do responsável legal e do contador (com CRC)	sim

Fora de uso.

Padrões encontrados nos relatórios e substituídos na v2.

Fora de uso	Use no lugar
Divisor com linhas e rótulo (`.divisor`), h2 centralizado	Barra de bloco ou `tr.titulo`
Texto rosa como título de bloco de dados	Barra de bloco (texto rosa só em cláusula)
Cabeçalho de card em `pinkSoft` ou `surfaceMuted`	Barra de bloco
Total verde, total ou líquido em `pinkSoft`, banner rosa	Total azul ou Total Banner azul
`pinkSoft` em linha de folga	`surfaceMuted`
"—" em número	`0,00`
Pesos 400 e 600; itálico	500/700/800/900; `textSecondary` + legenda
Cores `#27272a`, `#f0f0f2`, `#16a34a` no corpo	Tokens da Parte 1
`.shell` 900px, `min-height`, rolagem horizontal	A4 fixo, `.mini`, paisagem
Emissão dividida em data e "Horas"	"Emissão: dd/mm/aaaa hh:mm:ss"
LogoBHub + régua + logo da empresa montados no cabeçalho	Logo cadastrada da empresa ou LogoBHub
BHub no corpo do documento	Só topbar e rodapé
Conteúdo gerado por JavaScript dentro do documento	HTML estático
Estilo inline para margens e larguras	Classes da Parte 2

Projeto

Catálogo e conformidade.

Situação de cada relatório depois da auditoria e dos ajustes de 22/10/2026. Os 45 foram ajustados ao guia v2, conferidos no navegador (tamanho exato da folha, nada cortado, nada rolando) e ganharam o registro em alteracoes/. A coluna "A confirmar" lista dúvidas de regra de negócio que não foram alteradas.

relatórios auditados e ajustados

conformes ao guia v2

tiveram dados trocados por fictícios

com dúvida de negócio a confirmar

Documento	Área	Folha	Situação	Ajustes de 22/10	A confirmar
Balancete de Verificação `Balancete.html`	Contábil	retrato · 1 pág.	Conforme	Recuo por nível; natureza D/C; Total Geral	Conta 2.1.03 ausente; diferenças em Receitas
Balanço Patrimonial `Balanco_Patrimonial.html`	Contábil	retrato · 1 pág.	Conforme	Natureza D/C; Total do Ativo e do Passivo + PL	—
DRE `DRE.html`	Contábil	retrato · 2 pág.	Conforme	HTML estático; redutores entre parênteses; só o Lucro Líquido como Total Geral	Receita de serviços para empresa de comércio
Livro Razão `razao.html`	Contábil	retrato · 1 pág.	Conforme dados trocados	Contas como N2; saldo recalculado e fechando	Período anual com lançamentos só de janeiro
Extrato Mensal · Adiantamento `adiantamento-extratomensal.html`	DP	retrato · 4 pág.	Conforme dados trocados	A4 fixo, 4 páginas; vazios 0,00; Total Geral e banner no padrão	Mesmo valor no banner e no Total Geral
Recibo de Adiantamento `adiantamento-recibo.html`	DP	retrato · 1 pág.	Conforme dados trocados	A4; líquido verde virou Total Banner azul; bloco de parâmetros	Matrícula e código com o mesmo número
Relação de Líquidos · Adiantamento `adiantamento-relacaoliquidos.html`	DP	retrato · 1 pág.	Conforme dados trocados	A4; total e Total Geral no padrão	—
Acordo de Compensação de Horas `admissao-acordocompensacaohoras.html`	DP	retrato · 1 pág.	Conforme dados trocados	Sobra de modelo removida; assinaturas no padrão	—
Acordo de Prorrogação de Horas `admissao-acordoprorrogacaohoras.html`	DP	retrato · 1 pág.	Conforme dados trocados	Numeração das cláusulas visível	Texto abre falando em compensação de horas
Contrato de Experiência `admissao-contratoexperiencia.html`	DP	retrato · 1 pág.	Conforme dados trocados	Numeração das cláusulas visível	Uma testemunha só; campo de responsável para menor
Contrato de Trabalho Intermitente `admissao-contratointermitente.html`	DP	retrato · 1 pág.	Conforme	Numeração visível; subitens aninhados; título igual ao manifesto	—
Contrato de Trabalho – Teletrabalho `admissao-contratoteletrabalho.html`	DP	retrato · 6 pág.	Conforme	Título unificado; cláusulas numeradas; 6 páginas com folga	—
Contrato de Trabalho `admissao-contratotrabalho.html`	DP	retrato · 6 pág.	Conforme	Cláusulas numeradas; descanso em surfaceMuted; repaginado	—
Declaração de Encargos de Família `admissao-declaracaoencargosfamilia.html`	DP	retrato · 1 pág.	Conforme dados trocados	Barra rosa nos dados; sem itálico; assinaturas lado a lado	—
Ficha de Registro de Empregado `admissao-fichadregistroempregado.html`	DP	retrato · 2 pág.	Conforme dados trocados	Barra rosa em todos os blocos; Abono pecuniário 0,00	—
Ficha de Salário Família `admissao-fichasalariofamilia.html`	DP	retrato · 1 pág.	Conforme dados trocados	Grade com barra rosa; datas dd/mm/aaaa	—
Folha de Ponto Individual `admissao-folhaponto.html`	DP	retrato · 1 pág.	Conforme	31 dias numa folha; folgas em surfaceMuted; assinatura e data	Horas em branco para preencher à mão
Opção de Cálculo do IRRF `admissao-opcaocalculoirrf.html`	DP	retrato · 1 pág.	Conforme dados trocados	Opções e assinatura no padrão	—
Solicitação de Vale-Transporte `admissao-solicitacaovaletransporte.html`	DP	retrato · 1 pág.	Conforme dados trocados	Identificação com barra rosa; meios de transporte em tabela	—
Termo de Consentimento LGPD `admissao-termoconsentimentolgpd.html`	DP	retrato · 2 pág.	Conforme dados trocados	Cláusulas numeradas; 2 páginas	—
Termo de Responsabilidade – Salário Família `admissao-termoresponsabilidadesalariofamilia.html`	DP	retrato · 1 pág.	Conforme dados trocados	Quadro de digital por classe	—
Relação de Líquidos – Férias `excel-ferias-relacaoliquidos.html`	DP	planilha	Conforme dados trocados	Mesmos dados do PDF; .xls de download regerado	—
Relação de Líquidos – Folha `excel-folha-relacaoliquidos.html`	DP	planilha	Conforme	Mesmos dados do PDF; .xls de download regerado	—
Relação de Líquidos – Rescisão `excel-rescisao-relacaoliquidos.html`	DP	planilha	Conforme	Dados fictícios; .xls regerado; nota sem software de terceiros	—
Extrato Mensal `extrato_mensal.html`	DP	retrato · 5 pág.	Conforme dados trocados	A4 fixo, 5 páginas numeradas; card com barra rosa; totais recalculados	Total da Folha igual ao Líquido; sem encargos patronais
Aviso de Férias `ferias-avisoferias.html`	DP	retrato · 1 pág.	Conforme dados trocados	Cabeçalho com título e Emissão; local e data por extenso	—
Memória de Cálculo de Médias – Férias `ferias-memoriamedias.html`	DP	retrato · 2 pág.	Conforme	Emissão num campo só; fórmulas com milhar; linha duplicada removida	—
Aviso e Recibo de Férias `ferias-reciboferias.html`	DP	retrato · 2 pág.	Conforme dados trocados	Modelo do bloco doc-*: líquido rosa removido; natureza com legenda	INSS das férias e pro-rata não conferidos
Relação de Líquidos – Férias `ferias-relatorioliquidos.html`	DP	retrato · 1 pág.	Conforme dados trocados	A4; mesmos dados do Excel	—
Ficha Financeira `ficha_financeira.html`	DP	paisagem · 1 pág.	Conforme	Paisagem fixa; resumo em indicadores; informativo sem itálico	Benefícios parte empresa entram como provento em 2 meses
Ficha de Registro `ficha_registro.html`	DP	retrato · 2 pág.	Conforme	Grade de campos com barra rosa; seções sem dados em estado vazio	Nenhuma férias registrada para admissão de 2021
Holerite `holerite.html`	DP	retrato · 1 pág.	Conforme	A4 fixo; barra rosa nos blocos; vazios 0,00; líquido em Total Banner azul	Base IRRF e IRRF não batem com a tabela progressiva
Relação de Líquidos `relacao_de_liquidos.html`	DP	retrato · 1 pág.	Conforme	A4 fixo; total e Total Geral no padrão; competência coerente com a emissão	—
Detalhe da Guia Emitida (FGTS) `rescisao-detalheguia.html`	DP	paisagem · 2 pág.	Conforme	Paisagem, 2 páginas; emissor é o empregador	—
Registro de Empregado – Rescisão `rescisao-fichaempregado.html`	DP	retrato · 2 pág.	Conforme	Folgas 00:00; coluna Salário (R$); endereço padrão	“Quantidade de dias 45” ambíguo
Guia do FGTS Digital `rescisao-gfd.html`	DP	retrato · 1 pág.	Conforme	Um único Total Banner; PIX e Observações com barra	Base da multa do FGTS; QR Code PIX
Memória de Cálculo de Médias `rescisao-memoriamedias.html`	DP	retrato · 3 pág.	Conforme	Emissão num campo só; barra em cada página; total azul	—
Relação de Líquidos – Rescisão `rescisao-relacaoliquidos.html`	DP	retrato · 1 pág.	Conforme	Texto com BHub removido; Total Geral no padrão	—
TRCT – Termo de Rescisão `rescisao-trct.html`	DP	retrato · 3 pág.	Conforme	Totais azuis; valor líquido em banner azul; máscaras	Vigência da IN SRT 15/2010; paginação do Termo de Quitação
DIFAL `difal.html`	Fiscal	retrato · 1 pág.	Conforme	Divisores viraram títulos de tabela; totais recalculados	—
Memória de Cálculo do Simples Nacional `faturamento_v3.html`	Fiscal	retrato · 3 pág.	Conforme	Barras e indicadores no lugar dos blocos soltos; alíquota com 4 casas	RBT12, folha e Fator r não fecham; Anexo III para comércio
Livro Registro de Entradas `livro_entradas.html`	Fiscal	paisagem · 1 pág.	Conforme	Paisagem sem rolagem; IPI 0,00; Total Geral	Sem transporte e termos de abertura/encerramento
Registro de Apuração do ICMS `livro_icms.html`	Fiscal	retrato · 2 pág.	Conforme	Grupos de CFOP nos níveis N1/N2; ICMS a recolher em banner	Apuração sem estornos
Livro Registro de Saídas `livro_saidas.html`	Fiscal	paisagem · 1 pág.	Conforme	Paisagem sem rolagem; IPI 0,00; faixa de numeração corrigida	NFC-e com CFOP interestadual
Retenções a Recolher `retencoes_a_recolher.html`	Fiscal	retrato · 3 pág.	Conforme dados trocados	Fornecedores fictícios; Total IRRF e Total Geral corrigidos	—

Dados trocados: esses relatórios tinham nomes, CPFs, CNPJs ou razões sociais fora da lista fictícia, com aparência de dado real. Os valores antigos continuam no histórico do git.

Especificação para máquina.

As mesmas regras deste guia em JSON, para o gerador do HubReport e para os devs. Fica dentro deste arquivo (script#bhub-doc-spec), então guia e especificação mudam juntos.

Governança.

Como o guia muda

1Padrão novo (cor, componente, regra) entra primeiro aqui, com exemplo, especificação e quando usar.
2Atualize também o CSS canônico (Parte 2) e a especificação em JSON.
3Aprovação de Luiz Mendonça e Elaine Calazans.
4Relatórios afetados são ajustados no mesmo trabalho, cada um com seu arquivo em alteracoes/.

Histórico

v2.0 · 22/10/2026	Reestruturação a partir da auditoria dos 45 relatórios: página, componentes, dados, regras de decisão, condicionais, regra da logo cadastrada, especificação em JSON e catálogo de conformidade.
v1	Tokens, tipografia, totalizadores, agrupamentos, Total Banner e Excel.