# First visit to scale

> What happens at a first appointment, drawn to scale: a bar of the whole appointment split into three solid segments whose widths are each step's share of the minutes, a scale line under it, then the three steps at the same widths, stacking on a tablet and a phone, with a title and a line each, and a closing note with one button. States no colour and no font of its own.

Canonical: https://patternpaste.com/pattern/first-visit-to-scale.html
Section: How it works
Access: Included in Pattern Paste access.
Needs: Requires a block theme on WordPress 7.0. Classic themes and page builders are outside our supported setup. Adaptive patterns use the block theme’s colour, spacing and typography presets; styled variations declare their own colours or type.
Blocks: button, buttons, group, heading, paragraph
Keywords: steps, first visit, appointment, what to expect, clinic, physio, duration

## Variations (2)

### Minutes bar (the default)

Identical markup in every theme.

Your base ground and contrast text, the bar's segments solid in your contrast colour with base type, the label in role-label and the foot's hairline in role-rule, your theme's button.

### Mend

This variation states its own colours and states its own type: identical in every theme.

The Mend physio set: a mint band, deep teal ink, the bar running apricot, sage and teal as the visit goes on, sage labels, a teal 6px-corner button, all in Avenir Next.


---

## The signature moment: the visit is drawn to scale

**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.

## What it inherits from your theme

- **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.

## What it decides for itself

- **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.

## What to change first

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`.

## The Mend look

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.

## Notes

- 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.