Instructions

Every colour, font, type size, spacing step and border radius is a Webflow variable. Open the Variables panel and you will find three collections: Color Palette, Typography and Spacing System. Change a value there and it updates everywhere on the site at once — do not restyle individual elements.

Typography and Spacing System each carry a mode per breakpoint (1920, 1440, 1280, base, 768, 568, 360), which is how type and section padding step down on smaller screens. Editing the base mode changes the desktop value; edit the matching mode to change one breakpoint.

The three fonts are Gowun Batang for headings, Geist Mono for body and UI, and Inter as the base body font. All three are Google Fonts and are already linked in the project.

Elements fade and rise into view as you scroll. This runs on GSAP with ScrollTrigger and is driven entirely by one custom attribute — there is no code for you to edit.

To make a new element reveal, select it and add the attribute data-animate with the value blur-up. To stagger it behind its neighbour, add data-delay with a value in seconds, for example 0.2. Two other values exist: blur-in for a fade without movement, and box for the header burger.

Put the attribute on the wrapper that groups a block — a title with its paragraph and button, or a whole card grid — rather than on every heading and paragraph inside it. The wrapper reveals as one unit, which is how the rest of the site is built. Nesting one data-animate element inside another animates the same content twice.

The Decorative Divider, Red Decorative Line and FAQ Accordion components carry the attribute on their master, so every instance reveals automatically.

Repeating elements are components, so edit the master once and every instance across the site updates. Changing a single instance by hand puts it out of step with the rest.

The set is: Header Link, Link, Subheading, Primary Button Dark, Secondary Button Grey, Round Link With Arrow, Social Link, Decorative Divider, Red Decorative Line, CTA Block, FAQ Accordion, Marquee Logos and Footer.

Several carry variants — Subheading has white, red and grey; Primary Button Dark has black and white; Decorative Divider has a small version. Pick a variant on the instance rather than overriding its styles.

The Footer exposes its text and links as component properties, including the copyright line and every link column, so a page can adjust them without unlinking from the master.

Seven collections drive the dynamic pages: Blog Posts, Products, Solutions, Industries, Teams, Testimonials and FAQs. Each has a template page that renders a single item, and each field carries help text in the CMS explaining what belongs in it and what size an image should be.

Every collection includes a Meta Description field and an Open Graph Image field. Fill both — they control how the page looks in search results and when the link is shared. Keep meta descriptions between 120 and 160 characters, and Open Graph images at 1200 by 630 pixels.

Replace the sample items with your own. Deleting a collection breaks the template page that depends on it.

Icons are SVG assets placed as images rather than embeds, so you can swap any of them in the Assets panel without touching code. Every asset carries alt text that matches its name; keep that habit when you replace one, and mark purely decorative graphics as decorative rather than leaving the alt text empty.

Keep each image under 150KB and close to the size it is displayed at. Webflow builds responsive copies automatically, but it skips that step when the source file is too large, which means phones download the full-size image.

Background videos are set to autoplay, loop, mute and play inline. Keep all four when you replace the file, or the video will not play on mobile.

Three other pages are worth knowing: the Style Guide shows every colour, type size and component in one place; Licenses lists the fonts, photographs and icons used in the template and the terms each one is licensed under; the Changelog records what changed in each release.