Let the architecture organise the page.
Courtyard, arches and framed views establish a sense of place. The three-level house explorer then turns that visual idea into a practical way to find the rooms.
Architecture / Hospitality · 2026
DAR SERA
A house with
a slower rhythm.
A quiet courtyard guesthouse in Tétouan, imagined as a complete place to explore. Rooms, stories, a house guide and a demo stay planner.
DAR SERAVisual language
Inside the project
The whole picture.
A source-reviewed overview of the website, its content and the systems behind it.
- Published pages
- 11
- Distinct photographs
- 28
- Language
- English
- Build
- Astro · TypeScript · Custom CSS
- Hosting
- GitHub Pages
- Media
- Cloudflare R2 · AVIF / WebP variants
- Audience
- Someone comparing rooms, exploring the house and planning a short stay in Tétouan.
- Room types
- 4
- House levels
- 3
- Stay planner
- Dates → room → review
Colour language
Paper#F4F0E7
House green#34483E
Clay#8B4938
Sand#D9CEBD
Original website typefaces
- Instrument Serif
- Manrope
How these figures were counted
11 published destinations, including four room pages. 28 original photographs; responsive AVIF and WebP derivatives are counted once per original.
Reviewed 23 October 2026. Duplicate source copies, error pages and responsive image variants are excluded. Counts describe the original website, not this case study.
View the reviewed source ↗The starting point
Start with a world.
Give it a reason to exist.
I started with a place rather than a collection of hotel cards: four rooms around an open courtyard in Tétouan. The website needed to make the house feel coherent, while helping someone understand the rooms and plan a stay.
Design decisions
Why it looks
the way it works.
Three decisions that connect the visual language to the experience.
Keep the palette close to the materials.
Warm paper, dark green, timber and clay connect the photographs to the interface. Instrument Serif introduces the editorial voice; Manrope keeps descriptions and controls direct.
Make room comparison concrete.
Each room uses the same information: area, bed, floor, outlook and nightly concept rate. Shared structure makes the differences easier to compare without flattening the character of each room.
From design to behaviour
Four rooms. One shared structure.
A compact selection study using the room records from the original project. Select a room to see its area, bed and position in the house.
Explore the house
A schematic floor selector connects the house levels to the rooms. The diagram is a navigation aid, rather than a measured architectural plan.
Explore this feature ↗Compare four rooms
Dedicated room pages combine a clear specification, photographs and keyboard-accessible galleries.
Explore this feature ↗Plan a demo stay
Dates and room selection lead to a calculated stay summary that can be reviewed and edited. This is a local demonstration, without a real reservation or payment.
Explore this feature ↗One identity. Different compositions.
Built for the screen
in front of you.
Wide compositions become a direct reading sequence on a phone. Room specifications stay together, galleries retain explicit controls, and the stay planner keeps a clear step-by-step flow.
What I explored
A visual idea,
carried all the way.
The most useful part of this project is the connection between atmosphere and structure: the house has a personality, and choosing a room still feels straightforward.