Hearth & Grain

The idea

Hearth & Grain is an imagined bakery and café on a town high street. Bread sells out early, and most of the phone calls are about two things: whether they’re open, and whether they can make a cake for a particular date. The website needed to answer the first question instantly and turn the second into a tidy, complete enquiry.

Who it’s for

• Regulars who want to know what’s on the counter today before walking down.
• Visitors to the town looking for somewhere for coffee and something sweet.
• People organising birthdays and family events who need a cake on a set date.

Design choices

• Young Serif for headings gives a warm, slightly old-fashioned feel without tipping into twee. Work Sans keeps prices and details easy to read.
• The colour palette comes straight from the counter: cream, crust brown, a tomato red for action points and butter yellow for highlights.
• The weekly menu is a simple two-column price list with dotted rules, the format people already know from cafés, and it collapses to one column on a phone.
• A hand-drawn style loaf illustration stands in for photography. On a real project, this would be the bakery’s own photos.

Enquiry features

• A strip at the very top says whether the bakery is open now, using the opening hours and the visitor’s clock.
• The cake form asks for collection date, size, flavour and a note covering wording, theme and allergies, so the baker can reply with a price straight away.
• The date picker won’t accept past dates, and the form explains the five-day notice period before anyone fills it in.
• Every error message says what to do next, not just that something is wrong.

The full page

Scroll through the whole homepage below, or open the working demo to try the navigation and form.

For a real business

A live version would need the bakery’s own photos, its real address and map, accurate allergen information, and a decision on whether cake enquiries go to email or a simple order system.