Pétala.
Editorial suave em creme, café e rosé, com molduras em arco e serifa itálica. Acolhedor e feminino sem ser infantil.
- Tipo
- Landing page
- Tema
- Claro
- Títulos
- Playfair Display
- Texto
- Inter
ParaMulheres 20-50, serviço pessoal com agendamento
Seções da 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.
ParaMulheres 20-50, serviço pessoal com agendamento
Paleta
As quatro cores que definem o design e todas as variáveis do tokens.css. Clique para copiar.
Tipografia
Playfair Display nos títulos, Inter no texto.
TítulosPlayfair Display
Aag!
Pétala em uma linha
ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
TextoInter
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.
- marca com tons terrosos, nude, rosé ou dourado
- negócio de uma profissional só
- foco em agendamento
- tech/SaaS
- público masculino jovem
- marca com cores saturadas ou neon
- preço baixo/volume
Tom
O que faz ser Pétala
As assinaturas do DESIGN.md: o que não pode faltar ao aplicar.
- 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.
Regras do jogo
Direto do DESIGN.md.
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.
Dois arquivos.
Um prompt.
O Pétala 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 Pétala.