Values three principles

An about-page values band for a charity, a clinic or any small organisation that wants its values believed. A tracked label, a heading and a two-line intro sit over three ruled rows. Each row holds a numbered principle, a short explanation, and the figure that proves it.

The right-hand column of each row is a number at display size, not a sentence. The principle is the claim; the figure at clamp(2.5rem, 4.4vw, 4rem) with one line of caption is the evidence, so the eye runs down the right edge and reads three proofs before it reads a word of explanation. It survives colourlessness because it is scale and position: the same column, the same size, three times, between full-width rules.

The heading and intro, then each principle, its explanation and its figure. Keep a figure you can stand behind: it is the point of the row.

• The ground is base and every line of type is contrast, each a two-rung chain. Text is at 4.5:1 or better in the stock themes; the figures are large display at 3:1 or better.
• The numerals and the label start on role-label, the rules on role-rule; both fall through to contrast.
• The section heading is off the ladder on purpose, a bare clamp(2.25rem, 4.2vw, 4rem), so it holds its own against the figures; the principle titles are a bare clamp(1.5rem, 2.2vw, 2rem), the second mass on the section. Body copy takes medium.
• The typeface is your theme's.

• The intro sits in a 40rem group so it stays under 75 characters a line.
• Each row is three columns at 36, 38 and 26 per cent, stacking below 782px with the principle first and its proof last.

porcelain-and-kingfisher states a porcelain ground #f2f6f6, deep teal-navy type and rules #12303b (12.8:1) and the proof figures in kingfisher #0b6784 (5.9:1), in Avenir Next throughout, falling back to Segoe UI and Arial. The small labels stay in the ink. It is for a charity, a hospice or a clinic.