Schema
Bakery and LocalBusiness JSON-LD with address, opening hours, contact details, and social profile references for the Pembroke Dock and Haverfordwest sites.
Live Build · Pembrokeshire
An Illustrated Cottagecore Storybook For A Welsh Pet Bakery.
A handmade story-led brand site with stitched dividers, a paw-trail cursor, and a treat that changes every day of the week.
This is a real production site we built end-to-end. The build below is the same site you can open at the live URL.
pembspetbakery.vercel.appDesign Language
The Locked Direction.
Concept · Illustrated Cottagecore Storybook
Palette
- Cream Paper#FAF6EB
- Sage#B8C7A6
- Butter#F4D9A5
- Blush#F0BFB1
- Ink Charcoal#2A241E
- Deep Rose#A85D5D
Fonts
- Fraunces
- Mulish
- Caveat
Signature Moves
- Hand-Stitched Dashed Section Dividers
- Paw-Trail Cursor (Reduced-Motion Safe)
- Today's Bake — Seven-Day Treat Rotation
- Audience Tabs — Dog · Cat · Horse · Bird
- Polaroid Open-Kitchen Photo Strip
- Hand-Drawn SVG Flourishes
Background
The Brief Behind The Brand.
The brief was deliberately not a pet shop. It was a Welsh family-run vegan pet bakery, imagined as an illustrated cottagecore storybook — like a notebook of bakery recipes someone keeps under the counter. The goal was to feel handmade and small, never corporate, and never Etsy-cute either.
We built a story-led brand site for Pembrokeshire's first doggy café. Hero, today's bake, audience selector, open-kitchen strip, story snippet, opening hours, and a footer typeset like a chalkboard menu. Every page reads like flicking through a recipe book the family writes in by hand.
Build
Visual System, Motion, And Structure.
The visual system is locked to cream paper #FAF6EB, sage, butter, blush, ink charcoal, and a deep rose used for the order CTA. Type pairs Fraunces in soft italic for headlines with Mulish for body copy and a sparing use of Caveat for handwritten margin notes. There is no pure black anywhere, and white is reserved for occasional contrast islands.
The signature details are deliberately analogue. Dashed-stitch dividers run between sections; a paw-trail cursor stamps small SVG paws after the pointer on desktop and fades them after 400ms; the Today's Bake module rotates seven illustrated treats one per weekday; and an audience selector lets visitors flip the menu between dog, cat, horse, and bird with the accent illustrations changing to match.
Structurally the homepage behaves like a recipe book. The open-kitchen strip frames Instagram photos as polaroids held by tape, the founders sit inside a rough-edged photo frame, and the chalkboard footer carries opening hours and a quiet sign-off — made with paws in Pembrokeshire — without resorting to badges, gradients, or pet-shop pink.
The Pawtisserie Mid-Scroll Detail
What's Wired
The Practical Foundations.
Accessibility Floor
Reduced-motion respected on cursor trail and marquee, semantic sections, visible focus rings on all interactive elements, and decorative SVG layers hidden from assistive technology.
Motion Budget
Paw-trail cursor, dashed-stitch dividers, gentle hover wobble on stickers, and a horizontal polaroid scroll — all gated by the reduced-motion query.
Fonts
Fraunces variable in 600 with soft italic for display, Mulish 400 and 500 for body copy, and Caveat used sparingly for inline annotations.
Colour
Cream paper #FAF6EB canvas with sage, butter, blush, ink charcoal, and deep rose #A85D5D as the order accent.
Specs
Build Specs.
- Stack
- Next.js 16 · React 19 · Tailwind v4 · Hand-Drawn SVG · Reduced-Motion Tokens
- Pages Count
- 5 — Home · Menu · Cakes · Visit · Story
- Duration
- 3 Weeks End-To-End
- Shipped
- 2026-04-22
- Live URL
- pembspetbakery.vercel.app
Sister Builds
Three More Builds.
More builds across other locked directions and locales.
LiveLeamington SpaRestaurant
Paprika Club
Family-run. Saffron-stained. Lord-approved.
Start Here
Build Like This
Send the brief with the build that feels closest to your business, and we will reply with the practical package fit.