Feature circle badges

Four promises for a trade or local service, each reduced to one figure inside a large circle, with a short caption under it and one action below the row. It sits in the features section beside feature-grid, which numbers its points in text, and feature-pill-ledger, which tags metrics in small pills: here the figures are the shapes, at poster size.

Four large circles alternate between a solid disc and a hairline ring, each holding a single figure a customer cares about. The circles are plain-colour covers with an aspect ratio of one and a 50% radius, so they stay perfectly round at every width and hold their figure dead centre. The alternation of filled and outlined gives the row its rhythm without any colour of its own.

1. The four figures and captions. Keep a figure to four characters so it sits inside the circle on a phone.
2. The actions. The button points at #book and the link at a tel: number; put your own number in both the text and the link.

• Typeface. The base states no font family.
• Palette. The ground is your base and the text your contrast. The filled circles are your contrast behind base figures; the hollow ones are your base inside a 2px contrast ring. The eyebrow tries role-label and the phone link role-link, both falling back to contrast.
• Buttons. The booking button is your theme's button with a stated padding for a 44px target; the phone number is a transparent, underlined core button.

• The circles and their rhythm.
• Proportion. Heading on xx-large (hierarchy); the figures are off the ladder because their size is the composition.

Off the theme's ladder on purpose, because the size is the composition:

• paragraph at clamp(2.25rem, 6vw, 5.5rem) (the figures)

Two pairs, each a two-column grid, inside an outer grid with a 30rem minimum column: four across on a desktop, two by two on a tablet, and still two by two on a phone, so a circle is never shrunk to a button or stacked into a column of four. Each circle is capped at 17rem.

A Styled variation with its own colours and type: sky blue ground #dcebf5, navy ink #13233a, one tomato disc #c23a22 and one navy disc with white figures, two navy rings, and a pill-shaped navy button with white type. The heading and figures are Arial Black, the rest Arial at 400. Every text pair is measured on its painted ground. Take the base if you want your theme's colours.

• Core blocks only: group, heading, paragraph, cover, buttons, button. No plugin, nothing to keep updated.
• Text is measured at 4.5:1 against the ground it actually sits on.