Studio concept · fictional spa

Kwartier
Amsterdam.

A concept site for a fictional Amsterdam spa, with a menu organised by length of time.

The Kwartier concept homepage on an iPad propped up on white bed linen beside a latte.

About this project

Time as
the treatment.

Kwartier is Dutch for a quarter of an hour, and for a corner of the city. The spa is fictional: we created it as a design study, and the site says so at the top of every page.

Visitors choose a length of time first, from a thirty-minute pause to a two-and-a-half-hour circuit.

Concept
Webflow build
Client-First
Custom interaction

Type: Studio concept · fictional brand
Sector: Spa and wellness
Location: Amsterdam
Platform: Webflow · Client-First
Pages: Home · a sample treatment page
Role: Design and build
Status: Concept on Webflow staging
Site: spa-kwartier.webflow.io ↗(opens in a new tab)

The Kwartier concept homepage on an open MacBook Pro among white sheets and a knitted throw on a bed. — HomeLaptop

The Kwartier concept homepage on an iPhone in a clear case, leaning against a ceramic cactus beside a lit candle. — Home · mobilePhone

The Kwartier concept's time dial on an iPad propped up on white bed linen, with its Deep Hour treatment page on an iPhone beside it. — Time dial and treatment pageTablet and phone

The homepage

Every section,
one scroll.

The concept homepage, captured at desktop width, from the first screen to the footer.

The full Kwartier concept homepage, from the hero and the idea through the time dial, the menu, the design notes, textures, imagined guest quotes, location and questions to the footer.

The top of the full Kwartier concept homepage, from the hero and the idea through the time dial, the menu, the design notes, textures, imagined guest quotes, location and questions to the footer.

The project

The project,
in brief.

The premise

A spa sells uninterrupted minutes, so the design is built from clocks and durations: an interactive time dial, tick-mark rulers and an opening-hours spine that follows the scroll.

What we built

A homepage and a sample treatment page. The Deep Hour, a deep-tissue massage, shows one treatment in three lengths, each with its own price.
Built to be rethemed. The site's design notes describe three brand themes, Warm, Noir and Verde, set up as variable modes in Webflow. The published site shows one of them.
Client-First structure. Layout and type use Client-First classes, and each component has its own class.
Interaction written for the concept. About 6 KB of custom script runs the time dial, the scroll spine, the pinned texture gallery, the questions and the price switch.
Licensed photography. Images are licensed stock from Pexels and Unsplash, credited on the site.

Design choices

Fraunces for headings and Jost for text, with one handwritten word in every heading, set in La Belle Aurore. Deep navy sections alternate with warm off-white ones.

View the concept site

More work