Handover notes

For whoever builds the production site. Everything here is static HTML plus media files — no framework, no build step, no dependencies to install. Read once, then hand brand/files/tokens.json to your tooling and get to work.

Current state

This package is deployed as a single Cloudflare Pages project. The deploy root is the package/ folder; the production branch serves it as-is. Redeploy after any change:

# from the project root, wrangler must be authenticated (wrangler login)
npx wrangler pages deploy package --project-name=bensons-bees-handoff

Every file under package/ is served verbatim; _headers sets cache and sniffing rules.
Unknown paths return /404.html automatically (Cloudflare Pages convention).
All demo pages carry <meta name="robots" content="noindex"> so the prototype never outranks the real site.

Folder map

package/
├── index.html          handover portal + delivery report (the front door)
├── 404.html            site-wide 404 (Pages serves this automatically)
├── handover.html       this page
├── _headers            cache-control + security headers
├── demo/               the 5-page website prototype
│   ├── index.html      home
│   ├── gifts.html      shop (illustrative — no checkout)
│   ├── meet-the-bee.html
│   ├── find-us.html    farmers-market schedule
│   ├── 404.html        in-demo 404 (linked from demo nav)
│   └── assets/         the stills, posters, and 2 films the site uses
└── brand/
    ├── index.html      brand guide (voice, color, type, mascot, mark, motion)
    ├── tokens.html     token reference with downloads
    ├── motion.html     the 7-film motion kit
    ├── assets.html     curated asset library
    ├── files/          tokens.css + tokens.json (W3C) + brand-guide PDF (Letter)
    └── films/          the 5 films not used by the demo

The demo site links to itself with relative URLs only, so demo/ can be lifted out and dropped into any static host unchanged. Shared media is referenced with ../ paths — if you port the demo, bring demo/assets/ with it (the two films it uses already live there).

Conventions in the code

Tokens first. Every page opens with the same :root block from tokens.css. New components consume variables, never raw hex. The palette rule: muted always, no pure black, terracotta is high-signal (sparingly), exactly two shadows.
Type. --font-display (Recoleta → Cormorant Garamond fallback), --font-body (Inter), --font-hand (Caveat, mascot voice only). The wordmark is all-caps at letter-spacing:0.18em, never below 12px.
Spacing. 8pt scale: 4/8/16/24/40/64/96. Radius 8px, chips 6px, buttons pill, leaf-radius 60/60/40/40 reserved for the clover.
Motion. 200/400/700/6000ms and the five named easings — all in the token files.
Accessibility. Every focusable element has a visible :focus-visible ring; body text meets 4.5:1 on sand cream; videos use controls + preload="metadata"; images carry descriptive alt text.

Fonts — licensing status

Recoleta is not yet licensed for web use. All pages currently load Cormorant Garamond from Google Fonts as the specified fallback. To ship the real display face: license Recoleta (Latinotype), self-host .woff2 files, and add @font-face rules before the token block. No other markup changes are needed — the stack already names Recoleta first.

What this demo is not

Being straight with you so nobody is surprised later:

No cart, no checkout, no inventory. The gifts page is a design prototype with illustrative products.
Forms (newsletter, contact) don’t submit anywhere.
No CMS. Content is hand-written HTML; a production build should plan for one (the find-us schedule especially wants editing).
The market schedule on Find Us is placeholder-real: format and tone are final, dates need the client’s actual calendar before launch.

Suggested production path

1. Framework of choice. Astro or Next.js static export fits this site’s shape well; the pages are already component-shaped.
2. Wire tokens. Import tokens.css globally (or compile tokens.json with Style Dictionary for multi-platform use).
3. License + self-host Recoleta (see callout above).
4. Media pipeline. Films are 9:16 masters; transcode to <video>-friendly H.264 + poster frames for anything user-facing. Keep files under 25 MB if staying on Pages.
5. Domain. Point the real domain at the Pages project; this preview URL keeps working as the handover copy.
6. Favicon + PWA. The mark scales to 64px clean; export a favicon set from poster-clover-reveal.png’s mark region or request the vector.

Source of truth

When docs and code disagree: brand/files/tokens.json beats tokens.css, and both beat any page’s inline styles. The brand guide is the prose authority for voice and usage. If something is genuinely ambiguous, that’s a question for the design studio, not a judgment call for the build team — the bee has opinions.