Pétala.
Editorial suave en crema, café y rosé, con marcos en arco y serif cursiva. Acogedor y femenino sin ser infantil.
- Tipo
- Landing page
- Tema
- Claro
- Títulos
- Playfair Display
- Texto
- Inter
ParaMujeres de 20 a 50 años, servicio personal con turno
Secciones de la página01/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.
Del DESIGN.md, que por ahora está en portugués.
ParaMujeres de 20 a 50 años, servicio personal con turno
Paleta
Los cuatro colores que definen el diseño y todas las variables de tokens.css. Haz clic para copiar.
Tipografía
Playfair Display en los títulos, Inter en el texto.
TítulosPlayfair Display
Aag!
Pétala en una línea
ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
TextoInter
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.
- marca con tonos terrosos, nude, rosé o dorado
- negocio de una sola profesional
- foco en turnos
- tech/SaaS
- público masculino joven
- marca con colores saturados o neón
- precio bajo y volumen
Tono
Lo que lo hace Pétala
Las firmas del DESIGN.md: lo que no puede faltar al aplicarlo.Del DESIGN.md, que por ahora está en portugués.
- 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.
Reglas del juego
Directo del DESIGN.md.Del DESIGN.md, que por ahora está en portugués.
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.
Dos archivos.
Un prompt.
Pétala 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 Pétala.
