# A site with several pages (https://lazyfrog.dev/docs/guide/a-site-with-several-pages)

{/* Generated by scripts/generate-docs.ts from services/gateway/src/guide.md. Do not edit. */}

Decide how the pages share their parts before writing any page. The header, menu, hero, footer,
colours and type each come from one place, so one change reaches every page and no page drifts.
This is for a new site, a refresh and a redesign; an exact copy keeps the structure it has, and a
CMS or an app brings its own templates, so use those.

1. **The look first.** Agree it with the plan (`look` `propose`, as one of the plan's questions,
   then `look` `apply`: "Give it its own look" in the guide's core) and build with its tokens, so
   the page shows what was chosen: `look` `apply` only writes the file, and `design_check` says when
   a page's fonts aren't the look's. A page never gets its own copy of a shared rule.
2. **One shared layout, then one page to prove it.** Use whatever makes pages share their parts
   in this stack: a framework's layouts, or a small build step with templates on a static site.
   Plain HTML files copied for each page drift. Build the layout and one real page, show the user
   that page on a phone and on a laptop, and get their yes before the next page. Only their own
   "just build it" skips that yes; defaults you picked don't.
3. **Then the rest from templates.** Each kind of page (a list, an article, a gallery) is a
   template filled with its content. When the user asks to change a shared part, change it once at
   its source, never with an override on one page.
4. **Generated files stay generated.** With a build step, edit the sources, keep them apart from
   what it writes, and tell the user which sources you changed, not every file the build rewrote.
5. **What you show as the design is the real page.** Show a `preview_screenshot` of it, not a
   picture from an image tool. If the user wants ideas first, call that picture a sketch, and
   compare the built page against it before saying they match.
6. **Check across pages.** `design_check` measures one page and doesn't compare pages. After a
   change to a shared part, take a `preview_screenshot` with `viewport: "all"` of the home page and
   of one page of each kind, and compare their header, hero and footer yourself. A screenshot
   doesn't press anything: try a player, a menu, a slideshow or a form with `preview_try` (guide
   topic `seeing-your-work`), on a phone as well, before saying it works.