Brand Memo Templates

How to use: copy the template, keep the section order, fill every MUST field from Rules, write "n/a" for fields that do not apply and "not measured, est <value>" for what you could not measure. Delete hint text in angle brackets. Brand memos use the section headings without numbers. Example lines are from Stripe 2026. 1 OVERVIEW Title: BRAND <Brand> <year> · Overview 1.1 HEADER brand: ; domain: ; industry: ; design_date: <year or YYYY-MM> captured: <url, date>; evidence: measured on <url> <date> unless marked style_tags: <1-3 from Vocabularies> viewports: desktop <1440>, mobile <390>; breakpoints: <px list with names> pages: <titles of Page memos>; recipes: <titles of Recipe memos> rebuild check: passed <date> | not done 1.2 RECOGNITION KEYS <5-8 lines, most recognizable first, each imperative and concrete> Example: 1 Headlines in a light grotesk (Söhne 300 or Inter 300), -0.02em, sentence case, never bold. 2 Hero H1 is one long sentence in two tones: lead clause #061b31, continuation #64748d, same size. 3 One accent #533afd only for filled buttons and links. 4 Buttons are 4px rectangles, 48px tall, label followed by a small chevron. 5 Shadows are layered and blue-tinted, never grey. 6 One grainy warm-to-indigo gradient wave, only in the hero. 1.3 GUARDRAILS <what never appears; see Rules 7> Example: no pill buttons; no weight 700 headlines; no pure black text; no grey shadows; no borders thicker than 1px; no gradients outside the hero. 1.4 TOKENS <CSS custom properties, grouped with comment lines. Every value used on the site goes here; prose sections only explain usage.> /* color */ --color-primary: ; --color-primary-hover: ; --color-on-primary: ; --color-ink: ; --color-text: ; --color-text-muted: ; --color-surface: ; --color-surface-alt: ; --color-surface-dark: ; --color-on-dark: ; --color-border: ; --color-link: ; --color-focus: ; --color-success: ; --color-error: ; /* font */ --font-display: <stack>; --font-text: <stack>; --font-mono: <stack>; /* type scale: size / line-height / weight / tracking; mobile values in comments */ --type-display: 48px/1.1/300/-0.02em; /* mobile 32px */ --type-h1: ; --type-h2: ; --type-h3: ; --type-lead: ; --type-body: ; --type-small: ; --type-label: ; --type-button: ; /* space and layout */ --space: 4 8 12 16 24 32 48 64 96 120; --container: 1080px; --gutter: 24px; --margin-mobile: 16px; --section-pad: 120px; /* tablet 64px, mobile 48px */ /* shape */ --radius-button: ; --radius-input: ; --radius-card: ; --radius-modal: ; --radius-image: ; --radius-pill: 9999px; --border: 1px solid <hex>; /* depth */ --shadow-1: ; --shadow-2: ; --shadow-3: ; --blur-glass: <px + bg rgba> or none; /* motion */ --ease-standard: cubic-bezier(); --ease-emphasis: ; --dur-fast: ms; --dur-base: ms; --dur-slow: ms; /* focus */ --focus-ring: <width, offset, color>; dark_mode: none | auto (prefers-color-scheme) | toggle; if present, add a second block "TOKENS DARK" with only the changed variables. 1.5 FONTS <per role: exact family, weights used, features, delivery, license; open alternative with adjustments> Example: display and text: Söhne variable (Klim, commercial), weights 300 and 400, ss01 on, tnum for numbers, self-hosted. Alternative: Inter Display 300, tracking 0.01em tighter; do not enable Inter ss01. 1.6 TYPOGRAPHY RULES <which role is used where; case; max line length; text-wrap balance; numerals; links in text; how headings and body pair> 1.7 COLOR RULES <where each color is allowed; share of the page (e.g. 90% white, accent under 3%); dark bands and their order; gradients: where, full CSS string or Recipe; image overlays> 1.8 LAYOUT container: max width, side margins per breakpoint; grid: columns and gutter per breakpoint section rhythm: vertical padding per breakpoint; background alternation (e.g. white, white, navy band, white); dividers density: airy | comfortable | compact | dense; alignment: left | centered; typical composition (centered stack, split 50/50, bento, alternating rows) 1.9 SHAPE AND DEPTH radius per element; borders and hairlines (where, color); shadows: which level on which element; materials (blur, translucency) and where; textures (grain, noise) and where 1.10 COMPONENTS <For each: anatomy, size, padding, typography, colors, icon placement; then states: only what changes plus the transition.> Required: button-primary, button-secondary, button-tertiary or text button, text link, card (each type used), input, select, checkbox or toggle if used, badge or chip, tabs or segmented control if used. Example: button-primary: bg --color-primary, text white 16px/400, radius 4px, padding 15.5px 24px 16.5px, height 48px, chevron "›" 8px after label hover: bg #4032c8 (ext), chevron moves 3px right; transition background-color 300ms cubic-bezier(0.25,1,0.5,1) focus-visible: 2px ring --color-focus, offset 2px (est) active: bg darker (est); disabled: not seen Also cover once: skeleton or spinner, toast or alert, modal and drawer (Recipe if complex), tooltip. 1.11 GLOBAL CHROME header: height, background and material, sticky or not, behavior on scroll, logo placement and size, nav items (labels, 14px/400...), right-side actions, dropdown or mega-menu (Recipe) mobile header and menu: breakpoint where it switches, bar height, menu type (full-screen sheet, drawer, dropdown), link sizes, submenu navigation, animation footer: pre-footer CTA band if any, columns and headings, link style, bottom row (legal, locale, social), mobile behavior (stacked or accordion) other: announcement bar, sub-nav, cookie banner, chat widget (mark third party) 1.12 IMAGERY AND ICONS hero media type; photography (subject, light, background, crop, people); product or UI visuals (how shown, shadow, tilt); illustration style; icon set, stroke, size; image radius and aspect ratios; video (autoplay, loop, poster). Terms: Media, Assets & Legal. 1.13 MOTION intensity: none | minimal | functional | expressive | cinematic hover policy: which elements animate on hover, properties, ms, easing scroll reveal: which elements, trigger point, from state (opacity, offset px, direction), ms, easing, stagger; or none signature motion: 1-3 items, one line each + Recipe title page transitions and loading: hard load | fade | view transitions; skeleton | spinner | none reduced motion: what replaces each motion 1.14 RESPONSIVE <per breakpoint, top to bottom: what changes. Header, hero size and layout, type sizes, grid columns, stacking order, hidden elements, carousels to swipe, footer> 1.15 CONTENT AND VOICE headline style (full sentence, short noun phrase, question), typical length in words; body density; tone; CTA labels (samples); case and punctuation habits 1.16 SUBSTITUTIONS fonts, logo, photos, icons, special assets -> what to use in a rebuild 1.17 TECH (optional) framework, CSS approach, notable libraries for effects (GSAP, Lottie, three.js...), detection evidence 1.18 SCREENSHOTS <one caption entry per attached file; format in Extraction Procedure & Screenshots> 2 PAGE Title: BRAND <Brand> <year> · Page: <page-type> 2.1 HEADER brand: ; design_date: ; page_type: ; variants: <other page types using this layout> example_urls: ; evidence: measured on <url> <date> unless marked purpose: <one line: what the page must make the user do> skeleton: container <px>, <n> sections, total height desktop ~<px>, mobile ~<px>; sidebar: none | left | right overrides: <tokens, header or footer differences from Overview, or "none"> 2.2 SECTIONS <One block per section, top to bottom. Header and footer: "as Overview" unless different.> S<n> <section type> / <variant> - <purpose> background: <token or hex, media behind>; height: <px or vh or content>; padding: <top / bottom desktop -> mobile> layout: <container width, columns, spans, alignment, gaps> elements: <every visible element in order, with counts and sizes> copy: <samples of headline, subline, CTA labels; lengths in words> media: <kind, size, aspect, position, fit, radius; placeholder to use> motion: <on load, on scroll, on hover; or Recipe title> responsive: <what changes per breakpoint> Example: S2 hero / split-media-right - state the value in one sentence and get sign-ups background: #ffffff, gradient wave canvas behind the right 60% (Recipe hero-wave); height: ~640px desktop, content on mobile; padding: 96 / 120 -> 48 / 64 layout: 12 columns, text cols 1-7 left aligned, wave full-bleed right elements: eyebrow line with live counter 14px; H1 --type-display 3 lines two tones; 2 buttons 48px (primary "Start now ›", secondary with Google icon), gap 16px copy: H1 about 20 words as one sentence motion: counter ticks continuously; wave animates on load; no text entrance animation (est) responsive: <640 H1 32px, buttons full width stacked, wave cropped to a strip above the text 2.3 PAGE COMPONENTS <components that exist only on this page, same format as 1.10> 2.4 INTERACTIONS <page-specific: tabs, filters, accordions, sticky elements, carousels; each as an interaction record (Components, Motion & Recipes) or Recipe title> 2.5 STATES loading, empty, no results, error, out of stock, added to cart... whichever apply 2.6 SCREENSHOTS <caption entries> 3 RECIPE Title: BRAND <Brand> <year> · Recipe: <short-name> 3.1 HEADER brand: ; design_date: ; kind: component | effect | scene; used_in: <Page memo sections>; evidence line 3.2 LOOK <3-5 sentences: what the user sees, at rest and in motion> 3.3 STRUCTURE <elements, layers and their arrangement, top to bottom and back to front> 3.4 KEY PARAMETERS <every number: sizes, gaps, paddings, colors, radius, blur, opacity, counts, frame counts, scroll length; plus the required fields for this component type from Components, Motion & Recipes> 3.5 MOTION <trigger; timeline as lines "at <time or scroll progress>: <change>, <ms>, <easing>"; open and close separately; stagger formula; switching between triggers; autoplay interval> 3.6 SCENE (kind: scene only) <fields from Components, Motion & Recipes: renderer, camera, lights, objects and materials, background, post effects, pointer and scroll reactions, mobile fallback> 3.7 STATES hover, focus and keyboard, touch, mobile, reduced motion, loading fallback 3.8 HOW TO BUILD <technique in words, not code: "pinned section 300vh with canvas image sequence of ~150 frames driven by scroll progress"; library if the effect depends on it; simpler fallback that keeps the look> 3.9 PITFALLS <what makes a rebuild look wrong: wrong easing, missing grain, blur too strong, stagger missing> 3.10 SCREENSHOTS <key frames with captions>