Edit me
Make it yours.
Everything here is native Framer. Start with these ten steps.
01
Buy Template button
Buy Template button
The floating Buy Template pill is a sales component for this demo. After purchase, open the Main layout template and delete the layer “Buy Template (remove after purchase)”, or set its visibility off.
The floating Buy Template pill is a sales component for this demo. After purchase, open the Main layout template and delete the layer “Buy Template (remove after purchase)”, or set its visibility off.
02
Brand
Brand
Rename RELAY in the Navigation and Footer components and the big wordmarks on Home and Start. The logo mark is a cobalt circle with a volt baton.
Rename RELAY in the Navigation and Footer components and the big wordmarks on Home and Start. The logo mark is a cobalt circle with a volt baton.
03
Colours
Colours
Edit the colour styles in Assets. Chalk, Ink, Cobalt and Volt drive the whole site.
Edit the colour styles in Assets. Chalk, Ink, Cobalt and Volt drive the whole site.
04
Fonts
Fonts
Text styles use Special Gothic Expanded One (wordmark and numbers), TikTok Sans (text) and B612 Mono (labels). Swap them in Assets → Text styles.
Text styles use Special Gothic Expanded One (wordmark and numbers), TikTok Sans (text) and B612 Mono (labels). Swap them in Assets → Text styles.
05
Photos
Photos
Select any Photo layer and replace the image fill. The hero marker sits on the baton with two % spacers in “Marker layer”.
Select any Photo layer and replace the image fill. The hero marker sits on the baton with two % spacers in “Marker layer”.
06
CMS
CMS
Agents, Journal, Plans, FAQ and Changelog are CMS collections. Add or edit items and every list updates.
Agents, Journal, Plans, FAQ and Changelog are CMS collections. Add or edit items and every list updates.
07
Motion
Motion
Motion comes from code overrides in Motion.tsx (withReveal, withWipe, withTrack and more). Clear a layer’s Code Override to remove its effect. Reduced motion is respected.
Motion comes from code overrides in Motion.tsx (withReveal, withWipe, withTrack and more). Clear a layer’s Code Override to remove its effect. Reduced motion is respected.
08
Forms
Forms
Contact and Start use Framer forms. Point them at your inbox or tool in each form’s settings.
Contact and Start use Framer forms. Point them at your inbox or tool in each form’s settings.
09
Contact details
Contact details
Replace hello@example.com, +1 555-0142 and the office address on Contact, in the Footer and on Legal.
Replace hello@example.com, +1 555-0142 and the office address on Contact, in the Footer and on Legal.
10
Images and licences
Images and licences
Photos were generated for this template and may be used in your site. Fonts are open-source (SIL Open Font License).
Photos were generated for this template and may be used in your site. Fonts are open-source (SIL Open Font License).