Design System
PataVida
Documentação dos tokens de design, componentes e padrões visuais da landing page da Clínica Veterinária PataVida.
01 — Colors
Brand palette
Yellow
#FFD100
Primary CTA
Orange
#FF6B1A
Accent / Labels
Dark
#1A1818
Backgrounds
Cream
#FFF8F2
Hero bg
Service accent colors
Consulta
#FF6B1A
Vacinação
#FFD100
Banho & Tosa
#4ADE80
Diagnóstico
#60A5FA
Emergência
#F87171
Cirurgia
#A78BFA
Backgrounds & gradients
Hero — Cream
#FFF8F2
Stats / Footer
#1A1818
Hero warm gradient
02 — Typography
Display — Heading 1
Cuidado e Amor
para Patas e Pelos!
Heading 2
Nossos Serviços
30px · font-black
Heading 3
Consulta Clínica
20px · font-bold
Body Large
Somos sua clínica veterinária local, oferecendo cuidado completo e atenção especial para o seu melhor amigo.
16px · lh 1.7
Special — Label & Counter
Porque Todo Pet Importa!
8.000+
animais atendidos
04 — Badges & Tags
Service tags
Blog tags
Stars & checkmarks
CRMV badge
CRMV-SP 12.34505 — Cards
Service card
Consulta Clínica
Avaliação completa com exame físico detalhado e orientações personalizadas para seu pet.
Testimonial card
“A PataVida salvou a vida do meu Golden! O atendimento foi incrível.”
Mariana Costa
Tutora do Rex 🐕
Team card
Blog article card
06 — Icons (Lucide)
Used in project
07 — Decorative Elements
Sparkle
Dark corners of hero
Squiggle
Yellow wave accents
Paw Outline
Background texture
Yellow circle blob (hero)
Posicionado atrás do mosaico de fotos no hero.
520×520px · right-[-80px] · top-[10%] · opacity: 0.85