Seguimiento automático
Se enciende
La respuesta automática pasa de quieta a encendida.
Iconos
Iconos que se mueven una vez.
Los 28 iconos se dibujan en 450 ms, sin rebotar ni brillar, y se quedan quietos. Pasa el cursor sobre uno, o tócalo.
Seguimiento automáticoSe enciende · 700 ms
Chat asignadoRecibe su check · 720 ms
Mensaje aprobadoSe aprueba · 600 ms
Sin responderLlega la burbuja · 630 ms
Tiempo de respuestaDa una vuelta · 950 ms
ReporteSe dibuja el reporte · 850 ms
La idea
Un icono dice qué pasó.
Se dibuja una vez y queda quieto, sin rebotar ni brillar. El dueño ya vive entre notificaciones que parpadean.
- Una vez y quieto. Sin bucles, pulsos ni rebotes: si rebotara, parecería un juego y no un sistema.
- 450 ms. Llega rápido y se asienta despacio, como todo lo que entra en la marca.
- El color llega al final. Primero se dibuja y después se enciende: lo quieto va primero y lo encendido, al último.
Ver la curva y el modo sin movimiento
- La curva «entrada». Son 14 fotogramas en video: un poco más que los 300 ms de la web, porque el trazo recorre un camino.
- Con «reducir movimiento», un fundido de 200 ms. Quien lo pide recibe el mismo aviso, sin desplazamiento.
Los 28
Cada icono tiene su movimiento.
Pasa el cursor o toca uno; elígelo para copiarlo o descargarlo.
Conceptos · 22, cada uno con su palabra
Interfaz · los únicos que pueden ir sin palabra
Cuatro comunes
Cuatro movimientos, 22 iconos.
Cada icono recibe el movimiento que le toca según lo que representa.
Ver los tiempos y cómo se hace en CSS
- Dibujar el trazo
- 450 ms · curva «entrada»
- Encender
- 300 ms · curva «estado»
- Check que se dibuja
- 350 ms · curva «entrada»
- Giro de reloj
- 700 ms · curva «estado»
Los cuatro usan el mismo SVG de Lucide. Lo único que se agrega a cada trazo es pathLength="1". Abajo, la idea simplificada; el SVG animado que descargas trae el CSS completo de su icono.
<svg class="icono" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
<path pathLength="1" d="…"/> <!-- pathLength="1": 1 es el largo entero del trazo, sea cual sea el dibujo -->
</svg>
/* 1 · Dibujar el trazo: 450 ms, curva entrada */
.icono.is-play path{stroke-dasharray:1 2;animation:trazo 450ms var(--mov-entrada) both}
@keyframes trazo{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
/* 2 · Encender: sube 2 y el color llega al final, 300 ms, curva estado */
.icono.is-play path{animation:enc 300ms var(--mov-estado) both}
@keyframes enc{0%{stroke:var(--control-apagado);transform:translateY(2px)}
50%{stroke:var(--control-apagado);transform:none}
100%{stroke:currentColor;transform:none}}
/* 3 · Check: el resto queda quieto y solo el check usa el mismo trazo de arriba */
/* 4 · Giro de reloj: una vuelta, 700 ms, curva estado, alrededor del centro del reloj */
.icono.is-play .mano{transform-box:view-box;transform-origin:16px 16px;animation:giro 700ms var(--mov-estado) both}
@keyframes giro{from{transform:rotate(0)}to{transform:rotate(360deg)}}
/* Con «reducir movimiento»: fundido de 200 ms y nada más */
@media (prefers-reduced-motion:reduce){.icono.is-play *{animation:fundido 200ms linear both!important;stroke-dasharray:none!important}}A medida
Seis cuentan su historia.
Primero lo quieto, después el contenido y al final lo encendido.
Chat asignado
Recibe su check
Llega la persona y recibe su check.
Mensaje aprobado
Se aprueba
Tú apruebas: el check se dibuja y el mensaje se enciende.
Sin responder
Llega la burbuja
Entra con un fundido y los tres puntos aparecen uno a uno.
Tiempo de respuesta
Da una vuelta
Se arma y la aguja da una vuelta, una sola.
Reporte
Se dibuja el reporte
Primero el eje, después las barras, de izquierda a derecha.
Ver cuándo pasa cada paso
Seguimiento automático · message-circle-reply
Se enciende · 700 ms
- La burbuja espera en Apagado0–400 ms
- La flecha de respuesta se dibuja100–400 ms
- El color llega al final400–700 ms
Chat asignado · user-round-check
Recibe su check · 720 ms
- La persona se dibuja: cabeza y hombros0–340 ms
- El check se dibuja encima420–720 ms
Mensaje aprobado · message-circle-check
Se aprueba · 600 ms
- El mensaje espera en Apagado0–120 ms
- El check se dibuja120–420 ms
- El color llega al mensaje300–600 ms
Sin responder · message-circle-more
Llega la burbuja · 630 ms
- La burbuja entra: fundido y sube un poco0–300 ms
- Los tres puntos aparecen, uno tras otro300–630 ms
Tiempo de respuesta · timer
Da una vuelta · 950 ms
- El aro y el botón se dibujan0–450 ms
- La aguja aparece350–470 ms
- La aguja da una vuelta y se queda350–950 ms
Reporte · chart-bar
Se dibuja el reporte · 850 ms
- El eje se dibuja0–300 ms
- Las barras crecen una tras otra150–850 ms
Tamaño y trazo
Un solo trazo: 1,75.
Crece con el icono, y a 1,17 veces el texto pesa igual que la letra Regular. El mínimo en pantalla es 16 px.
Aprobado16 pxtrazo real 1,17 pxtexto de 14 px
Aprobado20 pxtrazo real 1,46 pxtexto de 17 px
Aprobado24 pxtrazo real 1,75 pxtexto de 20 px
Aprobado32 pxtrazo real 2,33 pxtexto de 27 px
Ver la prueba de trazo
Qué tomamos: con 1,75 el icono y la palabra pesan igual. Con 1,5 el icono se ve más claro que el texto; con 2 pesa más que la letra Regular.
Ver la alineación con el texto
El icono mide 1,17 em y se centra con flex, sin ajustes a mano: el error medido es menor de 1 px.
Texto 15 → icono 18 pxAprobado
Texto 17 → icono 20 pxAprobado
Texto 24 → icono 28 pxAprobado
Texto 42 → icono 48 pxAprobado
.con-icono{display:inline-flex;align-items:center;gap:.45em} /* centrado con flex, sin ajustes a mano */
.con-icono svg{width:1.17em;height:1.17em;flex:none;stroke:currentColor;stroke-width:1.75}
.con-icono.activo svg{stroke:var(--acento)} /* azul solo en el activo, uno por pantalla */Con texto y en botones
La palabra va primero.
El icono va a su izquierda y del color de su texto. Nunca en titulares ni en el botón principal.
Qué encendemos en tus chats
Todos tus chats en un lugar
Cada chat con su vendedor
Seguimiento automático
Qué incluye
- Lo instalamos por ti
- Capacitamos a tu equipo
- Soporte
Cuántos: en un anuncio, 0 o 1; en un post o una lámina, 3 como máximo.
Lo que no se hace
Un trazo, un color, un tamaño.
Cada «no» se ve con el mismo rigor que el «sí», y trae su motivo.
Sí
Solo línea, vacía por dentro: pesa como la letra Regular.
No
Relleno: pesa más que el texto y rompe la familia de línea.
Sí
Un solo color, el de su texto. El azul va solo en el activo.
No
Dos colores: parece ilustración y gasta el azul.
Sí
Trazo 1,75: crece con el tamaño del icono.
No
Contorno grueso: cierra los huecos y pesa más que la Bold.
Sí
Un tamaño por fila: 1,17 veces el texto que acompaña.
No
Tamaños mezclados: la fila se ve desordenada.
Sí
Chats
Reporte
Precio
Con la palabra al lado, nadie tiene que adivinar.
No
Iconos solos: solo los seis de interfaz pueden ir así.
Sí
Una sola vez, sin cambiar de tamaño ni de color.
No
Rebota, brilla y se repite: parece un juego.
Ver más cosas que no se hacen
Sí
Todos tus chats en un lugar
Cada chat con su vendedor
Cada icono con su palabra, a la izquierda.
No
ChatsTodo en un lugar
EquipoCada uno con lo suyo
SeguimientoSale solo
Tarjetas con un icono grande arriba: es la huella más reconocible del diseño hecho por IA.
Sí
Tu equipo
Venta cerrada
Los 28 cubren cada concepto del producto; si falta uno, se propone y no se improvisa.
No
Ojo
Campana
Lupa
Destellos
Cohete
Diana
Ojo, campana y lupa se leen como vigilancia; destellos, cohete y diana, como publicidad. Nunca entran.
Descargar
Los 28, listos para usar.
El estático toma el color del texto. El animado se dibuja al abrirlo.
Ver los 56 archivos, uno por uno
El animado es un SVG autónomo: lleva su CSS adentro y funciona en cualquier lugar.
| Icono | Nombre | Estático | Animado |
|---|---|---|---|
| Chats | message-circle | Estático | Animado |
| Todo en un lugar | inbox | Estático | Animado |
| Vendedor | user-round | Estático | Animado |
| Chat asignado | user-round-check | Estático | Animado |
| Equipo | users-round | Estático | Animado |
| Seguimiento automático | message-circle-reply | Estático | Animado |
| Mensaje aprobado | message-circle-check | Estático | Animado |
| Sin responder | message-circle-more | Estático | Animado |
| Tiempo de respuesta | timer | Estático | Animado |
| Reporte | chart-bar | Estático | Animado |
| Etapas de venta | square-kanban | Estático | Animado |
| Ficha del cliente | contact-round | Estático | Animado |
| Negocio del cliente | store | Estático | Animado |
| Venta | receipt-text | Estático | Animado |
| Precio | tag | Estático | Animado |
| Piloto | calendar-check | Estático | Animado |
| Cita | calendar-clock | Estático | Animado |
| Asistente (opcional) | bot-message-square | Estático | Animado |
| Instalación | wrench | Estático | Animado |
| Capacitación | presentation | Estático | Animado |
| Soporte | headset | Estático | Animado |
| Tu web | globe | Estático | Animado |
| Siguiente | arrow-right | Estático | Animado |
| Enlace externo | arrow-up-right | Estático | Animado |
| Hecho | check | Estático | Animado |
| Cerrar | x | Estático | Animado |
| Agregar | plus | Estático | Animado |
| Desplegar | chevron-down | Estático | Animado |
Iconos: Lucide 1.48, licencia ISC, © 2026 Lucide Icons and Contributors. arrow-right, arrow-up-right, check, chevron-down, plus y x vienen de Feather (licencia MIT, © Cole Bemis). Texto completo en la licencia que va dentro de cada ZIP.