Guia Definitivo de Relatórios.

Documentos do projeto.

Relatórios organizados por área, todos consumindo os mesmos tokens e componentes deste guia.

Cores.

Paleta única do sistema.

Tipografia.

Fonte global: Nunito Sans. Apenas 4 pesos são válidos no sistema inteiro.

Espaçamento & Radius.

Escala de espaçamento em múltiplos de 4px, usada em padding de cards, células e containers.

Bordas.

Espessura e cor variam conforme a hierarquia do elemento.

Cabeçalho & Rodapé.

Estrutura fixa presente em toda página de todo documento deste projeto.

Formatação de Números.

Existem dois formatos válidos no sistema. O documento define qual usar conforme a natureza do dado — nem todo relatório contábil possui valores monetários.

// valores em moeda, com prefixo R$
R$ 12.405,70
R$ 1.420,31

// números sem prefixo de moeda
12.405,70
1.420,31

Logo BHub.

Componente oficial LogoBHub — wordmark único (ícone + tipografia), monocromático, cor controlada via currentColor. Luiz Mendonça ou Elaine Calazans especificam variações de uso por documento.

function LogoBHub({ size=13, color="#131313" }) {
  return (
    <svg width={size * 4.43} height={size} viewBox="0 0 838 189" fill="none"
      style={{ color, display:"inline-block", verticalAlign:"middle" }}>
      <path fill="currentColor" d="..."/> // 5 paths do ícone + tipografia
    </svg>
  );
}

<LogoBHub size={26} color="#131313" />

<span style={{ display:"flex", alignItems:"center", gap:4 }}>
  powered by <LogoBHub size={11} color="#18181b" />
</span>

Logo BHub + Empresa.

Regra de exibição no cabeçalho dos documentos: quando a empresa cliente possui logo cadastrada, ela é exibida ao lado da LogoBHub, separadas por uma régua vertical. Sem logo cadastrada, exibe-se apenas a LogoBHub.

Totalizadores.

Hierarquia visual clara entre total de fornecedor, total de imposto e total geral.

Agrupamentos de Tabela.

Dois níveis de agrupamento hierárquico, usados em Retenções a Recolher, DIFAL e Relatório de Faturamento.

Total Banner (isolado).

Usado fora de tabelas, para destacar um valor único e importante — como DIFAL a recolher.

Elementos Fora de Uso.

Componentes e valores que não aparecem nos documentos deste projeto.

Tokens (código).

Estrutura de exports usada em todos os componentes TSX deste projeto.

// design-tokens.ts
export const colors = {
  brandPink: "#f25461", brandPinkSoft: "#fde7ea",
  brandPinkSoftBorder: "#f25461", brandBlue: "#0171e4",
  textPrimary: "#18181b", textSecondary: "#52525b",
  border: "#e4e4e7", borderStrong: "#d4d4d8",
  surface: "#ffffff", surfaceMuted: "#f7f7f8",
};

export const typography = {
  fontFamily: "'Nunito Sans', sans-serif",
  weight: { label: 500, body: 700, title: 800, total: 900 },
  size: { xs: 10, sm: 11, md: 13, lg: 15, xl: 18, xxl: 24 },
};

export const radius = { sm: 4, md: 8, lg: 12, pill: 9999 };
export const spacing = { xs: 4, sm: 8, md: 12, lg: 16, xl: 24, xxl: 40 };
export const borders = { thin: "1px", strong: "2px" };

Como este guia evolui.

Documento vivo, atualizado a cada novo relatório do projeto.