--- version: alpha name: Hotel Bell description: A dusty rose lobby with two violets, where the brighter one is only ever a price and no price appears without its per-night basis. meta: id: "theme-hotel-bell" model: "Claude Opus 5" author: "Claude Code" createdAt: "2026-09-02T00:58:18+09:00" updatedAt: "2026-09-02T00:58:18+09:00" version: "1.0.0" isNew: false lookbook: tagline: Two nights, two guests — every price says so. bestFor: Hotels and lodging, holiday rentals, resorts, spa and treatment booking, travel packages avoidFor: Flat-rate products, subscriptions, anything not priced by occupancy and duration defaultMode: light surfaceStyle: flat accentUse: text caseStyle: labels-upper borderWidth: 1px imageTreatment: warm motion: intensity: 2 duration: 300ms ease: "cubic-bezier(0.33, 1, 0.68, 1)" signature: "Prices recalculate with a brief tint of the accent, then settle. The number changing colour for 300ms is the confirmation that it changed." displayFont: Lustria displayKind: serif bodyFont: Radio Canada monoFont: Courier Prime colors: background: "#C4B3B6" foreground: "#000000" card: "#BAA9AC" card-foreground: "#000000" popover: "#BAA9AC" popover-foreground: "#000000" primary: "#4D427D" primary-foreground: "#FFF8F9" secondary: "#B39DA1" secondary-foreground: "#000000" muted: "#B39DA1" muted-foreground: "#4A3139" accent: "#451499" accent-foreground: "#FFF8F9" destructive: "#94010D" destructive-foreground: "#FFF8F9" border: "#A69296" input: "#A69296" ring: "#4D427D" chart-1: "#595086" chart-2: "#636424" chart-3: "#634272" chart-4: "#58723B" chart-5: "#394879" colorsDark: background: "#2C161B" foreground: "#FFEDF1" card: "#3E1E26" card-foreground: "#FFEDF1" popover: "#3E1E26" popover-foreground: "#FFEDF1" primary: "#ACA3E6" primary-foreground: "#18080B" secondary: "#532632" secondary-foreground: "#FFEDF1" muted: "#532632" muted-foreground: "#B1979E" accent: "#A694FF" accent-foreground: "#18080B" destructive: "#FF8478" destructive-foreground: "#18080B" border: "#633943" input: "#633943" ring: "#ACA3E6" chart-1: "#A9A1DD" chart-2: "#A3A566" chart-3: "#C7A3DA" chart-4: "#86A36A" chart-5: "#A4B8F1" typography: display-lg: fontFamily: Lustria fontSize: 58px fontWeight: 400 lineHeight: 1.08 letterSpacing: -0.02em headline-lg: fontFamily: Lustria fontSize: 33px fontWeight: 400 lineHeight: 1.18 letterSpacing: -0.012em headline-md: fontFamily: Lustria fontSize: 20px fontWeight: 500 lineHeight: 1.32 body-lg: fontFamily: Radio Canada fontSize: 16.5px fontWeight: 400 lineHeight: 1.64 body-md: fontFamily: Radio Canada fontSize: 15px fontWeight: 400 lineHeight: 1.62 body-sm: fontFamily: Radio Canada fontSize: 13px fontWeight: 400 lineHeight: 1.5 label-caps: fontFamily: Radio Canada fontSize: 10.5px fontWeight: 600 lineHeight: 1.1 letterSpacing: 0.16em label-mono: fontFamily: Courier Prime fontSize: 13px fontWeight: 400 lineHeight: 1.45 numeral-xl: fontFamily: Courier Prime fontSize: 46px fontWeight: 400 lineHeight: 1.02 letterSpacing: -0.015em rounded: none: 0px sm: 3px md: 5px lg: 8px xl: 12px full: 9999px spacing: base: 16px xs: 4px sm: 8px md: 16px lg: 28px xl: 56px gutter: 22px margin: 32px measure: 64ch components: button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.primary-foreground}" rounded: "{rounded.sm}" padding: 13px button-ghost: backgroundColor: transparent textColor: "{colors.foreground}" rounded: "{rounded.sm}" padding: 13px card-panel: backgroundColor: "{colors.card}" textColor: "{colors.foreground}" rounded: "{rounded.md}" padding: 22px badge-label: backgroundColor: "{colors.secondary}" textColor: "{colors.secondary-foreground}" typography: "{typography.label-caps}" rounded: "{rounded.sm}" --- # Hotel Bell ## Overview Hotel Bell books rooms. Its rule is about honesty in pricing: **no price is rendered without its basis.** Every figure in the system is followed by the occupancy and duration it assumes — "£420, 2 nights, 2 guests" — and there is a nights-and-guests bar pinned to the top of every screen that defines those values globally. That kills the standard lodging pattern of a "from £89" headline that becomes £340 at checkout. If the bar says two nights and two guests, every price on every screen is for two nights and two guests, including the marketing pages. The bar is not a filter that can be dismissed. It is the frame of reference, and a page rendered without it would be showing numbers that mean nothing. Dusty rose lobby, two violets. It suits lodging, resorts and treatments. It is wrong for flat-rate products, which have no basis to state. ## Colors A warm mid lobby and two violets, one of which is money. - **Ground:** dusty rose, a mid-tone. Cards lift lighter; the booking summary well sits darker. - **Primary (deep violet):** book, reserve, confirm. Deep enough to read as considered rather than urgent. - **Accent (bright violet):** **text**, and it is *only* ever a price. Nothing else in the system may use it — not a link, not a heading, not a badge. Solved to 4.5:1, because it lands on figures. - **Neutrals** are rose-tinted. - Charts are duotone and confined to the host dashboard: occupancy and rate, nothing more. ## Typography Lustria for the property, Radio Canada for detail, Courier Prime for the basis. - **Display:** Lustria at 400, 58px. A single-weight serif with a warm, slightly wide colour — it reads as hospitality without going to script. - **Body:** Radio Canada at 15px, 1.62, 64ch. A clear public-sector grotesque with excellent numerals. - **Courier Prime** carries dates, confirmation codes, and — importantly — the **basis line** under every price. Setting the basis in a typewriter mono makes it read as terms rather than as marketing. - Uppercase at 0.16em for room class and amenity labels. ## Layout **The basis bar, then the rooms.** A pinned 64px bar carries check-in, check-out, nights and guests, all in Courier Prime, on every screen including the homepage and the content pages. It is 64px and it never collapses to an icon. A room is: a 3:2 image, class in uppercase, name in Lustria, three amenity labels, then the price block — figure in accent, basis in mono directly beneath. Price and basis are one component and cannot be rendered apart. A 12-column grid at 1280px, 22px gutters, 28px section rhythm. Generous — a lodging site is allowed to breathe. ## Elevation & Depth Flat with 1px borders. The only elevated element is the booking summary, which becomes a sticky card on the right at 360px with a soft shadow, because it genuinely floats over the content while you scroll a room list. When the bar changes, every price on screen tints to the accent for 300ms and settles. That tint is the system's only feedback that recalculation happened, and it is enough — a spinner over a price implies the price is unknown, and it is not, it is just different now. ## Shapes Softly rounded — 5px on cards, 8px on panels, 12px on images. Nothing pill- shaped; a pill in this system would read as a tag and the tags here are square. Photography is warm-graded: rooms in afternoon light, corridors, a made bed, a pool at dusk. Always at 3:2. Never a person in a bathrobe. ## Components - **Basis bar:** check-in, check-out, nights, guests — four mono fields at 64px height, pinned, present on every screen. - **Price block:** figure in accent at numeral-xl or headline size, basis line in Courier Prime beneath at 13px. Never one without the other. - **Room card:** 3:2 image, uppercase class, Lustria name, three amenity labels, price block, primary button. - **Booking summary:** sticky 360px card, line items with mono bases, a double rule above the total. - **Availability strip:** 14 day cells with the selected range in primary and unavailable dates struck through in mono. ## Do's and Don'ts - Do pin the basis bar to every screen, including marketing pages. - Do render price and basis as one inseparable component. - Do keep the accent exclusively for prices. - Don't show a "from" price without its basis. - Don't collapse the basis bar to an icon on any breakpoint. - Don't use the accent for a link or a heading. - Don't put a spinner over a recalculating price.