Memory of Brand Styles

Brand Styles stores design descriptions of websites, precise enough that an agent who never saw a site can rebuild any of its pages in the same style, and so that any agent can describe any site the same way.

1 Memo kinds

• System memos (tag design-system): the 9 memos listed in 2. Rules and formats only; no brand data, no screenshots.
• Brand memos (tag brand-<slug>): BRAND <Brand> <year> · Overview | · Page: <page-type> | · Recipe: <name>. One brand design = Overview + Page: home (+ other pages) + Recipes for complex effects. Screenshots are attached to brand memos.

2 System memos

• Rules: memo kinds, naming, what is mandatory, value formats, evidence markers, guardrails. Read first.
• Brand Memo Templates: fill-in templates for Overview, Page, Recipe, with examples. The only list of fields.
• Extraction Procedure & Screenshots: how to analyze a site step by step, extraction techniques, screenshots, completeness and rebuild checks.
• Components, Motion & Recipes: component checklist, states, interaction record, required numbers per component type, scenes and experimental effects.
• Vocabularies: page types with fallbacks, section types, style tags.
• Media, Assets & Legal: describing imagery and icons, fonts with open alternatives, what a rebuild may copy.
• CJK & RTL Typography: add-on for Japanese, Chinese, Korean, Arabic, Hebrew.
• Legacy Web (1990-2009): add-on for old designs.

3 Describe and save a site

1. Read Rules, Brand Memo Templates and Extraction Procedure & Screenshots. Add CJK & RTL or Legacy Web if the site needs them.
2. Search for existing memos BRAND <Brand> <year>: update them instead of duplicating.
3. Follow the procedure: screenshots, tokens, fonts, layout, chrome and components, pages, motion.
4. Write Overview, Page: home and other requested pages, Recipes; attach screenshots with captions; tag brand-<slug>; link Page -> Overview and memos -> their Recipes.
5. Run the completeness check and the rebuild check; fix the memos until the rebuild matches.

4 Build a page in the style of a brand

1. Parse the request: brand, page type (map with Vocabularies, e.g. "catalog" -> category-listing), year if named.
2. Find memos titled BRAND <Brand>. Several years: use the requested one, else the newest, and say which. None: say so and offer to analyze the site (section 3).
3. Read the Overview, then the Page memo for the page type (missing: its fallback from Vocabularies, say so), then the Recipes they link.
4. Open the attached screenshots (get-file-url) and look at them before building.
5. Write a short resolved spec: TOKENS block with page overrides applied, fonts with alternatives, header and footer, sections in order with elements, interactions, guardrails.
6. Build in this order: tokens -> header and footer -> sections in order -> components and states -> motion and Recipes -> responsive -> reduced motion.
7. Replace brand assets and proprietary fonts (Media, Assets & Legal).
8. Check against the memo: recognition keys all visible, guardrails respected, section count and elements, key values. If possible, screenshot the result and compare with the attached screenshots. Report fallbacks and values marked (est), (ext) or (inf).