Course plan taper

A typical course of treatment for a clinic, a trainer or any practice that sells a run of sessions rather than one. A label, a display heading and a short introduction sit over eight weeks drawn on one ruled baseline, a legend, three totals and a button. It sits in the timeline section; where a timeline dates what happened, this one shows what will.

Each week is a column on one baseline, and a clinic session is a solid bar whose height is its minutes: 45 for the assessment at 9rem, 30 for a follow-up at 6rem, 20 for the review at 4rem. A week with no session carries only a short rule, the exercises done at home. Read left to right, the bars get shorter and the empty weeks get longer, so the course is seen to taper before a word of it is read. It is height and spacing, not colour, so it survives any theme, and the eight columns keep their row on a phone.

1. The weeks. Type each bar's minutes and set its minimum height to match (0.2rem a minute); swap a bar for a home rule, or the reverse, by duplicating a week.
2. The totals and the introduction. Sessions, time and price.
3. The link. #book.

• Typeface. The base states no font family.
• Palette. Your base ground and contrast text. The bars invert: contrast ground with base type. The label tries role-label, the home weeks and the totals' hairlines role-rule, 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.
• The bar heights. Minimum heights in rem, proportional to the minutes.

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, lifted sage #9cc7b5 home weeks, 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. Avenir Next throughout, headings 600 and display 500; buttons teal with 6px corners. This look sits on the deep teal slab: apricot session bars with teal figures, lifted sage labels and home weeks, the totals in apricot at display size. 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 bars) carries its own chain.