Rules

Goal: a brand memo set must let an agent that never saw the site rebuild any page of it so that a side-by-side comparison looks like the same design. 1 MEMO KINDS Overview: one per brand design. Everything site-wide: recognition keys, guardrails, tokens, fonts, rules for color, type, layout, shape and depth, all global components with states, header, mobile menu, footer, imagery, motion, responsive behavior, voice, list of pages. Page: one per page type that has its own layout or section order (home, product-detail, category-listing, pricing, article...). Ordered sections with element inventories, page-specific components, states. Page types that share a layout go into one Page memo as variants. Recipe: one complex component, effect or 3D scene that needs more than about 10 lines to describe (mega-menu, carousel, scroll story, WebGL hero, configurator). A complete brand set is at least: Overview + Page: home + one Recipe per signature motion. Add Page memos for every other page type the user asked for. 2 NAMES, TAGS, LINKS Titles: BRAND <Brand> <year or YYYY-MM> · Overview | · Page: <page-type> | · Recipe: <short-name> Example: BRAND Stripe 2026 · Page: home The same brand in another year is a separate memo set. A localized site that looks very different is a separate brand (BRAND Apple Japan 2026). Tag every memo of the set with brand-<slug> (create the tag if missing). Links: Page -> Overview; Overview and Page -> the Recipes they use. No other links. Preview: one line with brand, year, domain and what the memo covers. Meta: brand name, domain, year, main hex values, font names, page type, section and component names, "build site in <brand> style". 3 COMBINING Page values override Overview values; a section's own values apply only inside that section; a Recipe fully defines its effect. The TOKENS block wins over prose if they conflict. Missing page type: use the fallback from Vocabularies and say so. 4 MUST, SHOULD, OPTIONAL MUST (never omit; if not measurable write "not measured, est <value>"): - recognition keys (5-8) and guardrails - tokens: every color role in use, font stacks, type scale for every text role with desktop and mobile values, spacing scale, radius scale, shadows, motion durations and easings, breakpoints - fonts: exact brand family, license, open alternative with adjustments - layout: container max width, grid columns, gutters, side margins, section vertical padding per breakpoint - buttons (every variant), text links, cards, inputs: default, hover, focus-visible, active, disabled, with the transition (property, ms, easing) or "instant" - header desktop, mobile menu, footer desktop and mobile - Page: home with every section in order, element inventories, copy samples; hero in full detail - signature motion: 1-3 items, each with a Recipe - responsive changes at each breakpoint - screenshots: the minimum set from Extraction Procedure & Screenshots SHOULD: other page types, all other components and their states, scroll reveal, imagery and icon details, dark mode, voice and copy rules, page states (loading, empty, error). OPTIONAL: tech stack of the original site, sound, print styles, rare states. 5 VALUE FORMATS Color: hex (#533afd); alpha as rgba() or #RRGGBBAA; add oklch() only if the site uses it. Gradients: full CSS gradient string. Length: px at the named viewport; fluid values as the CSS expression (clamp(32px, 2rem + 2vw, 48px)). Type: family / weight / size / line-height / letter-spacing in em / case / features (ss01, tnum). Motion: property, duration ms, delay ms, easing as cubic-bezier() or spring(stiffness, damping, mass), trigger. Responsive: desktop -> tablet -> mobile, with breakpoint px named once (e.g. "40px -> 32px (<940) -> 28px (<640)"). Layout position: grid column span ("text cols 1-5, media 7-12") or px offsets; aspect ratio for media. 6 PRECISION AND EVIDENCE Exact values wherever DevTools can read them. Never round the accent color, font sizes or radii. Use "~" only for content-dependent or perceptual values. Evidence is marked once per memo, then only exceptions: Header line: evidence: measured on <url> <date> unless marked. Inline markers after a value: (est) visual estimate from screenshots; (ext) third-party source; (inf) inferred, not seen. Example: hover #4032c8 (ext). A memo where most values are (est) or (ext) says so in its header line. 7 GUARDRAILS List what the design never does: "no shadows", "no radius above 4px", "no gradients outside hero", "no bold headlines", "no pure black text", "no pill buttons", "no icons in buttons". Also list well-known elements of older versions of the brand that are not part of this design. For pre-2010 designs guardrails are mandatory (no radius, no box-shadow, no web fonts, fixed width...). 8 CONVENTIONS English. Plain text, no Markdown. Sections as CAPS headings, fields as "key: value" lines, lists with "- ". The TOKENS block is written as CSS custom property lines (--color-primary: #533afd;). No other code in memos (no HTML, JS or component code). Use names from Vocabularies where one fits; otherwise a plain descriptive name. Adjectives only in prose lines, never instead of a value. 9 EVIDENCE PRIORITY Official brand guidelines > live site computed styles and CSS > design press and interviews > third-party token extractions and AI analyses (verify, mark ext). 10 NEVER STORE Logos, brand photos, product renders, videos, proprietary icons, or long copied brand text as reusable assets. Screenshots of the site are allowed as reference attachments on brand memos only. Short copy samples (headlines, button labels) are allowed.