Brand
guidelines
En Zapping buscamos mantener todo lo más simple posible: la forma de ver televisión, la tecnología que usamos y cómo nos comunicamos. Este sitio documenta cómo se construye visualmente nuestra marca.
Identificadores gráficos
El sistema marcario de Zapping se construye sobre un wordmark tipográfico y un isotipo. Cada pieza tiene un rol, proporciones y reglas de aplicación específicas.
Wordmark
El logotipo y el isotipo no deben utilizarse juntos, salvo en casos excepcionales como patrones gráficos o composiciones donde exista una separación suficientemente clara entre ambos elementos.
Isotipo
Uso de identificadores gráficos
Proporciones y retícula
Área de reserva
Legibilidad del logotipo
El ratio se calcula sobre el color de primer plano principal de cada variante — Pink Pulse (#FF155B) para gradiente y monocromático, Blanco (#FFFFFF) para la variante white.
Uso incorrecto de identificadores
Logotipo obsoleto
- →Espacios casi iguales entre letras
- →Colores desaturados
- →Espacio entre letras mucho mayor
- →Colores muy saturados
Sistema de color
El sistema cromático se construye a partir de Pink Pulse como color principal. Zapping Dark y blanco funcionan como colores base. Lemon Glow se emplea únicamente dentro de la gradiente oficial y en el isotipo.
Paleta principal
- RGB
- 8, 8, 9
- CMYK
- 30, 20, 0, 100
- RGB
- 255, 21, 91
- CMYK
- 0, 95, 40, 0
- RGB
- 255, 255, 255
- CMYK
- 0, 0, 0, 0
- RGB
- 255, 238, 68
- CMYK
- 0, 10, 80, 0
- RGB
- Pink Pulse 25% → Lemon Glow 100%
Paleta secundaria
Gradientes
Gradientes de fondo
- #882233at 0%
- #5F0040at 25%
- #301040at 60%
- #080809at 100%
- #BF1145at 0%
- #520042at 40%
- #080809at 80%
Uso incorrecto de color
ZappingFont
Zapping cuenta con una tipografía propia diseñada a partir de una fuente preexistente y adaptada para los usos específicos de la marca. Conserva una estructura geométrica versátil con modificaciones en detalles clave que refuerzan la identidad visual.
ZappingFont
Pesos tipográficos
Estilos principales
Composición tipográfica
Zapping es la nueva televisión por internet
Accede a tus canales y a todo el fútbol local con la mejor experiencia.
Zapping es una plataforma de streaming que te permite ver televisión en vivo y contenido a la carta desde cualquier dispositivo.
Características
Implementación
Reglas de proporción para el uso del logotipo e isotipo en los formatos de pantalla más comunes.
Logotipo en pantalla
Formatos reducidos
Isotipo en pantalla
Pulse Motion System
El movimiento en Zapping es intencional, energético y fluido. El sistema Pulse define cómo los elementos cobran vida en pantalla — desde microinteracciones hasta transiciones de página — creando una experiencia coherente y reconocible.
Principios Pulse
Cada animación tiene una razón. El movimiento guía la atención hacia lo que importa, nunca la dispersa.
La marca respira con una cadencia propia. Las animaciones siguen el pulso de Zapping — constante y reconocible.
Los elementos irrumpen en escena con fuerza. El movimiento tiene dirección, peso y resolución clara.
Duración
Cambio de estado sin transición. Para toggles y feedback inmediato donde la animación distraería.
Tooltips y badges de notificación. Respuesta rápida y decisiva sin interrumpir el flujo.
Hover states, foco y cambios de color. Respuesta rápida a interacciones directas del usuario.
La mayoría de transiciones UI. Apertura de paneles, navegación y cambios de estado complejos.
Reveals de contenido, modales y pantallas nuevas. El ojo tiene tiempo de seguir la transición.
Loops atmosféricos y animaciones de fondo. El pulso lento de la marca — constante y ambiental.
Curvas de easing
Para elementos que entran en pantalla. Arranca a velocidad máxima y aterriza con suavidad.
Para elementos que salen de pantalla. Aceleración agresiva — la salida debe ser rápida y limpia.
Para elementos que permanecen en escena y cambian de posición o estado. PVP autónomo al 25%.
PVP — Peak Velocity Point
El PVP es el instante donde la animación alcanza su velocidad máxima. En el sistema Pulse, el PVP ocurre siempre en el 25% de la duración total. La proporción es fija: Pulse Out dura 1/3 del tiempo de Pulse In — el elemento viaja a velocidad máxima cuando el usuario empieza a percibirlo, y dedica el 75% restante a desacelerar hasta el reposo.
Pulse Out seguido de Pulse In. Para cambios entre contenidos distintos: pantallas, títulos, tarjetas.
Pulse Shift simultáneo. Para tabs, toggles y vistas que comparten el mismo espacio.
Gradiente en movimiento
Pink Pulse hacia Lemon Glow, en loop infinito. Aplicable en separadores, barras de progreso y estados de carga.
El texto permanece blanco puro. El movimiento es del halo, no del texto. Ideal para pantallas de hero y momentos de marca.
Para destacar acciones y contenedores clave, aplicamos un gradiente radial difuminado en el exterior — pink pulse puro. El interior del contenedor permanece negro; el gradiente vive solo fuera, como si el elemento irradiara luz propia.
Animación del logotipo
Disponible en formato Lottie para integración en apps iOS, Android y web. Usar la animación oficial garantiza coherencia en todos los puntos de contacto digitales.
Patrones de movimiento
Opacidad 0→1 con desplazamiento sutil desde abajo. Patrón de entrada estándar para cualquier elemento.
Elementos que aparecen en secuencia con delay incremental. Crea jerarquía y guía el ojo.
El elemento crece desde 0.88 a 1.0 con opacidad. Ideal para overlays, modales y tarjetas.
Ondas concéntricas en loop. Útil para indicadores de estado, notificaciones y puntos de atención.
Uso incorrecto de motion
Descargas
Todos los archivos en los formatos que necesitas.