Copper Kettle Café

The brief

Copper Kettle Café is a fictional neighborhood café and bakery. The business, its menu and its prices in the demo are placeholder content, written to show how real content would work.

The brief we set ourselves: most orders are placed by people who are already walking to the café, so choosing items, seeing the total and picking a pickup time must work in a few taps on a phone.

Goals

• Let a customer build an order in under a minute on a phone.
• Show the running total at all times, with no surprises at the counter.
• Make the menu easy to scan, with prices and add buttons aligned.
• Keep the page light so it opens quickly on mobile data.

Design decisions

Order first

The menu and the cart are the point of the page, so the hero leads straight to them and a persistent order bar keeps the total in reach on phones.

A warm, editorial look

Fraunces, a soft old-style serif, for headings and DM Sans for body text, with a copper and espresso palette and a simple illustrated cup, give the café a personality without heavy photography.

Signature effect: steam

Wisps of steam rise from the hero cup and the cup drifts a little as you scroll. Under reduced motion the steam is a still, faint shape and the scroll drift is off.

Honest, readable menu

Each item has a short description, a clear price and a large Add button. Text contrast was checked so it stays readable in a bright café window.

Forgiving cart

Every cart line has a button to remove one unit, and the cart announces changes to screen readers through a polite live region.

Mobile-first decisions

• The phone layout was designed first, with the order bar fixed at the bottom of the screen.
• Add and remove buttons are at least 44 pixels square.
• The pickup time and name fields use native controls and the right keyboard.
• Nothing scrolls sideways at 390 pixels wide.

Features in the demo

Everything below is actually present in the live concept site, which you can open and try.

• Order-ahead menu with 10 items in three categories
• Add to order buttons and a remove-one button on every cart line
• Live item count and running total
• Pickup time selector
• Order confirmation message (no real payment or sending in the concept)
• Opening hours and location
• Skip link, semantic landmarks and an aria-live cart

Measured Lighthouse scores

• 100Performance
• 100Accessibility
• 100Best practices
• 91SEO

Measured on 2026-10-15 with Lighthouse 12.8.2, mobile form factor. Each demo was audited from a local web server on this machine using Lighthouse's default mobile emulation and throttling, headless Chromium, one run per demo. The server sent the demo's real security headers but not the noindex header used on the showcase, because a real client site would be indexable. Scores vary a few points between runs and machines.

Tech and security

• Hand-coded HTML and CSS with a small amount of vanilla JavaScript, with no framework or page builder.
• Self-hosted fonts, so no third-party font requests.
• A strict Content-Security-Policy with no inline code, enforced by our build scan.
• No trackers, no cookies and no third-party scripts.

What we'd do for a real client next

• Connect the cart to the café's point-of-sale or an ordering service and take payment securely.
• Add real photography, allergen information and seasonal menu editing.
• Write LocalBusiness and Menu structured data and align the Google Business Profile.
• Add a care plan so menu and price changes are handled.