Start here · 13 steps · about an afternoon
Start here. Make Crewmate yours in an afternoon.
Every step shows the real Framer editor, with the place to click highlighted. This page is hidden from search engines. Before you publish, delete it with Design System and turn off the Footer’s Show Helper Links (step 11).
01 · Welcome
Fifteen pages, ready to make yours.
1
Home, Product, Agents (one page per crewmate), Pricing, Security, Customers, Changelog, Blog (one page per article), Contact, Legal (one page per policy: Privacy, Terms, Cookies), 404, Design System and this guide.
2
Every block is a component with its own fields: select it, edit it in the right panel.
3
Crewmate, its customers, people and figures are fictional demo content. Replace them before you publish.
02 · Colors
Four colors rebrand the whole site.
1
Assets → Styles → Color → Brand.
2
Sail is the light ground, Deep the dark ground, Ink the text and dark buttons, Lantern the only call-to-action color.
3
Agent holds Ada, Milo, June and Theo: one color per crewmate, used by its cursor, badge, chart and record line.
03 · Fonts
Change a Text Style, every page follows.
1
Assets → Styles → Text.
2
Mona Sans for words, Spline Sans Mono for times, logs and small labels.
3
Each style has a desktop, tablet and phone size. Check the Home hero after a change.
04 · Name & motion
Your name, your preview, calm motion.
1
Settings → General: site title and description; favicon and social image further down.
2
Your mark lives in Logo Mark and your name in Logo Name, both shown by Logo; the Footer ends on a painted quay: Footer → Quay Image.
3
Accessibility is on: animations and cursors stop for visitors who ask for reduced motion.
05 · Navigation & footer
Every label and link is a field.
1
Select the Nav (or the Footer) in Layers.
2
Button label and link, Sign in, the five links and their small hover metas are fields on the right.
3
Nav and Footer sit in the Main Layout template: edit them once, every page follows.
06 · Connect your tools
Every button is a link to your product.
1
Select a button, a plan row or the Crew Builder.
2
Paste your sign-up URL, a Stripe Payment Link or a Cal.com / Calendly link in Button Link.
3
Footer → X Link and LinkedIn Link: paste your profiles. They point to your Home page until you do.
07 · CMS
Add a crewmate, get a page.
1
Switch to CMS in the top-left menu.
2
Agents: name, role, color, emblem, three live statuses, tools, three rules, a day and a story.
3
Changelog (newest first by Order), Blog (Order 1 is featured) and Legal (Privacy, Terms, Cookies) work the same way.
08 · The Crew Stage
Your product, with crewmates working in it.
1
Select Crew Stage (Edit here) in the Home hero.
2
Pick a preset: Inbox, Calendar, Board or Books.
3
Or choose Custom and write your own columns, rows, crewmates and script, line by line.
09 · Loader
A four-second boarding, then the site.
1
The Loader layer plays when the Home opens: four cursors converge, then the logo.
2
A small script in Settings → Code stops scrolling while it runs.
3
Removing the loader? Delete the Loader layer, then that script.
10 · Images
Swap an emblem, keep the alt.
1
Select the badge, card or report that holds the image.
2
Image field → Upload, then update the alt text next to it.
3
CMS images (emblems, covers, changelog captures) have their own alt in each item.
11 · Publish & domain
Live on your own domain.
1
Replace the demo claims and figures: type /pre-publish-check in the Agent panel (step 12) for the full list, page by page.
2
Delete Start Here and Design System, then turn off Main Layout → Footer → Show Helper Links.
3
Contact form → add your email in Send To, connect your domain in Settings → Domains, then press Publish.
12 · Framer’s Agent
Three skills that know this template.
1
Open the Agent panel on the right and type /.
2
/design-system builds new sections in the Crewmate style; /cms-content adds crewmates, changelog entries and posts.
3
/pre-publish-check lists what is still demo content before you go live.
13 · Support
Stuck on something?
Write to the support address on the template’s Marketplace page, with the page, the breakpoint and a screenshot. We answer within two business days. Setup help and bugs are covered; heavily modified sites and custom development are not. Updates ship as a new remix link. For Framer itself, see the Framer Help Center.