Razão.
Panel financiero con aspecto de libro mayor impreso: papel, filetes finos, números en serif tabular, negativos entre paréntesis en rojo, sello de conferido y notas del contador al margen.
- Tipo
- Panel de administración
- Tema
- Claro
- Títulos
- Newsreader
- Texto
- Instrument Sans
ParaContadores, controllers, directores financieros y socios de empresas medianas que leen informes con calma
Bloques de la pantalla01/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".
Del DESIGN.md, que por ahora está en portugués.
ParaContadores, controllers, directores financieros y socios de empresas medianas que leen informes con calma
Paleta
Los cuatro colores que definen el diseño y todas las variables de tokens.css. Haz clic para copiar.
Tipografía
Newsreader en los títulos, Instrument Sans en el texto.
TítulosNewsreader
Aag!
Razão en una línea
ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
TextoInstrument Sans
La fuente de lectura sostiene párrafos largos sin cansar.
Texto corrido, botones, formularios y leyendas. Los títulos usan la fuente destacada; esta es la del día a día.
0123456789 · $1.234,56 · 25/09 a las 19:30
Para quién es
Lo que la IA compara con el cliente para elegir el diseño.
- marca sobria en verde, azul marino, vino o grafito
- estudio tradicional que quiere parecer moderno sin perder peso
- informe mensual enviado al cliente
- muchos números y poca acción por pantalla
- app de consumo o público joven
- operación en tiempo real (logística, soporte)
- marca vibrante o neón
- tema oscuro obligatorio
- quien necesita acción rápida de mostrador
Tono
Lo que lo hace Razão
Las firmas del DESIGN.md: lo que no puede faltar al aplicarlo.Del DESIGN.md, que por ahora está en portugués.
- 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.
Reglas del juego
Directo del DESIGN.md.Del DESIGN.md, que por ahora está en portugués.
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ó.
Dos archivos.
Un prompt.
Razão se vuelve el sistema de tu agente de código: arma cualquier pantalla con este estilo, no solo la landing de ejemplo.
Prompt para el agente Usar con IA
Lee el DESIGN.md en la raíz del proyecto y sigue sus reglas en cada pantalla. Importa sistema.css una sola vez en el punto de entrada del proyecto y usa sus clases y tokens en lugar de crear estilos nuevos. Antes de cada cambio de interfaz, vuelve a leer el DESIGN.md.
- 01Descarga los dos archivosDESIGN.md (las reglas visuales) y sistema.css (tokens, componentes y las firmas del diseño).
- 02Ponlos en el proyectoDESIGN.md en la raíz. sistema.css importado una vez en el punto de entrada: funciona en React, Vue, Svelte, HTML o WordPress.
- 03Pega el prompt en tu agenteLee las reglas y arma cualquier pantalla (login, precios, panel) con el estilo del diseño.
- 04Deja la regla fijaPon el prompt en las reglas del proyecto del agente para que cada pantalla nueva siga los mismos colores, fuentes y espaciados.
Otros paneles
Más paneles de administración del catálogo.