---
version: alpha
name: "Boutique hotel template by 8B"
description: "A one-page boutique hotel site in warm off-white, dark ink and terracotta, with light uppercase serif headings and photos that open from small windows. Free HTML template by 8B, MIT."
colors:
  primary: "#191615"
  secondary: "#a3401a"
  neutral: "#f3efea"
  surface: "#f3efea"
  on-surface: "#191615"
  surface-card: "#fbfaf7"
  caption: "#67625d"
  accent-terracotta: "#a3401a"
  night: "#191615"
  on-night: "#fbfaf7"
typography:
  headline-display:
    fontFamily: Source Serif 4
    fontSize: 96px
    fontWeight: 300
    lineHeight: 0.95
    letterSpacing: -0.01em
  headline-scene:
    fontFamily: Source Serif 4
    fontSize: 122px
    fontWeight: 300
    lineHeight: 0.95
    letterSpacing: -0.01em
  headline-statement:
    fontFamily: Host Grotesk
    fontSize: 32px
    fontWeight: 500
    lineHeight: 1.12
    letterSpacing: -0.02em
  body-md:
    fontFamily: Source Serif 4
    fontSize: 17px
    fontWeight: 400
    lineHeight: 1.55
  label-md:
    fontFamily: Host Grotesk
    fontSize: 12.5px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0.08em
  button:
    fontFamily: Host Grotesk
    fontSize: 12.5px
    fontWeight: 500
    lineHeight: 1
    letterSpacing: 0.08em
  question:
    fontFamily: Host Grotesk
    fontSize: 22px
    fontWeight: 500
    lineHeight: 1.25
    letterSpacing: -0.01em
  input:
    fontFamily: Host Grotesk
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.4
  wordmark:
    fontFamily: Source Serif 4
    fontSize: 22px
    fontWeight: 400
    lineHeight: 1
    letterSpacing: 0.14em
rounded:
  corner: 2px
spacing:
  gutter: 32px
  section-pad: 190px
  button-height: 44px
  button-height-large: 48px
  field-height: 44px
components:
  button-light:
    backgroundColor: "{colors.surface-card}"
    textColor: "{colors.primary}"
    typography: "{typography.button}"
    rounded: "{rounded.corner}"
    padding: 0 22px
    height: 44px
  button-light-hover:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.surface-card}"
  button-dark:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.surface-card}"
    typography: "{typography.button}"
    rounded: "{rounded.corner}"
    padding: 0 26px
    height: 48px
  button-dark-hover:
    backgroundColor: "{colors.secondary}"
    textColor: "{colors.surface-card}"
  logo-pill:
    backgroundColor: "{colors.surface-card}"
    textColor: "{colors.primary}"
    typography: "{typography.wordmark}"
    rounded: "{rounded.corner}"
    padding: 0 18px
    height: 44px
  card-room-facts:
    backgroundColor: "{colors.surface-card}"
    textColor: "{colors.primary}"
    typography: "{typography.body-md}"
    rounded: "{rounded.corner}"
    padding: 28px
  question-row:
    textColor: "{colors.primary}"
    typography: "{typography.question}"
    padding: 22px 14px
  input-field:
    backgroundColor: transparent
    textColor: "{colors.primary}"
    typography: "{typography.input}"
    height: 44px
---

# Hotel Ostro

## Overview

Hotel Ostro is a one-page template for a small boutique hotel or guesthouse: a house history, three kinds of room, an hour-by-hour day, a table, four outings, a grid of the town, questions and a stay request form. The idea is a house described by its hours, not by a list of features. Large light serif capitals sit on a warm off-white ground, and one terracotta carries the small signals. Photos arrive through small windows that open. It suits an owner who wants guests to feel the pace of a place before they ask for dates. All names, prices and places are invented demo content.

## Colors

The page uses five colours, set as `--color-1` to `--color-5` in `:root`.

