---
version: alpha
name: "Wedding planner template by 8B"
description: "A garden wedding planner one-pager in bold Google Sans on flat orange, grey, black and white colour fields, with a pinned seasons track and a timed wedding day. Free HTML template by 8B, MIT."
colors:
  primary: "#1c1c1c"
  surface: "#efefef"
  on-surface: "#1c1c1c"
  neutral: "#efefef"
  white: "#ffffff"
  accent-orange: "#f0925c"
  mid-grey: "#8c8c8c"
  caption: "#5c5c5c"
  caption-night: "#a3a3a3"
typography:
  headline-display:
    fontFamily: Google Sans
    fontSize: 96px
    fontWeight: 700
    lineHeight: 0.86
    letterSpacing: -0.035em
  headline-lg:
    fontFamily: Google Sans
    fontSize: 68px
    fontWeight: 700
    lineHeight: 1.02
    letterSpacing: -0.028em
  headline-md:
    fontFamily: Google Sans
    fontSize: 42px
    fontWeight: 500
    lineHeight: 1.14
    letterSpacing: -0.018em
  body-lg:
    fontFamily: Google Sans
    fontSize: 17px
    fontWeight: 400
    lineHeight: 1.55
  body-sm:
    fontFamily: Google Sans
    fontSize: 13.5px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0.005em
  label-lg:
    fontFamily: Google Sans
    fontSize: 15px
    fontWeight: 700
    lineHeight: 1.3
  label-md:
    fontFamily: Google Sans
    fontSize: 14px
    fontWeight: 700
    lineHeight: 1.3
    letterSpacing: 0.005em
  button:
    fontFamily: Google Sans
    fontSize: 14px
    fontWeight: 700
    lineHeight: 1
    letterSpacing: 0.01em
  field-value:
    fontFamily: Google Sans
    fontSize: 17px
    fontWeight: 400
    lineHeight: 1.4
rounded:
  none: 0px
  full: 999px
spacing:
  gutter: 88px
  gutter-phone: 20px
  section-y: 168px
  section-y-phone: 88px
  button-height: 44px
  field-height: 46px
  logo-size: 32px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.white}"
    typography: "{typography.button}"
    rounded: "{rounded.full}"
    padding: 0 22px
    height: "{spacing.button-height}"
  button-primary-hover:
    backgroundColor: "{colors.accent-orange}"
    textColor: "{colors.primary}"
  icon-button:
    backgroundColor: "{colors.white}"
    textColor: "{colors.primary}"
    rounded: "{rounded.full}"
    size: "{spacing.button-height}"
  nav-logo:
    backgroundColor: "{colors.accent-orange}"
    textColor: "{colors.white}"
    rounded: "{rounded.full}"
    size: "{spacing.logo-size}"
  text-link:
    textColor: "{colors.primary}"
    typography: "{typography.label-md}"
  input-field:
    backgroundColor: transparent
    textColor: "{colors.primary}"
    typography: "{typography.field-value}"
    rounded: "{rounded.none}"
    padding: 10px 0
    height: "{spacing.field-height}"
  handover-chip:
    backgroundColor: "{colors.white}"
    textColor: "{colors.primary}"
    typography: "{typography.label-lg}"
    rounded: "{rounded.none}"
    padding: 12px 22px 12px 16px
  quote-card-orange:
    backgroundColor: "{colors.accent-orange}"
    textColor: "{colors.primary}"
    typography: "{typography.headline-md}"
    rounded: "{rounded.none}"
  quote-card-black:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.white}"
    typography: "{typography.headline-md}"
    rounded: "{rounded.none}"
---

# Aubade wedding planner template

## Overview

Aubade is a one-page site for a small studio that plans garden weddings. Its one idea is that every section is a flat field of colour (orange, pale grey, mid grey, black or white) with garden photographs set into the fields like panels. There are no gradients, almost no shadows and almost no rounded corners. Type is one bold sans, large and tight. It speaks to couples who want a calm planner with prices and a plan for the rain: bright, early morning, confident.

## Colors

