Instructions

Getting started

1. Duplicate the template into your Workspace and open it in the Designer.
2. Open the Style Guide page. It shows every colour, type size, spacing step and component in one place, and each one reads a variable rather than a typed-in value.
3. Open the Variables panel and set Accent / Primary, Surface / Primary and Ink / Primary to your brand. That is three edits and it re-skins the whole site.
4. Replace the logo, favicon and webclip in the Assets panel, and the Open Graph image in Site settings.
5. Rewrite the Licenses page for the assets you actually ship, and the Privacy Policy and Terms for your own organisation.

After you import — the five manual steps

These cannot be automated by any Webflow API, so they are listed here rather than left to be discovered. None takes more than a minute.

1. Materialise the tag selectors. Select an element of each tag on the Style Guide page (fastest — it has one of everything), switch the Style panel selector from the class to All H2 Headings, and set any single property. Repeat for H1–H6, All Paragraphs, All Links and All List Items. This brings the selector into existence; the values are then written for you.
2. Enable the wide breakpoints only if you intend to use them. The template is authored inside the four defaults (Desktop, Tablet, Mobile landscape, Mobile portrait), so this is optional.
3. Link the Projects card to its Collection page. Select the repeating card, open Link settings, choose Collection page → Projects. One click; see Projects collection.
4. Toggle “Disable indexing” on Style Guide, Licenses, Instructions, Changelog, 404 and Password in each page’s settings.
5. Upload any video by hand in the Assets panel. Video files cannot be transferred through the API.

Variables

Pages

• Home — nine sections, including a four-card sticky stack and a chaptered scroll narrative.
• About, Solutions, Projects, Insights, Contact — the content pages.
• Project — the Collection Template page behind the Projects collection.
• Style Guide, Licenses, Instructions, Changelog — documentation. Set these to noindex.
• 404, Password — system pages, already branded.
• Privacy Policy, Terms & Conditions — a Rich Text body with a sticky contents rail. Replace the placeholder copy with your own, reviewed by someone qualified to review it.

Components

The navigation marks the page you are on. That link takes the darker ink and the heavier weight, and the dot beneath it appears. It is carried by a component variant: select the navigation on any page and pick the matching “Current page — …” from the Variant dropdown. Documentation and system pages stay on Base, which marks nothing. When you add a page: give its navigation link a combo class (is-services, say) and its dot another (is-services-dot), add a variant, and inside that variant set the link to Ink / Primary at the semibold weight and the dot to opacity 1 and scale 1 — then select the variant on the new page.

Webflow does add its own w--current class to whichever link points at the page being viewed, and it offers no way to style it here: the Current state appears in the Style panel only for links inside Webflow’s own Navbar element, and this navigation is a custom one so the hamburger can animate into a cross. The variant is what replaces it, and it does more — a state cannot reach the dot inside the link, and a variant can.

The closing call-to-action panel is repeated rather than componentised, because its heading and copy differ on every page. If you want one message everywhere, select it on the Home page and turn it into a component.

Interactions

How they are scoped

Six interactions belong to the header and run on every page. The rest are scoped to the page they belong to, so opening the Interactions panel on About shows About’s motion and not the whole site’s.

The two mechanics that are CSS, not interactions

• The four-card stack on the Home page pins through CSS 
  position: sticky
  . The interactions only reveal each card as it arrives. There is nothing to delete if you want the cards to stop stacking — change the position property on the card class instead.
• The chaptered narrative works the same way: a tall section holding one sticky stage. Its layers and captions are driven by a single scrubbed interaction.

One element there is easy to delete by accident and should not be: the empty spacer at the end of the card stack. A sticky element cannot be pushed below its own natural bottom, so without it the fourth card never pins.

Turning the motion down

Select an interaction, change its duration, or delete it outright. Nothing depends on anything else, and the page renders complete with every interaction removed. Readers who have “reduce motion” set in their operating system already see the finished state rather than the animation.

Projects collection

Projects is a CMS collection with a Collection Template page. Adding a project is one item, not a new page.

1. Open the Projects collection and click New project.
2. Fill the fields. Every one carries help text describing what it is for and how long it should be.
3. Publish. The card appears in the archive grid and its page exists at 
   /project/your-slug
   .

The collection ships with five realistic items so the layout can be judged with real content. Delete them once you have your own.

Forms

All four states are styled — resting, hover, focus and error — plus Webflow’s own success and failure blocks. You can see all of them on the Style Guide page.

Images

Every photograph in this template is a placeholder illustration drawn as SVG. Replace them with your own imagery.

• Keep the aspect ratio the slot declares, or the layout will shift as images load.
• Upload at least 2400px wide for full-bleed slots, and let Webflow generate the responsive set.
• Write real alt text on every one. The template ships alt text on all of them; replace it, do not delete it.
• The Open Graph image must be 1200×630 and is set in Site settings, not in the Assets panel.

SEO and publishing

• Each page has a title and a meta description already written. Rewrite them for your own copy; keep descriptions between 150 and 160 characters.
• Set “Disable indexing” on the six documentation and system pages.
• Replace the Open Graph image before you share a link anywhere.
• Publish to your webflow.io subdomain first and walk the site at 1440, 991, 767 and 478 before pointing a domain at it.