Extraction Procedure & Screenshots

Output: memos from Brand Memo Templates that pass the rebuild check at the end. Work top-down: site-wide first, then pages, then complex effects. 1 PRINCIPLE: CODE FIRST, BROWSER LAST All values come from the site's code: fetched HTML, stylesheets and scripts, parsed with local scripts. This includes hover, focus and active states, transitions, keyframes, breakpoint values, hidden states (menus, modals, accordions), themes and timings set by scripts. The browser is used only for: screenshots; a surface check that the page looks like the description (section order, obvious colors, nothing missing); values that exist nowhere in the code (content-driven heights, text wrapping), and only when a memo field needs them. Screenshots and the surface check always come from the live site in the target locale. 2 PROCEDURE 1 Scope. Brand, design year, locale. Live site in the target locale. Note URLs and dates. 2 Locale. If the site picks the country or language by IP, select the target region in the site's own region or language switcher (usually in the footer) in an isolated browser context; it stores a cookie (e.g. country, locale). Reuse that context for screenshots and send the same cookie with every fetch. 3 Fetch. Download the HTML of each page type with a desktop user agent, the target Accept-Language and the locale cookie (check the lang attribute and content to confirm the right locale). Download every linked stylesheet and the scripts that drive visible components. Keep them in a working folder. 4 Page inventory. From header and footer links map URLs to page types (Vocabularies). One representative URL per type; home always. Check which pages share the current design system (class prefixes, stylesheet names); pages still on an older system are not described in the same set. 5 Structure. Parse each page's HTML: sections in order, their classes and variants, element inventories, copy samples, data attributes (durations, intervals, counts), body and html classes (themes, variants). 6 Tokens. From the stylesheets: :root and component custom properties, typography classes, colors, radii, shadows, spacing, transitions; every @media block for tablet and mobile values. Fill the TOKENS block. 7 States and motion. From the stylesheets: :hover, :focus-visible, :active, :disabled rules, transition and animation properties, @keyframes, open and closing classes. From the scripts: durations, easings, formulas and values set at runtime (search for the custom property names or class names used in CSS). 8 Fonts. @font-face rules and font stacks; license; open alternative (Media, Assets & Legal). 9 Recipes. For complex components collect the required numbers (Components, Motion & Recipes) from CSS and JS. 10 Browser pass. Open the live page in the target locale: take the minimum set of screenshots (section 5) and do the surface check. Compare the section list with the parsed HTML: sections rendered only on the client are missing from the server HTML; read their classes and the stylesheet URLs from the live page (document.styleSheets), then fetch and parse those stylesheets as in steps 6-7. Fix the memos where the page visibly differs from the description. 11 Write. Recognition keys and guardrails last; put them at the top of the Overview. 12 Completeness check, then the rebuild check. 3 CODE TECHNIQUES Fetch: curl with a browser user agent, Accept-Language and the locale cookie; follow redirects; confirm status 200 and the lang attribute. A redirect to another country path means the locale cookie is missing. Parse CSS with a small script that walks rules and all nested at-rules (@media, @supports, @container, @layer) and prints matching selectors with their declarations and context; filter by selector and property. Design-system tokens often sit on :root or on mode classes (light, dark) as hundreds of custom properties; dump them per selector and per breakpoint, then resolve var() chains to final values with a script. Keep script output short (a few hundred lines); save bulk results to files and read them in slices. Custom properties often hold all state colors, sizes and durations of a component (--button-*, --dotnav-*, --modal-*). Script-driven values: search minified JS for the custom property name, class name or data attribute; the formula or constant sits next to it (e.g. a duration computed from element height, a default easing name). Named easings in JS map to cubic-bezier: easeInOutCubic (0.65,0,0.35,1), easeOutCubic (0.33,1,0.68,1), easeOutQuint (0.22,1,0.36,1), easeInOutQuad (0.45,0,0.55,1). Themes and variants are usually classes on html or body in the HTML (e.g. globalheader-light), not computed in the browser. Heights of fixed-size blocks come from CSS (min-height, custom properties per breakpoint); only content-driven heights need the browser. Cross-origin stylesheets are fetched directly by URL. 4 BROWSER (screenshots and surface check only) Use an isolated browser context with the target locale selected; set the exact viewport by emulation (1440x900x1, 390x844x2 mobile touch). Scroll through the page once before a full-page screenshot so lazy images and animations load. Close locale-suggestion toasts and cookie banners with their own close buttons before capturing; if one cannot be closed, hide it from script. Hidden states for screenshots: open them with the site's own controls from script (element.click() on the real toggle) or its state classes; do not click coordinates on hidden buttons. Bring the tab to the front before screenshots; background tabs time out. Very tall pages exceed the capture limit (16384px): capture at 1x, hide the footer for the page capture, or capture the page in two parts by hiding the other half of the sections; say so in the caption. 5 SCREENSHOTS Attach to the brand memo they illustrate (never to system memos). JPG or WEBP (PNG for small crops). Name: <brand>_<year>_<page>_<d|m><width>_<what>.<ext> Examples: stripe_2026_home_d1440_top.jpg, stripe_2026_home_m390_full.jpg, stripe_2026_overview_d1440_states.png, stripe_2026_nav-mega-menu_d1440_open.jpg Minimum set: Overview: desktop first screen of home; mobile first screen of home; state sheet (buttons and links in default / hover / focus, cropped and stacked); mobile menu open. Each Page memo: desktop full page (split into parts if taller than about 8000px); mobile full page; each overlay used on the page. Each Recipe: 2-4 key frames (closed, open; or playing, mid-progress). Dark mode if the site has it. Caption entry in the SCREENSHOTS section of the memo: - file: stripe_2026_home_d1440_top.jpg shows: header and hero (S1-S2), viewport 1440x900, scroll 0, default state source: live https://stripe.com 2026-09-24 key values: bg #ffffff; H1 48px/300 two tones; primary button #533afd radius 4px do not copy: logos, product imagery; use placeholders Captions repeat key values as text. 6 COMPLETENESS CHECK Every MUST item from Rules is present or marked "not measured, est ...". Every section on every described page has elements, sizes, copy sample, responsive line. Every button, link, card and input variant has hover and focus-visible with transition. Every animated thing is either a one-line hover note, an interaction record or a Recipe. Recognition keys are specific enough to tell this brand from its competitors. 7 REBUILD CHECK (once per brand set) 1 Using only the memos (not the site), build the home page first screen and one feature section as a plain HTML page. 2 Screenshot it at 1440 and 390 and put it next to the original screenshots. 3 List every visible difference: color, font weight, size, spacing, radius, shadow, alignment, missing element, motion. 4 For each difference, fix or add the missing value in the memo. Repeat until the two look like the same design. 5 Write the result in the Overview header: rebuild check: passed <date> | not done.