Ravox UIby Ravox Labs
Ravox UIby Ravox Labs
Installer le KitGuide
LandingClairjoyeuxchaleureuxamusant
PPatinha

Patinha.

Mignon façon sticker : contour noir épais, ombre pleine, crème beurre avec corail, ciel et menthe, et un chien illustré qui remue la queue. Joyeux sans être enfantin.

Type
Landing page
Thème
Clair
Titres
Fredoka
Texte
Figtree

PourPropriétaires d'animaux de 20 à 55 ans qui considèrent leur animal comme un membre de la famille ; service récurrent sur rendez-vous

Obtenir l'accès · à partir de 49 R$ou tous les designs pour 297 R$ par an
Ouvrir en plein écran Utiliser avec l'IA
/preview/patinha

Sections de la page01/10nav

Tout le texte est dans content.ts et les couleurs dans tokens.css.
Concept

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.

Extrait du DESIGN.md, en portugais pour l'instant.

PourPropriétaires d'animaux de 20 à 55 ans qui considèrent leur animal comme un membre de la famille ; service récurrent sur rendez-vous

Palette

Les quatre couleurs qui définissent le design et toutes les variables de tokens.css. Cliquez pour copier.

Typographie

Fredoka pour les titres, Figtree pour le texte.

TitresFredoka

Aag!

Patinha en une ligne

ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789

TexteFigtree

La police de lecture porte les longs paragraphes sans fatiguer.

Texte courant, boutons, formulaires et légendes. Les titres prennent la police d'affichage ; celle-ci fait le quotidien de la page.

0123456789 · 1 234,56 € · 25/09 à 19h30

Pour qui

Ce que l'IA compare avec le client pour choisir le design.

Idéal pour
  • marque aux couleurs vives ou avec une mascotte
  • commerce de quartier à clientèle fidèle
  • accent sur la prise de rendez-vous et la récurrence
  • service de ramassage et retour ou à domicile
À éviter pour
  • hôpital vétérinaire 24h/24 ou spécialités (demande un ton plus clinique)
  • marque pet de luxe ou boutique minimaliste
  • public corporate
  • activités hors de l'univers animal ou enfant
Secteurs
animalerietoilettageclinique vétérinairegarderie pour animauxpension pour animauxéducation caninefriandises naturellespromeneur de chienspet-sitter

Ton

joyeuxchaleureuxamusantde quartier

Ce qui fait Patinha

Les signatures du DESIGN.md : ce qui ne doit pas manquer à l'application.Extrait du DESIGN.md, en portugais pour l'instant.

  1. 01

    Adesivo: .patinha-adesivo (contorno 3px + sombra 5×6 sólida + halo macio) e .patinha-adesivo-sm para peças menores.

  2. 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.

  3. 03

    Faixa de patinhas coral, levemente inclinada, rolando sem parar.

  4. 04

    Serviços como etiquetas de coleira: furinho, argola de metal, número Nº 01 e leve inclinação que endireita no hover.

  5. 05

    Tabela de preços por porte (P/M/G) com patinhas de tamanhos diferentes no cabeçalho.

  6. 06

    Leva-e-traz em 4 passos com trilha pontilhada e rastro de patinhas.

  7. 07

    Checklist de vacinas e cuidados com caixinhas marcadas.

  8. 08

    Agendamento com escolha de serviço e porte só em CSS (rádio + :has), sem JS.

Règles du jeu

Directement du DESIGN.md.Extrait du DESIGN.md, en portugais pour l'instant.

Voir le DESIGN.md

Identidade

  • Fundo creme-amarelado #fff6de, nunca branco puro. Blocos alternados em manteiga (surface-2, #ffe49a) e menta.
  • Tinta #231c17 para texto, contornos e sombras. É ela que segura as cores alegres.
  • Primária coral #ff7d63 nos botões principais e na faixa de patinhas.
  • Detalhe azul-céu #82c9f0. Extras em tokens.css: --patinha-menta, --patinha-manteiga, --patinha-rosa (usar com bg-(--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/orelha no componente Cachorro.
  • Marca pet de luxo, minimalista ou hospital 24h: esse design provavelmente não é o certo.
Mode d'emploi

Deux fichiers.
Un prompt.

Patinha devient le design system de votre agent de code : il construit n'importe quel écran avec ce style, pas seulement la landing d'exemple.

Prompt pour l'agent Utiliser avec l'IA

Lis le DESIGN.md à la racine du projet et suis ses règles sur chaque écran. Importe sistema.css une seule fois au point d'entrée du projet et utilise ses classes et tokens au lieu de créer de nouveaux styles. Avant chaque changement d'interface, relis le DESIGN.md.

  1. 01Téléchargez les deux fichiersDESIGN.md (les règles visuelles) et sistema.css (tokens, composants et signatures du design).
  2. 02Ajoutez-les au projetDESIGN.md à la racine. sistema.css importé une fois au point d'entrée : fonctionne avec React, Vue, Svelte, HTML ou WordPress.
  3. 03Collez le prompt dans votre agentIl lit les règles et construit n'importe quel écran (connexion, tarifs, dashboard) avec le style du design.
  4. 04Fixez la règleMettez le prompt dans les règles du projet de l'agent pour que chaque nouvel écran suive les mêmes couleurs, polices et espacements.

Similaires

Des landings qui partagent un ton ou un secteur avec Patinha.

Voir le catalogue
LandingClairVoir le design

Fermento

LandingClairVoir le design

Feira

LandingClairVoir le design

Nanquim

LandingClairVoir le design

Receita