START HERE · TEMPLATE GUIDE
Make the operating day yours.
Configure your copy, controls and destinations, then review every page before publishing.
TEMPLATE / SETUP GUIDE
Remix → Configure → Review
01 · Remix and name the site
Remix the site into your Framer workspace. Set the site name, logo, favicon, page metadata and navigation. Keep an original copy for reference.
02 · Set styles and type
Update shared styles in Assets. Headings use Bricolage Grotesque at weight 600; body copy uses DM Sans. WorkItem has separate Interface font, Background, Forest, Rust, Sage and Surface controls; preserve shared-color bindings where present. WorkProof has Text font. Edit navigation in the shared Site layout under Floating navigation host > WorkNavigation. Brand, links, purposes, colors and destinations have controls. Keep the fixed host and 104px header reserve.
03 · Edit all four CMS collections
Edit Use Cases, Integrations, Customer Stories and Resources in CMS. The Use Cases collection includes seven Visual working record fields: Record Type, Source, Title, First Detail, Second Detail, Third Detail and Next Owner. These update its Home illustration and detail page together. Choose handoff, review or connection for Record Type. Story images are shared across Home, the story index and the detail page.
04 · Edit the persistent request
Select WorkItem on Home. Edit Brand, Sidebar person, Sidebar role, Workspace and the Intake, Review and Delivery headings. In Requests, the first item drives the story; up to five items appear in the queue. Edit id, title, company, person, owner, due, scope, attachment, task1-task3, condition and recipient together. Owner reviews the condition; recipient receives the handoff. The retained initials field does not draw portraits. Replace Team portraits with a three-column, two-row atlas; known sample names keep the same portrait throughout. New names use the first cell unless the code mapping is updated. Edit native Product examples separately. This is an illustrative walkthrough, not a workflow engine.
05 · Follow the request by scrolling
Follow seven beats: inbox, request, working brief, reviewer, recorded decision, assigned work and activity history. Scroll backward to retrace the same record. There is no timer, Play/Pause control or request selector. Scroll motion off, reduced motion, the editing canvas and screens where the content cannot fit show all four workspace views in normal page flow. Keep the component and parent containers on Auto or Fit Content.
06 · Replace example pricing and proof
The suggested $99 amount is for the Framer template. It is separate from sample SaaS plan prices. Replace product prices, billing terms, CTAs, integration claims, logos, and story details with information you can support. The component is a visual demonstration, not a workflow engine.
07 · Configure and test the website form
The template form validates required fields and shows Request sent locally. Nothing is transmitted or stored. Edit Ready Label on the Submit instance. For real inquiries, configure Send To, remove withPreviewForm from the form and withPreviewSubmit (or legacy withDisabledSubmit) from its Submit instance, and configure native success/error states. Test delivery, invalid fields and Enter-key submission before launch. A local success label is not proof of delivery.
08 · Review motion, media, and responsive states
Test forward and reverse scrolling, narrow and short screens, long request copy, Scroll motion off and system reduced motion. Confirm inbox, source, review, assignments and history remain readable in the normal-flow fallback. Team portraits replaces only WorkItem’s atlas; replace page photos in their native image layers or bound CMS fields, checking crops and alt text. withWorkReading changes native heading color while scrolling and can be removed independently; it does not animate photos. WorkProof retains its own editable record, palette and font.
09 · Publish only after approval
Review the entire site in preview, including privacy, terms, form delivery, and every public claim. Publishing the template, changing its Marketplace listing, or making a public release requires explicit project-owner approval.
Explore the product