Patinha.
Fofo e adesivado: contorno preto grosso, sombra sólida, creme-manteiga com coral, céu e menta, e um cachorro ilustrado que abana o rabo. Alegre sem ser infantil.
- Tipo
- Landing page
- Tema
- Claro
- Títulos
- Fredoka
- Texto
- Figtree
ParaTutores 20-55 que tratam o pet como família, serviço recorrente com agendamento
Seções da página01/10nav
Fofo e "adesivado": tudo parece um adesivo colado na página, com contorno preto grosso, cantos bem redondos e sombra sólida deslocada. Alegre sem virar festa infantil.
ParaTutores 20-55 que tratam o pet como família, serviço recorrente com agendamento
Paleta
As quatro cores que definem o design e todas as variáveis do tokens.css. Clique para copiar.
Tipografia
Fredoka nos títulos, Figtree no texto.
TítulosFredoka
Aag!
Patinha em uma linha
ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
TextoFigtree
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 cores vivas ou mascote
- negócio de bairro com clientela fiel
- foco em agendamento e recorrência
- leva-e-traz ou serviço a domicílio
- hospital veterinário 24h ou especialidades (pede tom mais clínico)
- marca pet de luxo/boutique minimalista
- público corporativo
- negócios fora do universo pet ou infantil
Tom
O que faz ser Patinha
As assinaturas do DESIGN.md: o que não pode faltar ao aplicar.
- 01
Adesivo:
.patinha-adesivo(contorno 3px + sombra 5×6 sólida + halo macio) e.patinha-adesivo-smpara peças menores. - 02
Mascote em SVG no hero: cachorro feito de formas, que pisca e abana o rabo, dentro de um círculo céu, com balões de fala, osso e bolinha flutuando.
- 03
Faixa de patinhas coral, levemente inclinada, rolando sem parar.
- 04
Serviços como etiquetas de coleira: furinho, argola de metal, número
Nº 01e leve inclinação que endireita no hover. - 05
Tabela de preços por porte (P/M/G) com patinhas de tamanhos diferentes no cabeçalho.
- 06
Leva-e-traz em 4 passos com trilha pontilhada e rastro de patinhas.
- 07
Checklist de vacinas e cuidados com caixinhas marcadas.
- 08
Agendamento com escolha de serviço e porte só em CSS (rádio +
:has), sem JS.
Regras do jogo
Direto do DESIGN.md.
Identidade
- Fundo creme-amarelado
#fff6de, nunca branco puro. Blocos alternados em manteiga (surface-2,#ffe49a) e menta. - Tinta
#231c17para texto, contornos e sombras. É ela que segura as cores alegres. - Primária coral
#ff7d63nos botões principais e na faixa de patinhas. - Detalhe azul-céu
#82c9f0. Extras emtokens.css:--patinha-menta,--patinha-manteiga,--patinha-rosa(usar combg-(--patinha-menta)). - Fontes: Fredoka 600/700 nos títulos e botões, Figtree no texto.
Regras
- Contorno sempre na cor tinta, de 2 a 3px. Nada de borda cinza clara.
- Botões
.patinha-botao: afundam no clique. Máximo 2 por tela. - Animação só onde tem vida: rabo, piscada, balões, faixa. Tudo desligado com
prefers-reduced-motion. - Rotações pequenas (1 a 3 graus). Se tudo estiver torto, nada parece adesivo.
Adaptar à marca do cliente
- Cor própria da marca: troque
--d-primary(e--patinha-coral). Mantenha o creme e a tinta. - Pet da marca é gato ou tem outra pelagem? Troque as cores
pelo/orelhano componenteCachorro. - Marca pet de luxo, minimalista ou hospital 24h: esse design provavelmente não é o certo.
Dois arquivos.
Um prompt.
O Patinha 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 Patinha.