About day in hours

An about page for a bakery, café or workshop that tells its story as a working day. The left column carries the introduction, two photographs dropped out of step and one action; the right column is the day itself. It sits in the team section beside about-founder-story and about-stacked-plates, which tell a story in prose: here the clock tells it.

Five clock times, set at display size down a ruled column, are the whole story's skeleton: 4am, 7am, 8am, 12pm, 4pm. Each hour is a row between hairlines with the time in a fixed third and a short title and line beside it, so the eye reads the day top to bottom before it reads a word. The rows never stack: the time keeps its third on a phone, only smaller.

1. The hours. Type your own times and what happens at each; add a row by duplicating one.
2. The photographs. Select each and choose Replace.
3. The link. #order.

• Typeface. The base states no font family.
• Palette. Your base ground and contrast text; headings, times and copy inherit it. The eyebrow tries role-label and the hairlines role-rule, both falling back to contrast.
• Buttons. Your theme's button with a stated padding for a 44px target.

• The times. Off the ladder on purpose: clamp(2.25rem, 5vw, 4.5rem), the size is the composition. The row titles are on the large rung and the h2 on x-large.

Part of the Crumb Pattern Set, one café's whole site in one design language: oat ground #f4ecdf, espresso ink #2b1d16, muted cocoa #5c4a3f, milk cards #fbf7f0 on oat hairlines #dccfbf, terracotta #b3462d labels and peach #e8a27c on the espresso slab. Headings are Georgia at 400, body, labels and buttons Helvetica; buttons are espresso pills or underlined links, cards and photographs rounded at 14px. Every text pair is measured on the ground it is painted on. Take the base for your theme's colours, or the look's Use my theme chip.

• Core blocks only: group, columns, column, heading, paragraph, image, buttons, button. No plugin, nothing to keep updated.
• The root group sets headings and links to currentColor, so every heading, paragraph and link inherits the group's text colour in any theme; only role-bearing text (labels, rules, plates) carries its own chain.

The copied markup includes WordPress Photo Directory example photographs. The public image URLs keep the examples visible after pasting. Select an image and choose Replace to use your own Media Library files. See image credits for the sources and licenses. Pasting an image URL does not import a Media Library attachment.