Dataland Design System

Landbank · GeoImóvel · Urban · AVM

O design system das telas que o analista consegue auditar

Tokens, componentes, telas de referência e as regras que fazem uma tela da Dataland parecer e se comportar como o produto. A regra que manda em todas: nenhum número aparece sem dizer de onde vem.

01

Por onde começar

Escolha pelo que você vai fazer. O que é interno abre só pra quem tem conta da Dataland; o resto é público.

Pra ver e entender Documentação do sistema Cada componente com exemplo ao vivo, o que fazer e evitar, e o contrato. As telas do Landbank montadas com as peças reais. Pra ver o produto Protótipo do Landbank ↗ O fluxo inteiro, do endereço à memória de cálculo. É a fonte da verdade de layout: o design system documenta o que foi aprovado ali. Pra criar com o Claude interno Design system no claude.ai ↗ A versão que o Claude lê: tokens, os componentes funcionando, as telas de referência e o brand book. Use de base em qualquer protótipo ou slide. Pra testar estados Vitrine (Storybook) Os componentes isolados, com os cinco estados de cada um e a checagem de acessibilidade.
02

Nenhum número órfão

Quem usa o produto é analista ou gestor de incorporadora, e ele desafia número. Se não consegue rastrear um valor, não confia no produto. Por isso todo número declara uma de quatro origens:

OrigemSignifica
publicoDado público: base cadastral, censo, legislação.
refReferência Dataland: nossa base, nosso cálculo.
premissaPremissa do cliente: ele digitou ou confirmou.
derivadoCalculado a partir dos outros três, com a conta à vista.
Sem fonte, nesta ordem

Não mostre. Se precisar mostrar, rotule como referência. Se não houver número, descreva o efeito em texto.

Nunca invente um valor plausível pra preencher a tela, nem em protótipo, demo ou slide. No código, o componente SourcedNumber não renderiza sem origem.

03

Fundamentos

Componente não escolhe cor, pede papel. Os valores abaixo são os tokens ao vivo, lidos de estilo/00-tokens.css: mudam de tema com a página. A grade completa está na página de tokens.

--acao
Marca: ação primária, link, seleção
--marca-ouro
Só o logotipo
--tinta
Título e texto principal
--mundo
Fundo da janela
--ok
Viável; texto em --ok-tx
--at
Atenção; texto em --at-tx
--no
Risco; texto em --no-tx
--info
Informativo

Tipografia: Inter na interface, Geist Mono no dado

fs-titulo-1Rua Harmonia, 412
fs-titulo-3Pontos de atenção do terreno
fs-corpoA outorga da parcela HMP entra na conta.
fs-rotuloSeu piso
fs-monoR$ 227 mi · 21.240 m²

Espaço e raio

Espaçamento só na escala; raio com uma base, --r, e o resto derivado dela.

space-1
space-2
space-3
space-4
space-6
space-8
space-12
space-16
04

Componentes

Use o que existe antes de criar. Cada peça tem página na documentação e um contrato em texto puro, que vale em qualquer tecnologia.

ButtonAção que muda estado. Uma primária por área.
LinkButtonAção secundária de baixa ênfase, como "Responder depois".
BadgeRótulo curto de status ou categoria.
TagPremissa editável do estudo, sempre com o lápis.
SourcedNumberNúmero que não renderiza sem origem declarada.
RulerRégua de corte: onde o valor cai contra o piso do usuário.
BlockCard de seção por composição, com vazio e carregando.
DocumentArquivo anexado ao estudo, considerado ou não no cálculo.
OptionItem selecionável de menu ou lista de escolha.
SegmentedControlOpções exclusivas que trocam visualização ou ordem.
InputCampo de texto de uma linha, com modo numérico.
ToggleLiga e desliga uma opção que vale na hora.
PopoverCamada ancorada pra escolha rápida, sem empurrar a tela.
DialogDecisão que interrompe o fluxo, com foco preso.
ToastAviso passageiro de resultado de ação.
AvatarIniciais de uma pessoa, sem interação.
IconÍcones Tabler do registro do sistema, na cor do texto.
05

Telas de referência

Pra montar uma tela inteira, parta destas: casca, grade e componentes reais do produto, com dado de exemplo do protótipo.

  • EntradaOnde o analista começa um estudo novo ou retoma um recente. Conversa com o motor no centro, estudos recentes embaixo.
  • Fila de estudosTodos os terrenos em avaliação, cada um com a régua contra o piso. Lista e painel lateral em duas colunas.
  • Detalhe do terrenoResultado do estudo: cenários, régua do resultado, pontos de atenção e memória de cálculo com a origem de cada número.
06

Com o Claude

O Claude não enxerga a documentação acima pela URL: ela é um app, e ele recebe só a casca da página. Por isso existem duas peças feitas pra ele.

  • Design system no claude.ai ↗ internoNo claude.ai ou no Claude Design, escolha "Dataland Design System" como base. Ele traz tokens, os componentes funcionando, o markup HTML de cada um e as telas de referência.
  • Skill dataland-design-systemFaz o Claude usar o sistema sozinho sempre que alguém pede tela, protótipo ou slide da Dataland. Baixe e abra no claude.ai pra instalar no seu perfil; pra valer pra organização inteira, um admin adiciona nas configurações do claude.ai. Baixar a skill
  • DESIGN.mdTokens e regras num arquivo só, no formato que qualquer agente de IA lê. Baixe e anexe à conversa, ou cole o link dataland-design-system.pages.dev/DESIGN.md pro Claude ler. Serve pra quem não tem acesso ao artifact. Baixar DESIGN.md
07

Como o sistema é mantido

Três repositórios, cada um fonte da verdade de uma coisa.

RepositórioPapel
Protótipo do LandbankOnde o layout é desenhado e aprovado.
dataland-design-systemOnde token, regra e componente são pesquisados, decididos e validados. Esta página vem daqui.
bridgeO pacote que a engenharia usa em produção. Pra nome de prop e estrutura de componente, as regras de lá mandam.

O que é verdade hoje

O protótipo carrega as mesmas folhas de estilo/ que os componentes: mudar um token muda nos dois. Esta página e a documentação são publicadas à mão, depois de aprovadas; não atualizam sozinhas. Toda entrega registra o que mudou e o que ficou pendente no histórico.