Skip to content
VibeFather
Early access
↗

About this template

Tidestone is a three-page website template for a small independent hotel: a home page, a rooms page and a local guide. It is built to look like a place that is open and taking guests tomorrow, not a mood board. The default content describes a 24-room hotel on a granite headland, with three room types, a dining room and bar, seasonal offers, guest reviews, an FAQ and a contact block with a hand-drawn map.

It suits freelancers building sites for guesthouses, inns and small hotels, and owners who want a calm, credible site without a booking platform's look. The centrepiece is a client-side booking widget: a two-month date-range calendar with unavailable nights, a guest stepper that respects each room's capacity, a room picker, a nightly price breakdown with weekend supplement and local tax, and a confirmation screen with a reference code. Everything runs in the browser, so you can later wire the confirm step to whatever reservation system the property already uses.

The design is quiet coastal editorial. Warm off-white paper, deep sea-slate ink and a single weathered rust accent; a large Cormorant Garamond display face over Hanken Grotesk text, with IBM Plex Mono for rates and codes. Full-bleed public-domain and CC0 coastline photographs sit beside matching interior shots of the rooms, dining room, breakfast and bar. Small-caps labels, hairline rules and asymmetric image and text splits keep long pages easy to scan. Motion is slow and restrained: fade-and-rise reveals and a gentle scale on the photographic bands, all switched off for reduced motion.

To adapt it, change the hotel name, the place, the property description and the currency. The prompt keeps all copy in one content file, so room names, rates, menu dishes, guide entries and FAQ answers can be rewritten in one pass while the layout stays the same.

The template prompt

The live demo was built from exactly this text — nothing added.

# Tidestone — Boutique Hotel Website with Booking Widget

Build this website exactly as described below. Replace the [VARIABLES] with your own values; keep everything else.

## Brief
A three-page static website for [BRAND], a [STAY] above [PLACE]. It must feel like a real, operating hotel: real coastal photographs and matching interior photographs, a rooms catalogue with sizes, capacities, nightly rates in [CURRENCY] and amenities, a client-side availability and booking widget (date-range calendar, guests, room choice, price summary, fake confirmation with reference code), the restaurant and bar with opening hours and menu highlights, seasonal offers, guest reviews, an FAQ, contact details and a map drawn in SVG, plus a local guide page with an interactive SVG map. Pages: index.html (home), rooms.html (rooms and rates), guide.html (local guide).

- Audience: Couples and small families planning a two-to-four-night coastal break, who want to see the rooms, know the exact price and check dates before they commit; plus walkers and food travellers looking for a quiet base.
- Goal: Get a visitor from the first photograph to a priced, date-checked booking request in as few steps as possible, while showing enough of the rooms, food and surroundings to make the stay feel worth it.
- Tone: Calm, specific and warm. Short declarative sentences, concrete facts (sizes, times, distances, prices), dry understatement instead of superlatives. Never 'luxury', 'unforgettable', 'nestled' or 'hidden gem'.

