Instructions

Find all the documentation you need to customize and get the most out of this template. Explore clear explanations, step-by-step guides, and best practices to help you edit key features with ease.

This template includes two global classes that control the color variable modes:

These classes define which set of color variables will be applied to the elements inside them.

How it works

When you want a section or group of elements to display using the Light mode color variables, place them inside a parent element with the class:

<div class="theme-color-light">
  <!-- Elements inside this block will use Light mode colors -->
</div>

Elements inside this parent will automatically inherit the Light mode color values (for text, backgrounds, borders, etc.), as long as the color property is applied directly within this scope.

Important note about inheritance

If an element inside theme-color-light inherits a color value from an element outside of that parent, the variable mode will not affect it.

To ensure the Light mode applies correctly, the color property (text color, background, etc.) must be defined inside the theme-color-light container.

<!-- Section using Base mode -->
<section>
  <h1 class="text-primary">Heading in Base mode</h1>
</section>

<!-- Section using Light mode -->
<section class="theme-color-light">
  <h1 class="text-primary">Heading in Light mode</h1>
  <p class="text-secondary">This text uses Light mode variables.</p>
</section>

When you don’t want an element to be affected

If you don’t want a specific element to be influenced by the variable mode, you can assign colors from the Neutral Colors group.

These neutral values remain consistent across both Base and Light modes.

This template uses a unified spacing system based on a single Spacers group inside the Sizes collection.

The same spacing values can be applied to margin, padding, and gap properties, allowing you to build layouts freely without duplicating variables.

Instead of separating values by usage type, this approach keeps the system simple, flexible, and easy to scale.

This template includes a lightweight marquee animation built entirely with CSS, creating a smooth and continuous horizontal scrolling effect.

The animation automatically pauses on hover, allowing users to interact with the content without distraction, and resumes once the hover ends.

Where to edit it

All marquee-related CSS can be found inside the Global Styles component. From there, you can easily adjust the speed by modifying the animation duration or change the direction by updating the translate values.

This template includes a smooth text-reveal animation built using the Interactions with GSAP panel. Any text element can use this effect simply by adding a custom attribute.

Text elements that include the attribute data-load-text will automatically animate when they enter the screen.

How to apply the animation

• Select the text element in the Webflow Designer.
• Open the Element Settings panel.
• Under the Custom Attributes section, add: data-load-text
• The animation will be applied automatically when the element appears in the viewport.

How to remove the animation

If you don’t want a text element to animate, simply remove the data-load-text attribute. The text will remain static with no GSAP effects applied.

Where to find the animation

This template uses both Classic Interactions and Interactions with GSAP, so it’s important to switch between the two modes depending on what you want to edit.

To access the GSAP version, open the Interactions Panel (H) and select “Interactions with GSAP”. The keyboard shortcut X (to open the GSAP interactions window) only works when this mode is active.

Once inside the GSAP interactions view, look for the animation named: Text Reveal on Scroll

Here you can adjust opacity, duration, easing, or motion to customize the effect.

This template includes two global utility classes that allow you to quickly apply light or dark highlight effects to any text:

• text-light → adds a soft glowing light effect
• text-shadow → adds a subtle dark gradient shadow effect

These styles are perfect for emphasizing specific words inside headings, hero titles, or any text you want to visually highlight

Before getting started, make sure the Osmo SVG Import extension is installed. In the Webflow Designer, open the Apps panel (shortcut E), search for Osmo SVG Import, and install it. Once installed, you’ll be able to access it directly from the Extensions panel and follow the steps below.

Follow these steps: