El proyecto
El producto se entiende viéndolo: un feed de señales abre la página y las secciones siguientes lo desmontan pieza a pieza, del ruido comercial a la acción.
La marca pedía claridad operativa y elegancia, y una regla que se respetó en toda la web: el naranja, solo para la señal.
El reto
Que un comercial entienda en segundos qué hace una herramienta de datos, sin diagramas abstractos ni promesas vacías.
Cómo la construimos
El brief
Veinticinco apartados y un concepto, «inteligencia de señal», con un tono: claridad operativa y elegante. El movimiento, como un radar comercial.
El color con reglas
La paleta llegó con proporciones (menta 55 a 65 %, ciruela 20 a 25 %, azul 10 a 15 %, naranja 5 a 10 %) y una regla: si todo es naranja, nada es importante. El naranja, solo para la señal.
La identidad
Sobre su marca: el degradado azul, naranja y ciruela recortado por una sola máscara con dos muescas que encajan, la que da forma a todo el hero.
La librería
Un manual vivo generado desde el propio código: fundamentos, componentes, el mapa de la web en español e inglés y una guía para que su equipo la cambie con Claude.
Los detalles
Color
La paleta de Neety, por lo que se usa en la web entregada. Pasa por encima de cada color.
Uso medido en las grabaciones de la web entregada: cada píxel cuenta para el color más cercano; fotos y degradados aparte.
Tipografía
Medido en la web entregada (neety.treseiscero.app), a 1440 px.
Espaciado
- Paso base
- 4 px
- Entre secciones
- 112 px
- Contenedor
- 1320 px
- 4relleno, 80 veces
- 6entre elementos, 49 veces
- 8relleno, 157 veces
- 12entre elementos, 230 veces
- 16relleno, 140 veces
- 20relleno, 63 veces
- 24relleno, 72 veces
- 32relleno, 40 veces
- 40relleno, 41 veces
Los rellenos, márgenes y huecos que más se repiten en la web entregada, a 1440 px y a escala real; casi todos caen en pasos de 4 px.
Movimiento
GSAP 3.15 y ScrollTrigger para el feed y las entradas, sin librerías de scroll.
De ruido a señal
La lista fría, a la izquierda; a la derecha, lo que Neety devuelve: cuentas priorizadas y la acción siguiente.
El feed de señales
Siete tarjetas en bucle: la activa, nítida; las demás se desenfocan y encogen.
Por qué Neety
Seis cifras del producto que cuentan al entrar.
Por dentro
Herramientas
- Next.js
- Tailwind CSS
- GSAP + ScrollTrigger
- Sanity
- Cloudflare
Cómo está hecha
- Next.js 15 con App Router y Tailwind CSS 4
- GSAP 3.15 y ScrollTrigger para el feed y las entradas, sin librerías de scroll
- Cuatro familias: Bricolage Grotesque, Switzer, Inter y Roboto Mono, servidas con next/font
- Español e inglés; blog, equipo y eventos desde Sanity
- Servida tras Cloudflare
En cifras
- 9 secciones
- 7 tarjetas en el feed
- 27 s de bucle de señales
- 4 casos de uso
Conclusión
La web enseña el producto antes de explicarlo: el feed de señales abre la página y cada sección lo desmonta hasta la acción, con el naranja reservado para la señal.
Con ella se entregó una librería viva, generada desde el propio código, con sus fundamentos, sus componentes, el mapa de la web en español e inglés y una guía para que su equipo la cambie con Claude.
«Aquí va el testimonio del cliente sobre este proyecto: dos o tres líneas, con su retrato al carboncillo. Marcador para Eric.»