Raiz.
Organique et botanique sur papier crème, vert forêt et ocre. Paysage illustré en couches, photos en forme de galet, branches dessinées et tampons encreurs.
- Type
- Landing page
- Thème
- Clair
- Titres
- Young Serif
- Texte
- Figtree
PourAdultes de 28 à 60 ans en quête de repos, de nature et de produits faits main
Sections de la page01/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.
Extrait du DESIGN.md, en portugais pour l'instant.
PourAdultes de 28 à 60 ans en quête de repos, de nature et de produits faits main
Palette
Les quatre couleurs qui définissent le design et toutes les variables de tokens.css. Cliquez pour copier.
Typographie
Young Serif pour les titres, Figtree pour le texte.
TitresYoung Serif
Aag!
Raiz en une ligne
ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
TexteFigtree
La police de lecture porte les longs paragraphes sans fatiguer.
Texte courant, boutons, formulaires et légendes. Les titres prennent la police d'affichage ; celle-ci fait le quotidien de la page.
0123456789 · 1 234,56 € · 25/09 à 19h30
Pour qui
Ce que l'IA compare avec le client pour choisir le design.
- activité liée à la nature, à la campagne ou à la production artisanale
- marque avec vert, terre, ocre ou tons écrus
- photos de paysage, de potager ou de produit en lumière naturelle
- réservation directe ou vente de quelques produits
- tech/SaaS
- vie nocturne et fêtes
- marque urbaine et moderne aux couleurs saturées
- services juridiques ou financiers
Ton
Ce qui fait Raiz
Les signatures du DESIGN.md : ce qui ne doit pas manquer à l'application.Extrait du DESIGN.md, en portugais pour l'instant.
- 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").
Règles du jeu
Directement du DESIGN.md.Extrait du DESIGN.md, en portugais pour l'instant.
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.
Deux fichiers.
Un prompt.
Raiz devient le design system de votre agent de code : il construit n'importe quel écran avec ce style, pas seulement la landing d'exemple.
Prompt pour l'agent Utiliser avec l'IA
Lis le DESIGN.md à la racine du projet et suis ses règles sur chaque écran. Importe sistema.css une seule fois au point d'entrée du projet et utilise ses classes et tokens au lieu de créer de nouveaux styles. Avant chaque changement d'interface, relis le DESIGN.md.
- 01Téléchargez les deux fichiersDESIGN.md (les règles visuelles) et sistema.css (tokens, composants et signatures du design).
- 02Ajoutez-les au projetDESIGN.md à la racine. sistema.css importé une fois au point d'entrée : fonctionne avec React, Vue, Svelte, HTML ou WordPress.
- 03Collez le prompt dans votre agentIl lit les règles et construit n'importe quel écran (connexion, tarifs, dashboard) avec le style du design.
- 04Fixez la règleMettez le prompt dans les règles du projet de l'agent pour que chaque nouvel écran suive les mêmes couleurs, polices et espacements.
Similaires
Des landings qui partagent un ton ou un secteur avec Raiz.