Can Arbós | Case Study

Overview

Can Arbós is a Webflow template I created for sale, for boutique hotels that have their own restaurant. The demo presents a hotel with 21 rooms in a house from the 1600s in Palma de Mallorca, with its restaurant, Aljub, a rooftop pool and a spa. It’s built on Lumos, a Webflow framework of classes and Variables, and a CMS with 11 linked collections runs most of the pages.

Role: UX/UI design and Webflow development
Scope: 28 pages, a CMS with 11 collections and booking forms
Tools: Webflow, Lumos, GSAP
Industry: Hospitality

The Problem

Guests of a boutique hotel book on facts. They want to know the size of the room and where its light comes from, how quiet the street is at night, how far the old town is on foot and what the restaurant serves. The site has to answer all of that and still keep the calm of the house.

Research

Before designing, I studied what guests write about hotels in Palma, and their questions shaped the content of the site.

Guests ask about	On the site
Room size and light	Every room shows its size, its guests and where its light comes from
Arriving by taxi	An arrival block with the meeting point and valet parking
Noise at night	A quiet square in the H1 and an FAQ about it
The menu and allergies	The full menu with diets, allergens and a filter
Walking distances	A map with the minutes on foot to nine places

Each page targets one search term in the guests’ own words, so the Home answers “boutique hotel in Palma old town” and Aljub answers “restaurant in Palma old town”.

CMS Architecture

28pages, 17 of them generated by the CMS
11collections in 48 items, within the free plan’s limit of 50
4templates bound field by field

Rooms, experiences, offers and journal guides each have their own template. The spaces, the team, the dishes, the diets and the other collections hold the content those pages share, linked by references.

RoomsExperiencesOffersJournal

SpacesExploreLegalExperience TypesTeamDishesDiets

Each template binds every field of its item, including the SEO title, the description and the Open Graph image.
A journal guide mixes two Rich Text fields with a photo between them, and switches set the shape of the photo and show the map.
Each page lists its related rooms, experiences, offers or guides through Collection Lists.

Four Decisions

1Allergens as switches

Problem: The free plan counts every item in the CMS.
Decision: The 14 allergens are switches on each dish.

0 itemsspent on allergens

2Related experiences picked by hand

Problem: An automatic list shows the same experiences on every page.
Decision: Each experience picks three others, with one of the same type first.

3 suggestionspicked for each experience

3Themes by section

Problem: The background and the menu change color section by section.
Decision: Each section takes its theme from the Lumos theme classes and the Variable modes.

4 themesfrom one set of Variables

4Booking fields that work with a keyboard

Problem: The browser’s date fields don’t count the nights of a stay.
Decision: One calendar covers arrival and departure, and every select follows the WAI-ARIA pattern.

1 patternfor every select on the site

Build

The Lumos Variables carry the brand’s values, with Light, Dark and Brand modes.
The menu, the footer and five dialogs are Webflow components used on every page.
The animations run on GSAP through Webflow’s own integration, and the content stays visible when reduced motion is on.
Every photo in the CMS has two sizes and its own description.
The forms come unconnected, so each buyer plugs in their own booking engine.

Results

92–95performance on mobile, on the main pages
99–100performance on desktop
100accessibility

Home 92

Room 95

Experience 95

Offer 94

Aljub 95

Rooms 94

Journal guide 83

PageSpeed on mobile, October 4, 2026.

Styleguide

Colors & Buttons

#FAF6EE · Lime Wash

#EADFC8 · Marès Stone

#D8CFBF · Stone Light

#3F5D49 · Shutter Green

#2B4234 · Shaded Green

#1B1916 · Night

#231F1A · Ink

#8A4426 · Clay

#5A544B · Faded

Typography · Newsreader, Instrument Sans

A quiet square in the old town.

ExampleNameWeightSizeLine heightLetter spacing

A boutique hotelH1 · NewsreaderRegular80px81.6px-2%

Small enough to knowH2 · NewsreaderRegular56px60.5px-1.2%

Courtyard RoomH3 · NewsreaderRegular30px34.5px-3%

Rooms and suitesLead · NewsreaderRegular24px27.6px0

La CalatravaEyebrow · Instrument SansRegular14px21px14%

21 rooms, one courtyardBody · Instrument SansRegular17px25.5px0

Book a roomButton · Instrument SansRegular17px25.5px0

Mobile

Made in

Design and build by joaomob