Instructions

Getting Started

• Fonts: headings use Red Hat Display and body text uses Inter Display. Both are uploaded in Site settings > Fonts (Inter Display is listed as “Interdisplay”). To swap a font, upload it there, then change the Font/Heading or Font/Body variable in the Typography collection.
• Custom code: Site settings > Custom code holds only one font smoothing rule. There are no scripts and no layout or animation CSS.
• Colors: the Colors collection holds every text, surface, border, line, brand and accent color. Change a variable once and every class that uses it updates. Text colors are set to reach at least 4.5:1 contrast on the light backgrounds; check the contrast again if you change them.
• Typography: font families, font weights and line heights live in the Typography collection. Line heights have no unit, so they follow the font size at every breakpoint.
• Responsive: the Responsive collection holds font sizes, letter spacing, gaps, section paddings and radii, with four modes: Base (desktop), Tablet (991 px and below), Mobile Landscape (767 px and below) and Mobile Portrait (479 px and below). Pick a mode in the Variables panel to edit its values.
• Gaps: every gap uses the native Gap control. Gaps that follow the spacing scale are bound to a Gap variable, so they shrink on smaller screens on their own; a few one-off gaps (logo row, Style Guide swatches, stacked pricing cards) are set in rem per breakpoint.
• Tag styles: All H1 to H6 Headings, All Paragraphs, All Lists, All Links and All Images are reset in their tag styles (no margins, links inherit the text color, lists indent 1.25rem). The Body tag sets the body font, color and background once. Classes set the real sizes.
• Structure: every page follows Client-First: page-wrapper > main-wrapper > section_name > padding-global > container-large > name_component. Utility classes (heading-style-h1 to h6, text-size-*, text-color-*, padding-section-*) carry shared styles, and combo classes start with is- (is-open, is-active, is-featured).
• Units: every size is set in rem on a 16 px root, so the layout scales with the visitor’s browser font size.

Components

• Open the Components panel: shared components are in the Shared group and the Home page cards are in the Home group. Change props on an instance to edit one place, or edit the component to change every instance.
• Navbar: Primary Text, Primary Link, Secondary Text and Secondary Link for the two buttons. Footer: Copyright and Tagline; edit the footer links inside the component.
• Buttons: Button Primary and Button Card (Text, Link) and Button Secondary (Text, Link, Show Icon).
• Labels: Status Tag (Text) and Section Badge (Text, Icon). Set the icon on every Section Badge instance.
• Section parts: Section Divider (Show Squares), Logo Strip (Show Title), FAQ Item (Question, Answer), Pricing Plans (Free Link, Pro Link, Team Link), Home CTA, CTA (Title, button texts and links) and Newsletter CTA (Tag, Title, with a native Webflow form).
• Cards: Blog Card (Image, Category, Date, Title, Author, Avatar, Read Time), Team Card (Photo, Name, Role and the hover panel props Avatar, Bio, LinkedIn Label, Instagram Label, Social Tab Index), Value Card, Stat Row and Font Card.
• Home cards: Home Feature Card, Home Benefit Card, Home Step Card, Home Use Case Card, Home Testimonial Card and Home Compare Item (Show Cross, Show Check).
• Changelog Entry: Version, Date, Title and Notes (rich text). To log a new release on the Changelog page, duplicate the newest entry, move the copy to the top of the list and edit its props.

Interactions

• All motion is built with Webflow Interactions, which run on GSAP. There is no custom code. Open the Interactions panel (lightning icon) in the Designer: each interaction is named after what it does and where, for example “Reveal home features heading on scroll”.
• Click an interaction to see its triggers, its timeline actions and its Conditional playback rules. Select an action to change its properties, duration, delay or easing.
• GSAP notes: Webflow loads GSAP and the SplitText and CustomEase plugins by itself when an interaction needs them. You do not need to add any GSAP script in custom code.

Page Load

• Hero load intro (Home): the badge, heading, highlight pill, text, buttons and trust pill rise in on page load. The heading and text reveal word by word (Split text: Words). It plays on desktop only; at 991 px and below the hero shows at once.
• Open first FAQ answer on page load: opens the first question of each FAQ list. Delete it to start with every item closed.

Scroll Reveals

• Headings: “Reveal … heading on scroll” starts when the section reaches 90 % of the screen height. The badge rises 0.625rem and the heading and text reveal word by word. Split text gives each split paragraph a screen-reader label, so those paragraphs carry the custom attribute role=“group” (footer titles: role=“heading”, aria-level=“2”). Keep it when you duplicate one, and add it to any new paragraph you split.
• Cards and rows: “Reveal … cards on scroll” (also rows, plans and items) fade content up as it enters the screen. Grids that stack on smaller screens have a second “… (tablet and mobile)” version; Conditional playback by breakpoint picks which one runs.
• Shared parts (footer, logo strip, FAQ items, divider squares, CTA) reveal with site-wide interactions, so new pages get them automatically.
• Hero dashboard: the tilt at rest is a transform on home-hero_dashboard. “Straighten hero dashboard on scroll” scrubs it flat as the hero scrolls up.

Hovers

