Job sheet breakdown

A worked example for the one big job a trade cannot price over the phone. The price is shown as the sheet it was written on, every line adding up to a total ruled off twice. It sits in the pricing section beside pricing-single (one plan's price against a ledger of features), spec-table (a two-column spec), pricing-ledger (a saving as the rule) and price-list-treatments (many prices): none shows one job's parts adding up to its total as a document.

Two nested groups, each with a 1px top border and 3px between them, sit above the total, which is set at display size. It is never border-style: double, which WordPress does not measure. Every line is a row group, never core/table (a table cannot rule one row twice): the item and its quantity at left, the amount at right, a hairline under each. The sums add up: £5,740 before VAT, £1,148 VAT at 20%, £6,888 in all. On a phone the columns stack and the quantity stays under its item, so no row is squeezed.

1. The lines and amounts. Keep the sums true: subtotal, VAT and total are typed, not calculated.
2. The job number and address at the head of the sheet.
3. The photograph and the list of what moves the price.

• Typeface. The base states no font family.
• Palette. Your base ground with contrast type; the sheet is on the plate role with its text role, line hairlines on the rule role, the head rule, the double rule and the stamp in currentColor. Labels are on the label role. The button is your theme's own.

• The heading. The xx-large rung: its job is hierarchy.
• The total. Bold at a display clamp; amounts at a stated clamp so they line up down the right edge.
• The split. 5/12 prose, 7/12 sheet.

Part of the Spur Pattern Set, an electrician and plumber in Beeston: switch white #f2f3ef, cable black #14181c ink, slate #4a535b muted ink, live blue #1747c9 labels, the stamp and the button, white cards on a conduit #c5ccd2 hairline, with a signal yellow #ffd21a kept for emergencies. Headings and amounts are Arial Black; body, labels and buttons are Arial. The sheet has 4px corners and a hard 6px offset shadow in the hairline colour; the stamp has 2px corners like a cable tag. Take the base for your theme's colours, or the look's Use my theme chip.

• Core blocks only: columns, group, heading, paragraph, list, buttons, image.
• The example photograph is from the WordPress.org Photo Directory (CC0).