Keep related pages consistent

Harbor Ledger's home page answers whether a contractor should book a call. The pricing page answers what the two offers include. They should not be the same stack of sections with the words swapped. They should share the header, the type, the colors, the button, the price formatting, and the refusal to invent proof. A visitor who moves from one page to the other should recognise the site without reading a repeated hero. If the second page introduces a new font, the shared system was not actually shared.

The navigation, the skip link, and the footer should be one shared piece used by both pages. Mark the current page in that shared piece, in the words and in a way a screen reader can use, not with a one-off color on each page. When the agent adds the pricing page by copying the home page file, the usual mistake is a second header with the links in a different order. Say in design.md: new marketing pages use the existing header and footer. Do not paste a second copy. A Canvas frame is a saved visual direction inside the builder, not automatically a separate page. Give a real second page its own address and its own question.

CSS custom properties pass from a parent element to its children. Define --background, --foreground, --accent, and the spacing steps at the site level so both pages inherit them. A page can override one locally, and that is not automatically wrong. It creates drift when the new value is different, unreviewed, and meant to represent the same brand role. Use a page-level override only for a deliberate exception, such as an error treatment. When two pages look different, compare the named values and local overrides before adding another color.

The pricing page shows two offers in a comparable stack: name, price, period, what is included, and the same call to action under the pair. It does not repeat the home page's long opening. The home page shows one price and links to pricing for the comparison. Those are content differences, and they should be in the brief for each page. An agent that tries to make the pages 'match' will copy the home hero onto pricing and hide the comparison. Tell it which differences are required.

Open both pages at the same desktop viewport and in a 390 × 844 px phone viewport, starting at the top with browser chrome and zoom kept consistent. Check one: the header, footer, and button match. Check two: prices use the same format and the same approved numbers. Check three: each page still answers its own question in the first screen. If check one fails, fix the shared header or the shared color, not the sentence. If check three fails because the pages became copies, restore the question order for the page that lost it. A visual comparison can show tiny pixel differences. It cannot tell you which of the three checks failed. You still have to name it.

The first time the pricing page invents a testimonial, delete the testimonial. The second time, add the refusal to design.md or to the project instructions, wherever that tool will read it on the next pricing edit. Do not add a new page of guidance for a single accident. Vercel's account of their own file says a correction earned its place when it kept showing up, and a rule that helped one artifact could hurt another. Recheck the home page after you add a refusal meant for pricing.