Planta.
Minimalismo suíço em concreto claro: grade de 12 colunas visível, títulos enormes e apertados, ficha técnica em mono, planta baixa em traço fino e um único toque terracota.
- Tipo
- Landing page
- Tema
- Claro
- Títulos
- Inter Tight
- Texto
- Inter
ParaCompradores e clientes de médio-alto padrão que decidem com calma e querem dado concreto
Seções da página01/02Parte 1
Minimalismo suíço de escritório de arquitetura. Tudo alinhado numa grade que fica visível; a informação técnica é o enfeite. Silencioso e caro.
ParaCompradores e clientes de médio-alto padrão que decidem com calma e querem dado concreto
Paleta
As quatro cores que definem o design e todas as variáveis do tokens.css. Clique para copiar.
Tipografia
Inter Tight nos títulos, Inter no texto.
TítulosInter Tight
Aag!
Planta em uma linha
ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
TextoInter
A fonte de leitura carrega parágrafos longos sem cansar.
Texto corrido, botões, formulários e legendas. Os títulos ficam com a fonte de destaque; aqui é o dia a dia da página.
0123456789 · R$ 1.234,56 · 25/09 às 19h30
Para quem serve
O que a skill /escolher-design compara com o cliente.
- portfólio com boas fotos de arquitetura
- poucos imóveis/projetos bem apresentados
- marca em preto, cinza, bege, terracota ou verde-oliva
- público que valoriza especificação técnica
- imobiliária de volume/popular com centenas de anúncios
- público que busca calor e acolhimento (usar Pétala)
- marca com cores vivas e saturadas
- restaurante, saúde, tech
Tom
O que faz ser Planta
As assinaturas do DESIGN.md: o que não pode faltar ao aplicar.
- 01
Grade de 12 colunas desenhada por trás da página inteira, com filetes quase invisíveis (4 no celular).
- 02
Numeração de seção
02 / 05em mono, à direita do título, sobre filete preto. - 03
Hero: título gigante ocupando 9 colunas, rótulo em mono nas 3 primeiras; última linha em cinza.
- 04
Imagem grande com ficha técnica sobreposta (tabela em mono no canto inferior direito).
- 05
Cards de imóvel sem borda: foto alta, bairro em mono, nome, linha de especificação entre filetes, preço.
- 06
Planta baixa em SVG com traço fino, portas com arco e rótulos em mono.
- 07
Números enormes de especificação (
118 m²,2,80 m) em grade 2×2. - 08
Formulário só com filete embaixo (
.planta-campo), dentro de bloco escuro.
Regras do jogo
Direto do DESIGN.md.
Identidade
- Fundo concreto claro
#efede8, superfícies#f7f6f2e#e4e1da. Nada de branco puro. - Texto quase preto
#141414; secundário cinza quente#6f6a62. Filetes#d3cfc6e, nos títulos, filete preto. - Primária é o próprio preto: botão principal, bloco do formulário.
- Destaque terracota
#c2562f, uma vez por tela: preço na ficha, tag de lançamento, janela na planta, número do passo, botão do formulário. - Fontes: Inter Tight 500–600 com tracking bem apertado (
-0.04ema-0.055em) nos títulos; Inter no texto; JetBrains Mono para especificação (m², quartos, vagas), rótulos e numeração. - Cantos retos em tudo (
--d-radius: 0). A única curva são os filtros em pílula.
Regras
- Tudo alinha na grade de 12. Se um elemento não cai numa coluna, está errado.
- Muito espaço vazio. Nada de sombra, gradiente decorativo ou ícone ilustrativo; setas lucide finas são o único ícone.
- Fotos: arquitetura com luz natural, enquadramento reto, pouca saturação. Foto torta ou HDR estoura o design.
- Animação só na entrada (
data-sobe) e ao rolar (data-revela), mais o zoom lento da foto no hover.
Adaptar à marca do cliente
- Troque só
--d-accentpela cor da marca, desde que seja sóbria (terracota, oliva#6b7045, azul-petróleo#1f4e5a). Mantenha preto e concreto. - Marca escura (grafite, marinho): pode virar
--d-primary, desde que o texto claro em cima continue legível. - Marca com cor viva (laranja neon, rosa, azul royal)? Esse design provavelmente não é o certo.
Dois arquivos.
Um prompt.
O Planta vira o sistema do seu agente de código: ele monta qualquer tela com esta cara, não só a landing de exemplo.
Prompt para o agente
Leia o DESIGN.md na raiz do projeto e siga as regras dele em toda tela. Importe o sistema.css uma única vez no ponto de entrada do projeto e use as classes e tokens dele em vez de criar estilos novos. Antes de cada mudança de interface, releia o DESIGN.md.
- 01Baixe os dois arquivosDESIGN.md (as regras visuais) e sistema.css (tokens, componentes e as assinaturas do design).
- 02Coloque no projetoDESIGN.md na raiz. O sistema.css importado uma vez no ponto de entrada: funciona em React, Vue, Svelte, HTML ou WordPress.
- 03Cole o prompt no seu agenteEle lê as regras e passa a montar qualquer tela (login, preços, painel) com a cara do design.
- 04Deixe a regra fixaColoque o prompt nas regras do projeto do agente para toda tela nova seguir as mesmas cores, fontes e espaçamentos.
Parecidos
Landings com tom ou nicho em comum com Planta.