Ravox UIby Ravox Labs
Ravox UIby Ravox Labs
Install the KitGuide
LandingLighttechnicaltrustworthystraightforward
SSafra

Safra.

A technical field bulletin in straw, chlorophyll green and grain yellow: wide uppercase headline, contour lines, satellite field-plot map and crop calendar. Serious and practical, without a cutesy farm look.

Type
Landing page
Theme
Light
Headings
Archivo (largura 125)
Body
Public Sans

ForFarmers and farm managers, 30-65, who decide with data and conversation

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

Page sections01/08Topo e navegação

All the copy lives in content.ts and the colors in 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.

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

ForFarmers and farm managers, 30-65, who decide with data and conversation

Palette

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

Typography

Archivo (largura 125) for headings, Public Sans for body text.

HeadingsArchivo (largura 125)

Aag!

Safra in one line

ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789

BodyPublic Sans

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
  • green, yellow or earthy brand
  • technical service with an agronomist
  • company selling through visits and WhatsApp
  • agtech with feet on the ground
Avoid for
  • rural tourism and inns (use Raiz)
  • delicate farmers-market organics
  • luxury
  • young urban audience
Niches
agribusinessagronomic consultingfarm input dealercooperativeprecision agriculturesoil analysisseedsfarm machinerylivestockland surveying

Tone

technicaltrustworthystraightforwardhardworking

What makes it Safra

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

  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.

House rules

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

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

Two files.
One prompt.

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

Browse catalog
LandingDarkView design

Commit

LandingDarkView design

Torque

LandingLightView design

Rótulo

LandingLightView design

Receita