Razão.
Financial dashboard styled like a printed ledger: paper, fine rules, tabular serif numbers, negatives in red parentheses, a reconciled stamp and accountant's notes in the margin.
- Type
- Admin dashboard
- Theme
- Light
- Headings
- Newsreader
- Body
- Instrument Sans
ForAccountants, controllers, CFOs and partners of mid-sized companies who read reports calmly
Screen blocks01/03Topo e navegação
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".
From DESIGN.md, which is in Portuguese for now.
ForAccountants, controllers, CFOs and partners of mid-sized companies who read reports calmly
Palette
The four colors that define the design and every variable in tokens.css. Click to copy.
Typography
Newsreader for headings, Instrument Sans for body text.
HeadingsNewsreader
Aag!
Razão in one line
ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
BodyInstrument Sans
The reading font carries long paragraphs without tiring the eye.
Running text, buttons, forms and captions. Headings get the display font; this is the page's everyday voice.
0123456789 · $1,234.56 · Sep 25, 7:30 PM
Who it's for
What the AI compares with your client to pick the design.
- sober brand in green, navy, burgundy or graphite
- traditional firm that wants to look modern without losing weight
- monthly report sent to the client
- lots of numbers and little action per screen
- consumer app or young audience
- real-time operations (logistics, support)
- vibrant or neon brand
- mandatory dark theme
- anyone needing quick counter actions
Tone
What makes it Razão
The signatures from DESIGN.md: what must be there when you apply it.From DESIGN.md, which is in Portuguese for now.
- 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.
House rules
Straight from DESIGN.md.From DESIGN.md, which is in Portuguese for now.
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-autocom paimin-w-0; a página nunca rola de lado. - Animação:
data-sobeno cabeçalho e no resumo; barras crescem, linhas se desenham, carimbo bate, fita desce. Tudo para emprefers-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ó.
Two files.
One prompt.
Razão becomes your coding agent's design system: it builds any screen with this look, not just the sample landing.
Prompt for the agent Use with AI
Read the DESIGN.md at the project root and follow its rules on every screen. Import sistema.css once at the project's entry point and use its classes and tokens instead of creating new styles. Before every UI change, reread DESIGN.md.
- 01Download the two filesDESIGN.md (the visual rules) and sistema.css (tokens, components and the design's signatures).
- 02Add them to the projectDESIGN.md at the root. sistema.css imported once at the entry point: works with React, Vue, Svelte, HTML or WordPress.
- 03Paste the prompt into your agentIt reads the rules and builds any screen (login, pricing, dashboard) with the design's look.
- 04Make the rule stickPut the prompt in your agent's project rules so every new screen follows the same colors, fonts and spacing.
More dashboards
More admin dashboards from the catalog.