## Stack
- Framework: Vite 5 + React 18 + TypeScript
- Styling: Tailwind CSS 3.4
- Libraries: react (MIT), react-dom (MIT), motion (motion.dev, import from motion/react) (MIT), lucide-react (ISC), @fontsource/cormorant-garamond (OFL-1.1), @fontsource-variable/hanken-grotesk (OFL-1.1), @fontsource/ibm-plex-mono (OFL-1.1), @vitejs/plugin-react (dev) (MIT), tailwindcss, postcss, autoprefixer (dev) (MIT), typescript (dev) (Apache-2.0)
- Build: `npm run build` → static files in `dist/`. No backend, no server code, no external APIs.
- Setup:
  - Scaffold with Vite's react-ts template. package.json scripts: dev = vite, build = tsc -b && vite build, preview = vite preview.
  - vite.config.ts: plugins [react()], base './', build.sourcemap false, build.outDir 'dist', build.rollupOptions.input = { main: 'index.html', rooms: 'rooms.html', guide: 'guide.html' } (resolve each with path.resolve(__dirname, ...)).
  - Three HTML entry files at the project root (index.html, rooms.html, guide.html), each with <title>[BRAND] · Home|Rooms & rates|Local guide</title>, <link rel='icon' href='./favicon.svg' type='image/svg+xml'>, a <div id='root'>, and a module script pointing to src/entries/home.tsx, src/entries/rooms.tsx or src/entries/guide.tsx.
  - src/main.css: @tailwind base/components/utilities; import the fonts there or in src/fonts.ts: @fontsource/cormorant-garamond/400.css, 500.css, 600.css, 400-italic.css; @fontsource-variable/hanken-grotesk; @fontsource/ibm-plex-mono/400.css, 500.css.
  - tailwind.config.ts: content ['./index.html','./rooms.html','./guide.html','./src/**/*.{ts,tsx}']; theme.extend.colors = { paper:'#F4EFE6', shell:'#EAE3D6', ink:'#1F2A30', slate:'#46565E', mist:'#8B979B', rule:'#D3CABB', rust:'#B5532E', 'rust-deep':'#8F3F21', sea:'#DCE4E3', night:'#172126', kelp:'#56634B' }; fontFamily = { display:['"Cormorant Garamond"','Georgia','serif'], sans:['"Hanken Grotesk Variable"','system-ui','sans-serif'], mono:['"IBM Plex Mono"','ui-monospace','monospace'] }; letterSpacing.label = '0.18em'.
  - All copy, rates, room data, menu items, offers, reviews, FAQ, guide places and map pin coordinates live in one file, src/content.ts, exported as typed constants. Components read only from it. When the variable values differ from the defaults, rewrite all copy in content.ts to fit the new brand, place and property while keeping the same structure, counts and lengths.
  - Shared components in src/components: Header, Footer, Reveal (motion wrapper), PhotoBand, BookingWidget (with Calendar, GuestStepper, RoomPicker, PriceSummary, Confirmation), BookingDrawer, Accordion, CoastMap (SVG), SectionLabel.
  - Booking logic in src/lib/booking.ts as pure functions: isUnavailable(date, roomIndex), nightsBetween, priceFor(roomId, checkIn, checkOut, adults, children), referenceCode(input). Dates are handled as local YYYY-MM-DD strings; no date library.
  - Images live in public/images (downloaded files, see Assets) and are referenced as ./images/<file>. public/favicon.svg is a 32x32 rust (#B5532E) rounded square (rx 7) with three paper-coloured horizontal wave strokes.
  - Write ASSETS.md at the project root listing every third-party file: path, source URL, author, license. Add a README.md with npm install / npm run dev / npm run build.

## Variables
- [BRAND] — Hotel name (default: "Skerry House"). Invented property name. Used in the wordmark, page titles, copy and the booking reference prefix.
- [PLACE] — Location (default: "Porthkell Head"). Invented headland, village or valley. Used in copy, the guide and the map labels.
- [STAY] — Property (default: "24-room hotel on a granite headland"). What the place is, with its room count. Room counts in the catalogue must add up to this number.
- [CURRENCY] — Currency symbol (default: "€"). Symbol used for every rate and total. Place it the way the currency is normally written (€165, 1 650 kr).
- [CREDIT] — keep a small "Template by VibeFather" link to https://vibefather.ai/t/tidestone in the footer (default: yes; delete this line to remove it)

The copy under Pages & Sections is written for the default values. If your values differ, rewrite every headline, paragraph, label and image for them — same length, tone and structure. Layout, colors, type and motion stay as described.
Keep all copy, image paths and links in one content file (for example `src/content.ts`), keyed by section, so the content can be swapped later without touching components.

Pro template. The design, sections, motion and assets parts of this prompt are for Pro members. The live demo and DESIGN.md stay free.

Join Pro early access →

DESIGN.md

The design system on its own — colors, type, spacing and motion. Apply this look to a project you already have.

---
name: "Tidestone"
colors:
  paper: "#F4EFE6"
  shell: "#EAE3D6"
  ink: "#1F2A30"
  slate: "#46565E"
  mist: "#8B979B"
  rule: "#D3CABB"
  rust: "#B5532E"
  rust_deep: "#8F3F21"
  sea: "#DCE4E3"
  night: "#172126"
  kelp: "#56634B"
typography:
  display_h1_desktop_88px_line_height_0_98_tracking_0_01em_mobile_48px_h2_desktop_56px_1_04_mobile_36px_h3_room_and_section_names_32px_1_1_pull_quotes_and_review_quotes_italic_400_30px_desktop_24px_mobile: { family: "Cormorant Garamond", weights: [400, 500, 600] }
  text_body_17px_1_65_mobile_16px_ui_15px_weight_500_buttons_15px_weight_600_small_caps_section_labels_12px_weight_600_uppercase_tracking_0_18em_in_rust: { family: "Hanken Grotesk", weights: [400, 500, 600] }
  mono_rates_sizes_in_the_spec_tables_opening_hours_distances_map_pin_numbers_and_the_booking_reference_code_14px_weight_400_500_tabular_figures: { family: "IBM Plex Mono", weights: [400, 500] }
spacing: "8px base unit. Content max-width 1240px with 32px side padding on desktop and 20px on mobile; 12-column grid with 24px gutters. Section vertical padding 128px desktop / 80px mobile. Stack headline to body 24px, body to CTA 32px. Hairline rules (1px Rule) separate sections inside the same background; labels sit 16px above headlines."
radius: "Mostly square and editorial: photographs 0px, cards and table containers 2px, inputs and calendar days 2px, buttons 999px pill, filter chips 999px pill, drawer 0px on desktop and 16px top corners on mobile bottom sheet."
---

# Tidestone — Design System

Apply this design system to an existing project. It describes the look and feel only; for the full site, use prompt.md.

## Colors
- **Paper** `#F4EFE6` — Page background, header after scroll, drawer and calendar background
- **Shell** `#EAE3D6` — Alternate section background (rooms preview, offers, FAQ), input fields, calendar range fill
- **Ink** `#1F2A30` — Headlines and body text, primary outline buttons, selected calendar day fill
- **Slate** `#46565E` — Secondary text, captions, table values
- **Mist** `#8B979B` — Muted text, disabled and unavailable calendar days, placeholder text
- **Rule** `#D3CABB` — 1px hairline rules, card borders, table lines, accordion dividers
- **Rust** `#B5532E` — The only accent: primary CTA fill, small-caps labels, map hotel pin, active filter chip, focus ring
- **Rust deep** `#8F3F21` — Primary CTA hover and pressed state
- **Sea** `#DCE4E3` — Sea fill and contour lines in the SVG maps
- **Night** `#172126` — Footer background, photo gradient overlays (at 0-70% opacity)
- **Kelp** `#56634B` — 'Available' status dot and text in the room picker

## Typography
- **Display: H1 (desktop 88px / line-height 0.98 / tracking -0.01em, mobile 48px), H2 (desktop 56px / 1.04, mobile 36px), H3 room and section names (32px / 1.1), pull quotes and review quotes (italic 400, 30px desktop / 24px mobile)** — Cormorant Garamond (OFL), weights 400/500/600. Self-host the font files.
- **Text: body 17px / 1.65 (mobile 16px), UI 15px weight 500, buttons 15px weight 600, small-caps section labels 12px weight 600 uppercase tracking 0.18em in Rust** — Hanken Grotesk (OFL), weights 400/500/600. Self-host the font files.
- **Mono: rates, sizes in the spec tables, opening hours, distances, map pin numbers and the booking reference code, 14px weight 400/500, tabular figures** — IBM Plex Mono (OFL), weights 400/500. Self-host the font files.

## Spacing & shape
- Spacing: 8px base unit. Content max-width 1240px with 32px side padding on desktop and 20px on mobile; 12-column grid with 24px gutters. Section vertical padding 128px desktop / 80px mobile. Stack headline to body 24px, body to CTA 32px. Hairline rules (1px Rule) separate sections inside the same background; labels sit 16px above headlines.
- Radius: Mostly square and editorial: photographs 0px, cards and table containers 2px, inputs and calendar days 2px, buttons 999px pill, filter chips 999px pill, drawer 0px on desktop and 16px top corners on mobile bottom sheet.

## Motion
- Reveal: section content fades and rises (opacity 0 to 1, y 24px to 0, duration 0.9s, ease [0.22, 1, 0.36, 1]) once when 30% in view, via motion's whileInView with viewport { once: true, amount: 0.3 }. Card groups stagger children by 0.08s.
- Hero photo: on load scales from 1.08 to 1.0 over 1.6s with ease [0.22, 1, 0.36, 1]; the headline and booking bar reveal 0.3s and 0.5s after.
- PhotoBand: full-bleed photo inside overflow-hidden wrapper; useScroll on the wrapper (offset ['start end','end start']) maps progress 0 to 1 onto image scale 1.12 to 1.0 and y -4% to 4%.
- Header: transparent with paper text over the hero; after 80px of scroll it transitions (300ms) to Paper background, Ink text and a 1px Rule bottom border.
- Image cards: on hover the photo scales to 1.04 over 600ms and the 'View room' link's arrow shifts 4px right.
- Accordion: height and opacity animate over 0.35s; the plus icon rotates 45 degrees.
- BookingDrawer: desktop slides in from the right (x 100% to 0, 0.45s) over a Night 50% backdrop; mobile slides up as a bottom sheet (y 100% to 0). Escape key, backdrop click and the close button dismiss it; focus is trapped inside while open and the body does not scroll.
- Calendar: selected range fills with Shell, start and end days fill Ink with Paper text; hovering a day after choosing check-in previews the range. Price summary numbers cross-fade (0.2s) when they change.
- prefers-reduced-motion: disable all transforms and scroll-linked effects (use useReducedMotion), keep content visible immediately; drawer appears without sliding.

## Imagery
Real photographs only for the coast and the house; everything else is drawn in code. Coast: five public-domain / CC0 photographs of granite cliffs, a sea stack, tide pools and a cove (listed in Assets). House: six matching interior photographs generated for this template (three room types, dining room, breakfast, bar) in a muted palette of off-white, oak, slate blue and rust. Photographs are always full-bleed or edge-to-edge inside their grid columns, never with drop shadows or rounded corners. Captions in 13px Slate sit 12px below images with a mono index ('01', '02'). No people's faces as hero images. Maps, the wordmark mark, the favicon and dividers are SVG. Icons are Lucide at 18px, stroke 1.5, in Slate.

## Tone
Calm, specific and warm. Short declarative sentences, concrete facts (sizes, times, distances, prices), dry understatement instead of superlatives. Never 'luxury', 'unforgettable', 'nestled' or 'hidden gem'.

---
— Prompt by VibeFather · https://vibefather.ai/t/tidestone · CC BY-NC 4.0 (non-commercial; commercial use needs a VibeFather Pro license) · Request removal: https://vibefather.ai/takedown