• Hovers are named after the effect, for example “Light up feature card on hover”, “Activate step card on hover”, “Highlight testimonial on hover”, “Activate pricing plan on hover” and “Roll button label on hover”. Each has a Mouse enter trigger that plays and a Mouse leave trigger that reverses.
• Decorative hovers run on desktop only (Conditional playback: do not animate at 991 px and below).
• Team cards: “Show team card details on hover” opens about-team_card-panel from height 0 to 100 %. It runs on every screen size, so on touch screens a tap opens it.

Marquees

• Four rows scroll on their own from page load: “Scroll testimonials marquee” and “Scroll use cases marquee” on Home, “Scroll team marquee” and “Scroll about hero photos marquee” on About.
• Speed: open the interaction and change the duration of its “Move … one set left” action (45 to 50 s). A longer duration makes the row slower.
• Pause on hover: two hover triggers on the row wrapper (for example home-testimonials_track), Mouse enter = Pause and Mouse leave = Resume. Delete both to keep the row moving.
• Add or remove a card: each track holds two identical sets. Change the first set, then make the second set an exact copy. Keep aria-hidden="true" on the copy, and on Team Cards set Social Tab Index to -1 in the copy so its hidden links cannot be focused.

FAQ, Menu and Pricing

• FAQ: “Toggle FAQ answer on click” adds or removes is-open on faq_item, faq_answer, faq_answer-inner and faq_toggle-icon. The smooth open and close comes from transitions on those classes. To edit the open state, add is-open in the Designer, edit, then remove it.
• Mobile menu: “Toggle mobile menu on click” (menu button at 991 px and below) toggles is-open on nav_menu and on the three nav_toggle-line bars, which turn into an X. The fade and slide come from transitions on nav_menu.
• Pricing toggle: inside the Pricing Plans component, “Show annual prices on toggle click” and “Show monthly prices on toggle click” move the toggle indicator, switch is-active on pricing-plans_toggle-option and swap pricing-plans_price-amount (monthly) with pricing-plans_price-annual (annual).

Loops

• The “Pulse …”, “Float …” and “Breathe …” interactions play small repeating motions from page load: the status tag dot, marker dots, hero trust pill, integrations shapes and CTA visual.

Reduced Motion

• Decorative motion respects the visitor’s reduced motion setting (Conditional playback > Prefers reduced motion). Reveals and the dashboard scrub jump to their end state; loops, marquees, the hero intro and decorative hovers do not play. The Home marquee rows and the About team row can then be scrolled by hand.
• Content still works with reduced motion: the FAQ, mobile menu, pricing toggle and team panel open as usual.

Hidden Elements

• Some layers are invisible at rest (opacity 0) and only appear through hover interactions. Find them in the Navigator, set their opacity to 100 % while you edit, then set it back to 0.
• Card glows and outlines: home-ai-features_card-outline, home-features_card-glow and home-features_card-outline, home-steps_card-outline, home-use-cases_card-outline, home-testimonials_card-glow and home-testimonials_card-outline, pricing-plans_card-outline, about-values_card-outline and about-stats_row-glow.
• Active states: home-steps_number-active, home-steps_marker-active and home-testimonials_marker-active hold the blue numbers, lines and dots of the hovered card.
• Team panel: about-team_card-panel is the blue panel inside Team Card. Its height is 0 at rest and it opens top to bottom on hover or tap. Edit its content through the Team Card props.
• Annual prices: pricing-plans_price-annual is set to display None until Annual is clicked. Select it in the Navigator and set display to Inline while you edit, then set it back to None.
• Button label clones: each button holds a button_mask with a second label (combo is-clone) below the visible one. The hover rolls the clone into view. It is bound to the same Text prop, so you only edit the button text once.

Images and Credits

• Sources: the photos are free and AI-generated images from Magnific (formerly Freepik) and Lummi. The dashboard mockups, interface illustrations and logos were made for this template. Each source and its license is listed on the Licenses page.
• Replace an image: select it on the canvas and click Replace image in the Settings panel, or change the image prop (Image, Photo, Avatar or Icon) on a component instance or the image field of a CMS item. Update the alt text at the same time.
• Keep credits right: when you swap a stock image for your own, update its credit line on the Licenses page. When you add a new stock image, add its source and licence to the matching group there.
• Size: export images at twice the size they appear on screen and compress them to WebP before you upload.

CMS

• Blog Posts collection: Name, Slug, Excerpt, Cover Image, Author Name, Author Avatar, Publish Date, Read Time, Featured, Body (rich text), Category (reference to Categories) and SEO Description (150–160 characters for search results).
• Categories collection: Name and Slug.
• Blog page: turn Featured on for the post shown in the hero. The category chips under the heading are a Collection List of the Categories collection: each chip links to its category page (/category/category-slug), and the All chip links back to /blog. To add a category, add an item to the Categories collection; its chip and its page appear on their own.
• Post template: the Blog Posts Template shows each post at /blog/post-slug with related posts. The Categories Template shows each category at /category/category-slug with the posts in that category.
• Post body styles are nested selectors inside post-body_rich-text (H2, H3, paragraphs, lists, links, bold, figures and images). To edit them, add a Rich Text element, give it the post-body_rich-text class, select an element inside it and change the nested style. Delete that element before you publish.
• Images: covers are shown at 1200 × 600 on posts and 352 × 240 on cards (object-fit cover). Keep uploads under 4 MB and use WebP where you can.
• Licensing for every image, font and icon is on the Licenses page, and the type scale, colors and buttons are on the Style Guide.