# TPO permission steps

> A four-step process on an inverted slab for work that needs the council's consent: each step opens with an oversized numeral and a timescale badge on a hairline, then a heading and a short line. A heading under the steps gives the whole wait, beside a button and a call link. The steps run four across, two on a tablet and one on a phone. States no colour and no font of its own.

Canonical: https://patternpaste.com/pattern/tpo-permission-steps.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: tree preservation order, TPO, conservation area, planning, permission, tree surgeon, steps

## Variations (2)

### Permission steps (the default)

Identical markup in every theme.

Inverted: your contrast ground with base type, base numerals and hairlines, timescale badges in base with contrast type, and a base button.

### Bough

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

The Bough tree surgeon set: a forest slab, light leaf-green Rockwell numerals and timescale badges with 2px corners, birch-bark type over Trebuchet and a filled orange button.


---

## The signature moment: every step carries its wait as a badge beside an oversized numeral

**Each step opens with a numeral set at display size and, level with its
foot, a small badge naming how long that step takes**: same day, 1 to 2
days, 6 to 8 weeks, within 3 weeks. A heading under the steps adds them up.
The steps are a grid from a 16rem minimum, four across, two on a tablet, one
on a phone.

## What it inherits from your theme

- **Typeface.** The base states no font family.
- **Palette.** Inverted: your `contrast` ground with `base` type, numerals
  and hairlines; the badges are `base` with `contrast` type; the button is
  inverted to `base` with `contrast` type so it reads on the slab, and the
  call link follows the text colour.

## What it decides for itself

- **The numerals.** A bare clamp from 72px to 128px: their size is the
  composition.
- **The heading.** A bare clamp, about 34px on a phone.

## What to change first

1. **The council and the timescales**, if you work under a different
   authority.
2. **The closing line**: your usual total wait.
3. **The phone number** on the call link (it dials the number it shows).

## The Bough look

Part of the Bough Pattern Set, a tree surgeon in Brimscombe Port, Stroud.
Here the section is the forest `#15301c` slab: birch-bark `#e8eee2` type,
light leaf-green `#9fd08a` numerals and labels (8.1:1 on forest), leaf-green
timescale badges with forest type and 2px corners, `#3d6647` hairlines, a
Rockwell slab stack over Trebuchet MS, and a filled hi-vis orange button with forest
type and 4px corners. Take the base for your theme's colours, or the look's
**Use my theme** chip.

## Notes

- Core blocks only: group, heading, paragraph, buttons.
- No photograph.