Zoofan

Sistema de marca para zoofan.mx

Todo lo que amas de los animales. Una plataforma que conecta a quienes quieren a sus mascotas con los negocios que las cuidan, empezando por Torreón.

Color Tipografía Personalidad por zona Aplicación
Desliza
01 · Color

El naranja ya era suyo

No lo elegimos: lo extrajimos directamente de su logo. Es el punto de partida de todo el sistema y el color que la gente va a asociar con Zoofan.

#E8501E
Naranja Zoofan · color de marca

Cálido, enérgico y poco común en el sector

La mayoría de las plataformas de mascotas en México van a azul o verde. El naranja las distingue de inmediato y transmite cercanía y movimiento, que es exactamente el tono de Zoofan.

Es un color potente, y por eso el sistema lo administra: aparece poco y siempre con intención. Cuando el naranja está en todos lados, deja de llamar la atención hacia lo que importa.

Paleta principal

Del naranja salen todos los tonos

Una escala construida a partir del color del logo. Los tonos claros dan fondos y estados suaves; los oscuros dan profundidad y texto. Todos son el mismo naranja.

Haz clic en cualquier muestra para copiar su código.

Neutros

Grises cálidos, no grises de sistema

Están construidos sobre el mismo tono del naranja, con muy poca saturación. La diferencia es sutil, pero hace que blancos, grises y negros se sientan de la misma familia que el logo. De aquí sale también el crema que ya usa su merch.

Colores de estado

Para avisar, no para decorar

Cuatro colores reservados exclusivamente para comunicar qué pasó: una compra confirmada, un dato faltante, un error. El naranja nunca se usa para esto, así nunca compite con ellos.

Contraste y fondos

Tres superficies, una marca

El sitio vive en modo claro. El blanco es la base, el crema separa secciones sin gastar color, y el negro es la superficie de alto impacto —la misma combinación que ya funciona en sus gorras y playeras.

Blanco

Fondo principal. Contenido, tarjetas, listados. Es el 60% de lo que se ve.

Crema

Separa secciones y da calidez sin recurrir al naranja. Viene de la playera arena.

Negro

Alto impacto: cierre de página, patrocinios y negocios destacados. Aquí el naranja brilla más.
02 · Tipografía

Dos fuentes con oficios distintos

Una para hablar fuerte y otra para explicar. Juntas cubren desde un titular de portada hasta una tabla de pedidos sin que se sienta que cambió la marca.

Plus Jakarta Sans
Títulos y textos de portada
Todo lo que amas
de los animales
Medium500
SemiBold600
Bold700
ExtraBold800
Aa Bb Cc 0123
Inter
Interfaz, párrafos, listados y tablas

Encuentra veterinarias, estéticas caninas, tiendas y refugios cerca de ti. Consulta sus datos de contacto, mira lo que ofrece cada uno y entérate de las promociones que publican los negocios de tu ciudad. Zoofan reúne en un solo lugar todo lo que necesitas para cuidar a tu mascota.

Diseñada para pantalla: se lee bien en tamaños chicos y en mucha cantidad, que es justo lo que pide el directorio, el marketplace y el panel de cada negocio.

Regular400
Medium500
SemiBold600
Bold700
Aa Bb Cc 0123
03 · Personalidad

Cálida por fuera, sobria por dentro

Zoofan tiene dos públicos: quien busca un veterinario y el negocio que administra su perfil y cobra. No pueden verse igual. La marca se mantiene idéntica —mismo color, misma tipografía, mismo logo— y lo que cambia es la forma: qué tan redondo, qué tan espaciado y cuánto color aparece.

CálidoEsquinas 20 px

Portada y contenido

Aquí se enamora. Una sola idea por pantalla, titular grande, mucho espacio en blanco y bloques de color a sangre. Es la única zona donde el color se usa en superficies grandes.

  • Titulares 40–60 px
  • Mucho aire
  • Bloque negro
  • Naranja visible
Todo lo que amas
de los animales, en Torreón
Explorar negocios
IntermedioEsquinas 12 px

Directorio y ficha de negocio

Aquí manda la foto del negocio, no la marca. Se baja el aire para que quepan más resultados y el naranja queda reservado a una sola cosa: el botón que lleva al contacto. Borde en lugar de sombra, para que las tarjetas no compitan entre sí.

  • Texto 14–16 px
  • Borde, sin sombra
  • Naranja solo en la acción
