TOFF Water · EDITORIAL SITE.
A site that reads like a printed manifesto, not an ecommerce. Water from 149 m, brand by invitation.
Status
Sector
Premium beverages · Veracruz, MX
Client
TOFF Water · spring mineral water
Live site
toffwater.com↗Hook ─ Position
TOFF didn't need an ecommerce with product cards. It needed the place where the water tells itself — an editorial descent from the surface to the spring, in silence.
Tip · on mobile it's better to open the site in a new tab
Theory ─ How we think
Silent-luxury brands fail online because they adopt DTC grammar: hero shot, benefits, reviews, buy. TOFF asked for the opposite — an editorial object where origin is the narrative and product is the consequence.
- 01
Manifesto structure, not catalog
Seven numbered chapters (I–VII) descend from the surface to the spring. Each chapter has its own typographic landscape. Zero CTAs until the close.
- 02
Depth as a narrative element
The depth indicator (0 m → 149 m) accompanies the user through the scroll as a vertical compass. The physical metaphor of water becomes the navigation axis.
- 03
By invitation, not by cart
Access is a private conversation via Instagram. Friction is the filter: whoever looks for three-click checkout isn't the customer. Whoever writes a message, is.
- 04
Typography as product
Cormorant Garamond for the manifesto verses, Inter for the technical data. Tracking, weight contrast, and emptiness do what images shouldn't have to carry.
Visual ─ Architecture
Manifesto · Chapters · Access · Edition.
Editorial site
Cormorant + Inter
Chapters
I–VII numbered
Access
Instagram DM
Edition
236 ml · numbered
The user enters the manifesto, descends chapter by chapter (I to VII) accompanied by the depth indicator. At the end, there's no cart — there's a private message to the brand. Every interaction is logged so the TOFF team can curate who receives the edition.
How it shipped.
5m 28s
full scroll · 7 chapters
+218%
vs category benchmark · premium water MX
−47%
vs initial launch landing
─ Deliverables
- ✓Editorial one-page site with 7 numbered chapters
- ✓Depth indicator synchronized to scroll
- ✓Custom typographic system · Cormorant Garamond + Inter
- ✓Manifesto page with values I–V
- ✓Private access flow via Instagram DM with tracking
─ Stack
- Next.js 15
- next/font
- Lenis smooth
- Cormorant Garamond
- Inter
- Geist Mono
- Vercel Edge
- Cloudflare R2
- PostHog
─ Timeline
8 weeks · 2 editorial review cycles with founders
Testimonial ─ Client
“The site doesn't sell the water. It makes the right person understand why TOFF exists before writing us. After that, the conversation is different.”
— Founder · TOFF Water
Does your case look like this?