Instructions
Make it yours in an afternoon.
Swap the screens, the photos and the words. Structure, motion and the tablet and phone layouts are done.
Start here
01
Change the name and logo
Edit the brand in the Navigation component and in the footer. Then set the site title, description, favicon and social image in Site Settings.
02
Swap the hero screens
Select Flash Sequence on the Home page and replace the twelve images in Screens with your own, at 393 × 852 or larger. Background, speed, caption and the thumbnail strip are in the same panel.
03
Replace the photos
Every photo is a normal image fill: click it and replace. Keep one saturated colour behind each subject so the set still reads as a series.
04
Edit the words
Click any text and type. Text styles stay attached, so sizes and colours never drift.
05
Check every size
Switch to Tablet and Phone at the top of each page. Layouts are already set, but long words can wrap differently.
Content
Four CMS collections. Add an item and its page and list entries appear on their own.
01
Journal
Posts with a cover, a figure, a body and a category. Each post gets its own page and a Next link.
02
Changelog
One item per release with a version, date, notes and an optional image.
03
Legal
Privacy, Terms and Cookies in one collection. The text is placeholder: replace it before you publish.
04
Showcase
Work made with your product, with the font used and the maker’s handle.
Forms and pages
01
Forms
Contact and Waitlist are Framer forms. Choose where submissions go in each form’s settings. The button shows Sending and Sent on its own.
02
Pages
Home, Features, Pricing, Journal, Changelog, Showcase, About, Press kit, Download, Waitlist, Support, Contact, Legal and 404. Delete what you do not need and its footer link.
03
This page
Delete Instructions and Design system before you publish, or keep them out of the navigation.
For AI agents
Using Claude, Framer AI or another agent to edit the site? Paste these rules into its instructions so its changes match the template.
01
Text
Use the text styles. Never set font size, weight or colour by hand. Everything is 13px.
02
Colour
Use the six colour styles: Ink, Muted, Line, Fill, Paper, Selection. Never type a hex value.
03
Sections
Duplicate an existing section. Label on the left in Mono Muted, content 680px wide on the right, 1px Line on top.
04
Shape
8px radius on images, cards and inputs. No shadows, no gradients.
05
Words
Short, plain sentences. Sentence case. No exclamation marks, no emojis.
06
Images
Direct on-camera flash, hard shadow, one saturated colour background, deadpan, 35mm film.
07
Layout
Keep every page on the Main layout template so navigation and footer stay shared. Check Tablet and Phone after every change.