01 — Preview
UI Mock — Terminal Dashboard
Painel de análise paramétrica. Dark mode exclusivo. Densidade informacional 7/10.
PERMUTAPRO
Análise Paramétrica
VGV Estimado
R$ 2.400.000
+12.4% acima do mercado
Viabilidade Paramétrica
87.4 pts
Score aprovado ≥ 70
Imóvel A — Apto 801
R$ 1.200.000
✓ Valorizado
Imóvel B — Casa Térrea
R$ 1.050.000
✓ Valorizado
Diferença de Permuta
R$ 150.000
⚠ Complemento
Score de Viabilidade — 87.4 / 100
02 — Paleta
Cores
Zero gradientes nos fundos. Dourado aparece apenas em dados críticos e CTAs — máximo 20% da composição.
Primárias
Preto Grafite
#0F0F0F
Fundo base universal
Dourado Institucional
#C9A84C
CTAs, KPIs, progresso
Superfícies
Card Base
#1A1A1A
Containers, painéis
Elevado
#222222
Dropdowns, modais
Bordas & Texto
Borda Padrão
#2A2A2A
Separadores, cards
Texto Primário
#F5F5F5
Corpo e títulos
Secundário
Cinza Médio
#8A8A8A
Labels, metadados
Semânticas
Aprovado
#16A34A
Status positivo
Crítico
#E11D48
Alertas, risco
Atenção
#D97706
Complemento, aviso
03 — Tipografia
Sistema de Fontes
Inter para UI editorial. JetBrains Mono exclusivamente para dados numéricos — a distinção semântica entre texto e dado.
Hero KPI
700 / 42px / -0.02em
R$ 2.4M
JetBrains Mono
H1 Página
700 / 32px / -0.01em
Análise de Viabilidade
Inter
H2 Seção
600 / 21px / 0
Dossiê de Mercado
Inter
Body
400 / 15px / 0
Terreno pré-negociado com potencial construtivo de 4.200 m² e margem projetada de 28,4%.
Inter
Dado / Métrica
700 / 28px / 0
87.4 pts
JetBrains Mono
Label / Caption
600 / 11px / 0.12em
VGV ESTIMADO
Inter uppercase
Dado de Tabela
500 / 13px / 0
R$ 1.200.000
Imóvel A — Apto 801
Mono + Inter
04 — CSS
Variáveis & Propriedades
Tokens prontos para implementação. Copiar para :root do projeto.
:root {
--bg-base: #0F0F0F;
--bg-card: #1A1A1A;
--bg-elevated: #222222;
--text-primary: #F5F5F5;
--text-secondary:#8A8A8A;
--text-muted: #555555;
--accent: #C9A84C;
--accent-hover: #E8C56A;
--accent-dim: rgba(201,168,76,0.12);
--border: #2A2A2A;
--border-accent: rgba(201,168,76,0.40);
--radius-sm: 4px;
--radius: 6px;
--radius-lg: 8px;
--font-ui: 'Inter', system-ui, sans-serif;
--font-data: 'JetBrains Mono', 'IBM Plex Mono', monospace;
}
body {
background-color: #0F0F0F;
color: #F5F5F5;
font-family: 'Inter', sans-serif;
accent-color: #C9A84C;
border-radius: 4px;
}
.data, .metric, .kpi, .price {
font-family: 'JetBrains Mono', monospace;
}
05 — Tokens
Referência de Cores
Mapeamento completo: token → hex → uso.
--bg-base
#0F0F0F
Fundo de página
--bg-card
#1A1A1A
Cards, containers
--bg-elevated
#222222
Dropdowns, modais
--text-primary
#F5F5F5
Texto principal
--text-secondary
#8A8A8A
Metadados, labels
--text-muted
#555555
Placeholders, desabilitados
--accent
#C9A84C
CTAs, preços, KPIs
--accent-hover
#E8C56A
Hover de elementos dourados
--accent-dim
rgba(201,168,76,0.12)
Highlight de linha, tag positiva
--border
#2A2A2A
Bordas de cards e tabelas
--border-accent
rgba(201,168,76,0.40)
Input em foco
--shadow
rgba(0,0,0,0.40)
Sombra padrão
06 — Componentes
Especificações
Parâmetros de construção para os componentes principais.
| Componente |
Especificação |
Notas |
| KPI Card |
bg #1A1A1A · border 1px #2A2A2A · radius 6px · padding 24px |
Label uppercase #8A8A8A / Valor JetBrains Mono #C9A84C |
| Botão Primário |
bg #C9A84C · color #0F0F0F · weight 600 · padding 12px 24px · radius 6px |
Hover: bg #E8C56A · transition 150ms ease |
| Botão Outline |
bg transparent · color #C9A84C · border 1px #C9A84C · radius 6px |
Hover: bg rgba(201,168,76,0.10) |
| Input |
bg #1A1A1A · border 1px #2A2A2A · radius 6px · height 42px |
Focus: border #C9A84C · shadow 0 0 0 3px rgba(201,168,76,0.15) |
| Tabela Header |
bg #222222 · border-bottom #2A2A2A · padding 12px 16px |
Colunas: 9px Inter 600 uppercase #8A8A8A letter-spacing 0.1em |
| Tabela Linha |
border-bottom 1px #2A2A2A · padding 12px 16px |
Hover: bg rgba(201,168,76,0.06) · transition 100ms ease |
| Badge Aprovado |
bg rgba(201,168,76,0.12) · color #C9A84C · padding 4px 10px · radius 4px |
Inter 600 10px uppercase |
| Badge Crítico |
bg rgba(225,29,72,0.12) · color #E11D48 · padding 4px 10px · radius 4px |
Inter 600 10px uppercase |
| Progress Bar |
track #2A2A2A · fill #C9A84C · height 6px · radius 3px |
Nunca usar gradiente no track — apenas no fill |
| Sidebar Item Ativo |
bg rgba(201,168,76,0.10) · border-left 3px #C9A84C · color #C9A84C |
Ícone Lucide 18px alinhado com label |
07 — Checklist
Regras de Implementação
Verificar antes de qualquer entrega. Itens com marcador ativo = regras invioláveis.
-
Fundo #0F0F0F — nunca
#000000
-
JetBrains Mono para todos os números (VGV, margem, potencial construtivo, datas de tabela)
-
Dourado em máx 20% da composição — dados críticos e CTAs apenas
-
Zero gradientes de fundo — nem preto→cinza, nem dourado→transparente
-
NUNCA usar "LPVC" ou "FCA" — usar "análise paramétrica" ou "Dossiê de Mercado"
-
Labels em uppercase com
letter-spacing: 0.12em
-
border-radius máximo 8px — padrão 6px, badges 4px
-
Zero glassmorphism, blur ou backdrop-filter
-
Separação camadas por valor cromático — #0F0F0F / #1A1A1A / #222222 — não por sombra
-
Full dark only — não criar versão clara. A identidade é o escuro.
08 — Referências
Design Guidelines
Documentação completa do sistema: filosofia, componentes, layout, responsivo, guia para IAs.
permutapro-DESIGN.md
Referencias-design / permutapro-DESIGN.md — 9 seções, 404 linhas
Filosofia Visual
Paleta Completa
Componentes
Guia para IAs