---
title: "Build a Page in a Brand Style"
url: https://memocore.ai/memos/6ae415cc2104e366eb3ef851
project: "Brand Styles"
tags: "design-system"
updated_at: "2026-10-30T03:58:04.418Z"
---

# Build a Page in a Brand Style

Workflow for building a page in the style of a brand described in this project. The memos and their screenshots are the source; nothing is copied or hotlinked from the brand site. Run the steps in order.

1 PARSE THE REQUEST
- Brand; page type (map the user's words with Vocabularies 1: "catalog" -> category-listing, "landing" -> home or landing-campaign, "product page" -> product-marketing or product-detail); year if named.
- Content: the user's own product and copy, or placeholders. Output: plain HTML and CSS, or the framework the user named. Viewports that matter.
- Ask only when the brand or the page type cannot be decided; otherwise choose and say what you chose.

2 FIND THE BRAND SET
- Check the Brands list in README, then search-memo for "BRAND <Brand>" with the tag brand-<slug>.
- Several years: use the requested one, else the newest, and say which.
- No set: say so and offer to describe the site first (Describe and Save a Site). Never build from general memory of the brand.

3 READ IN THIS ORDER
- The Overview in full: recognition keys, guardrails, TOKENS, fonts, color, type and layout rules, components, header and footer, motion, responsive.
- The Page memo for the page type. Missing: use the fallback page type from Vocabularies 1, say so, and keep the Overview's chrome and components.
- Every Recipe linked from the Overview and from the Page memo.
- Combine as in Rules 3: Page values override Overview values; a section's own values apply only inside that section; a Recipe fully defines its effect; TOKENS wins over prose.

4 LOOK AT THE SCREENSHOTS
- Open every attachment of the memos you read (get-file-url) and look at them before writing code: composition, density, proportions, imagery, states.
- Read their captions: they repeat key values and say what not to copy.
- Where a screenshot and the text disagree, follow the measured values in the text and note the difference for the report.

5 WRITE A RESOLVED SPEC
Short, before any code:
- TOKENS block with the page overrides applied, as CSS custom properties.
- Fonts: brand family -> open alternative with weight, tracking and size adjustments (Media, Assets & Legal 3).
- Header, mobile menu and footer.
- Sections in order: type and variant, layout, elements with counts and sizes, copy length, media placeholders, motion.
- Components with every state and transition; interaction records; Recipes to implement.
- Responsive changes per breakpoint.
- Recognition keys as a checklist; guardrails as a do-not list.

6 BUILD IN THIS ORDER
1 Tokens as CSS custom properties; base type and colors.
2 Header and footer, then the mobile menu.
3 Sections in order, at the reference desktop viewport first.
4 Components and their states: hover, focus-visible, active, disabled, with the exact transitions.
5 Motion: interaction records and Recipes (timings, easings, stagger, open and close, switching).
6 Responsive changes at each breakpoint.
7 Reduced motion replacements.

7 ASSETS AND COPY (Media, Assets & Legal 4)
- No logos, mascots, brand photos, renders, videos, proprietary icons or original copy. Use placeholders ([LOGO], [PRODUCT IMAGE 4:3]) or original substitutes of the same kind, size and feel.
- Proprietary fonts: the open alternative unless the user has a license.
- Copy: new text with the length and tone of the copy samples.
- No hotlinking from the brand site, no implied affiliation with the brand.

8 CHECK
- Every recognition key is visible; no guardrail is broken.
- Section count, order and elements match the Page memo.
- Key values match: accent color, type sizes and weights, radii, container width, button height, section padding.
- States and motion: hover and focus every component; open and close every menu, modal and carousel; compare timings and easings with the memo.
- If a browser is available, screenshot the result at 1440 and 390 and compare it side by side with the attached screenshots; fix the differences and repeat.

9 REPORT
Tell the user: which memo set and year were used; fallbacks taken (page type, missing values); values marked (est), (ext) or (inf) that the build relies on; substitutions (fonts, images, logo); known differences from the screenshots. If the memos lacked something the build needed, say what, so the brand set can be updated.