Start here
Edit Tween in this order and you can launch in an afternoon. This page is for you, the buyer: set it to draft or delete it before you publish.
Editing order
01
Color Styles
Assets → Colors. Change Accent (Cue Blue #0072E0) first (buttons invert to Ink on hover); keep On Accent at 4.5:1 contrast. Glow 1 and Glow 2 colour every glow on the site.
02
Text Styles
10 styles: Display (the Home and /404 H1), Page Title (interior and CMS H1s) and Display Accent (one word in the final CTA and on /404); Heading 2, Article H2, Metric, Card Title, Body L, Body and UI cover the rest. Swap fonts here, never on single layers. The blue final CTA headline is the Width Text component: edit its Text and Accent Word props.
03
Content
Rewrite the hero promise, the mid-CTA statement and the FAQ in your own words. Keep one action label: Book a call.
04
CMS: Cases, Team, Journal
Each case needs a Headline Metric (max ~16 characters), a context and two chips. Tick Featured on Home for the three cases on Home.
05
Videos and images
Posters 4:5 WebP at 1200px wide, loops MP4 under 3 MB, muted, 8–12 s. Team portraits 800×1000. Replace the Video Pill poster in the hero and on /404.
06
Scope Builder prices
Select the Scope Builder on Home and edit its controls: currency, base prices per format, extras, range spread and revision rounds.
07
Booking embed
On /contact, replace the time-slot card with your Cal.com or Calendly embed (Insert → Embed), and point the slots link to your booking page.
08
SEO and social image
Site Settings → General for the site title, description, favicon and social image; each page has its own title and description.
09
Publish
Set this page to draft, connect your domain and publish.
What each Home section does
Hero
Five-second answer: proof, promise, Book a call. The video pill is the kinetic hook.
Logo strip + Selected work
Instant trust, then three cases with a measured number each.
Mid CTA (ink block)
Catches early deciders with a low-commitment 20-minute call.
Services bento + Scope Builder
Desire, then the price-and-time objection answered with an honest range.
Comparison, Process, Testimonials, Team, FAQ
Why you, how risky, who says so, who does it and the last doubts.
Final CTA (blue block)
The promise again, one button.
Replace before publishing
Sample proof
The ★ 4.9 rating line, the logo marquee, the testimonials and every CMS item in Cases, Team and Journal with the Is Sample toggle on are sample content. Replace them, then switch Is Sample off.
Booking and form
Set your booking link on /contact and the form destination (Form settings → Send to). Every “Book a call” button already points to /contact.
Contact and legal
Footer email, phone, address and social links, plus your company details on the Legal page.
Search and preview
SEO titles, descriptions and OG image per page. Exclude /design-system and /start-here from search, and set this page to draft. Delete the layer “Preview pill — delete first” if it exists.
Agent Skills
Two Framer Skills ship with Tween: /design-system (styles, components, section widths) and /rebrand (name, logo, colours, fonts and contacts in one go). The Design System page shows every style and component.
Framer Agent prompts to paste
Add a case
“Add a case to Cases: client Acme, title ‘Acme onboarding film’, Headline Metric ‘+18% activation’, context ‘in 30 days’, chips ‘800k views’ and ‘3 formats’ (≤ 12 characters each), three 1600×900 Process Stills, Featured on Home off.”
Change prices to USD
“Set the Scope Builder currency to $ and multiply every base price and extra by 1.1.”
Change the accent
“Change the Accent Color Style to #E0442B and Glow 1/Glow 2 to warm orange tints. Buttons already invert to Ink on hover.”
Add a team member
“Add a Team item: Sam Lee, Motion designer, one-liner ‘Animates the click, not the logo.’, Order 7.”
Rewrite the FAQ
“Rewrite the FAQ answers on Home for a studio that charges in GBP and delivers in 4 weeks.”
Changing the glows
Glows are blurred ellipses filled with Glow 1 → Glow 2. Change those two Color Styles and every glow follows: hero sky, case card corners, Scope Builder result and the final CTA bleed.