Template guide

Every section is a code component with its words, links, photos, colours and speeds in the right panel. Here is where everything lives.

01Edit any section

Click a section on the canvas, such as Hero or Pricing. Its text, links, photos, colours and motion speeds are in the right panel. Nothing needs code.

The navigation and footer live in the Site layout template, so a change there shows on every page.

02The signature run

On Home, Signature: follow one request is the moment people remember. Change the ticket, the four step names and the console lines (each line belongs to a step and appears while the packet travels to the next step).

  • Scroll length sets how far you scroll to play the run: longer is slower.
  • Run time sets the clock at the end.
  • Under reduced motion, on the canvas and in screenshots it shows the finished run.
  • On phones the track turns and runs top to bottom.

03Colours and fonts

Each section has its colours in the right panel. The defaults are listed on the Style guide page. Fonts are Geist and Geist Mono: type another Google font name in a section's Font field to change it.

04Changelog (CMS)

Open CMS, Changelog. Each entry has a title, a date (for sorting), a date label (what visitors see), a tag, a summary and a body. Add an entry and it appears on the Changelog page with its own page, and the newest three show on Home.

05Forms

The sign-up band and the contact form show Sending, then Sent, or an error if sending fails. To receive the messages, paste a form endpoint (for example from Formspree or Basin) into the section's Send to field: the fields are posted as JSON. Left empty, the forms only show the states.

06Smooth scrolling

Smooth scroll (Lenis) sits in the Site layout template. Glide sets how long the page glides. It switches itself off on touch screens and for visitors who prefer reduced motion.

07Before you publish

  • Replace every sample name, figure, quote and photo (the photos are AI generated samples).
  • Set the page titles and descriptions in each page's settings.
  • Add your favicon and social image in Site settings.

Create a free website with Framer, the website builder loved by startups, designers and agencies.