START HERE
Make Switchyard yours
This page is your setup guide. Work through it top to bottom and you can launch the same day. Delete this page before you publish.
Welcome
Thanks for picking up Switchyard. It is a complete marketing site for a technical product: home, product, solutions, customers, pricing, developers, security, changelog, book a demo, privacy, terms and a 404. Almost everything is native Framer layers, so you edit it like any Framer page: double-click text, drop in images, reorder sections.
Colors
Every colour on the site comes from a color style. Open the Styles panel to see the set, including Page, Section, Text Primary, Text Secondary, Text Muted, Border, Code Surface for the dark footer, and Accent. Accent does the heavy lifting: change it and every button, link and highlight follows. Edit the style, never a single layer, so the whole site stays in step.
Typography
Every text layer uses a named text style, such as Display, H2, Body, Label or Mono. Edit a style in the Styles panel and every layer that uses it updates. Swap fonts inside the styles, one family for headings and body and one mono for labels and code, and the hierarchy holds.
Nav, footer and phone menu
Site Nav and Site Footer are single components placed on every page. Edit either one once and every page updates. Each has Desktop, Tablet and Phone variants, so check all three after a change.
On tablet and phone, the menu button opens the nav’s own links as a full-screen panel. A code override, NavChrome.tsx on the Header Row layer, only opens and closes that panel. The links come from Menu Links, so adding, renaming or removing a link there updates the phone menu too. Keep the layer names Menu Links, Menu Toggle and Menu Close, because the override finds them by name.
Every page, explained
Home. The pitch: a hero with a live demo, capability cards, How it works, use cases, sample metrics, FAQ and a closing call to action. Most buyers only need to edit text and swap the fictional proof.
Product. How the product works: the five-stage request architecture, permissions, traceability, and integration methods. Rewrite the five steps to match your product’s actual flow.
Solutions. Four audience blocks, each one problem, approach, outcome. Swap the four audiences for your own segments. Delete blocks you do not need.
Customers. Three sample customer stories. These are fictional, clearly labeled, and must be replaced with your own stories or removed before launch.
Pricing. Three plan cards, a usage explainer and FAQs. Edit numbers and features in place.
Developers. Quickstart, SDKs, MCP setup, auth, errors, webhooks. Written for a technical reader. Replace commands and package names with your real ones.
Security. Permission model, tracing, data movement, deployment. Reword to your actual practices, and keep the honest compliance posture: never claim certifications you do not hold.
Changelog. Four sample entries. Replace with your releases, keep dates in the same format.
Book demo. The conversion page, built around a native Framer form. Read Forms below before launch.
404, privacy and terms. The 404 is ready to use. Privacy and terms hold sample legal text for a fictional company, so replace both with your own before launch.
Start here. This page. Delete it before you publish.
Forms
The site has two native Framer forms: the demo request on /book-demo and the newsletter signup inside Site Footer. Neither has a destination yet. Select each form, open its form settings in the right panel, and connect where submissions go, such as an email address, a webhook or an integration. Then publish and send yourself a test.
Warning: until you connect a destination, submissions never reach you. Connect both forms before launch.
Changelog and CMS
Changelog entries are native rows on the /changelog page. Duplicate a row to add a release, edit the date and text, and delete the samples. The CMS panel also lists a Site Customization collection. No page reads from it, so you can delete it.
Code components
Two homepage sections are code components, because their animation cannot be built from native layers: the hero demo is Playground and How it works is Request Trace. Their text is not on the canvas. Select the component and edit its title, labels, stages and sample output in the properties panel on the right.
Motion
The FX Motion layer on each page is the MotionLayer code component. It is decorative only: scroll reveals, card hover lift, button press, chart count-up and the copy toast. It holds no content, so you can delete it from any page and nothing else breaks. Select it to adjust four controls:
Enabled. Turns the reveal on or off for that layer.
Reveal Rise. How far content travels as it appears, in pixels.
Reveal Time. Duration of the reveal.
Stagger. Delay between children, for cards and lists.
It follows each visitor’s reduced motion setting. Never hide must-see content behind a reveal.
Replace all fictional content
Everything below is invented for the demo. Replace or delete every item before launch:
The six logos in the logo strip
The testimonial quote, name, title, and avatar
All homepage stats and metric numbers
The three sample customer stories on /customers (Meridian, Northwind, Helio) and their metrics
The illustrative benchmark figures and their disclaimer context
The four sample changelog entries
The sample request and response content in the playground
The Switchyard name, wordmark and tagline once you rebrand
As a final sweep, search the project for the words sample and illustrative.
Metadata, favicon, and social image
For each page, open page settings and write your own title and description. Keep descriptions under 155 characters. In site settings, upload your favicon and a social share image at 1200 by 630. Publish, then paste your URL into a social post preview to confirm the image renders.
Responsive notes
Every section is built on desktop, tablet, and phone breakpoints. After editing, check all three: text layers you enlarged may wrap differently on phone, and card grids reflow to a single column. If a section looks off on one breakpoint only, fix it on that breakpoint, the others are unaffected. Do not resize breakpoint frames themselves.
Deleting optional sections
Safe to delete on any page: the logo strip, the testimonial, the metrics band, individual solution blocks, individual FAQ items, and any use-case card. Delete the whole section frame, not just its contents, so no empty spacing is left behind. Sections are self-contained, nothing else breaks. If you might want one back later, duplicate the page first as a backup.
That is the whole checklist. Replace the fiction, connect both forms, swap two fonts and one accent, and ship it.