01 · Overview
Restraint as a luxury signal
For this concept, I imagined a hotel that opened in 1927 and has never advertised. Every convention of the modern hotel website — the sticky booking widget, the urgency banner, the video autoplaying over the fold — works against that premise. So the page borrows from the one medium the hotel would already trust: its own printed stationery. Everything sits on a centred axis. Gold appears only as a hairline or a diamond. Nothing counts down.
The result is the most symmetrical page in the set, and deliberately the opposite of the Ember & Oak broadsheet — where that page hangs folio numbers in a left gutter and runs asymmetric columns, this one puts everything on the centre line and lets the space do the work.
02 · The idea
Forty-one rooms, no urgency
The line I wrote for the brand — a quiet address in a loud century — set the whole brief. Three decisions followed from it, and every other choice on the page is downstream of these.
Gold is a hairline
The accent never fills a surface. It rules, it underlines, it marks a diamond between beats — and that is all.
Everything centred
Symmetry reads as composure. Only the challenge/solution pairs break the axis, and only because comparison needs two columns.
Slower than the rest
Reveals run at 1.1 seconds, the hotel's own --reveal-time — noticeably slower than any other page here.
03 · Goals
What the site had to carry
Eight beats, one voice
Intro, rooms, amenities, heritage, gallery, guest words, offers and an enquiry — each a section with its own labelled heading.
A gallery that runs itself
Thirteen plates crossfading on a timer, pausing the moment a pointer or a keyboard focus enters it.
An enquiry, not a checkout
Seven fields — arrival, departure, guests, room, name, email, message — validated inline and confirmed in a live region.
A menu that cannot leak
The mobile panel traps focus while open and hands it back to the trigger on close.
04 · Build order
The house through the build
Palette before layout
Fourteen custom properties, half of them gold at different alphas. Charcoal, ivory, gold, bronze, slate — nothing else was allowed in.
The centred grid
A single measure column centred in the container, with plates allowed to break wider. No sidebars, no asymmetry.
The ornament
A rotated square between two hairline gradients, drawn in CSS. It separates every section and is the page's only decoration.
The gallery timer
A crossfade on an interval with diamond dots for position, pausing on
mouseenterandfocusinso it never fights the visitor.The enquiry form
Built last, so it inherits the type and spacing rather than imposing its own.
05 · Architecture
Three files
├── index.html 27.4 KB — 8 sections, 13 plates
├── styles.css 33.6 KB — 14 custom properties, 5 media queries
└── script.js 15.2 KB — 450 lines: header · menu · reveals · gallery · form
The stack
- Semantic HTML
- CSS Grid
- Custom properties
- IntersectionObserver
- setInterval
- Cormorant Garamond
- Jost
Accessibility
- Focus trap
- aria-modal
- aria-live
- Pause on focus
- Escape to close
- Focus restore
06 · What fought back
What fought back
An auto-advancing gallery is hostile to anyone reading at their own pace, and actively breaks keyboard use: focus lands on a slide that then slides away.
The timer pauses on mouseenter and focusin, and resumes only on the matching leave. Tabbing into the gallery stops it dead, which is the behaviour a keyboard user expects and almost never gets.
Gold on charcoal is beautiful and frequently illegal: #C7A867 on #101314 passes, but the bronze it pairs with does not at body size.
Bronze was demoted to a decorative-only token — rules, borders and hover states — and slate took over as the readable secondary. The palette kept its range without shipping unreadable text.
A full-screen mobile menu is where focus escapes: tab far enough and you are in the page behind it, invisibly.
The panel cycles Tab in both directions between its own first and last focusable elements, and returns focus to the burger on close.
Centred layouts fall apart at long line lengths — a centred paragraph 90 characters wide is unreadable no matter how elegant the type.
The measure is capped at 60 characters and centred with margin-inline: auto, so the axis holds while the line length stays comfortable.
07 · Worth keeping
The parts worth keeping
The House Through the Years
A heritage timeline that reads as a printed record rather than an infographic — dates, one line each, no icons.
Diamond dots
Gallery position markers rotated 45 degrees to match the brand mark. Four lines of CSS, no image.
Guest words
Testimonials set as centred pull quotes with the room name beneath, borrowing the hotel's own stationery hierarchy.
A booking enquiry
Seven fields that ask what a concierge would ask, and confirm in a polite live region rather than a modal.
08 · Run it live
Run it here
The real build, embedded and running. It loads on demand — nothing is fetched until you ask for it.
Skip the live preview
The real build, running in the page. The live preview is an embedded page; press Escape to leave it.
Open full screen ↗
