{ "packetVersion": "templateflow.prototype-brief.v1", "sourceReferenceId": "tf-webflow-brann", "sourceTemplateCode": "T-0707", "preparedAt": "2026-06-13T09:10:26.878Z", "targetSystem": "templateflow-url-prototype-agent", "expectedDerivedTemplateCode": "T-0707A", "referencePack": { "sourcePlatform": "webflow", "sourceUrl": "https://webflow.com/templates/html/brann-website-template", "originalUrl": "https://brann-template.webflow.io/", "sourceTemplateName": "Brann", "internalCandidateName": "Brann", "templateCode": "T-0707", "category": "Portfolio And Agency", "tags": [ "webflow", "portfolio", "and", "agency" ], "cmsClassification": { "label": "CMS likely", "likelyCms": true, "score": 9.5, "decisionSource": "Computed from category, tags, CMS hints, review scores, chat/layout notes, and captured subpage paths." }, "screenshots": { "desktop": "https://templateflow-assets.apps.emubrain.com/reference-packs/tf-webflow-brann/2026-06-05T19-26-52-079Z/desktop.png", "mobile": "https://templateflow-assets.apps.emubrain.com/reference-packs/tf-webflow-brann/2026-06-05T19-26-52-079Z/mobile.png", "subpages": [ "https://templateflow-assets.apps.emubrain.com/reference-packs/tf-webflow-brann/2026-06-05T19-26-52-079Z/subpage-01.png", "https://templateflow-assets.apps.emubrain.com/reference-packs/tf-webflow-brann/2026-06-05T19-26-52-079Z/subpage-02.png", "https://templateflow-assets.apps.emubrain.com/reference-packs/tf-webflow-brann/2026-06-05T19-26-52-079Z/subpage-03.png", "https://templateflow-assets.apps.emubrain.com/reference-packs/tf-webflow-brann/2026-06-05T19-26-52-079Z/subpage-04.png" ], "subpageDetails": [ { "label": "(03)News", "path": "/news", "screenshotUrl": "https://templateflow-assets.apps.emubrain.com/reference-packs/tf-webflow-brann/2026-06-05T19-26-52-079Z/subpage-01.png" }, { "label": "Worksmiths", "path": "/projects/worksmiths", "screenshotUrl": "https://templateflow-assets.apps.emubrain.com/reference-packs/tf-webflow-brann/2026-06-05T19-26-52-079Z/subpage-02.png" }, { "label": "Organizational Culture Brand Aspiration", "path": "/blog-posts/organizational-culture-brand-aspiration", "screenshotUrl": "https://templateflow-assets.apps.emubrain.com/reference-packs/tf-webflow-brann/2026-06-05T19-26-52-079Z/subpage-03.png" }, { "label": "Understanding Brand Strategy", "path": "/blog-posts/understanding-brand-strategy", "screenshotUrl": "https://templateflow-assets.apps.emubrain.com/reference-packs/tf-webflow-brann/2026-06-05T19-26-52-079Z/subpage-04.png" } ] } }, "transformationOptions": [ { "id": "reference-safe-rebrand", "label": "Reference-safe rebrand", "mode": "reference_locked", "summary": "Keep the source almost unchanged structurally. Rename the brand, replace proprietary media, and lightly refresh palette/copy.", "brandDirection": "Original brand name in the same category and maturity as the source", "categoryPivot": "Same category as source", "imageDirection": "Visually similar replacement images with the same composition and weight as the screenshots", "paletteDirection": "Same palette feel with modest originality changes", "copyDirection": "Fresh copy with the same message hierarchy", "cmsDirection": "Preserve the source CMS/listing pattern if present", "preserve": [ "major page structure", "section order", "layout grid and composition", "spacing and visual rhythm", "typography scale", "CTA placement", "navbar/header shape", "mobile stacking logic", "CMS/list/detail pattern if present" ], "change": [ "brand name and logo text", "business/product category", "image subjects and media", "sample CMS content", "copy and voice", "palette within the same contrast level" ], "chatStrategy": { "globalEntry": "Use the mandatory bottom-center Sticky Chat Dock on every normal non-chat page. It redirects typed prompts to /chat.", "heroCta": "Use one normal button_redirect_link to /chat for the primary hero CTA, with a prompt tailored to the transformed business.", "cardCtas": "For CMS/listing/cards, use button_redirect_link to /chat with item-specific chatPrompt/source context. Do not create full readable CMS detail pages.", "inlineChat": "Use inline Chat Bar only if the source layout already contains a search/input-style hero or section. Otherwise do not add one.", "destinationChat": "The /chat destination must be the centered conversation lane with exactly one composer pinned near the bottom. No marketing hero, no article body, no custom prelude.", "prohibited": [ "bottom-right chat bubbles", "corner assistant widgets", "floating chat popovers", "side chat tabs", "duplicate composers on /chat or chat-lane detail routes", "full CMS article/product detail pages instead of chat-lane handoff routes" ] }, "driftRisk": "low" }, { "id": "inspired-primary-pivot", "label": "Boutique interior design studio", "mode": "inspired_variant", "summary": "Transform the business/category while locking the source composition, section order, hierarchy, and page rhythm.", "categoryPivot": "Boutique interior design studio", "brandDirection": "Quiet premium studio brand with editorial naming", "imageDirection": "Residential interiors, material closeups, furniture details, and studio process imagery", "paletteDirection": "Soft neutral base, graphite text, muted olive or rust accent", "copyDirection": "Editorial, calm, project-led studio language", "cmsDirection": "CMS items should be projects/case studies with ask-about-this-project chat CTAs", "preserve": [ "major page structure", "section order", "layout grid and composition", "spacing and visual rhythm", "typography scale", "CTA placement", "navbar/header shape", "mobile stacking logic", "CMS/list/detail pattern if present" ], "change": [ "brand name and logo text", "business/product category", "image subjects and media", "sample CMS content", "copy and voice", "palette within the same contrast level" ], "chatStrategy": { "globalEntry": "Use the mandatory bottom-center Sticky Chat Dock on every normal non-chat page. It redirects typed prompts to /chat.", "heroCta": "Use one normal button_redirect_link to /chat for the primary hero CTA, with a prompt tailored to the transformed business.", "cardCtas": "For CMS/listing/cards, use button_redirect_link to /chat with item-specific chatPrompt/source context. Do not create full readable CMS detail pages.", "inlineChat": "Use inline Chat Bar only if the source layout already contains a search/input-style hero or section. Otherwise do not add one.", "destinationChat": "The /chat destination must be the centered conversation lane with exactly one composer pinned near the bottom. No marketing hero, no article body, no custom prelude.", "prohibited": [ "bottom-right chat bubbles", "corner assistant widgets", "floating chat popovers", "side chat tabs", "duplicate composers on /chat or chat-lane detail routes", "full CMS article/product detail pages instead of chat-lane handoff routes" ] }, "driftRisk": "medium" }, { "id": "inspired-secondary-pivot", "label": "Independent brand strategy studio", "mode": "inspired_variant", "summary": "Use a second adjacent business pivot while preserving the source layout and conversion logic.", "categoryPivot": "Independent brand strategy studio", "brandDirection": "Minimal strategy-led agency with confident typographic identity", "imageDirection": "Brand workshops, notebooks, campaign boards, product packaging, and team scenes", "paletteDirection": "Warm white, ink black, muted blue, and one sharp accent", "copyDirection": "Clear strategic consulting copy, not generic agency hype", "cmsDirection": "CMS items should be services, selected work, or insight cards", "preserve": [ "major page structure", "section order", "layout grid and composition", "spacing and visual rhythm", "typography scale", "CTA placement", "navbar/header shape", "mobile stacking logic", "CMS/list/detail pattern if present" ], "change": [ "brand name and logo text", "business/product category", "image subjects and media", "sample CMS content", "copy and voice", "palette within the same contrast level" ], "chatStrategy": { "globalEntry": "Use the mandatory bottom-center Sticky Chat Dock on every normal non-chat page. It redirects typed prompts to /chat.", "heroCta": "Use one normal button_redirect_link to /chat for the primary hero CTA, with a prompt tailored to the transformed business.", "cardCtas": "For CMS/listing/cards, use button_redirect_link to /chat with item-specific chatPrompt/source context. Do not create full readable CMS detail pages.", "inlineChat": "Use inline Chat Bar only if the source layout already contains a search/input-style hero or section. Otherwise do not add one.", "destinationChat": "The /chat destination must be the centered conversation lane with exactly one composer pinned near the bottom. No marketing hero, no article body, no custom prelude.", "prohibited": [ "bottom-right chat bubbles", "corner assistant widgets", "floating chat popovers", "side chat tabs", "duplicate composers on /chat or chat-lane detail routes", "full CMS article/product detail pages instead of chat-lane handoff routes" ] }, "driftRisk": "medium" }, { "id": "operator-specific-pivot", "label": "Custom specific pivot", "mode": "specific_pivot", "summary": "Use the operator notes as the business/category pivot, but keep the source layout locked unless notes explicitly say otherwise.", "brandDirection": "Follow operator notes; create an original brand name unless one is supplied", "categoryPivot": "Defined by operator notes", "imageDirection": "Follow operator notes while preserving source image composition and visual weight", "paletteDirection": "Follow operator notes while preserving source contrast and visual rhythm", "copyDirection": "Follow operator notes while preserving source hierarchy", "cmsDirection": "Follow operator notes; preserve CMS/list/detail pattern when present", "preserve": [ "major page structure", "section order", "layout grid and composition", "spacing and visual rhythm", "typography scale", "CTA placement", "navbar/header shape", "mobile stacking logic", "CMS/list/detail pattern if present" ], "change": [ "brand name and logo text", "business/product category", "image subjects and media", "sample CMS content", "copy and voice", "palette within the same contrast level" ], "chatStrategy": { "globalEntry": "Use the mandatory bottom-center Sticky Chat Dock on every normal non-chat page. It redirects typed prompts to /chat.", "heroCta": "Use one normal button_redirect_link to /chat for the primary hero CTA, with a prompt tailored to the transformed business.", "cardCtas": "For CMS/listing/cards, use button_redirect_link to /chat with item-specific chatPrompt/source context. Do not create full readable CMS detail pages.", "inlineChat": "Use inline Chat Bar only if the source layout already contains a search/input-style hero or section. Otherwise do not add one.", "destinationChat": "The /chat destination must be the centered conversation lane with exactly one composer pinned near the bottom. No marketing hero, no article body, no custom prelude.", "prohibited": [ "bottom-right chat bubbles", "corner assistant widgets", "floating chat popovers", "side chat tabs", "duplicate composers on /chat or chat-lane detail routes", "full CMS article/product detail pages instead of chat-lane handoff routes" ] }, "driftRisk": "medium" } ], "prototypeInstructions": { "objective": "Create a live TemplateFlow URL prototype from this source reference. The prototype should be a close, reviewable HTML/CSS mockup that is easier to convert into a Conversite Builder-native template than a Figma file.", "fidelityRules": [ "Use the captured TemplateFlow screenshots as the visual source of truth.", "Preserve section order, layout, spacing, proportions, visual rhythm, colour feel, typography scale, border radius, card treatment, navbar structure, hero composition, and mobile stacking.", "Change only brand/name, proprietary media, logos, and client-specific copy unless the operator explicitly asks for broader changes.", "Replace photos with generated, licensed, or placeholder media that keeps the same composition and visual weight.", "Make review-critical prototype images load deterministically in automated screenshots; do not lazy-load images that affect the visual comparison.", "Do not import or trace marketplace HTML, CSS, JS, or proprietary assets.", "The output must be recognisably the same design system and page structure when compared side by side with the captured screenshots." ], "builderConstraints": [ "Use only patterns that can later be represented in Conversite Builder: normal sections, cards, galleries, CMS list/detail pages, canonical sticky headers, and approved chat entry points.", "All user-started chat flows must resolve to a /chat route. In TemplateFlow prototypes, create a prototype-local chat route such as /prototypes///chat/ for review; when converted to Conversite this maps to the canonical site /chat page.", "Every prototype must include a /chat page/route. The chat page should use Conversite's centered conversation-lane format: no marketing hero, no article body, no custom prelude, no bottom-right widget, and exactly one composer pinned near the bottom.", "Normal non-chat prototype pages must include a bottom-center sticky chat composer dock locked to the viewport bottom. The dock must look like an input/composer bar, accept a typed prompt, and redirect to /chat on submit.", "Do not add the page-level sticky chat dock to /chat routes or to CMS/detail compatibility routes that render the same /chat-style conversation lane. Conversation-lane routes must have exactly one composer total.", "Normal buttons/links to /chat and inline Chat Bars may also be used on non-chat pages where the design calls for them, but they do not satisfy the mandatory page-level composer dock requirement.", "Do not create bottom-right chat bubbles, corner assistant widgets, floating popovers, side tabs, custom chat panels, or any other chat UI.", "Do not create custom /chat marketing preludes; let source-aware chat context render automatically from CMS/card handoff fields later.", "Use canonical sticky navbars/site headers by default. Headers must stay visible while scrolling unless the operator explicitly requests otherwise.", "If the reference suggests CMS, prototype a listing page, but do not create full readable CMS article/project detail pages. CMS cards/detail CTAs must hand off to /chat with source-aware prompt/context so the later Conversite build can render the automatic source context card in the chat lane.", "Any source or CMS detail route included only for route coverage must render the same /chat-style conversation lane, not a long article/read page, and must not include a second sticky composer dock.", "Include desktop and mobile responsive states that can be screenshot-tested." ], "deliverables": [ "Live TemplateFlow prototype URL", "Homepage route plus one or two representative subpage/detail routes when useful", "Desktop screenshot URL for TemplateFlow comparison", "Mobile screenshot URL for TemplateFlow comparison", "Short notes describing CMS assumptions, hero media decision, and any fidelity compromises" ] }, "syncBackInstructions": { "purpose": "After the URL prototype is ready, sync it back to TemplateFlow as a derivedDesign so reviewers can compare the original reference and live prototype before Conversite build handoff.", "commandTemplate": "npm run sync-prototype -- --source-id tf-webflow-brann --template-code T-0707A --name \"\" --prototype-url \"\" --desktop-screenshot-url \"\" --mobile-screenshot-url \"\" --status prototype_ready --notes \"\"", "requiredFields": [ "source-id", "template-code", "name", "prototype-url", "desktop-screenshot-url when the prototype is ready for visual comparison" ] } }