Design system

Um sistema, não uma coleção de telas.

Tokens, componentes e regras de uso compartilhados entre a página institucional e a plataforma. Tema claro por padrão, escuro por escolha — ambos derivados do mesmo conjunto de variáveis.

Tema claro · padrão Tema escuro · opcional Superfícies de IA WCAG AA como piso
01

Princípios

Quatro regras que decidem qualquer dúvida de design que apareça depois.

O número é o produto

A interface existe para deixar o dado legível. Nada de decoração que compita com a informação: número grande, tabular, com unidade explícita e contexto ao lado.

Todo dado tem procedência

Fonte e data de referência aparecem junto do valor, não em nota de rodapé. Estimativa é rotulada como estimativa — sempre.

IA é uma superfície distinta

Tudo que o modelo gera vive em um contêiner de cor própria (violeta). O usuário nunca confunde o que foi apurado com o que foi inferido.

Claro é o padrão

Análise de terreno acontece de dia, em escritório, muitas vezes projetada. O tema claro é o estado natural; o escuro é conforto para quem trabalha à noite.

02

Cor

Cada cor tem uma única função. Não há cor decorativa no sistema.

Marca e ação

Brand
--brand
Ação primária, navegação ativa, séries-âncora
Brand hover
--brand-2
Estado hover de ação primária
Brand tint
--brand-tint
Fundo de item ativo e badge discreto
Gold
--gold
Exclusividade: off-market, conteúdo restrito

Inteligência artificial

AI
--ai
Rótulo e borda de conteúdo gerado por modelo
AI tint
--ai-tint
Fundo do contêiner de IA. Uso exclusivo

Semântica

Positivo
--pos
Score ≥ 85, margem acima do piso, viável
Atenção
--warn
Ressalva, restrição, dado desatualizado
Negativo
--neg
Inviável, risco material, erro

Série de dados — categórica

Ordem fixa. Gráficos sempre começam em --c1 e seguem a sequência, para que a mesma categoria mantenha a mesma cor entre telas.

Série 1
--c1
Preço, valor, métrica principal
Série 2
--c2
Velocidade, absorção, fluxo
Série 3
--c3
Terreno, ativo imobilizado
Série 4
--c4
Impostos, encargos
Série 5
--c5
Administrativo, indiretos
Série 6
--c6
Estoque, volume, neutro
03

Tipografia

Inter para texto e interface. JetBrains Mono para identificadores e código. Números sempre tabulares.

--t-d1Display50 / 650
--t-h1Título de página27 / 650
--t-h2Título de seção21 / 650
--t-h3Título de card17 / 650
--t-mdCorpo padrão da interface13,5 / 400
--t-smTexto de apoio e rótulo de campo12,5 / 400
--t-xsMetadado, fonte, data de referência11 / 400
--monoARC-0412 · R$ 42.900.000 · CA 2,6mono / tnum
04

Forma, espaço e elevação

Escala de 4 px. Raio cresce com a área do contêiner. Elevação separa camadas, nunca decora.

Raio
4
6
9
13
18
full
Espaçamento
4 · 8 · 12 · 16 · 24 · 32 · 48
Elevação
sh-1 · card
sh-2 · hover
sh-3 · flutuante
sh-4 · modal
05

Componentes

Inventário base compartilhado entre landing e plataforma.

Botões
Etiquetas de estado
Disponível Off-market Em negociação Viável Inviável Gerado por IA Neutro
Score de investimento
91 82 71 58 ≥85 prioritário · 75–84 atrativo · 65–74 observar · <65 descartar
Entrada de dados
Superfície de IA — contêiner exclusivo
Recomendação da IA

Produto sugerido: residencial vertical alto padrão. Relação terreno/VGV de 14,5% está confortável para negociação direta.

ÁreaZonaÁreaPreçoScore
Gleba Marginal Norte
Nova Esperança · BC/SC
ZR-412.400 m²R$ 42,9 mi91
Gleba Norte da Ilha
Cachoeira · Fln/SC
ARP28.900 m²R$ 75,0 mi73
06

Padrões de uso

As decisões que mais aparecem no dia a dia do produto.

Como apresentar um número

✓ Faça
R$ 26.200/m² · venda, privativo
Balneário Camboriú · apuração jul/2026 · ±3,2 p.p.
✕ Evite
26200
Sem unidade, sem recorte, sem data. O usuário não sabe se pode levar ao comitê.

Quando usar a cor de IA

✓ Faça
Use violeta apenas quando o conteúdo foi gerado, inferido ou ranqueado por modelo — score, produto recomendado, texto de recomendação, alerta preditivo.
✕ Evite
Não use violeta para destacar dado apurado, botão comum ou seção que apenas "parece moderna". A cor perde a função de sinalizar incerteza.

Regras herdadas do domínio

RegraAplicação
Data da lei sempre visívelTodo parâmetro urbanístico exibe a legislação de origem e a data de verificação. Sem isso, o dado não vai para o laudo.
Estimativa é rotuladaÍndices de absorção e distrato saem com intervalo de confiança declarado. Nunca se apresentam como apuração.
Cobertura é explícitaCada praça mostra se a cobertura urbanística é completa ou parcial. Cobertura parcial aparece em cor de atenção.
Dado registral é sob demandaConsulta disparada pelo usuário, com custo por ato e registro de finalidade. Não existe base agregada de proprietários.
Verde não é aprovaçãoScore alto e margem positiva são indicadores. O laudo sempre carrega a ressalva de que não substitui consulta prévia e due diligence.