Ravox UIby Ravox Labs
Ravox UIby Ravox Labs
Instalar el KitGuía
LandingClarosobrioprecisosofisticado
PPlanta

Planta.

Minimalismo suizo en hormigón claro: grilla de 12 columnas visible, títulos enormes y apretados, ficha técnica en mono, plano en trazo fino y un único toque de terracota.

Tipo
Landing page
Tema
Claro
Títulos
Inter Tight
Texto
Inter

ParaCompradores y clientes de nivel medio-alto que deciden con calma y quieren datos concretos

Obtener acceso · desde 49 BRLo todos los diseños por 297 BRL al año
Abrir en pantalla completa Usar con IA
/preview/planta

Secciones de la página01/02Parte 1

Todo el texto está en content.ts y los colores en tokens.css.
Concepto

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.

Del DESIGN.md, que por ahora está en portugués.

ParaCompradores y clientes de nivel medio-alto que deciden con calma y quieren datos concretos

Paleta

Los cuatro colores que definen el diseño y todas las variables de tokens.css. Haz clic para copiar.

Tipografía

Inter Tight en los títulos, Inter en el texto.

TítulosInter Tight

Aag!

Planta en una línea

ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789

TextoInter

La fuente de lectura sostiene párrafos largos sin cansar.

Texto corrido, botones, formularios y leyendas. Los títulos usan la fuente destacada; esta es la del día a día.

0123456789 · $1.234,56 · 25/09 a las 19:30

Para quién es

Lo que la IA compara con el cliente para elegir el diseño.

Ideal para
  • portafolio con buenas fotos de arquitectura
  • pocos inmuebles o proyectos bien presentados
  • marca en negro, gris, beige, terracota o verde oliva
  • público que valora la especificación técnica
Evitar para
  • inmobiliaria popular o de volumen con cientos de avisos
  • público que busca calidez y acogida (usar Pétala)
  • marca con colores vivos y saturados
  • restaurante, salud, tech
Nichos
inmobiliariacorredor de inmueblesconstructoralanzamiento inmobiliarioarquitecturadiseño de interiorescarpintería a medidapaisajismodesarrolladora

Tono

sobrioprecisosofisticadosilencioso

Lo que lo hace Planta

Las firmas del DESIGN.md: lo que no puede faltar al aplicarlo.Del DESIGN.md, que por ahora está en portugués.

  1. 01

    Grade de 12 colunas desenhada por trás da página inteira, com filetes quase invisíveis (4 no celular).

  2. 02

    Numeração de seção 02 / 05 em mono, à direita do título, sobre filete preto.

  3. 03

    Hero: título gigante ocupando 9 colunas, rótulo em mono nas 3 primeiras; última linha em cinza.

  4. 04

    Imagem grande com ficha técnica sobreposta (tabela em mono no canto inferior direito).

  5. 05

    Cards de imóvel sem borda: foto alta, bairro em mono, nome, linha de especificação entre filetes, preço.

  6. 06

    Planta baixa em SVG com traço fino, portas com arco e rótulos em mono.

  7. 07

    Números enormes de especificação (118 m², 2,80 m) em grade 2×2.

  8. 08

    Formulário só com filete embaixo (.planta-campo), dentro de bloco escuro.

Reglas del juego

Directo del DESIGN.md.Del DESIGN.md, que por ahora está en portugués.

Ver DESIGN.md

Identidade

  • Fundo concreto claro #efede8, superfícies #f7f6f2 e #e4e1da. Nada de branco puro.
  • Texto quase preto #141414; secundário cinza quente #6f6a62. Filetes #d3cfc6 e, 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.04em a -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-accent pela 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.
Cómo usarlo

Dos archivos.
Un prompt.

Planta se vuelve el sistema de tu agente de código: arma cualquier pantalla con este estilo, no solo la landing de ejemplo.

Prompt para el agente Usar con IA

Lee el DESIGN.md en la raíz del proyecto y sigue sus reglas en cada pantalla. Importa sistema.css una sola vez en el punto de entrada del proyecto y usa sus clases y tokens en lugar de crear estilos nuevos. Antes de cada cambio de interfaz, vuelve a leer el DESIGN.md.

  1. 01Descarga los dos archivosDESIGN.md (las reglas visuales) y sistema.css (tokens, componentes y las firmas del diseño).
  2. 02Ponlos en el proyectoDESIGN.md en la raíz. sistema.css importado una vez en el punto de entrada: funciona en React, Vue, Svelte, HTML o WordPress.
  3. 03Pega el prompt en tu agenteLee las reglas y arma cualquier pantalla (login, precios, panel) con el estilo del diseño.
  4. 04Deja la regla fijaPon el prompt en las reglas del proyecto del agente para que cada pantalla nueva siga los mismos colores, fuentes y espaciados.

Similares

Landings con tono o nicho en común con Planta.

Ver catálogo
LandingClaroVer diseño

Concreto

LandingClaroVer diseño

Caso

LandingClaroVer diseño

Esmalte

LandingClaroVer diseño

Assento