Loyalty stamp card

A coffee card a café hands over the counter, drawn in blocks, beside how the scheme works in three lines. It sits in the call-to-action section: the ask is to come back.

The card is drawn, not described: ten numbered circles in two rows of five, the first four stamped and the tenth marked On us. Each circle is a core/cover with a plain colour, aspect ratio 1 and a 50% radius; each row is a columns block that does not stack on a phone, so the card keeps five across at every width and the circles shrink with it. Beside it, three numbered lines between rules say how it works.

1. The stamps. Move the stamped colour to show more or fewer.
2. The reward. The tenth circle and the heading.
3. The link. #menu.

• Typeface. The base states no font family.
• Palette. The card tries role-plate and role-plate-text on a role-rule hairline. Stamped circles are your contrast colour with base numbers; empty ones are ringed in contrast, the tenth dashed.
• Links. An underlined text link.

• The heading. The x-large rung.
• The numerals. Off the ladder, sized to the circles and the lines.

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, cover, heading, paragraph, 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.