Can Arbós

Can Arbós is a Webflow site for boutique hotels that have their own restaurant. It’s an original design that I created and built, and it’s for sale. 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

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.

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

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”.

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

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

• Each Collection page binds every field of its item, including the SEO title, the description and the Open Graph image.
• A journal guide sets a photo between its Rich Text fields. Switches in the CMS choose the shape of the photo and show the map.
• Each page lists its related rooms, experiences, offers or guides through Collection Lists.
• The hubs of rooms, experiences and journal guides, the three lists on the Home and the Aljub menu are Collection Lists too.
• The filters of the hubs and the diet filter of the menu read fields from the CMS.

• The Lumos Variables carry the brand’s values, with Light, Dark and Brand modes.
• The site is built from Webflow components with properties bound to the CMS. One edit to a component updates every page that uses it.
• Each component keeps its CSS inside it, so its styles are edited in one place.
• The card grids use container queries and adapt to the space they sit in.
• 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.
• CSS and JavaScript are minified, so the browser downloads smaller files.
• Every page has a canonical tag for search engines and an Open Graph image for shared links.
• Structured data describes the hotel, the restaurant and the journal posts to search engines.
• The Home also has a Spanish version, with the menu, forms and calendar in Spanish.
• Hreflang tags link the English and Spanish Homes for search engines.
• The Figma file has the Spanish Home too.
• The forms come unconnected, so each buyer plugs in their own booking engine.

• Every text color in the palette passes AA contrast.
• The menu opens with Enter and closes with Esc, and the focus goes back to the button.
• Fields are 16 px and have their own labels.

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

PageSpeed on mobile, October 4, 2026.