Veterinaria San Isidro
Contactar
Estética Peluditos
Contactar
SobrioEsquinas 8 px

Suscripción y pago

Es el único cobro de la plataforma: el negocio pagando su plan premium. En el momento de dar los datos de la tarjeta, cualquier adorno resta. Formas casi rectas, nada de fotos, nada de color decorativo: solo el botón que hay que apretar. La confianza se construye quitando, no agregando.

  • Cero fotos
  • Un solo botón
  • Jerarquía por peso
Plan Premium · mensual$300.00
IVA (16%)$48.00
Total$348.00
Pagar suscripción
DensoEsquinas 6 px

Panel del negocio y administración

Es una herramienta de trabajo, no un escaparate: quien la usa entra todos los días y necesita ver mucho de un vistazo. Texto chico, filas apretadas y color únicamente donde hay que actuar —aquí sí trabajan los colores de estado.

  • Texto 12–13 px
  • Filas compactas
  • Color = estado
NegocioSuscripciónMonto
Vet. San IsidroPagada$348.00
Estética Peluditos$348.00
Mundo MascotaRechazada$348.00
Refugio PatitasPagada$348.00
Exportar
Referencia

Quien mejor lo hace: Nubank

Es el ejemplo más claro de una marca que cambia de registro sin dejar de ser ella misma. Su publicidad es puro color y titulares enormes; su aplicación, donde uno mueve dinero, es casi blanco y negro. La misma marca, dos comportamientos.

Una cuenta
sin letras chiquitas
Ábrela hoy
Cara públicaBloque de color a sangre, una sola idea, titular grande y lenguaje directo.
Tu cuenta
ProductoEl color desaparece. Fondo blanco, listas densas y jerarquía por tipografía.
Todo lo que amas
de los animales
Explorar Torreón
ZoofanMismo principio, con el negro y el crema que su marca ya usa en el merch.

Una adaptación importante: el morado de Nubank es oscuro y aguanta texto blanco encima en bloques grandes.

El naranja de Zoofan es más luminoso y no lo aguanta igual, así que ese papel lo toma el negro, que además es lo que ya establecieron sus gorras y playeras.

04 · Aplicación

Así se vería

Una muestra de la portada con todo lo anterior ya aplicado. No es el diseño final —eso se trabaja en las rondas visuales— pero sirve para ver el sistema funcionando con contenido real.

zoofan.mx

Todo lo que amas
de los animales, en Torreón

Veterinarias, estéticas, tiendas y refugios cerca de ti. Con horarios, teléfono, ubicación y contacto directo.

VeterinariasEstética caninaAccesorios GuarderíaAlimentoUrgencias 24 h

Negocios cerca de ti

Ver todo el directorio →
Destacado
Veterinaria San Isidro
Consulta y urgencias
Torreón CentroContactar
Estética Peluditos
Baño y corte
Las RosasContactar
Premium
Mundo Mascota
Alimento y accesorios
CampestreContactar
Refugio Patitas A.C.
Refugio y rescate
Torreón JardínContactar
Idea encontrada · fuera del alcance actual

En adopción

Surgió al trabajar la marca y nos pareció demasiado buena para no dejarla anotada. No está en lo contratado ni en el cronograma de las fases actuales. La mostramos aquí, en el lugar que le tocaría dentro del sitio, para que se vea cómo encajaría.

Canela
Cachorra · 3 meses
VacunadaRefugio Patitas
Nube
Gata · 1 año
EsterilizadaHogar temporal
Tigre
Gato · 2 años
VacunadoRefugio Patitas
Rocco
Perro · 4 años
EntrenadoHogar temporal

Por qué encaja bien: los refugios ya viven dentro del directorio, así que la ficha, las fotos y las categorías se reaprovechan. Lo que habría que construir es el flujo de solicitud y el seguimiento de cada adopción. Se puede cotizar aparte cuando las fases contratadas estén cerradas.

¿Tiene un negocio de mascotas?

Publique su perfil, reciba clientes de su ciudad y mida cuánta gente lo encontró.

+180negocios en Torreón
12categorías
5ciudades al escalar
Zoofan Directorio · Tienda · Promociones · Patrocinios

Esta es la base

Color, tipografía y personalidad ya están resueltos. Lo que sigue es aplicarlos pantalla por pantalla, en las tres rondas de revisión visual.

Zoofan.mx · Propuesta de sistema de marca · Documento de trabajo