Razão.

Painel financeiro com cara de livro-razão impresso: papel, filetes finos, números em serifa tabular, negativos entre parênteses em vermelho, carimbo de conferido e notas do contador na margem.

Tipo: Painel admin
Tema: Claro
Títulos: Newsreader
Texto: Instrument Sans

ParaContadores, controllers, diretores financeiros e sócios de empresa média que leem relatório com calma

Obter acesso · a partir de R$ 49ou todos os designs por R$ 297 ao ano

Abrir em tela cheia

/preview/razaoTela cheia

Blocos da tela01/03Topo e navegação

Todo o texto fica em content.ts e as cores em tokens.css.

Conceito

Painel financeiro que parece um livro-razão bem diagramado ou um relatório anual impresso. Papel, filetes finos, serifa nos números, vermelho só no que é negativo. Para escritório de contabilidade, financeiro de empresa média, BPO e gestão de patrimônio: gente que lê com calma e desconfia de painel "colorido demais".

ParaContadores, controllers, diretores financeiros e sócios de empresa média que leem relatório com calma

Paleta

As quatro cores que definem o design e todas as variáveis do tokens.css. Clique para copiar.

Tipografia

Newsreader nos títulos, Instrument Sans no texto.

TítulosNewsreader

Aag!

Razão em uma linha

ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789

TextoInstrument Sans

A fonte de leitura carrega parágrafos longos sem cansar.

Texto corrido, botões, formulários e legendas. Os títulos ficam com a fonte de destaque; aqui é o dia a dia da página.

0123456789 · R$ 1.234,56 · 25/09 às 19h30

Para quem serve

O que a skill /escolher-design compara com o cliente.

Combina com

marca sóbria em verde, azul-marinho, vinho ou grafite
escritório tradicional que quer parecer moderno sem perder peso
relatório mensal enviado ao cliente
muito número e pouca ação por tela

Evitar para

app de consumo ou público jovem
operação em tempo real (logística, suporte)
marca vibrante ou neon
tema escuro obrigatório
quem precisa de ação rápida de balcão

Nichos

escritório de contabilidadefinanceiro de empresaBPO financeirogestão de patrimôniofamily officecontroladoriatesourariaauditoriaconsultoria financeirafinanceiro

Tom

sérioeditorialconfiávelsóbriotradicional

O que faz ser Razão

As assinaturas do DESIGN.md: o que não pode faltar ao aplicar.

01
Negativo entre parênteses e em vermelho (<Valor>): (142.142,40). Zero vira travessão.
02
DRE em formato de livro: rótulo + pontilhado (.razao-pontos) + valor, sinais (+)/(−) na margem, subtotal com filete em cima e o resultado final com filete duplo (.razao-duplo).
03
Colunas débito/crédito separadas por filete duplo vertical na conciliação, como no razão de papel.
04
Carimbo "Conferido" girado, com data e rubrica, que "carimba" na entrada.
05
Fita marcadora verde pendurada no topo da folha.
06
Índice lateral com fólios (Visão geral ........ 01), como sumário de livro.
07
Notas do contador na margem: números sobrescritos no corpo (¹) levam à nota em itálico.
08
Rodapé com assinaturas (rubrica manuscrita sobre a linha), local/data e número da folha.
09
Seções numeradas em romano itálico (II. Fluxo de caixa) sobre filete de tinta.

Regras do jogo

Direto do DESIGN.md.

Ver DESIGN.md

Identidade

Fundo papel #f4efe4; a tela é uma folha (.razao-folha, #fbf8f1) com pauta horizontal quase invisível e margem dupla verde à esquerda (.razao-margem).
Texto tinta #1c1a16, secundário #6b6355. Filetes em #d9cfbc; filete forte em tinta.
Primária verde-banco #1f4d3a: item ativo, entradas, carimbo, fita, notas, o que está conferido.
Vermelho #b3261e é só para o negativo: valor abaixo de zero, título vencido, diferença de conciliação. Se o mês estiver bom, quase não aparece vermelho.
Fontes: Newsreader para títulos e todos os números (.razao-num: tabular e alinhado, itálico para ênfase e notas), Instrument Sans para texto e rótulos, IBM Plex Mono para data, documento, fólio e eixo.
Cantos quase retos (2px/4px). Nada de sombra colorida, gradiente ou ícone grande.

Regras

Número é serifa tabular, sempre alinhado à direita. Moeda com 2 casas; gráfico e resumo em R$ mil.
Cor tem significado: verde = entrada/ok, tinta = saída/neutro, vermelho = negativo. Nada de terceira cor de status; "pendente" é cinza com círculo vazado.
Gráficos em SVG próprio: saídas hachuradas (não outra cor), linha de saldo em tinta, balão de valores ao passar o mouse, geração de caixa do mês sob o rótulo do mês.
Linhas de tabela/lista realçam no hover com uma marca verde na margem (.razao-linha).
Tabela larga fica dentro de overflow-x-auto com pai min-w-0; a página nunca rola de lado.
Animação: data-sobe no cabeçalho e no resumo; barras crescem, linhas se desenham, carimbo bate, fita desce. Tudo para em prefers-reduced-motion.
Estado só com CSS. Filtro, troca de cliente e fechamento real são do app do cliente.

Adaptar à marca do cliente

Troque só --d-primary (e o gradiente da .razao-fita) pela cor da marca, se for sóbria e escura (azul-marinho, vinho, grafite). O vermelho do negativo não muda.
Marca clara ou saturada (amarelo, laranja, neon)? Use-a só na fita e no logo; mantenha o verde-banco.
Logo do escritório entra no lugar de "Razão" na lateral, em uma cor só.

Como usar

Dois arquivos.
Um prompt.

O Razão vira o sistema do seu agente de código: ele monta qualquer tela com esta cara, não só a landing de exemplo.

Prompt para o agente

Leia o DESIGN.md na raiz do projeto e siga as regras dele em toda tela. Importe o sistema.css uma única vez no ponto de entrada do projeto e use as classes e tokens dele em vez de criar estilos novos. Antes de cada mudança de interface, releia o DESIGN.md.

01Baixe os dois arquivosDESIGN.md (as regras visuais) e sistema.css (tokens, componentes e as assinaturas do design).
02Coloque no projetoDESIGN.md na raiz. O sistema.css importado uma vez no ponto de entrada: funciona em React, Vue, Svelte, HTML ou WordPress.
03Cole o prompt no seu agenteEle lê as regras e passa a montar qualquer tela (login, preços, painel) com a cara do design.
04Deixe a regra fixaColoque o prompt nas regras do projeto do agente para toda tela nova seguir as mesmas cores, fontes e espaçamentos.