Donate impact tiers

Four ways to give to a charity, each named by what it pays for. A tracked label, a heading and one line of context sit above four cards; each card carries a short label, the amount at display size, what that amount buys, one plain line of how, and a Donate button on its foot. The third card is the most given gift and is inverted. Under the cards one note line holds the charity number and Gift Aid, beside a link to give another amount.

The amount is the biggest thing on each card and the sentence under it is the thing it buys, so the grid reads as a row of outcomes rather than a price list. The amounts are a bare clamp(3rem, 4.6vw, 4.5rem): their size is the composition, so they sit off the type ladder on purpose. The mark survives colourlessness because it is made of scale and position: the four amounts sit on one line across the grid, the "buys" line is on the large rung under each, and the most given gift is set apart by inversion, not by a colour.

The four amounts, what each one buys, the charity name and number, and the #donate links on every button.

• The ground is base and every line of type is contrast, each a two-rung chain; the most given card inverts them. Text is at 4.5:1 or better in the stock themes, and the amounts are display type.
• The card borders are currentColor (the inverted card borders in contrast), so they follow your text.
• The labels start on role-label and the "Give another amount" link on role-link, both falling through to contrast.
• The Donate buttons state no colour, so your theme's button paints them; the one on the inverted card is base with contrast type so it stays visible. Every button states its padding, so the tap target holds in any theme.
• The heading is on the x-large rung, the "buys" lines on large, body copy on medium. The typeface is your theme's.

• The cards are a grid with a 16rem minimum column: four across at 1280 and above, two by two at 820, one column on a phone.
• Each card is a vertical flex group with its content pushed apart, so the Donate buttons line up along the foot of the row.

peach-and-teal states a peach ground #fbe6d4, dark brown ink #2b1d16, warm white cards #fffaf4 with 14px corners and a deep teal #0e5a5a plate for the most given gift. The Donate buttons are teal with warm white type and a 10px corner (the one on the teal plate reverses it), and the amounts and headings are Georgia over a Helvetica body at weight 400. It is for a food bank, a hospice or a local appeal that wants to look warm and trusted.