# Find every difference, one stripe at a time, and close it

A child doing a spot-the-difference puzzle beats a model looking at a website, and the reason is the
game. Two fixed pictures. A known number of differences. A list of small concrete facts. Without that
shape, a reviewer summarises, invents plausible-sounding mismatches, and declares the page fine.

**You write the list. That is the job.** Reading the combined image and naming every difference is the
work this pass exists to do. Handing that job to the person you are working for is this pass failing,
not this pass working.

The thing on the right must look like the thing on the left. **If a stripe of the page is a different
height, something inside it is wrong** — type size, line spacing, images, image size, layout. Height is a
pointer to content. It is never a thing to pad.

Commands assume a folder named `beargrassai` on the machine running them.

---

## The two words

**REFERENCE** — the version being matched. **CANDIDATE** — the version being built.

---

## What you are while you run this

Filling in a list, not writing a review. Short plain nouns. Local. "Missing globe," not "improved hero
hierarchy." Every line names an object and says what it looks like on each side. **A line you cannot
write in that form is not a finding yet — look again.**

---

## The order. Do not skip. Do not reverse.

1. Take the pictures of both sides.
2. Combine them into one image per page.
3. **Count the stripes.** This is the gate. Nothing else happens until it passes.
4. Name every difference inside each stripe.
5. Measure the differences you named.
6. Fix the contents of the one stripe that is worst.
7. Rebuild the combined image for that one page. Measure again. Then the next stripe, or the next page.

---

## Step 3. Count the stripes. This is the gate.

A stripe is a horizontal band of the page whose edge a person can see: a change of background colour, a
photograph, a footer. **It is what the eye sees, not a tag in the markup.**

1. Cover the candidate column. Count the reference's stripes, top to bottom. The header is one. The
   footer is one.
2. Uncover it. Count the candidate's.
3. **If the counts differ, stop.** Write down which stripe is missing and fix that before anything else.
   Do not start naming differences. Do not measure. Do not soft-pass.

**Why this is first, and it is not a formality.** A page was once missing an entire section — a list of
links most of a screen tall — because the generator had put the page's whole body inside a decorative
64-pixel strip that hides anything taller than itself. Four rounds of careful measuring never found it,
**because every box those rounds measured was correct. A stripe that is not drawn has no box to
measure.** Counting found it in ten seconds.

On a phone, count twice: once with the menu closed and once with it open, the same crop on both sides. A
build once matched every stripe of the body and shipped a phone header with no menu button at all.

---

## Step 4. Name every difference inside each stripe

Left to right, top to bottom, one stripe at a time. Every line has the same shape:

```
<stripe> — <object> — reference: <what it is> — candidate: <what it is>
```

Examples of the right size of fact:

- `hero — wordmark — reference: two lines, "Mark" over "Ulett" — candidate: one line`
- `hero — rule under the name — reference: two gold strokes — candidate: absent`
- `essays — card footer — reference: "Read →" and an "AI prompt" button — candidate: "Read →" only`
- `footer — column order — reference: Read, Elsewhere, Plot — candidate: Elsewhere, Read, Plot`

Not findings: "the hero feels lighter", "spacing is off", "roughly the same", a bare pixel number.

Write them into a file that lives with the client's work for that date. **The list is the deliverable of
this step.** A stripe with no differences gets a line saying so.

---

## Step 5. Measure what you named

Now, and not before, measure the things on your list — width, height, margin, font size, colour — on both
sides, at desktop and at phone size. The numbers tell you which of several possible causes is real.

**Measurements support the list. They never replace it.** And a whole-page difference percentage is not a
score: a page can improve and score worse, because restoring a missing stripe moves everything below it
out of alignment. Use it to point at a stripe, never to report progress.

---

## Step 6. Fix the contents of one stripe

One stripe. Fix what is inside it. **Never pad a height to close a gap.**

Before writing anything, compare the style rules for that stripe on both sides. On one page every style
rule for the lower half of the page was already present and identical — so every difference was in the
markup, and no amount of stylesheet work would ever have closed them.

Then sort what you found, because where it gets fixed differs:

| what it is | where it gets fixed |
|---|---|
| a style value | the site's stylesheet — **and written back to the source, see below** |
| an element that is missing, or nested wrong | the generator. Not a patch in one site's files. Write it up |
| the owner's words, images or records | the content store, through the editor |
| a missing file, such as a font | the shared media host. Never a binary added to the repository |
| script written inline in the reference | cannot be copied. It is refused by the safety checks. Needs a shared module, or a decision |

**Write the fix where the site is generated from, not only where it was generated to.** A style fix made
only in the built files and deployed will not appear in the editor and will be erased by the next
publish. This has happened; a night's work sat 890 bytes outside the source.

---

## Step 7. Rebuild and check, then go again

Re-take and re-combine **that one page**. Confirm the stripe you fixed now matches. Confirm you broke
nothing above or below it.

**Then the next stripe. Then the next page.** The cycle is not finished because one stripe is fixed. It
is finished when a page has no stripes left, and a site has no pages left.

---

## What good looks like

A page where the stripe counts match, every difference is written down and either closed or carries an
explicit decision to leave it, and the rebuilt combined image shows two columns a person would call the
same page. Not "no obvious problems" — **a written list, every line closed.**

## Definition of done

**For one stripe:**
1. It appears on both sides.
2. Every difference in it is written down in the object-and-both-sides form.
3. Each one is fixed, or carries a written decision to leave it.
4. The fix went to the place the site is generated from.
5. The page was rebuilt and the stripe matches.
6. Nothing above or below it changed for the worse.

**For one page:** every stripe done, and the stripe counts match on desktop and on a phone with the menu
both closed and open.

**For a site:** every page done, and then read once by someone who did not build it.

## Refuse these

- Starting anywhere but the stripe count
- Naming differences before the counts match
- Reporting a percentage as progress
- Padding a height to close a gap
- Fixing more than one stripe before rebuilding
- Moving to the next page with a stripe unclosed
- Fixing the built files when the site is generated from somewhere else
- Asking the person you work for what is different. That is this list's job