---
title: "Brand Memo Templates"
url: https://memocore.ai/memos/6ab4a353af51aac421da878f
project: "Brand Styles"
tags: "design-system"
updated_at: "2026-09-28T03:48:51.412Z"
---

# 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>