Palazzo Marzano

Palazzo Marzano is fourteen rooms in a 1712 palazzo on Ortigia, the island at the tip of Siracusa. Six rooms open onto the courtyard from €260 a night; six sit above the roofline with the Ionian between two chimneys, from €340; two suites hold the corner of the noble floor at €520. The old stables are the dining room — one barrel vault, twenty-four covers, four courses at €62, served at nine, because that is the hour Sicily actually eats. Breakfast is granita and a brioche in the courtyard until eleven.

None of that is why anyone books. People book a house like this for a feeling they cannot name in advance: coming in off a four-metre-wide street through a door that gives no warning, and having the noise of the island cut off behind them like a tap turned off.

The client's brief was three sentences long and one of them mattered most. Make it relaxing and quiet. Round the buttons off. And keep the structure — the page works, do not redesign it. So this was a rebrand at the level of palette, geometry, type, copy and photography, on a skeleton that was already right.

Round the buttons off is the kind of note that sinks a project, because the obvious way to do it is to make everything friendly — big radii, soft colours, a warm little wave of informality — and a three-hundred-year-old palazzo is not friendly. It is calm, which is a different thing and a more expensive one.

So we did not take the roundness from informality. We took it from the architecture. The building is a courtyard with a house around it: a two-storey loggia, twenty-two columns, and an arch between every pair of them. Everything the hotel is — the shade, the quiet, the way you cross the cortile to get anywhere — is that arch, repeated.

Which gave the rule the whole build hangs from: the buttons are pills and the photographs have arched heads because the palazzo is made of arches, not because the hotel is casual. The register stays formal. Formal and relaxed can share a room; formal and loud cannot.

The palette is the building with nothing added: honey limestone bleached by sea air for the page, the deep blue of the shutters for the ink, aged brass on the hardware, terracotta once — on the one button that matters — and white linen for the paper of the house. The menu and the enquiry card are both that linen, because in a hotel like this, paper is what carries a promise.

The arch head is not a radius at all. A radius rounds the top of a box and that is all it can do — it cannot spring, seat an impost or hold a keystone. So the head is an SVG path cut with `clip-path`, the brass hardware laid back over it unclipped: semicircular on the 3:4 portrait frames, segmental — a rise of 0.19 of span — on the wide room photograph, the impost marked as two short ticks at the jambs. Every frame on the page carries one: a rectangular photograph would be the one thing in the building that is not an arch.

The page even opens through it — a stone wall with one arch cut through, widening until the courtyard is the whole screen, in CSS alone. And the scroll moment is the fullest statement of it. One arch pinned to the viewport, centred like an altarpiece, and six hours pass inside it: the empty water at 07:15, breakfast under the loggia at 08:30, the facade in the hard noon of Via Marzano, the shutters half over at three, the sea in a bathroom window at seven, the table under the vault at nine. The surface behind the arch is the light of the hour — morning stone through noon and honey to amber, until at 21:00 the page goes to night and the type turns linen. Frames and light crossfade over 1.5 scrub-units on `sine.inOut`; the words cross faster, because in a room the light changes and *then* you notice.

Under the arch, a colonnade: six small arches, one per hour, drawn in brass hairline, the one you are standing in filled terracotta — and at night filled stone, a window with a lamp behind it. A progress indicator that is also the building.

The hour crowns the arch and its line sits under it, on the solid surface of the hour — never on the photograph. Type stands on a photograph exactly once — the hero's wordmark, inside a fixed ink scrim whose worst case was sampled per pixel from the rendered frame: the display clears 3:1, the 12px stamp 4.5:1, over the brightest stone behind them. Type on a solid surface has a contrast ratio you can compute. Type on an unmeasured photograph has a ratio you can only hope about.

The roundness comes from the architecture, not from informality. Formal and relaxed can share a room. Formal and loud cannot.

Most hotel sites open with a booking engine: a date picker, a rate grid, and a carousel of amenities that could belong to any hotel in Europe. That page is built for somebody who has already decided to stay, and almost nobody arriving on a hotel's homepage has. The visitor who is actually there is trying to picture herself somewhere, and only photography answers that.

So the page hands the argument to the photographs and stays quiet for as long as it takes, then asks plainly. Rates are hung like a menu on the way past — from €260, from €340, from €520, breakfast in. A hotel that makes you ask for the price is one you have already begun to distrust.

The ask is a room enquiry form, and it is real. It wants an arrival, a departure, a room, a number of guests, a name and an email. It refuses a departure that falls before the arrival, refuses a date that has already gone, and enforces the two-night minimum with a reason rather than an error code: nobody unpacks in one. It names precisely what is missing, and it clears each complaint the moment you start fixing it instead of waiting to scold you at the next submit.

And it sends nothing, and it says so. Palazzo Marzano does not exist, so the honest thing to do at the exact moment a visitor hands over a date and an email address is to admit it. The success panel leads with the disclosure — this is a concept build, nothing was sent, here is how it was made — and only then shows the enquiry underneath, as flavour: two nights in a Camera del Mare, held for you, the desk would answer today. That order is the whole point. The conversion design still gets to do its work, and nobody is fooled by it.

Next.js App Router, React 19, TypeScript strict, Tailwind v4 and the case's own `case.css`. GSAP with ScrollTrigger pins the day; Lenis smooths the scroll. The case imports nothing from sharphaw.com — no shared component, no token, no stylesheet — and a test enforces that wall.

Cormorant Garamond sets the display and Jost the body: a Garalde with the manners of a Roman inscription, over a geometric humanist quiet enough to disappear beneath it. Prices and hours are set in the serif with its own proportional figures — tabular figures forced every digit into a 35.7px advance that Cormorant's 24.3px `1` was never drawn to fill, and rendered the hour as 07:1 5.

Every colour pair was computed, not estimated, and the arithmetic rejected three choices that all looked correct. Aged brass as text is 2.97:1 on honey stone — beautiful, unreadable, and now hardware only: it draws keylines and fills arches and never sets a word. The first muted ink sat at 4.22:1, which fails every caption on the page and the placeholder inside a focused field. Terracotta at rest sat at 4.72:1 under a linen label — legal, with nothing in hand — so it became the hover state and a deeper terracotta took the resting button. Twenty-two pairs are tabled in DESIGN.md, six more for the light of the day, and every one of them clears 4.5:1.

Dim, throughout, is a colour and never an opacity — disabled buttons, placeholders and the footer disclosure step down a measured ladder rather than fading, because faded text fails contrast at exactly the moment somebody needs to read it. The form's surfaces are solid all the way down: linen card, stone field, deeper stone on focus. No glass, no blur, no transparency.

Ask the browser for reduced motion and the case does not degrade — it changes shape. Lenis is never constructed, no ScrollTrigger is ever created, every GSAP tween is gated behind `gsap.matchMedia()`, the hero's stone wall never exists at all, and the pinned day unstacks into six static bands carrying the same six photographs, the same six lines and the same morning-to-night surfaces. All six hours are in the server-rendered DOM at all times, because an hour that only exists once you have scrolled to it is an hour no crawler and no screen reader will ever read.