Visual benchmark v1 · concept sprint
Três territórios visuais. A mesma decisão: onde morar.
A mesma tela do estágio Descobrir, construída três vezes sobre os 94 bairros oficiais do Recife. Mesmo motor, mesmos dados, mesma tarefa — só o território visual muda.
Abrir a hipótese recomendada01 · Hipóteses materializadas
Não escolhemos pela abstração. Escolhemos olhando as três.
02 · Estudos de símbolo
O símbolo precisa sobreviver a cinco tamanhos ao mesmo tempo.
Logo, favicon de 16 px, ícone de aplicativo, marcador no mapa e indicador de seleção. Cada estudo abaixo é o mesmo desenho nos cinco usos — o teste elimina soluções antes de qualquer refinamento.
Estudo 01 · M em espaço negativo
Território sólido e irregular; o vão interno desenha o M. Vira massa reconhecível a 16 px, mas o contraforma fecha quando muito reduzido.
Estudo 02 · M construído por quadras
Quatro polígonos levemente tortos, separados por vãos de via. O M não é desenhado: é formado por malha urbana. Sustenta 16 px; exige gap mínimo.
Estudo 03 · Limite, isolinha e ponto
Um limite de bairro cujo topo desenha o M em recorte. O ponto interno é o mesmo marcador do mapa; a isolinha externa é o anel de seleção. É o único dos três que já nasce como componente cartográfico.
03 · A assinatura do produto
Dado → contexto → leitura → consequência → decisão.
Por que isso vira componente
O pipeline não é uma decisão de copy. Ele é a razão pela qual o Design
System tem Data e Geo como camadas de
primeira classe: Metric,
Score,
Insight e
Evidence
são etapas dele, não variações de card.
O que este dado ainda não sabe
Renda, custo do m², transporte, segurança, demografia e densidade populacional não existem nesta extração. As três telas declaram a lacuna em vez de preenchê-la — P10, confiança antes de cobertura.04 · Princípios que as três telas obedecem
Quatro regras vindas do benchmark.
P1 · Information first
A identidade nunca compete com a informação territorial.
Sem gradiente decorativo, sem card colorido por decoração, sem sombra forte. A personalidade vem de tipografia, geometria, cartografia e linguagem.
P2 · Geography is identity
Limite, quadra, contorno e ponto entram na marca.
Os três símbolos vêm de elementos cartográficos, não de tipografia. No conceito C, o contorno do bairro selecionado é literalmente o anel do símbolo.
P3 · Explain, don't just display
Nenhum número aparece sem posição relativa.
Toda métrica traz a mediana de Recife e o percentil entre os 94 bairros.
O Score
declara quantas dimensões entraram no cálculo.
P4 · Calm confidence
Linguagem de consultor territorial, não de marketplace.
Sem urgência, sem escassez, sem “últimas unidades”. A escala semântica inclui “provavelmente não faz sentido” — eliminar também gera valor.
05 · Benchmark v1
De onde vem cada decisão.
| Produto | Território | Marca | Dados | Mapa | Aprendizado incorporado |
|---|---|---|---|---|---|
| QuintoAndar | Moradia | ★★★★★ | ★★☆☆☆ | ★★★☆☆ | Humanização — sem adotar casa como metáfora visual |
| Loft | Imobiliário + tech | ★★★★☆ | ★★★☆☆ | ★★★☆☆ | Tecnologia sem parecer enterprise |
| ZAP · VivaReal | Marketplace | ★★★☆☆ | ★★☆☆☆ | ★★★☆☆ | Anti-padrão de urgência e escassez |
| Niche | Decisão territorial | ★★★★☆ | ★★★★★ | ★★★☆☆ | Traduzir dado em decisão |
| Walk Score | Mobilidade / moradia | ★★★☆☆ | ★★★★★ | ★★★★☆ | Número + rótulo semântico (0–100 e “Very Walkable”) |
| NeighborhoodScout | Inteligência territorial | ★★★☆☆ | ★★★★★ | ★★★★★ | Profundidade analítica — e o anti-padrão “dashboard corporativo” |
| Airbnb | Exploração | ★★★★★ | ★★☆☆☆ | ★★★★★ | Exploração espacial e seleção no mapa |
| Mapbox | Geo / infraestrutura | ★★★★★ | ★★★★★ | ★★★★★ | Mapa como linguagem visual: cor, tipografia, ícone, textura |
| Citymapper | Mobilidade | ★★★★☆ | ★★★★☆ | ★★★★★ | Complexidade → simplicidade |
Matriz e notas de avaliação: benchmark v1 do time, rodada de 02/09/2026. As notas são julgamento editorial, não medição.
06 · Moradia Design System
Data e Geo como camadas de primeira classe.
Material, shadcn/ui e afins resolvem a camada 02. Não resolvem a 03 nem a 04 — e são exatamente elas que representam o domínio do Moradia.pro. O que está sem etiqueta já roda nas três telas.
01 Foundations
- Color
- Typography
- Spacing
- Radius
- Iconography
- Elevation mínimo
- Motion reservado
02 Primitives
- Button
- Input
- Select
- Badge
- Tooltip
- Card
03 Data
- Metric
- Score
- Comparison
- Insight
- Evidence
- Legend
- DataSource
- Trend sem série histórica
04 Geo
- Map
- MapArea
- MapLayer
- MapLegend
- MapMarker
- PlaceCard
- PlaceSelector
A hipótese é 60% Exploração Territorial, 25% Inteligência Urbana, 15% Cidade Humana.
As três telas estão de pé sobre o mesmo dado. Abra, use as camadas, compare dois bairros e elimine o que não funcionar.