Ravox UIby Ravox Labs
Ravox UIby Ravox Labs
Installer le KitGuide
LandingClairtechniquefiabledirect
SSafra

Safra.

Bulletin technique de terrain en paille, vert chlorophylle et jaune blé : titre large en capitales, courbes de niveau, carte des parcelles par satellite et calendrier de campagne. Sérieux et pratique, sans allure de petite ferme.

Type
Landing page
Thème
Clair
Titres
Archivo (largura 125)
Texte
Public Sans

PourAgriculteurs et gestionnaires d'exploitation, 30-65 ans, qui décident avec des données et de la discussion

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/safra

Sections de la page01/08Topo e navegação

Tout le texte est dans content.ts et les couleurs dans tokens.css.
Concept

Boletim técnico de campo: papel palha, verde clorofila, amarelo grão, título largo em caixa-alta e curvas de nível. Parece relatório de agrônomo bem diagramado, não fazendinha de desenho.

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

PourAgriculteurs et gestionnaires d'exploitation, 30-65 ans, qui décident avec des données et de la discussion

Palette

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

Typographie

Archivo (largura 125) pour les titres, Public Sans pour le texte.

TitresArchivo (largura 125)

Aag!

Safra en une ligne

ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789

TextePublic Sans

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
  • marque verte, jaune ou terreuse
  • service technique avec ingénieur agronome
  • entreprise qui vend par visite et WhatsApp
  • agtech les pieds sur le terrain
À éviter pour
  • tourisme rural et auberges (utiliser Raiz)
  • bio de marché ou délicat
  • luxe
  • public urbain jeune
Secteurs
agroconseil agronomiquenégoce d'intrantscoopérativeagriculture de précisionanalyse de solsemencesmachines agricolesélevagetopographie

Ton

techniquefiabledirecttravailleur

Ce qui fait Safra

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

  1. 01

    Título do hero em 3 linhas largas, a última em verde com sublinhado amarelo grosso.

  2. 02

    Mapa de talhões por satélite: blocos inclinados com escala de vigor, sulcos de plantio, curvas de nível, alvo pulsando e faixa de varredura. Legenda "baixo → alto vigor" embaixo.

  3. 03

    Curvas de nível (<Topo>) no fundo do hero, do calendário e da chamada final.

  4. 04

    "Linhas de plantio" (.safra-linhas) como marcador de rótulo e divisória.

  5. 05

    Cartões de serviço como etiqueta de sacaria: borda preta de 2px, topo listrado amarelo/preto (.safra-saco), código SN-01 em mono e sombra verde dura no hover.

  6. 06

    Calendário da safra em 12 colunas: plantio listrado com borda verde, colheita em amarelo.

  7. 07

    Sombras duras deslocadas (4px 4px 0), nunca sombra desfocada.

Règles du jeu

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

Voir le DESIGN.md

Identidade

  • Fundo palha #efe8d8; cartões em #f8f4ea; blocos alternados em #e4dbc6.
  • Texto verde quase preto #1a1f16; secundário #5b5e4c.
  • Primária verde clorofila #3a7d24 em botões, destaques e na chamada final.
  • Destaque amarelo grão #e7ad1b: sublinhado do título, colheita no calendário, botão sobre verde.
  • Fontes: Archivo no eixo de largura 125 (.safra-largo) para títulos, Public Sans no texto, IBM Plex Mono para códigos, coordenadas, prazos e meses.

Regras

  • Cantos quase retos (rounded-d = 4px). Nada de pílula.
  • Máximo de 2 botões por tela. Texto de botão fala a ação ("Falar com um agrônomo").
  • Animação: entrada (data-sobe), revela ao rolar (data-revela), alvo e varredura do mapa. Tudo para em prefers-reduced-motion.
  • Ícones lucide simples (brotinho, satélite, mira). Nada de trator de clip-art ou vaquinha.

Adaptar à marca do cliente

  • Marca verde de outro tom: troque --d-primary e as sombras verdes do hover.
  • Marca vermelha/azul de máquina (concessionária): troque --d-primary, mantenha palha e grão.
  • Turismo rural ou pousada pedem algo mais acolhedor: use Raiz.
Mode d'emploi

Deux fichiers.
Un prompt.

Safra 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 Safra.

Voir le catalogue
LandingSombreVoir le design

Commit

LandingSombreVoir le design

Torque

LandingClairVoir le design

Rótulo

LandingClairVoir le design

Receita