Build a Page in a Brand Style

Workflow for building a page in the style of a brand described in this project. The memos and their screenshots are the source; nothing is copied or hotlinked from the brand site. Run the steps in order. 1 PARSE THE REQUEST - Brand; page type (map the user's words with Vocabularies 1: "catalog" -> category-listing, "landing" -> home or landing-campaign, "product page" -> product-marketing or product-detail); year if named. - Content: the user's own product and copy, or placeholders. Output: plain HTML and CSS, or the framework the user named. Viewports that matter. - Ask only when the brand or the page type cannot be decided; otherwise choose and say what you chose. 2 FIND THE BRAND SET - Check the Brands list in README, then search-memo for "BRAND <Brand>" with the tag brand-<slug>. - Several years: use the requested one, else the newest, and say which. - No set: say so and offer to describe the site first (Describe and Save a Site). Never build from general memory of the brand. 3 READ IN THIS ORDER - The Overview in full: recognition keys, guardrails, TOKENS, fonts, color, type and layout rules, components, header and footer, motion, responsive. - The Page memo for the page type. Missing: use the fallback page type from Vocabularies 1, say so, and keep the Overview's chrome and components. - Every Recipe linked from the Overview and from the Page memo. - Combine as in Rules 3: Page values override Overview values; a section's own values apply only inside that section; a Recipe fully defines its effect; TOKENS wins over prose. 4 LOOK AT THE SCREENSHOTS - Open every attachment of the memos you read (get-file-url) and look at them before writing code: composition, density, proportions, imagery, states. - Read their captions: they repeat key values and say what not to copy. - Where a screenshot and the text disagree, follow the measured values in the text and note the difference for the report. 5 WRITE A RESOLVED SPEC Short, before any code: - TOKENS block with the page overrides applied, as CSS custom properties. - Fonts: brand family -> open alternative with weight, tracking and size adjustments (Media, Assets & Legal 3). - Header, mobile menu and footer. - Sections in order: type and variant, layout, elements with counts and sizes, copy length, media placeholders, motion. - Components with every state and transition; interaction records; Recipes to implement. - Responsive changes per breakpoint. - Recognition keys as a checklist; guardrails as a do-not list. 6 BUILD IN THIS ORDER 1 Tokens as CSS custom properties; base type and colors. 2 Header and footer, then the mobile menu. 3 Sections in order, at the reference desktop viewport first. 4 Components and their states: hover, focus-visible, active, disabled, with the exact transitions. 5 Motion: interaction records and Recipes (timings, easings, stagger, open and close, switching). 6 Responsive changes at each breakpoint. 7 Reduced motion replacements. 7 ASSETS AND COPY (Media, Assets & Legal 4) - No logos, mascots, brand photos, renders, videos, proprietary icons or original copy. Use placeholders ([LOGO], [PRODUCT IMAGE 4:3]) or original substitutes of the same kind, size and feel. - Proprietary fonts: the open alternative unless the user has a license. - Copy: new text with the length and tone of the copy samples. - No hotlinking from the brand site, no implied affiliation with the brand. 8 CHECK - Every recognition key is visible; no guardrail is broken. - Section count, order and elements match the Page memo. - Key values match: accent color, type sizes and weights, radii, container width, button height, section padding. - States and motion: hover and focus every component; open and close every menu, modal and carousel; compare timings and easings with the memo. - If a browser is available, screenshot the result at 1440 and 390 and compare it side by side with the attached screenshots; fix the differences and repeat. 9 REPORT Tell the user: which memo set and year were used; fallbacks taken (page type, missing values); values marked (est), (ext) or (inf) that the build relies on; substitutions (fonts, images, logo); known differences from the screenshots. If the memos lacked something the build needed, say what, so the brand set can be updated.