We set only the cookie that remembers this choice. Analytics and marketing cookies stay off unless you allow them. Cookies policy

Start a brief

Room 02 · Luxury boutique hotel · Concept

Casavel

Fourteen rooms. One wind.

Casavel, a fictional fourteen-room hotel. One site-wide hour control re-tones the whole page, and a drawn room section shows where the sun lands.

Concept project — fictional brand. This project was created by ARTLOGIC to demonstrate a possible brand and digital experience. The organization, name, people, prices, and data shown are fictional. This is not client work and does not represent measured business results.

Explore the concept site

Opening screen of the Casavel site on a wide display: Fourteen rooms. One wind.
Opening screen, desktop

01 The brief

The brand
Casavel is a fictional 14-room boutique hotel among vineyards in an invented village. Its tagline is "Fourteen rooms. One wind."
The problem
Couples and small groups book directly and want to feel the place first. The site has to convey atmosphere, let them compare a few rooms and end in a clear booking request.

02 The idea

One hour changes the whole house

What you see
A single control offers Morning, Day and Evening. Choosing one changes the page ground, the wall tint and the photographs together, and a line drawing of a room shows where the sun falls at that hour. Booking runs through a keyboard-operable calendar, a room comparison and a request that ends on a plain "This is a demonstration" confirmation.
How it works
The chosen hour lives in one shared store, so every page reads the same value. It sets colour tokens for ground, paper, wall and line, and decides which stacked photograph layer is visible, cross-fading over 1.2 seconds. The light drawing is inline SVG.

03 Design system

  • Ground#EFE8DD groundWarm plaster. The value shown is the day tone; morning and evening shift it.
  • Ink#2E2D22 inkAll text and selected states.
  • Wine#6E2F2F accentPrimary action, focus ring, current page and links.
  • Muted#5B5A44 mutedCaptions, hints and legends.
  • Paper #F2EADC. Evening paper tone for plates, inputs and the booking tray. Day and morning values differ.
Type
  • Cormorant Garamond
    Headings, with true italic for the booklet's spoken voice.
  • Nunito Sans
    Everything read closely or typed: body, forms, calendar.
Edges
Flat and square-cornered. Structure is 1px tan rules and paper plates with a mat around each image. The one shadow belongs to the sticky booking tray.
Motion
Hour changes cross-fade photographs over 1.2 seconds. With reduced motion, all transitions are removed.

04 Process

  1. Pre-production

    Pre-production fixed the thesis (a house is known by its hours), the route list and the risks before building, and recorded which images were stand-ins.

  2. Build

    The site was built from a written plan: shared store and layout first, then the hour control, the calendar and the booking flow.

  3. Finish review

    Impeccable finish-review rounds checked the finished pages against the direction, including contrast across the three hours.

  4. Fixes

    The material findings were fixed and the affected pages checked again.

05 Technology and accessibility

Stack
Next.js 16, Tailwind CSS 4 and TypeScript, inside the studio's single application.
Particular to this site
  • Shared hour store driving colour tokens
  • Stacked photograph layers with cross-fade
  • Inline SVG light drawing
  • Custom date picker and room comparison
Access
  • Skip links and labelled landmarks
  • Hour control is a radiogroup with arrow-key support and a polite live region announcing the change
  • Calendar operable by keyboard, with state shown by hatching, strike-through and dashed outline as well as colour
  • Form errors use aria-invalid, aria-describedby and alert roles
  • Reduced-motion styles remove transitions
Tests
Covered by its own Playwright end-to-end spec and a unit test file for its logic.

06 Honest notes

Casavel is a fictional brand and a concept project by Artlogic. There is no live availability, no payment, no real address, no ratings and no reviews.

The booking request is a demo and stores nothing. The confirmation page says so.

The photographs are free Unsplash stock images standing in for a fictional hotel. No free series of one room at three hours was found, so the morning, day and evening images are three different rooms, and are not presented as one room. They are meant to be replaced by a generated same-room series. The drawings, logo and mark are original SVG.

07 See it

Explore the concept site

Fictional prototype. A concept by ARTLOGIC for a fictional brand. English only.