Patinha.
Tierno y estilo sticker: contorno negro grueso, sombra sólida, crema mantecoso con coral, cielo y menta, y un perro ilustrado que mueve la cola. Alegre sin ser infantil.
- Tipo
- Landing page
- Tema
- Claro
- Títulos
- Fredoka
- Texto
- Figtree
ParaDueños de mascotas de 20 a 55 años que tratan a su mascota como familia; servicio recurrente con turno
Secciones de la 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.
Del DESIGN.md, que por ahora está en portugués.
ParaDueños de mascotas de 20 a 55 años que tratan a su mascota como familia; servicio recurrente con turno
Paleta
Los cuatro colores que definen el diseño y todas las variables de tokens.css. Haz clic para copiar.
Tipografía
Fredoka en los títulos, Figtree en el texto.
TítulosFredoka
Aag!
Patinha en una línea
ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
TextoFigtree
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 colores vivos o mascota
- negocio de barrio con clientela fiel
- foco en turnos y recurrencia
- servicio de retiro y entrega o a domicilio
- hospital veterinario 24 h o especialidades (pide un tono más clínico)
- marca de mascotas de lujo o boutique minimalista
- público corporativo
- negocios fuera del universo mascota o infantil
Tono
Lo que lo hace Patinha
Las firmas del DESIGN.md: lo que no puede faltar al aplicarlo.Del DESIGN.md, que por ahora está en portugués.
- 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.
Reglas del juego
Directo del DESIGN.md.Del DESIGN.md, que por ahora está en portugués.
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.
Dos archivos.
Un prompt.
Patinha 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 Patinha.
