Raiz.
Organic and botanical on cream paper, forest green and ochre. Layered illustrated landscape, pebble-shaped photos, hand-drawn branches and rubber-stamp seals.
- Type
- Landing page
- Theme
- Light
- Headings
- Young Serif
- Body
- Figtree
ForAdults 28-60 looking for rest, nature and handmade products
Page sections01/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.
From DESIGN.md, which is in Portuguese for now.
ForAdults 28-60 looking for rest, nature and handmade products
Palette
The four colors that define the design and every variable in tokens.css. Click to copy.
Typography
Young Serif for headings, Figtree for body text.
HeadingsYoung Serif
Aag!
Raiz in one line
ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
BodyFigtree
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.
- business tied to nature, countryside or handmade production
- brand with green, earth, ochre or raw tones
- landscape, garden or product photos in natural light
- direct booking or sale of a few products
- tech/SaaS
- nightlife and parties
- urban, modern brand with saturated colors
- legal or financial services
Tone
What makes it Raiz
The signatures from DESIGN.md: what must be there when you apply it.From DESIGN.md, which is in Portuguese for now.
- 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").
House rules
Straight from DESIGN.md.From DESIGN.md, which is in Portuguese for now.
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.
Two files.
One prompt.
Raiz 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.
- 01Download the two filesDESIGN.md (the visual rules) and sistema.css (tokens, components and the design's signatures).
- 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.
- 03Paste the prompt into your agentIt reads the rules and builds any screen (login, pricing, dashboard) with the design's look.
- 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 Raiz.
