Pétala.
Éditorial doux en crème, café et rosé, avec cadres en arche et serif italique. Chaleureux et féminin sans être enfantin.
- Type
- Landing page
- Thème
- Clair
- Titres
- Playfair Display
- Texte
- Inter
PourFemmes de 20 à 50 ans, service personnel sur rendez-vous
Sections de la page01/08Topo e navegação
Editorial suave: creme, café e rosé, serifa itálica e molduras em arco. Parece revista de beleza, não template de salão.
Extrait du DESIGN.md, en portugais pour l'instant.
PourFemmes de 20 à 50 ans, service personnel sur rendez-vous
Palette
Les quatre couleurs qui définissent le design et toutes les variables de tokens.css. Cliquez pour copier.
Typographie
Playfair Display pour les titres, Inter pour le texte.
TitresPlayfair Display
Aag!
Pétala en une ligne
ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
TexteInter
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.
- marque aux tons terreux, nude, rosé ou or
- activité d'une seule professionnelle
- accent sur la prise de rendez-vous
- tech/SaaS
- jeune public masculin
- marque aux couleurs saturées ou néon
- petits prix et gros volume
Ton
Ce qui fait Pétala
Les signatures du DESIGN.md : ce qui ne doit pas manquer à l'application.Extrait du DESIGN.md, en portugais pour l'instant.
- 01
Fotos sempre em arco (
rounded-t-full), com um contorno dourado deslocado no hero. - 02
Título do hero em 3 linhas, com a última em itálico rosé.
- 03
Rótulo de seção: linha dourada + texto caixa-alta espaçado (
tracking-[0.25em]). - 04
Numeração em serifa itálica (
01,02...). - 05
Botões em pílula (
rounded-d), primário com sombra rosé difusa. - 06
Chamada final em bloco café escuro com brilho rosé desfocado.
Règles du jeu
Directement du DESIGN.md.Extrait du DESIGN.md, en portugais pour l'instant.
Identidade
- Fundo creme
#fbf7f3, nunca branco puro. Blocos alternados emsurface-2(#f3e8df). - Texto café escuro
#2b1c16; secundário#7a5a4b. Nada de preto. - Primária rosé
#b3705cpara botões e a palavra em destaque do título. - Detalhe dourado
#c9a25bsó em linhas finas, losangos e numeração. Nunca em fundo grande. - Fontes: Playfair Display para títulos (usar itálico para ênfase), Inter para texto.
Regras
- Muito respiro: seções com
py-24, largura máx.max-w-6xl. - Máximo de 2 botões por tela. Texto de botão fala a ação ("Agendar horário").
- Animação só na entrada (
data-sobe). Nada pulando ou girando. - Ícones lucide finos e pequenos (
size-4), em rosé ou café.
Adaptar à marca do cliente
- Se a marca tiver cor própria, troque só
--d-primary(e a cor da sombra do botão). Mantenha creme e café. - Cor da marca muito saturada (vermelho vivo, azul royal)? Esse design provavelmente não é o certo.
Deux fichiers.
Un prompt.
Pétala 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 Pétala.
