Sin cable. Sin letra chica.
01 · Contexto y encargo
Zapping, 2026. El logo se queda.
En 2026, Zapping necesitaba un sistema de marca nuevo. El anterior usaba un gradiente de rosa a amarillo.
El encargo fue reconstruir color, tipografía y movimiento, y definir el sistema en código. El wordmark y el isotipo ya existían y se conservaron. El sistema define cómo se usan, desde el ícono de la app hasta el formato monumental.
02 · Alcance
Del color. Al código.
- Color: negro, un rosa y blanco, con reglas de uso
- Reglas de uso del isotipo, en dos modos
- Tipografía: cuatro escalones de voz y Punchline
- Pulse Motion System: tres curvas y BrandLoader
- 362 valores de diseño, componentes y kit de TV en vivo
- Flujo de publicación y dos herramientas de adopción
03 · Color
Azules y rojos. Un solo rosa.
Entel, Movistar, DGO y Claro ocupaban la categoría con azules y rojos. Con el magenta saturado libre, Zapping fija un solo rosa, Zapink Pulse #E90068, junto al negro y el blanco. El gradiente de rosa a amarillo del sistema anterior se eliminó, y el nuevo no admite ninguno.
Sobre fondo negro conviven el rosa y el blanco. Sobre fondo rosa se usa solo blanco, en peso Bold. Los estados de la interfaz se resuelven con la opacidad del mismo color, sin crear tonos de rosa nuevos.
04 · Isotipo
Una Z. Entera o recortada.
El isotipo es la Z del wordmark: dos flechas en espejo cuyo espacio negativo forma la letra. Tiene dos modos, uno para la escala chica y otro para la monumental.
Modo Contenido. El isotipo va completo y chico, como ícono de app, marca de agua, merch o interfaz, y reemplaza al wordmark.
Modo Dominante. A escala monumental, el isotipo excede el formato y el borde lo recorta.
05 · Tipografía y Punchline
Diez cortes. Cuatro voces.
ZappingFont, la tipografía propia de Zapping, tiene 10 cortes. Se reparten en cuatro escalones de voz, de los gestos al cuerpo de texto. El Punchline junta un setup en calma y un remate en Black Italic, con un máximo de dos por pieza.
-
¿No sabes qué ver? ZAPPING & CHILL.
-
prende. Y MIRA.
| Escalón | Uso | Muestra |
|---|---|---|
| Black Italic | gestos y remates | prende. |
| Black | display de peso | EN VIVO |
| Bold Italic | títulos por defecto | Todo el fútbol, en vivo |
| Medium | cuerpo e interfaz | La TV que se tomó Chile. |
06 · Pulse Motion System
Entra rápido. Aterriza suave.
La velocidad máxima llega al 25% del recorrido: el movimiento entra rápido y aterriza suave. La salida es más rápida y dura un tercio de la entrada, en proporción 1:3. Las curvas no rebotan ni sobrepasan su destino, y no se usa motion blur.
| Curva | Uso | Función |
|---|---|---|
| Pulse In | Entradas | cubic-bezier(0, 0, .20, 1) |
| Pulse Out | Salidas · un tercio de la entrada | cubic-bezier(.62, 0, 1, 1) |
| Pulse Shift | Reposicionar | cubic-bezier(.33, 0, .20, 1) |
BrandLoader, la animación de espera
El BrandLoader cubre esperas de 1,5 s o más con una sola pasada de 5,9 s, nunca en loop. Dentro de un control de la interfaz, la espera se reduce a un punto que respira con las curvas Pulse. Ninguna interacción del sistema pasa de 500 ms.
07 · Sistema en código
Vive en código. 362 valores.
362 valores de diseño (tokens) cubren color, tipografía, espacio y movimiento. Cada uno se define una sola vez en el repositorio, que es la fuente, y se exporta al formato W3C DTCG para Figma y web.
Encima hay componentes accesibles (foco visible, área táctil de 44 px, contraste WCAG) y un kit de TV en vivo. Dos herramientas de adopción evitan que el sistema dependa de una sola persona. Los cambios nacen en el repositorio, se publican en brand.zapping.com, el Brand Hub público, y se documentan en Notion.
- valores de diseño en código
- 362
- cortes de ZappingFont
- 10
- curvas de movimiento
- 3
- rosa · gradientes
- 1·0
- herramientas de adopción
- 2
08 · En uso
Un horizontal. Dos verticales.
Diseñamos un servicio que pone a las personas primero, sin letra chica, y con tecnología de punta.
09 · Créditos
- Cliente
- Zapping, servicio de TV por streaming en vivo en Chile.
- Proyecto
- Sistema de marca, 2026.
- Rol
- Brian Vicuña lideró el diseño del sistema de marca: valores de diseño en código, componentes, motion, flujo de publicación y herramientas de adopción.
- Preexistente
- Wordmark e isotipo de Zapping, anteriores al proyecto. El aporte es el sistema que define su uso.
- Disciplinas
- Sistema de marca, valores de diseño en código, tipografía y motion (After Effects).