First visit to scale, Pattern Paste Canonical: https://patternpaste.com/pattern/first-visit-to-scale.html Core Patterns (https://patternpaste.com/patterns/) How it works (https://patternpaste.com/patterns/steps/) Catalogue access Standard # 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. ## All patterns Search patterns Loading patterns… Start here ## What to change first - 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. - The introduction and the note. Length, price and what to bring. - The link. #book. 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. Theme handoff ## What comes from where ### From your theme - Typeface. - Palette. - Buttons. ### Set by this pattern - The heading. - The widths. Full pattern notes ## Why it works, and how it is built Open a topic for the complete design reasoning, editing guidance and implementation notes. Design rationaleComposition, intent and nearest alternatives ### Overview What happens at a first appointment, for a clinic, salon or practice whose new customers want to know what to expect. A label, a display heading and a short introduction with the length and price sit over a bar of the whole appointment, then the steps themselves. It sits in the steps section beside steps-ledger and steps-run, which number their steps; this one measures them. ### 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. Make it yoursVariations and the edits to make first ### What to change first - 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. - The introduction and the note. Length, price and what to bring. - The link. #book. Theme behaviourInheritance, fixed decisions and contrast ### 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(, calc((50rem - 100%) * 999)): under a 50rem row the second term wins and the step takes the full row. Technical notesBlock mechanics, responsive behaviour and constraints ### 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. Questions ## First visit to scale: common questions Does First visit to scale need a plugin? No. It is built only from core WordPress blocks (button, buttons, group, heading and paragraph), so it pastes into the block editor with nothing to install. Will First visit to scale match my theme? Choose by variation. Minutes bar takes your theme’s palette; Mend brings its own colours. How many variations does First visit to scale have? 2: Minutes bar and Mend. Each is its own markup; choose one in the toolbar above the preview before you copy. Is First visit to scale free? It is included with a subscription, with every Core Pattern and variation. 56 Core Patterns are free to copy without one. Which WordPress version does it need? 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. 16KB of core-block markup, 5 blocks (button, buttons, group, heading, paragraph), and nothing else: paste it into the block editor and it becomes editable blocks wearing your theme. Subscribe to copy it, £119 a year (https://patternpaste.com/account/#plan) What you copy is yours forever. Not for you? We refund within 14 days. Back to Core Patterns (https://patternpaste.com/patterns/) Catalogue access ### £119 a year All patterns, variations and theme downloads. What you copy is yours forever. Not for you? We refund within 14 days. Subscribe, £119 a year (https://patternpaste.com/account/#plan) Sign in (https://patternpaste.com/account/) Everything you copy is yours to keep, forever, on any site; access to the rest of the library runs while you subscribe. Not for you? Tell us within 14 days of a payment and we refund you. After that, cancelling stops the next renewal and access runs to the end of the year you have paid for. Prices are in pounds and are the full price in the UK, the US and eleven other countries; elsewhere the checkout adds your local VAT or sales tax. The terms name every country. #### Pair with Features Appointment letter checklist What to bring to a first appointment, set as the confirmation letter itself: a card with the booking's details written into ruled blanks (date, time, who, where, length and fee) and a checklist of empty squares to tick the night before, beside a short introduction. States no colour and no font of its own. (https://patternpaste.com/pattern/appointment-letter-checklist.html)Hero Hero aperture An opening section on your theme's own paper: a tracked line, a display headline, one short paragraph on a reading measure, and then a picture that stops short of the edge on every side. The signature is the margin: the image is a window cut in the page rather than a band across it, and the paper around it is what you notice. A small opaque plate in the picture's bottom-right corner carries the caption, so no type ever sits on the photograph. The still-image version includes an example photograph; select your own clip for the video version. States no colour and no font of its own. (https://patternpaste.com/pattern/hero-aperture.html)Timeline Course plan taper A typical course of treatment drawn as eight weeks on a ruled baseline: a solid bar for each clinic session, its height set by its minutes, and a short rule for each week of exercises at home, so the sessions visibly shorten and spread out as the course goes on. A legend, three totals and one button. States no colour and no font of its own. (https://patternpaste.com/pattern/course-plan-taper.html) #### Before you paste 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. How we test patterns (https://patternpaste.com/how-we-test/) ## Specifications Section How it works Access Subscription Plugin None, core blocks only Variations 2 Colour From your theme or its own palette Type From your theme or its own type Motion None Blocks button, buttons, group, heading, paragraph Presets color 6, spacing 5, font-size 2 WordPress 7.0+ Continue exploring ## Next in How it works Explore all 6 How it works patterns (https://patternpaste.com/patterns/steps/)Also in Timeline (https://patternpaste.com/patterns/timeline/) Shot in Twenty Twenty-Five How it works No plugin needed ### Steps screens A software walkthrough in four columns: a 16:10 frame with an example photograph ruled in currentColor, then a numeral chip that laps half into the frame and half into the caption below it, then the step title and one sentence. How it works Preview pattern (https://patternpaste.com/pattern/steps-screens.html) Shot in Twenty Twenty-Five How it works No plugin needed ### Steps cards Four photographic process cards with level tops and descending feet. How it works Preview pattern (https://patternpaste.com/pattern/steps-cards.html) Shot in Twenty Twenty-Five How it works No plugin needed ### Steps cover stair A full-bleed cover with a heavy veil of your theme's contrast colour over the photograph, a display headline at the top left and three numbered steps set as a stair: each step a huge numeral, a short title and one line under a hairline rule, every column starting lower than the one before, so the steps descend down and to the right across the photograph. How it works Preview pattern (https://patternpaste.com/pattern/steps-cover-stair.html)