---
version: alpha
name: "Boat tour template by 8B"
description: "A photo-led one-page site for a harbour boat trip and charter operator: pale grey ground, near-black rounded panels and one orange accent. Free HTML template by 8B, MIT."
colors:
  primary: "#0c0d10"
  secondary: "#545a63"
  tertiary: "#ff8a1f"
  neutral: "#eef0f2"
  surface: "#ffffff"
  on-surface: "#0c0d10"
  night: "#070a0f"
  night-card: "#11161e"
  caption-on-night: "#a1a8b2"
typography:
  headline-display:
    fontFamily: National Park
    fontSize: 108px
    fontWeight: 300
    lineHeight: 1
    letterSpacing: -0.045em
  headline-lg:
    fontFamily: National Park
    fontSize: 64px
    fontWeight: 300
    lineHeight: 1.06
    letterSpacing: -0.035em
  headline-md:
    fontFamily: National Park
    fontSize: 52px
    fontWeight: 300
    lineHeight: 1.16
    letterSpacing: -0.03em
  title-md:
    fontFamily: National Park
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: -0.02em
  body-lg:
    fontFamily: National Park
    fontSize: 17px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: -0.005em
  body-sm:
    fontFamily: National Park
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.45
  label-md:
    fontFamily: National Park
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.3
    letterSpacing: 0.01em
  button:
    fontFamily: National Park
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1
    letterSpacing: -0.005em
  wordmark:
    fontFamily: National Park
    fontSize: 30px
    fontWeight: 300
    lineHeight: 1
    letterSpacing: 0.16em
rounded:
  panel: 22px
  card: 14px
  full: 999px
spacing:
  panel-margin: 8px
  nav-height: 64px
  gap: 18px
  card-padding: 32px
  section-padding: 160px
  panel-padding-x: 64px
components:
  button-primary:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.primary}"
    typography: "{typography.button}"
    rounded: "{rounded.full}"
    padding: 0 26px
    height: 52px
  button-primary-hover:
    backgroundColor: "{colors.tertiary}"
    textColor: "{colors.primary}"
  button-secondary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.surface}"
    typography: "{typography.button}"
    rounded: "{rounded.full}"
    padding: 0 26px
    height: 52px
  card-night:
    backgroundColor: "{colors.night-card}"
    textColor: "{colors.surface}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.card}"
    padding: 32px
  card-faq:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.primary}"
    typography: "{typography.title-md}"
    rounded: "{rounded.card}"
    padding: 0 24px
  badge-place:
    textColor: "{colors.surface}"
    rounded: "{rounded.full}"
    padding: 0 12px
    height: 28px
  input-field:
    textColor: "{colors.surface}"
    height: 46px
  nav-link:
    textColor: "{colors.primary}"
    typography: "{typography.button}"
---

## Overview

This is the design of a family harbour boat firm that sells seats from a pier kiosk: timetabled trips, a route of named places, old boats, three skippers and private charter. The one idea is a pale page that is cut by dark, rounded panels, with sea photographs doing the selling. The feeling is calm and weathered, not glossy: light type, tight spacing, a single orange that shows on hover and focus, and on the rating stars. It is for a local operator who wants visitors to see the water first and the fares second. The demo content, including prices in pounds, is invented.

## Colors

The page is two grounds and one accent.

