Online
BibanBiban
Conoce el framework →
Servicios
Estrategia Marketing Tecnología Datos
Casos Nosotros Conoce el framework →

Degradados y movimiento

Los cuatro degradados del sistema, el globo y las reglas de animación.

Directrices · Degradados y movimiento

El fondo también comunica.

Biban no usa degradados decorativos: los usa para dar profundidad y para que el texto siempre gane sobre lo que tiene detrás. Cuatro base y dos derivados de tarjeta. Fuera de esta lista no hay más.

Crecer es una decisión
Halo de marca
Detrás de titulares y del globo. Da volumen sin ensuciar el fondo.
radial-gradient(closest-side, rgba(131,10,209,0.35), transparent)
Texto legible sobre la foto
Velo sobre fotografía
Obligatorio en toda foto que lleve texto encima.
linear-gradient(180deg, rgba(23,1,43,0.7) 0%, rgba(23,1,43,0.15) 40%, rgba(23,1,43,0.92) 100%)
El texto vive en la zona sólida
Barrido lateral
Funde el borde de una imagen o animación con el fondo de la sección.
linear-gradient(90deg, #1F033A 20%, rgba(31,3,58,0.72) 42%, rgba(31,3,58,0) 66%)
ConocerDecidirCrecer
Línea de ciclo
Solo en líneas de 2–3 px. Nunca como fondo de un bloque.
linear-gradient(90deg, #D8DF21, #2FCAD7, #65E5B1)
01
Filo superior de tarjeta
Filo y resplandor de tarjeta
Una línea de 2 px que nace en el acento y se disuelve, más un resplandor difuso en la esquina. Distingue las tarjetas numeradas sin usar bordes duros.
linear-gradient(90deg, var(--accent), transparent) · radial-gradient(closest-side, var(--a250), transparent)
Oscuro
Claro
Relleno de superficie
El fondo de toda tarjeta: un velo diagonal del propio color de texto a muy baja opacidad. Por eso funciona igual en los dos modos sin cambiar de código.
linear-gradient(160deg, var(--w70), var(--w20))
Los degradados no se redefinen por modo. Están escritos con los tokens del tema —var(--w70), var(--a250), var(--surf-deep)—, así que el mismo código se aclara u oscurece solo. La única excepción es el velo sobre fotografía, que se mantiene morado en los dos modos porque la foto siempre es oscura debajo.
Animación insignia
El globo
Rotación continua y lenta, nodos que se encienden por turnos y cifras que aparecen y se apagan. Representa negocios conectados por un mismo sistema. Es el único elemento con movimiento permanente en una pantalla, y siempre va detrás del contenido, nunca compitiendo con él. También cambia de tema: se aclara con el modo claro.
Reglas de movimiento
Interfaz — 150–250 ms, ease-out. Hover, foco, apertura de menú.
Aparición al hacer scroll — opacidad 0→1 y translateY(14px) en 500 ms. Una sola vez, sin rebote.
Bucles ambientales — 8–40 s, lineales e infinitos: globo, marquesina de logos, carrusel de fotos.
Señal de vida — el pulso del botón de WhatsApp, 2 s. Es el único destello.
Un movimiento a la vez — máximo un elemento animado por zona visible.
Todo respeta prefers-reduced-motion: si el sistema del usuario pide menos movimiento, las animaciones se detienen en su estado final y el contenido queda legible.
Directrices · Componentes

Las piezas que ya están resueltas

Botones
Diagnóstico gratis → Conoce el framework →
Radio 10–12 px. Un solo botón de acento por pantalla. La flecha → acompaña siempre a la acción principal.
Rótulos de frente
Estrategia Datos Tecnología
Cada frente conserva su color en toda la marca. El pill nunca lleva relleno sólido.
Tarjeta de dato
+3X
en crecimiento
1 sistema
que queda en tu negocio
La cifra va en acento solo cuando es el dato que importa. Las demás, en el color del texto.
Línea de etapa
ConocerDecidirCrecer
El degradado de los tres colores marca el ciclo. Se usa en líneas de 2–3 px, nunca como fondo.