Safra.
Boletín técnico de campo en paja, verde clorofila y amarillo grano: título ancho en mayúsculas, curvas de nivel, mapa de lotes por satélite y calendario de cosecha. Serio y práctico, sin aire de granjita.
- Tipo
- Landing page
- Tema
- Claro
- Títulos
- Archivo (largura 125)
- Texto
- Public Sans
ParaProductores rurales y administradores de campo, 30-65 años, que deciden con datos y conversación
Secciones de la 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.
Del DESIGN.md, que por ahora está en portugués.
ParaProductores rurales y administradores de campo, 30-65 años, que deciden con datos y conversación
Paleta
Los cuatro colores que definen el diseño y todas las variables de tokens.css. Haz clic para copiar.
Tipografía
Archivo (largura 125) en los títulos, Public Sans en el texto.
TítulosArchivo (largura 125)
Aag!
Safra en una línea
ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
TextoPublic Sans
La fuente de lectura sostiene párrafos largos sin cansar.
Texto corrido, botones, formularios y leyendas. Los títulos usan la fuente destacada; esta es la del día a día.
0123456789 · $1.234,56 · 25/09 a las 19:30
Para quién es
Lo que la IA compara con el cliente para elegir el diseño.
- marca verde, amarilla o terrosa
- servicio técnico con ingeniero agrónomo
- empresa que vende por visita y WhatsApp
- agtech con los pies en el campo
- turismo rural y posadas (usar Raiz)
- orgánicos de feria o delicados
- lujo
- público urbano joven
Tono
Lo que lo hace Safra
Las firmas del DESIGN.md: lo que no puede faltar al aplicarlo.Del DESIGN.md, que por ahora está en portugués.
- 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.
Reglas del juego
Directo del DESIGN.md.Del DESIGN.md, que por ahora está en portugués.
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.
Dos archivos.
Un prompt.
Safra se vuelve el sistema de tu agente de código: arma cualquier pantalla con este estilo, no solo la landing de ejemplo.
Prompt para el agente Usar con IA
Lee el DESIGN.md en la raíz del proyecto y sigue sus reglas en cada pantalla. Importa sistema.css una sola vez en el punto de entrada del proyecto y usa sus clases y tokens en lugar de crear estilos nuevos. Antes de cada cambio de interfaz, vuelve a leer el DESIGN.md.
- 01Descarga los dos archivosDESIGN.md (las reglas visuales) y sistema.css (tokens, componentes y las firmas del diseño).
- 02Ponlos en el proyectoDESIGN.md en la raíz. sistema.css importado una vez en el punto de entrada: funciona en React, Vue, Svelte, HTML o WordPress.
- 03Pega el prompt en tu agenteLee las reglas y arma cualquier pantalla (login, precios, panel) con el estilo del diseño.
- 04Deja la regla fijaPon el prompt en las reglas del proyecto del agente para que cada pantalla nueva siga los mismos colores, fuentes y espaciados.
Similares
Landings con tono o nicho en común con Safra.