- **Neutral (#eef0f2):** the page background, the solid navigation bar and the tab that holds the wordmark.
- **Primary (#0c0d10):** text and headings on the light ground, the dark pill buttons, the wordmark in the navigation tab.
- **Night (#070a0f):** the opening frame and the trips, onboard, reviews, contact and footer panels, plus the full-screen phone menu.
- **Night card (#11161e):** the trip cards and review cards inside the dark panels, and the colour behind a photo while it loads.
- **Surface (#ffffff):** text on dark, the white pill buttons, the FAQ question cards and the phone card over the FAQ photo.
- **Secondary (#545a63):** supporting text on the light ground, such as intros, place captions and FAQ answers.
- **Caption on night (#a1a8b2):** supporting text on dark panels.
- **Tertiary (#ff8a1f):** the only accent. It fills a button or round icon on hover, draws focus outlines and colours the five stars in the opening. Never use it for body text or panel backgrounds.

## Typography

One family, **National Park**, loaded for weights 300 to 500. The shapes are plain and slightly humane, so size, weight and tracking do the work.

- **Display** (`headline-display`): weight 300, line height 1, tracking -0.045em. The boat names (56px to 108px), the onboard heading (42px to 100px) and the closing heading (46px to 84px) use it, each with its own size clamp.
- **Section headings** (`headline-lg`): 38px to 64px, weight 300, tracking -0.035em.
- **Statement and quotes** (`headline-md`): 28px to 52px for the opening statement; the review quotes use the same face and tracking at 24px to 32px.
- **Subheads** (`title-md`): 24px regular for trip names, place names, questions and occasions.
- **Body** (`body-lg`): 17px regular at 1.5; `body-sm` at 15px for captions and card text.
- **Labels and buttons:** 14px and 16px at weight 500, sentence case.
- **Wordmark:** 30px, weight 300, uppercase with 0.16em tracking. The footer repeats it scaled to fill the width.

## Layout

There is no single container. Dark panels sit 8px in from the screen edges with a 22px radius, and their inside padding grows to 64px at wide screens. Light sections use side padding of 20px to 72px and vertical padding up to 160px. Trips are a three-column grid, one dark card and two photos, with the card flipped to the right on the second row. Fleet rows are a 7 to 5 split with a wide photo; crew rows are portrait, name and quote; charter pairs a held photo with four tall occasions.

On desktop the navigation is two link lists around a centred wordmark tab. At 900px and below it becomes a wordmark and a Menu button. Trips drop to one card over two photos at 760px, the route (when the sliding strip is not running) to two columns at 1000px and one at 560px, and the footer to two columns at 860px.

## Elevation & Depth

Depth comes from layers rather than shadows. A dark panel is a rounded block on a pale ground, photos sit inside rounded frames, and a card on the FAQ photo overlaps it. The opening puts a darkening gradient over the harbour photo so white type reads. The only shadow is a soft, long drop under the two tilted photo cards in the contact panel. Review cards have a 1px hairline of white at low opacity.

## Shapes

Corners come in three sizes: 22px for panels and the navigation tab, 14px for photos and cards, and fully round for buttons, badges, the photo chips inside the opening statement and round icon buttons. Photo crops are 4:5 portraits for places, crew and FAQ, 16:10 for boats, and a pill that opens into a full panel in the onboard section. Crew portraits are greyscale. Lines are 1px hairlines at low opacity.

## Components

- **button-primary:** a 52px white pill with 26px side padding, paired with a 52px round arrow button. On hover both fill orange and the label turns over to a second copy of itself.
- **button-secondary:** the same shape in near-black with white text, used on the light ground.
- **card-night:** a dark trip or review card with a 1px faint white border and 32px padding at wide sizes.
- **card-faq:** a white card with a 24px side padding; the question opens as native details.
- **badge-place:** an outlined 28px pill in 13px medium text naming the trip a place belongs to.
- **input-field:** an underlined email field in 19px light text with a 46px round arrow button beside it; no filled box.
- **nav-link:** 16px medium text with a hairline that draws on hover.

## Motion

The page loads GSAP, ScrollTrigger, SplitText and Lenis. Lenis smooths scrolling at a lerp of 0.075. The one motion idea is a swell: things arrive from the side and settle, and the route literally rolls.

- **Navigation:** solid after a short scroll, hidden on scroll down and returned on scroll up with a 0.5s slide.
- **Opening:** the statement, the facts row and the three photo chips animate in with CSS on load; the chips open from the centre at 0.7s, 0.8s and 0.9s. The background photo settles and then drifts sideways in a 9s loop that pauses when the section is off screen.
- **Headings:** lines rise out of a mask at 1.05s with a 0.09s stagger when they reach 88% of the viewport.
- **Trips:** each row slides in sideways with its cells spread apart, scrubbed to the scroll, while the photos pan the other way.
- **Route:** pinned for about 1.15 times the strip's overflow; five cards travel sideways and a wave lifts and tilts them up to 54px and 2.4 degrees away from the centre and lets each settle flat as it passes the middle.
- **Fleet and crew photos:** open upward, then drift against the scroll; the FAQ photo only drifts.
- **Onboard:** pinned for 0.95 of a screen; a pill grows into a full picture while the two heading lines part.
- **Charter:** the frame is held while each occasion comes to full ink at mid-screen and the next photo wipes up.
- **Reviews:** pinned; a deck of four cards, the top three flung sideways in turn with a 9 degree turn while the last stays.
- **Contact:** two photo cards swing in from opposite tilts.

With reduced motion the entrance and scroll animations and smooth scrolling are off; hover fills and the navigation slide still run.

## Do's and Don'ts

- Do keep orange for hover fills, focus outlines and the stars; one accent only.
- Do keep dark content in rounded panels on the pale ground, with an 8px margin.
- Do set headings in weight 300 with negative tracking and body in 400.
- Do show a sea, boat or harbour photograph in every section that sells something.
- Do keep the wordmark in spaced capitals and match the footer's len value to the name's length.
- Don't add a second typeface or heavy bold headings.
- Don't use drop shadows on cards, gradients on text or a second accent colour.
- Don't square off the corners or make buttons rectangular.
- Don't add motion to every element; keep arrival from the side and the pinned route.