Ravox UIby Ravox Labs
Ravox UIby Ravox Labs
Install the KitGuide
LandingLightsoberprecisesophisticated
PPlanta

Planta.

Swiss minimalism in light concrete: a visible 12-column grid, huge tight headlines, mono spec sheet, thin-line floor plan and a single touch of terracotta.

Type
Landing page
Theme
Light
Headings
Inter Tight
Body
Inter

ForMid-to-high-end buyers and clients who decide calmly and want hard data

Get access · from R$49or every design for R$297 a year
Open full screen Use with AI
/preview/planta

Page sections01/02Parte 1

All the copy lives in content.ts and the colors in tokens.css.
Concept

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.

From DESIGN.md, which is in Portuguese for now.

ForMid-to-high-end buyers and clients who decide calmly and want hard data

Palette

The four colors that define the design and every variable in tokens.css. Click to copy.

Typography

Inter Tight for headings, Inter for body text.

HeadingsInter Tight

Aag!

Planta in one line

ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789

BodyInter

The reading font carries long paragraphs without tiring the eye.

Running text, buttons, forms and captions. Headings get the display font; this is the page's everyday voice.

0123456789 · $1,234.56 · Sep 25, 7:30 PM

Who it's for

What the AI compares with your client to pick the design.

Great for
  • portfolio with good architectural photos
  • few properties/projects, well presented
  • brand in black, gray, beige, terracotta or olive green
  • audience that values technical specs
Avoid for
  • volume/mass-market agency with hundreds of listings
  • audience seeking warmth and comfort (use Pétala)
  • brand with bright, saturated colors
  • restaurant, healthcare, tech
Niches
real estate agencyreal estate agentconstruction companyproperty launcharchitectureinterior designcustom joinerylandscapingdeveloper

Tone

soberprecisesophisticatedquiet

What makes it Planta

The signatures from DESIGN.md: what must be there when you apply it.From DESIGN.md, which is in Portuguese for now.

  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.

House rules

Straight from DESIGN.md.From DESIGN.md, which is in Portuguese for now.

View 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.
How to use

Two files.
One prompt.

Planta becomes your coding agent's design system: it builds any screen with this look, not just the sample landing.

Prompt for the agent Use with AI

Read the DESIGN.md at the project root and follow its rules on every screen. Import sistema.css once at the project's entry point and use its classes and tokens instead of creating new styles. Before every UI change, reread DESIGN.md.

  1. 01Download the two filesDESIGN.md (the visual rules) and sistema.css (tokens, components and the design's signatures).
  2. 02Add them to the projectDESIGN.md at the root. sistema.css imported once at the entry point: works with React, Vue, Svelte, HTML or WordPress.
  3. 03Paste the prompt into your agentIt reads the rules and builds any screen (login, pricing, dashboard) with the design's look.
  4. 04Make the rule stickPut the prompt in your agent's project rules so every new screen follows the same colors, fonts and spacing.

Similar

Landings that share a tone or niche with Planta.

Browse catalog
LandingLightView design

Concreto

LandingLightView design

Caso

LandingLightView design

Esmalte

LandingLightView design

Assento