- **Primary (#1c1c1c):** text on light grounds, button fill, hairline rules, and the black fields (timed day, journal, winter season, one wedding card, one quote card, menu overlay).
- **Surface (#efefef):** the page ground, the packages, weddings, quotes and contact grounds, the spring field.
- **White (#ffffff):** text on black and grey, the planners and questions grounds, handover chips, one wedding card, one quote card, the footer wordmark.
- **Accent orange (#f0925c):** the opening field, the autumn field, the logo chip, button hover fill, question markers, the dot in each handover chip, hour times on black, one wedding card and one quote card. It fills areas and is never body text.
- **Mid grey (#8c8c8c):** handover and footer grounds, the summer field, one wedding card, one quote card.
- **Caption (#5c5c5c)** and **caption night (#a3a3a3):** secondary text on light and on black grounds.

## Typography

Google Sans is the only family, a variable font for weights 400 to 700 with an Arial based fallback.

- **Display:** season words, footer wordmark and hour times are 700, line height 0.86, tracking -0.035em. Size follows the character count (`--len`): about 9.7vw for a six letter season word, 12.4vw for the wordmark, hour times capped at 92px.
- **Section headings:** 700, 34px to 68px, tracking -0.028em, mostly capped at 13 to 16 characters wide so they break into short lines.
- **Names and quotes:** weight 500, 24px to 42px for the opening heading, package names and wedding names; quotes reach 50px.
- **Body and labels:** 15px to 17px regular paragraphs, 13.5px small print, 15px bold card titles and prices. Nothing is uppercase.

## Layout

A four column grid in the ratio 22:28:22:28, full width, with no maximum content width. Side gutters scale from 20px to 88px (5.5vw); sections are padded 88px to 168px (11vw). Headings sit in the left half, a short paragraph bottom aligned in the right.

The opening is at least one screen high: three facts bottom left, a tall couple photo in column two, and the heading, paragraph and two actions centred over columns three and four, all on one flat orange field. Grounds then run: grey, the pinned seasons, mid grey, black, grey, white, grey, white, black, grey, mid grey.

At 760px the grid becomes two equal columns. Headings and paragraphs go full width, each season stacks as word, photo, then months and note side by side, the day photo becomes a sticky band 36svh tall, journal notes run in one column and wedding cards stay paired with photos.

## Elevation & Depth

Depth comes from colour and stacking. The only shadow is a 4px white ring around the logo chip and header button once the bar leaves the top, so they stay readable over photos. Sticky quote cards stack at 18px offsets and each covered card scales to 0.92. The day photo frame is sticky so photos wipe over one another.

## Shapes

Corners are square: photos, wedding cards, quote cards, handover chips and fields. Photos are cropped with object-fit cover to fixed ratios (3 to 4 portraits, 4 to 5 journal notes, 16 to 10 contact photo). Round shapes are small and functional: pill buttons (999px) and circles for the logo chip, menu and close buttons and question markers. Rules are 1px lines in primary. The one drawn shape is a four step stair edge, used in the button hover fill and the portrait and contact photo reveals.

## Components

- **Button primary:** black pill, 44px tall, 22px side padding, 14px bold white text. On hover an orange fill rises in four steps and the text turns black. The header button is 38px tall on phones.
- **Icon button:** 44px white circle with a thin cross; hover fills it orange from the centre.
- **Nav logo:** 32px circle with a white plus; black on the orange opening, orange once scrolled.
- **Text link:** 14px bold, 1px underline, small arrow; on hover the underline redraws and the arrow moves 5px.
- **Input field:** no box, a 1px bottom rule, 17px text, 46px tall, labels above in 13.5px bold.
- **Handover chip:** square white tag with an 8px orange dot.
- **Question row:** native details under a hairline, with a 28px orange circle holding a plus that becomes a minus when open.

## Motion

The page loads GSAP 3.13, ScrollTrigger and SplitText from jsDelivr, plus Lenis 1.3 (lerp 0.085). The one idea is colour panels moving as whole units: tracks slide, cards swap, cards stack and photos open from strips, all tied to scroll.

- **Header:** hides when you scroll down, returns when you scroll up. Menu dots shift on hover; the menu opens with a straight wipe down from the top.
- **Opening:** on load the heading, paragraph, buttons and facts rise 24px and fade in (0.9s each, delays growing to 0.48s); the photo settles from a slight zoom.
- **Headings and rules:** headings rise line by line from a mask (1.05s), hairlines draw across (1.1s), portraits and the contact photo reveal in four stair steps (1.25s). Each plays once at 88% down the screen.
- **Seasons:** the section pins and the four fields slide left for three screen widths of scroll. From the second field, each photo opens from a narrow strip while its season word slides in from the right.
- **Hand it over:** on wide screens the section pins for 150% of a screen while ten labels fly from scattered, tilted spots into the list; on phones each slides in from a side.
- **The day:** each hour's time scales from 0.42 to full size and back as its row crosses, and the sticky frame slides the previous photo up to reveal the next.
- **Weddings, words, journal:** card and photo in each pair start swapped and slide into place; quote cards shrink as the next covers them; journal notes start at different heights and settle on one line while photos ease out of a close crop.

With reduced motion on, entrance animations, scroll scenes, the menu wipe and Lenis are off and the seasons stack instead of pinning. Two things still run: the header still hides on scroll down, and hover transitions (button fills, link arrows, menu dots, question markers) are not switched off. Keep the section ids, `data-8b-motion` attributes and the selectors named in AGENTS.md.

## Do's and Don'ts

- Do give each section one flat ground from the palette and set photos inside as panels.
- Do keep headings bold, tight and short, with widths capped in characters.
- Do use orange for areas, markers and hover fills, not paragraph text.
- Do set display words by character count (`--len`) and update it when text changes.
- Do keep square corners on photos, cards and chips; pills are for buttons only.
- Don't add shadows, gradients or glass effects.
- Don't add a second typeface, uppercase labels or wide tracking.
- Don't add a sixth ground colour or a second accent.
- Don't add stock icons: the only marks are the plus, the arrow and the cross.
- Don't invent real prices, weddings, quotes or contacts; the demo facts are placeholders.