← All website designs
Restaurants & Cafés · Free to copy

Ristretto

A warm, precise design for coffee shops that roast their own.

Preview live

Yours in seconds, on your own URL. Free.

Ristretto coffee shop website template — full design preview
Warm paper, espresso ink, one crema-orange accent, and Bodoni headlines set with menu-board discipline. Built for the third-wave cafe with a pour-over bar and a roaster in the back: a two-column drinks board with prices, a single-origin card that changes monthly, retail bags with a grind-for-your-brewer line, a laptop policy said kindly, and hours that repeat exactly where a customer looks for them. Open the live demo

The design, up close

Every section ships exactly like this — swap the words and photos for yours.

No editor to fight. Just ask.

Once it's yours, your AI (Claude, ChatGPT, Cursor…) stays connected — these are real requests it handles.

“Swap this month's single origin to a washed Colombia from Huila, roasted Tuesday the 6th, tasting of red apple, panela and cocoa, and set next month to a natural Ethiopia.”
“Raise every espresso drink by 25 cents and add a cardamom latte at 5.50 to the filter side of the board.”
“Replace the six photos with the ones I uploaded and make the hero the shot of the kettles.”
“Change our hours to 6:30 to 3 on weekdays, closed Mondays, everywhere the hours appear.”
“Retune the palette to a cooler grey paper with a deep green accent and switch the headline font to Playfair Display.”

Design details

The board

Espresso on the left, filter on the right, prices in Bodoni figures with a hairline between every row. Reads like the chalkboard behind the bar, minus the chalk dust.

This month's single origin

One crema-tinted card carries the origin, elevation, process, roast date and tasting notes, with a teaser for next month. It is the one thing on a coffee site that must never be stale, so it is built to be swapped in a single ask.

The roastery, flipped to ink

The page turns espresso-dark for the roaster: one paragraph on why the roasts stay light, three oversized numbers (batch size, batches per Tuesday, days of rest) and the retail bags with prices.

A laptop policy said kindly

Weekday mornings, plug in. Weekends, the tables are for conversation. The room section says it in three lines beside an offset photo pair, so nobody has to be told at the counter.

Wholesale and cupping, one card each

A wholesale card for cafes and offices with a minimum and a delivery day, and a cupping card for the first Saturday of the month: free, eight seats, text to hold one. Both end in a mailto or a tel link, no forms.

Hours where people look

The hours sit in a pill beside the wordmark, in the visit section, and in the footer, and the roast-day note travels with them. Order-ahead is a text message, which is what a corner shop actually wants.

How it works

01

Copy it

One click puts this exact site on your account, live at your-name.hatchable.site. The code is yours — no lock-in, no "Powered by."

02

Make it yours

Connect your AI and talk: "swap in my photos," "change the name to Lupa," "rewrite the about page." It edits the real files and redeploys in seconds.

03

Point your domain

Keep the free URL forever, or put the site on your own domain when you're ready.

Start with Ristretto tonight.

Free to copy, live in seconds, and every future edit is one sentence to your AI away.