# Implement the planned pages

Read the selected direction, storyboard, edited copy, and media inventory. At representative: build the homepage and representative interior. At pages: implement remaining routes and repair reviewer findings. Adapt local components to compositions; don't choose the narrative from a starter stack.

For an opted-in reference release, preserve the accepted relationships in direction identity invariants and storyboard: introduction, proof format, density changes, interior development, mobile order and action placement. Inspect the relevant pinned original previews or live dossier evidence before adapting an unfamiliar relationship. Later routes should develop the same organizing idea for their own tasks. If implementation constraints erase it, record the concrete constraint and revise the plan explicitly. Do not solve that mismatch by importing teaching claims/media or replacing the accepted direction with a familiar default.

Build site-owned treatments for the selected theme and content. If renaming a component, update its class selectors and variants consistently. Keep ordinary controls accessible, semantic markup, keyboard navigation, image dimensions/alt, and functioning actions.

For the representative homepage and interior, follow the active authoring mode in `components.md`. Implement the planned content relationships with site-owned elements. In `composition-v1`, record consequential decisions and bind stable planned element IDs in markup. Check full-page rhythm after compilation; a good isolated element can still be wrong next to its neighbors. Inspect the live local render before accepting the choice.

Place media with attention to intrinsic content and crop. Keep text-bearing graphics legible. Retain supported business meaning when adjusting copy to fit. A themed restyle may change component CSS and composition while preserving facts and integrations.

Do not edit raw harvest, business facts, or approved copy to disguise a visual failure. For an upstream factual defect, record the required correction instead. Run build and inspect actual output. The next browser and critic nodes provide independent acceptance.
# Contact behavior

If a page offers a lead form, mark the form `data-lead-form` so the compiler binds its action to the harness lead endpoint. Give every field a native label and meaningful validation. The browser review submits synthetic values against a mocked local response and must see the success state. A form that simply reloads the same page is an essential-functionality defect. A direct phone or email route is also valid when it matches the business's actual contact process.


For scroll motion, use the stage-scoped `motion.md` contract. Choose business-specific scenes and quiet intervals; preserve operator policies. Carry motionPlan v2 for every new/reauthored route (historical v1 remains compatible) from direction/storyboard to unique native/component target IDs, then inspect before/during/after normal and reduced scrolling. Temporal claims require live observations or recordings; agent review is not human preference.


Whole-page motion responsibility: for new/reauthored routes use motionPlan v2 and read `motion-page`. Cover every authored route, including expansion/contact; locate opening, development, connected quiet intervals and closing in actual IDs. Keep essential content/actions static and readable. Representative runtime success or two colocated effects is insufficient. Inspect normal desktop/mobile full journeys and reduced/static views; critique distribution, continuity, inert stretches, competition and meaningful differences among routes with located evidence. Return actionable repairs, preserving operator off and historical records. Human preference stays unset.

For new-build icons, read `icons.md`, search by meaning with `vitris-icons search QUERY`, inspect availability and family-specific sizes with `vitris-icons inspect NAME --json`, and author paired `<vitris-icon name="phone"></vitris-icon>` tags. Use original SVG masters instead of Unicode/emoji pictograms, icon fonts or client catalogs. Keep a coherent supported family, visible service labels, and accessible control names. The curated industry studio selection supports eight symbols at 24–32px or larger; use core masters for compact controls. Each route receives only its used SVG geometry.

For sites with typography version 1, load `typography.md`. Establish concrete shared roles before authoring, reuse sizes and weights across routes, retain the 12px rendered floor, and repair browser typography findings before acceptance. Template identity does not waive this policy.