'%20stroke-width='6'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3c!--%20Trayectoria%20de%20huellas%20continuando%20la%20línea%20--%3e%3cg%20fill='%23E28A3F'%3e%3ccircle%20cx='112'%20cy='62'%20r='3'/%3e%3ccircle%20cx='118'%20cy='58'%20r='3.5'/%3e%3cg%20transform='translate(120%2040)%20scale(0.28)'%3e%3cellipse%20cx='30'%20cy='42'%20rx='12'%20ry='15'%20transform='rotate(-18%2030%2042)'/%3e%3cellipse%20cx='58'%20cy='28'%20rx='11'%20ry='14'/%3e%3cellipse%20cx='86'%20cy='34'%20rx='11'%20ry='14'%20transform='rotate(15%2086%2034)'/%3e%3cellipse%20cx='102'%20cy='60'%20rx='10'%20ry='12'%20transform='rotate(28%20102%2060)'/%3e%3cpath%20d='M60%2058c-18%200-32%2014-32%2030%200%2012%2010%2020%2022%2020%206%200%208-3%2010-3s4%203%2010%203c12%200%2022-8%2022-20%200-16-14-30-32-30z'/%3e%3c/g%3e%3c/g%3e%3c!--%20Corazón%20final%20al%20que%20llega%20el%20latido%20--%3e%3cpath%20d='M158%2040%20C%20152%2034,%20144%2032,%20144%2040%20C%20144%2046,%20152%2054,%20158%2062%20C%20164%2054,%20172%2046,%20172%2040%20C%20172%2032,%20164%2034,%20158%2040%20Z'%20fill='%23C06A28'/%3e%3c/svg%3e)
patitas.loveDesign system 🐾
Moderno, amigable, profesional y latino. La base visual para todo lo que construiremos en Patitas.love.
Identidad
Variantes de logo
'/%3e%3c!--%20Huellas%20blancas%20distribuidas%20dentro%20del%20corazón%20--%3e%3cg%20fill='%23FFFFFF'%20clip-path='url(%23heartClip)'%3e%3c!--%20Huella%20superior%20izquierda%20--%3e%3cg%20transform='translate(28%2030)%20scale(0.32)'%3e%3cellipse%20cx='30'%20cy='42'%20rx='12'%20ry='15'%20transform='rotate(-18%2030%2042)'/%3e%3cellipse%20cx='58'%20cy='28'%20rx='11'%20ry='14'/%3e%3cellipse%20cx='86'%20cy='34'%20rx='11'%20ry='14'%20transform='rotate(15%2086%2034)'/%3e%3cellipse%20cx='102'%20cy='60'%20rx='10'%20ry='12'%20transform='rotate(28%20102%2060)'/%3e%3cpath%20d='M60%2058c-18%200-32%2014-32%2030%200%2012%2010%2020%2022%2020%206%200%208-3%2010-3s4%203%2010%203c12%200%2022-8%2022-20%200-16-14-30-32-30z'/%3e%3c/g%3e%3c!--%20Huella%20superior%20derecha%20--%3e%3cg%20transform='translate(80%2030)%20scale(0.32)%20rotate(15%2060%2060)'%3e%3cellipse%20cx='30'%20cy='42'%20rx='12'%20ry='15'%20transform='rotate(-18%2030%2042)'/%3e%3cellipse%20cx='58'%20cy='28'%20rx='11'%20ry='14'/%3e%3cellipse%20cx='86'%20cy='34'%20rx='11'%20ry='14'%20transform='rotate(15%2086%2034)'/%3e%3cellipse%20cx='102'%20cy='60'%20rx='10'%20ry='12'%20transform='rotate(28%20102%2060)'/%3e%3cpath%20d='M60%2058c-18%200-32%2014-32%2030%200%2012%2010%2020%2022%2020%206%200%208-3%2010-3s4%203%2010%203c12%200%2022-8%2022-20%200-16-14-30-32-30z'/%3e%3c/g%3e%3c!--%20Huella%20central%20grande%20--%3e%3cg%20transform='translate(48%2058)%20scale(0.38)'%3e%3cellipse%20cx='30'%20cy='42'%20rx='12'%20ry='15'%20transform='rotate(-18%2030%2042)'/%3e%3cellipse%20cx='58'%20cy='28'%20rx='11'%20ry='14'/%3e%3cellipse%20cx='86'%20cy='34'%20rx='11'%20ry='14'%20transform='rotate(15%2086%2034)'/%3e%3cellipse%20cx='102'%20cy='60'%20rx='10'%20ry='12'%20transform='rotate(28%20102%2060)'/%3e%3cpath%20d='M60%2058c-18%200-32%2014-32%2030%200%2012%2010%2020%2022%2020%206%200%208-3%2010-3s4%203%2010%203c12%200%2022-8%2022-20%200-16-14-30-32-30z'/%3e%3c/g%3e%3c/g%3e%3c/svg%3e)
'/%3e%3c!--%20Mejillas%20suaves%20--%3e%3ccircle%20cx='34'%20cy='94'%20r='7'%20fill='%23F0B37E'%20opacity='0.7'/%3e%3ccircle%20cx='106'%20cy='94'%20r='7'%20fill='%23F0B37E'%20opacity='0.7'/%3e%3c!--%20Ojos%20cerrados%20dulces%20(arcos%20hacia%20arriba)%20--%3e%3cpath%20d='M46%2076%20Q52%2068%2058%2076'%20stroke='%231F2937'%20stroke-width='3.5'%20stroke-linecap='round'%20fill='none'/%3e%3cpath%20d='M82%2076%20Q88%2068%2094%2076'%20stroke='%231F2937'%20stroke-width='3.5'%20stroke-linecap='round'%20fill='none'/%3e%3c!--%20Nariz-corazón%20GRANDE,%20elemento%20estrella%20--%3e%3cpath%20d='M70%2098%20C%2060%2088,%2048%2086,%2048%2096%20C%2048%20104,%2060%20112,%2070%20120%20C%2080%20112,%2092%20104,%2092%2096%20C%2092%2086,%2080%2088,%2070%2098%20Z'%20fill='%23E11D48'/%3e%3c!--%20Brillo%20del%20corazón%20--%3e%3cellipse%20cx='60'%20cy='94'%20rx='3'%20ry='2'%20fill='%23FFF'%20opacity='0.6'/%3e%3c!--%20Bigotes%20--%3e%3cg%20stroke='%231F2937'%20stroke-width='1.6'%20stroke-linecap='round'%20opacity='0.55'%3e%3cline%20x1='18'%20y1='102'%20x2='40'%20y2='104'/%3e%3cline%20x1='16'%20y1='112'%20x2='40'%20y2='110'/%3e%3cline%20x1='122'%20y1='102'%20x2='100'%20y2='104'/%3e%3cline%20x1='124'%20y1='112'%20x2='100'%20y2='110'/%3e%3c/g%3e%3c/svg%3e)
App Icons
Iconos para App móvil y WhatsApp
El Corazón de Patitas es la marca principal. Se exporta en 5 formatos oficiales: iOS (squircle), Android adaptativo, monocromo (barra de notificaciones), foto de perfil de WhatsApp y sticker compartible. Todos derivan del mismo SVG para mantener coherencia.
radius 28.5% · safe area 80%
safe zone Ø 66dp · padding 33dp
#FFFFFF sobre #1F2937 · 1 canal alpha
ring blanco 4px · badge #25D366
borde blanco 16px · < 100 kB
fondo sólido para legibilidad
| Formato | Tamaño | Archivo | Uso |
|---|---|---|---|
| iOS AppIcon | 1024×1024 | AppIcon.png | App Store · Home |
| Android mipmap | 432×432 (fg 108dp) | ic_launcher.xml | Play Store · Home |
| Android mono | 432×432 | ic_notification.png | Status bar |
| WA Profile | 640×640 | wa-avatar.png | Bot Patitas |
| WA Sticker | 512×512 | sticker.webp | Pack de stickers |
| Favicon | 16/32/48 | favicon.svg + .ico | Web browser |
| Splash | 2732×2732 | splash.png | iOS/Android launch |
Mobile
Tokens para versión móvil
display · 32/40
h1 · 24/32
h2 · 20/28
body · 16/24
caption · 13/18
label · 11/16
Touch mínimo · 44×44 pt (iOS) · 48×48 dp (Android)
Botón alto · 48 pt
Input alto · 52 pt
Radius sm · 8 pt
Radius md · 12 pt
Radius pill · 9999 pt
Safe area top · env(safe-area-inset-top)
Bottom nav · 64 pt + safe area
Tokens WhatsApp
Colores oficiales para superficies del bot
Color
Paleta oficial
Amber Warm
#E28A3F
--primary
Amber Dark
#C06A28
--primary-dark
Amber Light
#F0B37E
--primary-light
Amber Pop
#F59E0B
--accent
Amber Deep
#D97706
--accent-dark
Butter
#FCD34D
--accent-light
Success
#10B981
--success
Danger
#EF4444
--destructive
Info
#3B82F6
--info
Ink
#1F2937
--foreground
Muted
#F3F4F6
--muted
Gray
#6B7280
--muted-foreground
--gradient-hero
Purple → Light Purple
--gradient-energy
Purple → Amber
Tipografía
Inter + Poppins
H1 · Poppins Bold 48/56
Cuida a Luna con cariño
H2 · Poppins Bold 32/40
Historial médico completo
H3 · Inter SemiBold 24/32
Recordatorios de vacunas
Body · Inter Regular 16/28
Registra a tus mascotas por WhatsApp en segundos. Patitas.love te acompaña con recordatorios, historial y consejos veterinarios hechos para familias latinas.
Small · Inter Regular 14/20
Última actualización hace 2 minutos
Componentes
Botones
Componentes
Cards
El contenedor por defecto para información en la app: perfiles de mascotas, historial y recordatorios.
Para alertas positivas, promociones o el estado de salud destacado de una mascota.
Componentes
Formularios
Ingresa un correo válido para continuar.