Safra.
Boletim técnico de campo em palha, verde clorofila e amarelo grão: título largo em caixa-alta, curvas de nível, mapa de talhões por satélite e calendário da safra. Sério e prático, sem cara de fazendinha.
- Tipo
- Landing page
- Tema
- Claro
- Títulos
- Archivo (largura 125)
- Texto
- Public Sans
ParaProdutor rural e gestor de fazenda, 30-65, decide com dado e com conversa
Seções da página01/08Topo e navegação
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.
ParaProdutor rural e gestor de fazenda, 30-65, decide com dado e com conversa
Paleta
As quatro cores que definem o design e todas as variáveis do tokens.css. Clique para copiar.
Tipografia
Archivo (largura 125) nos títulos, Public Sans no texto.
TítulosArchivo (largura 125)
Aag!
Safra em uma linha
ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
TextoPublic Sans
A fonte de leitura carrega parágrafos longos sem cansar.
Texto corrido, botões, formulários e legendas. Os títulos ficam com a fonte de destaque; aqui é o dia a dia da página.
0123456789 · R$ 1.234,56 · 25/09 às 19h30
Para quem serve
O que a skill /escolher-design compara com o cliente.
- marca verde, amarela ou terrosa
- serviço técnico com agrônomo
- empresa que vende por visita e WhatsApp
- agtech com pé no campo
- turismo rural e pousada (usar Raiz)
- orgânicos de feira/delicado
- luxo
- público urbano jovem
Tom
O que faz ser Safra
As assinaturas do DESIGN.md: o que não pode faltar ao aplicar.
- 01
Título do hero em 3 linhas largas, a última em verde com sublinhado amarelo grosso.
- 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.
- 03
Curvas de nível (
<Topo>) no fundo do hero, do calendário e da chamada final. - 04
"Linhas de plantio" (
.safra-linhas) como marcador de rótulo e divisória. - 05
Cartões de serviço como etiqueta de sacaria: borda preta de 2px, topo listrado amarelo/preto (
.safra-saco), códigoSN-01em mono e sombra verde dura no hover. - 06
Calendário da safra em 12 colunas: plantio listrado com borda verde, colheita em amarelo.
- 07
Sombras duras deslocadas (
4px 4px 0), nunca sombra desfocada.
Regras do jogo
Direto do 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
#3a7d24em 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 emprefers-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-primarye 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.
Dois arquivos.
Um prompt.
O Safra vira o sistema do seu agente de código: ele monta qualquer tela com esta cara, não só a landing de exemplo.
Prompt para o agente
Leia o DESIGN.md na raiz do projeto e siga as regras dele em toda tela. Importe o sistema.css uma única vez no ponto de entrada do projeto e use as classes e tokens dele em vez de criar estilos novos. Antes de cada mudança de interface, releia o DESIGN.md.
- 01Baixe os dois arquivosDESIGN.md (as regras visuais) e sistema.css (tokens, componentes e as assinaturas do design).
- 02Coloque no projetoDESIGN.md na raiz. O sistema.css importado uma vez no ponto de entrada: funciona em React, Vue, Svelte, HTML ou WordPress.
- 03Cole o prompt no seu agenteEle lê as regras e passa a montar qualquer tela (login, preços, painel) com a cara do design.
- 04Deixe a regra fixaColoque o prompt nas regras do projeto do agente para toda tela nova seguir as mesmas cores, fontes e espaçamentos.
Parecidos
Landings com tom ou nicho em comum com Safra.