- `neutral` and `surface` (#f3efea): the page ground, the full-screen menu, the footer and the first row of the day section.
- `primary`, `on-surface` and `night` (#191615): text, hairline rules at low opacity, the fill of dark buttons, the opening's dark block, the last row of the day section and the shade under the room names.
- `secondary` and `accent-terracotta` (#a3401a): room-kind labels, outing times, the form message, the hover fill of dark buttons and the afternoon row of the day section. Blended with white or ink it gives two more rows of the day.
- `caption` (#67625d): captions under photos, field labels, fact labels, the menu head and small footer lines.
- `surface-card` and `on-night` (#fbfaf7): light buttons, the logo pill, room fact cards, outing plates, the second day row and text on dark grounds.

## Typography

Two families load from Google Fonts. Source Serif 4 (weights 300 and 400, with italics) is the voice: 17px body at line height 1.55, and display headings at weight 300 in uppercase with line height 0.95 and tracking -0.01em. The spaced wordmark uses it at 22px with 0.14em tracking. The first headline sets one word in italic, without uppercase.

Host Grotesk (400 to 500) is the working face: labels at 12.5px weight 500, uppercase, tracking 0.08em; buttons in the same style; statements and quotes at 22 to 32px with tight tracking -0.02em (the opening statement grows to 54px); form fields at 16px regular, fact values and footer links.

Display sizes use `clamp()`: section headings run from 40px to 96px, the room-name line to 116px, the day phrases to 122px and the guest-book sentence to 152px. The footer wordmark is fitted by `--len`, the number of its letters.

## Layout

Every section changes shape, but all share a gutter of 16 to 32px and generous vertical padding (up to 190px, set from the viewport height). Headings are usually centred. The history is a ledger of three photos in 6:3:4 columns. The room stage is a full-screen frame. The day is six tall rows of about 76% of the screen height. The table is a split section with a held photo on the left. Outing plates stack. The harbour is a five-column grid of fifteen tall photos with a clearing in the middle column. Questions and contact are two columns with the intro or the form held in view.

At 860px and below the split sections become one column; at 760px the harbour grid has three columns and the history ledger two; at 640px the opening window turns tall and narrow and the room facts stretch across the screen. The bar keeps the same three parts at every width.

## Elevation & Depth

Depth comes from layers, not from soft shadows. Light buttons, the logo pill and the fact cards carry a one-pixel ring in ink at 4% plus a faint terracotta-tinted lift (0 10px 34px at 13%). Focused light buttons get a 7px halo in the card colour. Outing plates sit in a vertical stack and darken as the next one covers them. The room photos wipe over each other, and a gradient of ink at the bottom of the room stage keeps the names readable.

## Shapes

Corners are square with a 2px radius on buttons, cards and plates. Photos have no rounding and are cropped by their frames: 3:2, 4:5 and square in the history ledger, 4:5 in the harbour grid, 3:2 in contact. Rules are hairlines. The only drawn shape is the clip: the opening window and the picture apertures are rectangular cut-outs that grow.

## Components

- `button-light`: the Book a room button in the bar and on the first screen, and the harbour and table buttons. A dark fill grows from the middle of the label on hover.
- `button-dark`: Send the request and Subscribe. A terracotta fill grows from the middle on hover.
- `logo-pill`: the centred wordmark in the bar.
- `card-room-facts`: the surface carrying the kind of room, one sentence, size, sleeps and price, and an underlined link.
- `question-row`: a native details element; a light fill grows on hover and the plus turns into a minus.
- `input-field`: borderless fields with a one-pixel ink underline, labels in small capitals, and a terracotta outline on focus.

## Motion

The page loads GSAP, ScrollTrigger, SplitText and Lenis from jsDelivr. The one motion idea is a window that opens: the opening photo, the pictures and the footer wordmark all grow from a small cut-out. Smooth scrolling runs page-wide.

- Opening: on load the headline lines rise and the small window scales in, while the photo drifts sideways in a loop. Scrolling opens the window to the full frame, the lede and buttons drop away, and a statement and three facts arrive over a dark shade.
- House, table, contact: headings slide in by line from alternating sides; photos open from windows with a slight zoom out; some photos drift inside their frame as you scroll.
- Rooms: pinned for about two screens of scroll. Each next photo wipes in from the right while the line of room names slides and lights the current one.
- Day: the section background and ink take each hour's colours as the row reaches the middle of the screen; the large phrases drift sideways.
- Outings: plates stick and shrink to 90% with a darker tone as the next plate rises.
- Harbour: tile rows near the middle part sideways and the middle column shrinks.
- Guest book: the halves of the sentence slide together.
- Footer: the wordmark opens from a narrow window.

With reduced motion, entrance and scroll animations and smooth scrolling are off, and the page reads in full. The bar still hides on scroll and buttons still fill on hover.

## Do's and Don'ts

- Do keep terracotta for small signals: labels, times, hover fills and one band of the day. Do not use it for large panels or backgrounds beyond the day row it already has.
- Do keep headings in light uppercase serif; do not add a bold display face or a third family.
- Do keep corners at 2px; do not add rounded cards, pills or heavy shadows.
- Do keep photos real and warm, cropped in the frames' ratios; do not add icon sets, illustrations or gradients over photos other than the ink shade.
- Do keep one idea of motion, the opening window; do not add bouncing or spinning effects or more loops than the slow drift of the first photo.
- Do write short, concrete copy with times and sizes; do not use review stars, badges or stock slogans.
- Do set `--len` on the footer wordmark when the name changes.
- Do keep the section ids and the `data-8b-section`, `data-8b-motion` and `data-8b-part` attributes that the scripts read.