Raiz.
Orgánico y botánico en papel crema, verde bosque y ocre. Paisaje ilustrado en capas, fotos en forma de guijarro, ramas dibujadas y sellos estampados.
- Tipo
- Landing page
- Tema
- Claro
- Títulos
- Young Serif
- Texto
- Figtree
ParaAdultos de 28 a 60 años que buscan descanso, naturaleza y productos hechos a mano
Secciones de la página01/09nav
Orgânico, botânico e feito à mão. Parece caderno de campo com ilustração: papel creme, verde de mata, ocre de sol e nada perfeitamente reto.
Del DESIGN.md, que por ahora está en portugués.
ParaAdultos de 28 a 60 años que buscan descanso, naturaleza y productos hechos a mano
Paleta
Los cuatro colores que definen el diseño y todas las variables de tokens.css. Haz clic para copiar.
Tipografía
Young Serif en los títulos, Figtree en el texto.
TítulosYoung Serif
Aag!
Raiz en una línea
ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
TextoFigtree
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.
- negocio ligado a la naturaleza, el campo o la producción artesanal
- marca con verde, tierra, ocre o tonos crudos
- fotos de paisaje, huerta o producto con luz natural
- reserva directa o venta de pocos productos
- tech/SaaS
- vida nocturna y fiestas
- marca urbana y moderna con colores saturados
- servicios jurídicos o financieros
Tono
Lo que lo hace Raiz
Las firmas del DESIGN.md: lo que no puede faltar al aplicarlo.Del DESIGN.md, que por ahora está en portugués.
- 01
Paisagem da serra em camadas SVG (céu, sol, montanhas, araucárias, chalé) dentro de um seixo com sombra sálvia deslocada.
- 02
Fotos sempre em forma de seixo (
.raiz-seixo-1/2/3), cada uma um pouco torta. - 03
Galhos com folhas em traço orgânico (
Ramo) saindo das bordas das seções, balançando devagar. - 04
Carimbo redondo com texto girando ("colhido à mão", "feito em pequenos lotes").
- 05
Divisórias em onda entre seções (
Onda), nunca linha reta. - 06
Palavra de destaque do título em terracota com sublinhado ocre desenhado à mão.
- 07
Linhas tracejadas no lugar de bordas sólidas (listas, preços, "o que inclui").
Reglas del juego
Directo del DESIGN.md.Del DESIGN.md, que por ahora está en portugués.
Identidade
- Fundo papel creme
#f3eee2com textura leve de papel (.raiz-papel). Seções alternam com#e8e0cce um bloco verde-floresta. - Texto verde quase preto
#22301f; secundário#5f6b58. - Primária verde-floresta
#1f3d2b: títulos, botões, traço das ilustrações e o bloco do café. - Destaque ocre
#c98a2bno sol, sublinhado à mão, sementes e carimbo. - Apoio: terracota
--raiz-terracota(palavra de destaque, rótulos) e sálvia--raiz-salvia/--raiz-salvia-clara(folhas, chamada final). - Fontes: Young Serif nos títulos (sempre em peso normal), Figtree no texto.
Regras
- Ícones lucide de traço fino (
strokeWidth1.6), sempre dentro de círculo com borda. - Nada de preto puro, cinza frio ou gradiente neon.
- Botões em pílula verde-floresta; só um botão principal por tela.
- Animação discreta: entrada do hero, revela ao rolar, carimbo girando e folhas ao vento. Tudo para com
prefers-reduced-motion. - Muito respiro: seções com
py-24, textos curtos.
Adaptar à marca do cliente
- Café especial ou empório: troque a paisagem por foto do produto em seixo e mude
--d-accentpara um caramelo#a8652a. - Cosmética natural: primária pode ir para verde-oliva
#4b5a2ae o apoio terracota vira rosa-argila#c07a67. - Retiro de yoga: suavize com primária
#2f4a3fe troque os pinheiros da paisagem por colinas. - Mantenha sempre o fundo creme e as formas orgânicas; é isso que segura o estilo.
Dos archivos.
Un prompt.
Raiz 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 Raiz.
