Coffee shop website prompt, one page

A coffee shop website is opened by the same person twice a week, usually while they are walking. It is a reference card, not a funnel: nothing to book, nothing to configure, one question to answer. Is it open, and how far away is it.

That changes the type before it changes anything else. Body copy sits at 21px, because the page is read outdoors in daylight at arm's length, and a 16px line that works on a laptop in an office does not survive glare.

Short verdict: the golden ratio from a 13px root, which lands the ladder exactly on Fibonacci, a 13px spacing grid, nothing under 5.6:1, and five blocks on one page. The Thanor library publishes designs to that standard.

A page people open twice a week#

A restaurant site persuades once. A cafe site gets consulted, which is a different job and it produces a different page. Four things carry it, and three of them are facts rather than design.

• Today's hours and the next exception. Open until 4 today at step 4, and under it, in body, the next date the hours change. A regular customer already knows the normal week; what they do not know is that you close early on the 27th.
• A walking time from one named landmark. Six minutes from the station is more useful than a map, because the question is not where you are, it is whether you are on the way.
• The laptop and wifi policy in one sentence. It is among the most common questions a cafe is asked at the counter and almost none of them answer it on the site. One line, plainly, including the part where laptops are fine before eleven and not after.
• The bean list as a product list, since a cafe with a roast programme is also a shop. Each bag: origin, process, three tasting notes, weight, grind options, price.

The bean cards are the one place the site behaves like a product page, and the field that matters is the process line. Washed, natural or honey tells a regular more about whether they will like a coffee than any adjective in the description, and it is the field most often dropped.

Everything else comes off the page. No blog, no team page, no story about the founder's trip, no newsletter box. Five blocks, one scroll, and a page that loads on a bad connection outside.

Fibonacci from thirteen#

Ratio 1.618, the golden ratio, from a 13px root. The arithmetic is worth seeing: it produces 13, 21, 34, 55, 89, 144, which is the Fibonacci sequence, so the ladder and the spacing grid share one set of numbers.

Step 0 is the only size on the page under body, and it is uppercase with 0.12em of tracking, which gives a 13px label more optical presence than a 13px lowercase line would have.

Spacing runs in multiples of thirteen: 13, 26, 39, 52, 78, 104, 156. Section padding 104px on desktop, 78px on tablet, 52px on a phone. Drink rows 26px apart, bean cards 39px apart, and the gap under the hours statement is 52px.

No value on the page measures under 5.6:1 against its background, including muted on the card surface at 5.61:1. That is the glare rule, and it is why this palette has no light grey in it.

Two curves, almost no motion#

Two curves, and between them they cover the entire site.

--ease-pour: cubic-bezier(0.37, 0, 0.63, 1);  /* 520ms */
--ease-tap:  cubic-bezier(0.34, 0.9, 0.4, 1); /* 180ms */

--ease-pour at 520ms is a symmetrical sine, and it runs on the two room photographs and the bean cards: 13px up with opacity, once, at 30% of the viewport, 130ms stagger across three cards. A symmetrical curve has no rush in it, which is the right register for a shop whose whole proposition is slowness.

--ease-tap at 180ms covers the grind selector, the buy link hover and the uppercase label underline. Nothing else has state.

Three things do not move, and the first is the reason the page exists:

• The hours statement. It is the answer. An answer that fades in is an answer delayed.
• The address and the walking time, for the same reason.
• Prices on the drink list, which appear immediately at full contrast.

One more rule, specific to a page read outdoors: no fixed header. A sticky bar on a one page site costs 56px of a phone screen permanently and there is nowhere to navigate to. The name scrolls away and does not come back.

The reduced motion branch is two lines and it matters more here than on a page people see once. Under prefers-reduced-motion: reduce both curves collapse to 0.01ms and every element renders at its final position, which is exactly what a customer checking the hours for the fortieth time wanted anyway.

Five blocks on one page#

Five blocks, one scroll, and the order is the order of the questions.

1. The answer. Shop name at step 5, the hours statement at step 4, the address in body, the walking time in body, and the next exception to the hours.
2. What you can drink. A short list, not courses: twelve lines at step 2 for the name with the price at step 1 on the same line. Sizes as one line of uppercase label, not as a table.
3. The beans. Three bags, six fields each, one buy link per card. Three is the number: a roster of nine turns a cafe into a catalogue and buries the one you want people to try.
4. The room. Two photographs at 3:2, and under them the laptop and wifi sentence, the power socket count, and whether there is a table for four.
5. Hours in full. The seven day list, the address again, and one line naming the next closure.

Block 2 is deliberately not a menu in the restaurant sense. A cafe list with course headings, descriptions and dish photography reads as a restaurant that also sells coffee, and the specification for a restaurant page is a genuinely different document: nine type roles there against six here, and a booking flow that this page does not have at all.

Block 4 carries the three facts a laptop customer decides on, and printing the socket count is the sort of detail that reads as confidence rather than as copy.

The verdict on a cafe brief#

Body at 21px, the hours as a sentence with the next exception under it, a walking time, the wifi policy in one line, three bags rather than nine, and no fixed header. A cafe page done properly is short, plain and useful twice a week. Thanor sells the values so the page is short by design rather than by omission.

The brief to paste#

Build a one page coffee shop site.

TYPE: golden ratio from a 13px root, which gives Fibonacci: 13, 21, 34,
55, 89, 144. Labels 13/16 uppercase, 0.12em tracking. Body 21/31. Drink
and bag names 34/40. Section headings 55/58. Hours statement 89/88. Shop
name 144/136, once.

SPACE: multiples of thirteen: 13, 26, 39, 52, 78, 104, 156. Section
padding 104 / 78 / 52. Drink rows 26px apart, bean cards 39px apart.

COLOUR: paper #F4EDE2, surface #E4D8C6, ink #231A12, muted #5E4F3E,
accent #2E5A3C. Nothing below 5.6:1 against its background, no light grey.

FIRST SCREEN: shop name, today's hours as a sentence, street address,
walking time from one named landmark, the next date the hours change. No
hero photograph, no fixed header anywhere.

MOTION: cubic-bezier(0.37, 0, 0.63, 1) 520ms, 13px up, on room
photographs and bean cards only, once at 30% of viewport, 130ms stagger.
cubic-bezier(0.34, 0.9, 0.4, 1) 180ms on the grind selector and links.
Hours, address, walking time and prices never animate.

BLOCKS: the answer / drinks as twelve lines with prices inline, sizes as
one uppercase label / three bean cards with origin, process, three tasting
notes, weight, grind options, price / two 3:2 photographs of the room plus
the laptop and wifi policy, socket count and whether there is a table for
four / seven day hours, the address, the next closure.

Change the roast list and the paper, keep the ladder. Browse the Thanor library for the design that matches the room.