Hinge x Headspace
Hinge partnered with Headspace on a pair of pre-date meditations for World Mental Health Day in October 2020. We built the microsite that launched it: one page carrying two brands at once, an animated background, and the two meditation videos. The campaign has since ended and the page has come down.
One page, two brands.
The microsite sat at hinge.co/headspace and did one job: explain the collaboration and hand people the meditations. An animated background of concentric arcs runs behind a co-branded lockup and the headline, with Headspace's Dot and Hinge's Hingie characters animating below it. Under that sit the two meditation videos, the campaign copy with a link out to Headspace's mental health resources, and the app store buttons.
We built it with Hinge's in-house team and dropped it into their existing site, so it inherited their nav, their footer, and their type.
The date was the constraint.
World Mental Health Day falls on October 10 and does not move. A campaign page tied to a fixed date has a deadline no amount of scope negotiation can soften: it either ships before the day or it may as well not ship.
The harder problem was the brand arithmetic. The page had to read as Hinge and as Headspace at the same time, on a layout that lives inside Hinge's site, without either identity looking like it lost an argument.
Two cuts of everything.
The background is an animated GIF, sized to cover, and there are two of them: a wide desktop cut and a separate mobile cut, swapped at the breakpoint. That matters more than it sounds. Scaling one wide GIF down to a phone crops the arcs off-center and the composition falls apart, so the mobile version was cut to hold its own frame.
The two videos are handled the same way. Each exists as a desktop and a mobile embed, toggled by media query, so the aspect ratio suits the screen it lands on rather than letterboxing. Eleven breakpoints in total do the responsive work, and the page ships no script of its own.
How it's built.
CSS
Eleven breakpoints, the background swap, and the type scaling.
HTML
The page markup, built to sit inside Hinge's existing site.
Animated GIF
The arc background and the character art, cut separately for desktop and mobile.
YouTube
The two meditation videos, each with its own desktop and mobile embed.
Tell us what you're building.
Every project starts with a conversation, not a contract. We respond within 24 hours.
Start a Project