About suppliers miles

Where the food comes from, for an about page: a heading and a line of story beside a ruled list of the farms and makers who supply the kitchen. It sits in the team section with the other about-us patterns.

Distance is the headline of each row. Every supplier gets a name and what they bring on the left and how many miles away they are as a large figure on the right, with the unit under it. The rows are flex rows that never wrap, so the figure stays on the right at every width, sorted nearest first under one heavy rule.

1. The suppliers. Name, what they bring and the miles; duplicate a row to add one.
2. The heading. Your own claim about where things come from.
3. The link. #about.

• Typeface. The base states no font family.
• Palette. Your base ground and contrast text and top rule; rows are ruled in role-rule and the units try role-label.
• Links. An underlined text link.

• The figures. Off the ladder on purpose: clamp(2.5rem, 4.4vw, 3.75rem).
• The supplier names. The large rung.

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, 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.