Harrisburg Copier

The same page, rebuilt against eight rules

Same content, same brand tokens, same type pairing. Nothing was repainted for the sake of it. What changed is the order the decisions were made in, and every claim below is a measured number rather than an opinion.

First viewport, 1440 wide

What a visitor sees before scrolling

The version on the left is live now. The one on the right is the rebuild.

Beforeharrisburg-astro-wp.pages.dev
The current Harrisburg Copier front page, showing a headline on the left and a six field quote form on the right, with no photography
Three competing actions in the fold: a call button, a second button, and a six field form. No photograph anywhere on the page.
Afterthis rebuild
The rebuilt front page, showing a full bleed photograph of Harrisburg across the Susquehanna with one large call button carrying the phone number
One action. The phone number is the button, at 64 pixels tall with the digits set at 22. The photograph is the real view from City Island.
Open the rebuilt page Open the current page

Measured in the browser

The numbers, not the adjectives

Every row was read out of the rendered page with devtools, on both versions, at the same viewport.

WhatBeforeAfterWhy it matters
Headline to lede 2.87 to 1
69px over 24px		 5.01 to 1
90px over 18px		 At under three to one nothing on the screen is the hero. Scale carries hierarchy; weight cannot do it alone.
Actions in the fold Three
two buttons and a six field form		 One
plus a quiet text link		 Print driven traffic arrives outdoors and one handed, seconds after opening the mail. One tap beats four fields.
Call button 50px tall
digits at 17px		 64px tall
digits at 22px		 The number is the product, so the number is the label. Not the words "call us".
Photographs Zero One, licensed CC0 Every reviewer on the last design panel named zero images as the number one failure. A real photograph of the place is allowed; a stock model posing as a technician is not.
Invented figures Three
38 percent, 600 plus, 21 years		 None The business is not trading yet and the domain is not registered. Those numbers had no source, so the whole statistics band came out rather than being reworded.
Empty grid cells One
fourth service card alone in its row		 None
two by two		 A grid with a hole in the last row reads as unfinished, and it is the single most common tell in generated layouts.
Motion carrying no information Infinite brand marquee Static row Eight brand names that never stop moving on a page whose only job is to be read and called.
Page ground #f7f6f3
hue 91, chroma 0.004		 #f4f6f8
hue 232, chroma 0.005		 The old ground was warm but sat under the chroma threshold, so it was never the banned colour. It was cooled to sit with the river, not to fix a fault.
Sticky call bar on phones None Visible in CSS by default Scripting may only hide it. A bar that waits for a scroll listener is invisible when the script does not run.
Horizontal overflow at 390 None None The prototype already passed this. Not everything needed fixing.

The method

Eight rules, written down after the last job took four attempts

The Kingsberg landing page was rejected three times before it was approved. Nothing about the fourth attempt was more effort, it was a different order. These are that order, and this rebuild is the first job to run them from the start.

Rule 01Show the direction first

World, palette in hex, type faces, section order. Ten lines before any CSS. Every rejection last time was a direction rejection killed in five seconds after an hour of execution.

Rule 02Start from a real template

Hand authored skeletons converge on the training data mean no matter how good the anti-slop pass is.

Rule 03Photography is not optional

The ban is on generated and faked photographs, not on photography. A licensed picture of the actual city is fine.

Rule 04Measure the palette

Lightness, chroma and hue as numbers. A hex block list will not catch a colour written in another notation.

Rule 05Scale carries hierarchy

Headline to lede at five to one or better. Weight alone does not make something the hero.

Rule 06One action, and the number is the button

Sixty four pixels tall, digits at twenty two. The form gets its own section further down.

Rule 07Kill the template tells

Pale ghost numerals, pastel highlight washes, a dark band directly above a dark footer, a dropdown for a three way choice.

Rule 08No visible placeholders

A line announcing that the business has not answered a question is worse than no line. Track it in the brief instead.

What was deliberately left alone

This is a rebuild of the execution, not a rebrand. The comparison would be worthless if the type and colour moved too.

  • Bricolage Grotesque and Public Sans, the locked pairing from the prototype, unchanged.
  • The teal, #0f6b62, unchanged. Chosen so the city sites do not read as one site with a different phone number.
  • Every word of body copy, every FAQ answer, every service description, unchanged.
  • The form still posts to the shared service at forms.perfectcopier.com, so it keeps the honeypot, the Turnstile check and the fleet monitor.
  • WordPress against Astro is settled and was not reopened. The same content model drives either front end.
Still open, and visible on the rebuilt page

Named here rather than papered over.

  • The telephone number is a 555 placeholder. It is a recognised fiction rather than a number that would ring a stranger, but it is still not a real number.
  • No photographs of the actual business, its vans, its technicians or its showroom. Those have to come from the client and cannot be generated.
  • Nothing beyond the front page exists.
  • The domain is not registered, and harrisburgcopier still needs a site row in the forms service plus the SMTP2GO records before any form can deliver.

Whole page

Top to bottom, both versions

Scroll inside either panel.

Before3,215 pixels of page
Full length screenshot of the current Harrisburg Copier front page
After2,852 pixels of page
Full length screenshot of the rebuilt Harrisburg Copier front page