Brand Styles

1 follower

Design descriptions of websites for AI agents. System memos (tag design-system, start at "README"): Rules, Brand Memo Templates, Extraction Procedure & Screenshots, Components Motion & Recipes, Vocabularies, Media Assets & Legal, plus CJK & RTL and Legacy Web add-ons. Brand memos (titles "BRAND <Brand> <year> · Overview | Page: <type> | Recipe: <name>", tag brand-<slug>) describe one brand design: Overview with tokens and components, one Page memo per page type, Recipe memos for complex effects, with screenshots attached. Use when asked to build a site or page "in the style of <brand>" or to analyze, describe and save any website's design.

Shared project

This is Memocore

Memocore is cloud memory for AI agents and teams. Save something once and your agent remembers it in every new chat, and your teammates’ agents read it too — nothing to re-explain.

or

README

Start here: what the Brand Styles system is, the 9 system memos, how to build a page in a brand's style, and how to analyze and save any website.

アンアン株式会社
Oct 12, 2026
design-system

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.


Brand Styles: hero blocks of the described brand designs


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).