Price list treatments

A price list for a salon, a spa or a clinic. A tracked label, a display heading and a line on when the prices apply open the section. Each category is then a band: its name and one note at the left, and at the right a ruled table with a header row, one treatment per row with its time and its price. A note on cancellations and one button close it.

Two narrow columns, time and price, run down the right of every table. Each row is a flex group that never wraps: the time and the price are fixed columns of 5rem and 7rem, the price set right, and the treatment takes exactly what is left (calc(100% - 13.5rem)), so a fixed column never shrinks when a long name wraps. A visitor comparing "how long" and "how much" reads down a column rather than across a sentence, and the rules between rows carry the eye. The mark is structural, three columns and a rule per row, so it holds in greyscale.

The rows are the second mass on the section, a bare clamp(1.0625rem, 1.3vw, 1.3125rem), above body size.

The treatments, times and prices, the category names and their notes, and the date the prices apply from. Duplicate a row to add a treatment; the last row in each table carries the bottom rule.

• The ground is base and every line of type is contrast, each a two-rung chain, at 4.5:1 or better in the stock themes.
• The rules are currentColor.
• The label and the header row start on role-label and fall through to contrast.
• The heading is off the type ladder on purpose, a bare clamp(2.75rem, 5.6vw, 6rem); category names sit on the ladder at x-large, notes at medium.
• The button is your theme's filled button; the typeface is your theme's.

• Each band is two columns of 32 and 68 per cent, stacking below 782px with the category name first.
• On a phone the treatment name wraps to two lines and the time and price columns keep their width, because the name's width is stated rather than left to grow.

shell-and-mulberry is a calm salon: shell #f5ebe6 ground, deep plum #2d1f24 type (13.4:1) and mulberry #7c2e4d prices, header row, label and pill button (7.6:1), with Optima headings over Avenir Next rows.