Pétala.
Soft editorial in cream, coffee and rosé, with arched frames and italic serif. Welcoming and feminine without being childish.
- Type
- Landing page
- Theme
- Light
- Headings
- Playfair Display
- Body
- Inter
ForWomen 20-50, personal service with appointments
Page sections01/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.
From DESIGN.md, which is in Portuguese for now.
ForWomen 20-50, personal service with appointments
Palette
The four colors that define the design and every variable in tokens.css. Click to copy.
Typography
Playfair Display for headings, Inter for body text.
HeadingsPlayfair Display
Aag!
Pétala in one line
ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
BodyInter
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.
- brand with earthy, nude, rosé or gold tones
- one-professional business
- focus on booking
- tech/SaaS
- young male audience
- brand with saturated or neon colors
- low price/high volume
Tone
What makes it Pétala
The signatures from DESIGN.md: what must be there when you apply it.From DESIGN.md, which is in Portuguese for now.
- 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.
House rules
Straight from DESIGN.md.From DESIGN.md, which is in Portuguese for now.
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.
Two files.
One prompt.
Pétala 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 Pétala.