Razão.
Tableau de bord financier façon grand-livre imprimé : papier, filets fins, chiffres en serif tabulaire, négatifs entre parenthèses en rouge, tampon « vérifié » et notes du comptable en marge.
- Type
- Dashboard admin
- Thème
- Clair
- Titres
- Newsreader
- Texte
- Instrument Sans
PourComptables, contrôleurs de gestion, directeurs financiers et associés d'entreprises moyennes qui lisent leurs rapports posément
Blocs de l'écran01/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".
Extrait du DESIGN.md, en portugais pour l'instant.
PourComptables, contrôleurs de gestion, directeurs financiers et associés d'entreprises moyennes qui lisent leurs rapports posément
Palette
Les quatre couleurs qui définissent le design et toutes les variables de tokens.css. Cliquez pour copier.
Typographie
Newsreader pour les titres, Instrument Sans pour le texte.
TitresNewsreader
Aag!
Razão en une ligne
ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
TexteInstrument Sans
La police de lecture porte les longs paragraphes sans fatiguer.
Texte courant, boutons, formulaires et légendes. Les titres prennent la police d'affichage ; celle-ci fait le quotidien de la page.
0123456789 · 1 234,56 € · 25/09 à 19h30
Pour qui
Ce que l'IA compare avec le client pour choisir le design.
- marque sobre en vert, bleu marine, bordeaux ou graphite
- cabinet traditionnel qui veut paraître moderne sans perdre en gravité
- rapport mensuel envoyé au client
- beaucoup de chiffres et peu d'actions par écran
- application grand public ou public jeune
- opération en temps réel (logistique, support)
- marque vibrante ou néon
- thème sombre obligatoire
- qui a besoin d'actions rapides au guichet
Ton
Ce qui fait Razão
Les signatures du DESIGN.md : ce qui ne doit pas manquer à l'application.Extrait du DESIGN.md, en portugais pour l'instant.
- 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.
Règles du jeu
Directement du DESIGN.md.Extrait du DESIGN.md, en portugais pour l'instant.
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ó.
Deux fichiers.
Un prompt.
Razão devient le design system de votre agent de code : il construit n'importe quel écran avec ce style, pas seulement la landing d'exemple.
Prompt pour l'agent Utiliser avec l'IA
Lis le DESIGN.md à la racine du projet et suis ses règles sur chaque écran. Importe sistema.css une seule fois au point d'entrée du projet et utilise ses classes et tokens au lieu de créer de nouveaux styles. Avant chaque changement d'interface, relis le DESIGN.md.
- 01Téléchargez les deux fichiersDESIGN.md (les règles visuelles) et sistema.css (tokens, composants et signatures du design).
- 02Ajoutez-les au projetDESIGN.md à la racine. sistema.css importé une fois au point d'entrée : fonctionne avec React, Vue, Svelte, HTML ou WordPress.
- 03Collez le prompt dans votre agentIl lit les règles et construit n'importe quel écran (connexion, tarifs, dashboard) avec le style du design.
- 04Fixez la règleMettez le prompt dans les règles du projet de l'agent pour que chaque nouvel écran suive les mêmes couleurs, polices et espacements.
Autres dashboards
Plus de dashboards admin du catalogue.