First visit to scale

What happens at a first appointment, for a clinic, salon or practice whose new customers want to know what to expect. A label, a display heading and a short introduction with the length and price sit over a bar of the whole appointment, then the steps themselves. It sits in the steps section beside steps-ledger and steps-run, which number their steps; this one measures them.

The bar is the appointment, and each segment's width is its share of the minutes: 10, 15 and 20 of 45 set the three segments at 22, 33 and 45 per cent, each a solid block carrying only its minutes. The steps underneath are a wrapping row of the same widths, so on a desktop each step sits under its own segment, and a scale line reads "0 min, you arrive" to "45 min, you leave with a plan". Below 50rem of row (a tablet and a phone) the bar keeps its proportions and the steps stack under it, each with its minutes in its label: a 22 per cent step at tablet width ran 19 characters a line. It is proportion, not colour, so it survives any theme.

1. The minutes. Type your own steps and times, then set each segment's width and its step's first flexSize term to its share of the total.
2. The introduction and the note. Length, price and what to bring.
3. The link. #book.

• Typeface. The base states no font family.
• Palette. Your base ground and contrast text. The segments invert: contrast ground with base type. The labels try role-label and the foot's hairline role-rule, both falling back to contrast.
• Buttons. Your theme's button with a stated padding for a 44px target.

• The heading. Off the ladder on purpose, a bare clamp that is 34px on a phone and 64px by 1280. Step titles are on the large rung.
• The widths. Each segment's flexSize and each step's are the same percentage (the last step 44.8 so the row never wraps early); change both together. A step's flexSize is max(<share>, calc((50rem - 100%) * 999)): under a 50rem row the second term wins and the step takes the full row.

Part of the Mend Pattern Set, one physiotherapy clinic's whole site in one design language: clinical white ground #f7faf9, deep teal-navy ink #12303a, muted ink #4a6068, sage #3d6e5c labels, mint #e6f0ec cards on #d3dfdb hairlines, and apricot #f2a65a as the one warm mark in the section, a fill or a rule and never text on the white ground. The bar deepens from a sage-outlined mint through sage to teal as the visit goes on. Avenir Next throughout, headings 600 and display 500; buttons teal with 6px corners or underlined links. 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, 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, the inverted segments) carries its own chain.