Ravox UIby Ravox Labs
Ravox UIby Ravox Labs
Install the KitGuide
LandingLightcheerfulwelcomingplayful
PPatinha

Patinha.

Cute and sticker-like: thick black outline, solid shadow, butter cream with coral, sky and mint, and an illustrated dog wagging its tail. Cheerful without being childish.

Type
Landing page
Theme
Light
Headings
Fredoka
Body
Figtree

ForPet owners 20-55 who treat their pet as family; recurring service with appointments

Get access · from R$49or every design for R$297 a year
Open full screen Use with AI
/preview/patinha

Page sections01/10nav

All the copy lives in content.ts and the colors in 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.

From DESIGN.md, which is in Portuguese for now.

ForPet owners 20-55 who treat their pet as family; recurring service with appointments

Palette

The four colors that define the design and every variable in tokens.css. Click to copy.

Typography

Fredoka for headings, Figtree for body text.

HeadingsFredoka

Aag!

Patinha in one line

ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789

BodyFigtree

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.

Great for
  • brand with bright colors or a mascot
  • neighborhood business with loyal clients
  • focus on booking and recurrence
  • pickup-and-drop-off or at-home service
Avoid for
  • 24h animal hospital or specialties (needs a more clinical tone)
  • luxury/minimalist boutique pet brand
  • corporate audience
  • businesses outside the pet or children's universe
Niches
pet shopgroomingveterinary clinicpet daycarepet hoteldog trainingnatural treatsdog walkerpet sitter

Tone

cheerfulwelcomingplayfulneighborhood

What makes it Patinha

The signatures from DESIGN.md: what must be there when you apply it.From DESIGN.md, which is in Portuguese for now.

  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.

House rules

Straight from DESIGN.md.From DESIGN.md, which is in Portuguese for now.

View 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.
How to use

Two files.
One prompt.

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

  1. 01Download the two filesDESIGN.md (the visual rules) and sistema.css (tokens, components and the design's signatures).
  2. 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.
  3. 03Paste the prompt into your agentIt reads the rules and builds any screen (login, pricing, dashboard) with the design's look.
  4. 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 Patinha.

Browse catalog
LandingLightView design

Fermento

LandingLightView design

Feira

LandingLightView design

Nanquim

LandingLightView design

Receita