Ravox UIby Ravox Labs
Ravox UIby Ravox Labs
Installer le KitGuide
LandingClairsobreprécissophistiqué
PPlanta

Planta.

Minimalisme suisse en béton clair : grille de 12 colonnes visible, titres énormes et serrés, fiche technique en mono, plan au trait fin et une seule touche de terre cuite.

Type
Landing page
Thème
Clair
Titres
Inter Tight
Texte
Inter

PourAcheteurs et clients du moyen-haut de gamme qui décident sans se presser et veulent des données concrètes

Obtenir l'accès · à partir de 49 R$ou tous les designs pour 297 R$ par an
Ouvrir en plein écran Utiliser avec l'IA
/preview/planta

Sections de la page01/02Parte 1

Tout le texte est dans content.ts et les couleurs dans 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.

Extrait du DESIGN.md, en portugais pour l'instant.

PourAcheteurs et clients du moyen-haut de gamme qui décident sans se presser et veulent des données concrètes

Palette

Les quatre couleurs qui définissent le design et toutes les variables de tokens.css. Cliquez pour copier.

Typographie

Inter Tight pour les titres, Inter pour le texte.

TitresInter Tight

Aag!

Planta en une ligne

ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789

TexteInter

La police de lecture porte les longs paragraphes sans fatiguer.

Texte courant, boutons, formulaires et légendes. Les titres prennent la police d'affichage ; celle-ci fait le quotidien de la page.

0123456789 · 1 234,56 € · 25/09 à 19h30

Pour qui

Ce que l'IA compare avec le client pour choisir le design.

Idéal pour
  • portfolio avec de belles photos d'architecture
  • peu de biens/projets bien présentés
  • marque en noir, gris, beige, terre cuite ou vert olive
  • public qui apprécie les spécifications techniques
À éviter pour
  • agence de volume/grand public avec des centaines d'annonces
  • public en quête de chaleur et d'accueil (utiliser Pétala)
  • marque aux couleurs vives et saturées
  • restaurant, santé, tech
Secteurs
agence immobilièreagent immobilierconstructeurprogramme immobilier neufarchitecturearchitecture d'intérieurmenuiserie sur mesurepaysagismepromoteur

Ton

sobreprécissophistiquésilencieux

Ce qui fait Planta

Les signatures du DESIGN.md : ce qui ne doit pas manquer à l'application.Extrait du DESIGN.md, en portugais pour l'instant.

  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.

Règles du jeu

Directement du DESIGN.md.Extrait du DESIGN.md, en portugais pour l'instant.

Voir le 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.
Mode d'emploi

Deux fichiers.
Un prompt.

Planta devient le design system de votre agent de code : il construit n'importe quel écran avec ce style, pas seulement la landing d'exemple.

Prompt pour l'agent Utiliser avec l'IA

Lis le DESIGN.md à la racine du projet et suis ses règles sur chaque écran. Importe sistema.css une seule fois au point d'entrée du projet et utilise ses classes et tokens au lieu de créer de nouveaux styles. Avant chaque changement d'interface, relis le DESIGN.md.

  1. 01Téléchargez les deux fichiersDESIGN.md (les règles visuelles) et sistema.css (tokens, composants et signatures du design).
  2. 02Ajoutez-les au projetDESIGN.md à la racine. sistema.css importé une fois au point d'entrée : fonctionne avec React, Vue, Svelte, HTML ou WordPress.
  3. 03Collez le prompt dans votre agentIl lit les règles et construit n'importe quel écran (connexion, tarifs, dashboard) avec le style du design.
  4. 04Fixez la règleMettez le prompt dans les règles du projet de l'agent pour que chaque nouvel écran suive les mêmes couleurs, polices et espacements.

Similaires

Des landings qui partagent un ton ou un secteur avec Planta.

Voir le catalogue
LandingClairVoir le design

Concreto

LandingClairVoir le design

Caso

LandingClairVoir le design

Esmalte

LandingClairVoir le design

Assento