Templates · The Wheels

Every deliverable = (this template) × (brand data jsonb) → rendered. Reviewer locks the template. POC plugs their brand's data.

Master HIFI Components (built · ready to render from data)

Template	Source	Status	Used by
MasterLanding	Framer port → `components/hifi-templates/master/Landing.tsx`	🟢	#01 Landing
MasterBridge	5-section locked spec	🟢	Post-opt-in redirect
MasterPreSell	3 styles (Short · Long · VSL)	🟢 spec · 🟡 refactor pending	#03 Pre-sell
TrustPill	Glassmorphism · gold stars · white@90	🟢	All HIFI surfaces above-fold
BrandGradient	Canonical radial backdrop	🟢	All HIFI surfaces
CTA Button	Gold gradient · navy text default · white on hover · 2px dark-gold border	🟢	All hero + modal CTAs
MasterModal	"Where Should We Send Your `<Magnet Name>`?" · big CTA	🟢	Landing opt-in
MasterEmailDelivery	Resend send + Lateral patterns	🟢 prompt · 🟡 React Email refactor pending	#11 LM Delivery Email

Pending Master Templates

Template	Used by	Status
MasterResources	#02 Resources	🔴
MasterQualifier	#04 Qualifier (multi-step form)	🔴
MasterScheduleCall	#05 Schedule Call (Cal embed)	🔴
MasterConfirmation	#06 Confirmation	🔴
MasterPurchase	#07 Purchase (Stripe/ThriveCart)	🔴
MasterOnboarding	#08 Onboarding	🔴
MasterChatWidget	#14 AI Agent · global mount	🔴

How to use a template

// app/studio/[slug]/install/preview/<component>/page.tsx
import { MasterLanding } from "@/components/hifi-templates/master/Landing";
import { getBrand } from "@/lib/brand";

export default async function Page({ params }) {
  const brand = await getBrand(params.slug);
  return <MasterLanding brand={brand} />;
}

The template reads:

Voice rules from brand.config.brand_os.voice_rules
Copy from brand.config.engine.components[slug].content_json
Colors via CSS vars from brand theme
Asset URLs from brand.config.engine.assets

Same code path for MCM, DH, any future brand. New brand = upsert row + plug content_json.

Brand theme vars (set on wrapper div)

--brand-bg              base background color
--brand-text            primary text
--brand-accent          CTA / accent
--brand-accent-light    bright variant (headline accent · button gradient mid)
--brand-accent-dark     dark variant (button border · hover state)
--brand-accent-fg       text-on-accent (default navy, hover white)
--brand-accent-glow     gradient highlight color with alpha
--brand-star-pill       trust pill star color (gold)
--font-heading          headline font (Inter for MCM · per-brand)

Anti-pattern (banned)

// ❌ NEVER: hardcode brand copy inline
<h1>Worried About Mom or Dad Falling at Home?</h1>

// ✅ ALWAYS: read from brand data
<h1>{brand.config.engine.components.landing.content_json.headline}</h1>

Reviewer approves a new master template after first successful use on one brand. Once locked, all future brands can use it via the (template × data) plug pattern. POCs cannot lock new templates — they apply existing ones via voice rules + content_json.

Source memory

feedback_templates_not_scratch
feedback_no_custom_hifi_dev
project_hifi_landing_master_template
project_landing_modal_pattern
project_brand_gradient_canonical
project_bridge_page_locked
project_presell_master_template
project_mcm_presell_locked