Raiz.
Orgânico e botânico em papel creme, verde-floresta e ocre. Paisagem ilustrada em camadas, fotos em forma de seixo, galhos desenhados e selos carimbados.
- Tipo
- Landing page
- Tema
- Claro
- Títulos
- Young Serif
- Texto
- Figtree
ParaAdultos 28-60 que buscam descanso, natureza e produto feito à mão
Seções da 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.
ParaAdultos 28-60 que buscam descanso, natureza e produto feito à mão
Paleta
As quatro cores que definem o design e todas as variáveis do tokens.css. Clique para copiar.
Tipografia
Young Serif nos títulos, Figtree no texto.
TítulosYoung Serif
Aag!
Raiz em uma linha
ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
TextoFigtree
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.
- negócio ligado à natureza, campo ou produção artesanal
- marca com verde, terra, ocre ou tons crus
- fotos de paisagem, horta ou produto com luz natural
- reserva direta ou venda de poucos produtos
- tech/SaaS
- vida noturna e festas
- marca urbana e moderna com cores saturadas
- serviços jurídicos ou financeiros
Tom
O que faz ser Raiz
As assinaturas do DESIGN.md: o que não pode faltar ao aplicar.
- 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").
Regras do jogo
Direto do DESIGN.md.
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.
Dois arquivos.
Um prompt.
O Raiz 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 Raiz.