The whole hive, in one URL.
Everything from the Benson’s Bees engagement, organized and shipped: the live demo site, the brand system it was built from, the films, the files, and plain notes for whoever builds the real thing. Start anywhere — every door below opens one click from here.
What we made
Benson’s Bees is a small-batch honey brand out of a garage in Aptos, California — coastal soul, mid-century bones, and a rotund little surfing bee for a mascot. The tagline does the selling: “Slow honey from a fast coast.”
This package contains a five-page demo website (home, gifts, meet the bee, find us, and a 404 worth seeing), a full brand guide, machine-readable design tokens, seven motion pieces, and a curated, renamed asset library. Every decision is documented, and the documentation follows the brand’s own rules — which is the real proof the system works.
Aptos sun-faded, never neon
Thirteen colors pulled from coastal light: terracotta cliffs, honey gold, sage foliage, teal surf. Every one slightly muted — if it pops, it’s wrong.
Recoleta over Inter, with a wink
A warm slab serif carries headlines and the wordmark; Inter handles everything readable. Caveat shows up only when the bee himself is talking.
1960s children’s book meets Saul Bass
Chunky, spherical, unhurried. Honey-gold and warm brown stripes — never bright yellow and black. No sunglasses. No lei. The bee is the outfit.
Four doors
The demo website
All five pages, live and clickable: the homepage, the gift shop, the bee’s own bio, where to find us — and a 404 that’s genuinely funnier than it needs to be.
/demo/ Open the site →
The brand guide
Voice, palette, typography, layout rules, the mascot’s pose library, the mark’s do’s and don’ts. The single document everyone quotes when arguing about a jar label.
/brand/ Read the guide →
Tokens, films & files
Downloadable design tokens, the motion kit with all seven films, and the curated asset library — every file renamed, previewed, and one click from your hard drive.
/brand/tokens · /brand/motion · /brand/assets Take the files →
Developer handover notes
Folder map, font licensing status, deploy commands, 404 wiring, and an honest list of what this demo is not (a store, yet). For whoever builds the production site.
/handover.html Hand it to a dev →Everything in here
| Deliverable | Path | What it is |
|---|---|---|
| Handover portal | / | This page — the report and the map of everything. |
| Demo site — 5 pages | /demo/ | Homepage, gifts, meet the bee, find us, and the 404. Fully navigable, no build step. |
| Brand guide | /brand/ | Identity, voice, color, type, layout, mascot, mark usage, motion, imagery. |
| Design tokens | /brand/tokens.html | Every value in the system, with tokens.css and W3C tokens.json downloads. |
| Motion kit | /brand/motion.html | Seven films: the logo reveal, the bee’s surf edits, the coming-home blend. Streamable and downloadable. |
| Asset library | /brand/assets.html | Nine curated stills and posters, renamed from production filenames, with sizes and one-click downloads. |
| Developer notes | /handover.html | Structure map, fonts, deploy, and next steps for the production build. |
| Site-wide 404 | /404.html | Off the coast road — styled, on-brand, and wired to Cloudflare Pages. |
What happens next
Walk the demo
Click every link, watch the films, open it on your phone. Anything that feels off, tell us now — that’s what the demo is for.
License Recoleta
Headlines currently fall back to Cormorant Garamond. Buying Recoleta (from Latinotype) and dropping the webfont in gets you the exact display face the guide specifies.
Send the dev notes forward
Hand /handover.html and the tokens.json file to whoever builds the production site. They’ll know exactly what to do.
Pick a domain
This package is already live on Cloudflare Pages. Point bensonsbees.com (or whatever the garage deserves) at it whenever you’re ready.
Download the files
The asset library and tokens pages are the source of truth for print, packaging, and social. Grab them before the first label run.
Keep the bee relaxed
Whatever you build next — labels, ads, a second hive — the guide covers it. If it would make the bee wear sunglasses, it’s out.
— slow honey from a fast coast.