The project
The product is understood by seeing it: a signals feed opens the page and the following sections take it apart piece by piece, from commercial noise to action.
The brand asked for operational clarity and elegance, and one rule was kept across the whole site: orange, only for the signal.
The challenge
To have a salesperson understand in seconds what a data tool does, without abstract diagrams or empty promises.
How we built it
The brief
Twenty-five sections and one concept, “signal intelligence”, with a tone: operational and elegant clarity. The motion, like a commercial radar.
Colour with rules
The palette came with proportions (mint 55 to 65%, plum 20 to 25%, blue 10 to 15%, orange 5 to 10%) and a rule: if everything is orange, nothing is important. Orange, only for the signal.
The identity
Built on their brand: the blue, orange and plum gradient cut by a single mask with two notches that interlock, the one that shapes the whole hero.
The library
A living manual generated from the code itself: foundations, components, the site map in Spanish and English and a guide so their team can change it with Claude.
The details
Colour
The palette of Neety, by how much it is used on the delivered site. Hover over a colour.
Usage measured on recordings of the delivered site: every pixel counts towards the nearest colour; photos and gradients aside.
Typography
Measured on the delivered site (neety.treseiscero.app), at 1440 px.
Spacing
- Base step
- 4 px
- Between sections
- 112 px
- Container
- 1320 px
- 4padding, 80 times
- 6gap, 49 times
- 8padding, 157 times
- 12gap, 230 times
- 16padding, 140 times
- 20padding, 63 times
- 24padding, 72 times
- 32padding, 40 times
- 40padding, 41 times
The paddings, margins and gaps that repeat most on the delivered site, at 1440 px and true scale; almost all fall on 4 px steps.
Motion
GSAP 3.15 and ScrollTrigger for the feed and the entrances, with no scroll libraries.
From noise to signal
The cold list on the left; on the right, what Neety returns: prioritised accounts and the next action.
The signals feed
Seven cards in a loop: the active one sharp; the rest blur and shrink.
Why Neety
Six product figures that count up on entering.
Under the hood
Tools
- Next.js
- Tailwind CSS
- GSAP + ScrollTrigger
- Sanity
- Cloudflare
How it is built
- Next.js 15 with App Router and Tailwind CSS 4
- GSAP 3.15 and ScrollTrigger for the feed and the entrances, with no scroll libraries
- Four families: Bricolage Grotesque, Switzer, Inter and Roboto Mono, served with next/font
- Spanish and English; blog, team and events from Sanity
- Served behind Cloudflare
In numbers
- 9 sections
- 7 cards in the feed
- 27 s signals loop
- 4 use cases
Conclusion
The site shows the product before explaining it: the signals feed opens the page and every section takes it apart down to the action, with orange reserved for the signal.
It was delivered with a living library, generated from the code itself, with its foundations, its components, the site map in Spanish and English and a guide so their team can change it with Claude.
“The client’s testimonial about this project goes here: two or three lines, with their charcoal portrait. Placeholder for Eric.”