Instructions

Class Naming System

Rovyn uses a BEM-inspired naming system combined with Webflow modifier and utility classes. The goal is to keep classes predictable, easy to scan, and safe to reuse as the template grows.

The system is built around four class types: blocks, elements, modifiers, and utilities.

1. Block Classes

A block is a standalone section or component. Block names describe what the component is, not how it looks.

home-hero
contact-content
cap-overview

2. Element Classes

Elements belong to a block and use a double underscore: block__element.

home-hero__container
contact-content__grid
cap-overview__info

3. Modifier Classes

Modifiers are Webflow combo classes that adjust the state, variation, or layout behavior of an existing class. They use the is- prefix and should be added after a base class rather than used on their own.

is-center
is-secondary
is-absolute

4. Utility Classes

Utilities are global helper classes and use the u-- prefix. They control reusable system-level behavior such as container width, grid structure, spacing, surfaces, and typography.

u--container-xl
u--grid-12
u--section-padding
u--text-inverse

Practical Example — Home Hero

The Home Hero starts with the block class home-hero. Inside that block, related elements use the same namespace, such as home-hero__container and home-hero__grid.

Global behavior is then added with utility classes. For example, the container can use u--container-xxl, while the grid can use u--grid-12 and u--text-inverse.

This keeps the semantic class responsible for the component and the utility classes responsible for reusable layout or visual behavior.

Naming Rules

Use lowercase class names with hyphens between words.
Use block__element for elements that belong to a specific block.
Use is- for modifiers and state-based combo classes.
Use u-- for global utility classes.
Choose semantic names that describe purpose rather than visual appearance.
Reuse an existing modifier or utility before creating a new class for the same behavior.

Following these conventions keeps the project easier to understand, extend, and maintain without creating unnecessary one-off classes.

GSAP animations

‍

Animations in Rovyn are built with Webflow’s native GSAP-powered interactions.

You can edit or remove these animations directly in the Interactions panel without changing the site’s custom code.

‍

Smooth Scroll by Lenis

‍

Smooth scrolling is powered by Lenis and is added globally in Site Settings → Custom Code → Head Code.

Keep the following code in place to preserve the template’s current scroll behavior. It also synchronizes Lenis with ScrollTrigger when GSAP is available and respects reduced-motion preferences.

<!-- Lenis CSS -->
<link
  rel="stylesheet"
  href="https://unpkg.com/lenis@1.3.26/dist/lenis.css"
/>

<!-- Lenis JS -->
<script src="https://unpkg.com/lenis@1.3.26/dist/lenis.min.js"></script>

<script>
  window.Webflow = window.Webflow || [];

  Webflow.push(() => {
    const lenis = new Lenis({
      duration: 1.2,

      easing: (t) => 1 - Math.pow(1 - t, 4),

      smoothWheel: true,
      wheelMultiplier: 0.9,

      // Keep touch scrolling largely native
      syncTouch: false,
      touchMultiplier: 1,

      // Continue supporting anchor links
      anchors: true,

      // Stop scroll inertia during internal navigation
      stopInertiaOnNavigate: true,

      // Respect reduced-motion preferences
      respectReducedMotion: true,

      // Control requestAnimationFrame manually
      autoRaf: false,

      // Exclude elements with this attribute from smooth scrolling
      prevent: (node) =>
        node instanceof HTMLElement &&
        node.hasAttribute("data-lenis-prevent")
    });

    // Make Lenis available to other interactions
    window.lenis = lenis;

    // Keep ScrollTrigger in sync when available
    lenis.on("scroll", () => {
      if (typeof ScrollTrigger !== "undefined") {
        ScrollTrigger.update();
      }
    });

    // Use the GSAP ticker when GSAP is available
    if (typeof gsap !== "undefined") {
      gsap.ticker.add((time) => {
        lenis.raf(time * 1000);
      });
    } else {
      const raf = (time) => {
        lenis.raf(time);
        requestAnimationFrame(raf);
      };

      requestAnimationFrame(raf);
    }
  });
</script>

How to Remove Smooth Scrolling

If you prefer native browser scrolling, Lenis can be removed without affecting the layout or the GSAP animations.

Open Site Settings → Custom Code → Head Code.
Remove the Lenis CSS link, the Lenis JS script, and the Lenis initialization script shown above.
Leave all unrelated custom code in place, including the font-smoothing styles and any other project-specific scripts.
Save the changes and republish the site.

After removal, the site will use the browser’s native scrolling behavior. Existing Webflow and GSAP animations can remain in place.

Typography Guidelines

Rovyn uses a responsive, token-based typography system. Font families, sizes, line heights, letter spacing, and weights are controlled through Webflow Variables so global adjustments stay consistent across the template.

Font Families

Rovyn uses two variable font families with clearly separated roles.

Archivo: used for display text, H1–H6, text-large, text-main, and text-small.
IBM Plex Mono: used for text-meta, text-button, text-nav, and technical or interface-oriented labels.

Text Styles

Typography is applied through global text utility classes so semantic HTML and visual scale can be controlled independently.

Display and headings: u--text-display and u--text-h1 through u--text-h6 — Archivo, weight 600.
Body text: u--text-large, u--text-main, and u--text-small — Archivo, weight 400.
Interface and metadata: u--text-meta, u--text-button, and u--text-nav — IBM Plex Mono, weight 500.

Font sizes scale responsively with clamp(). Line height and letter spacing are tuned per style to preserve hierarchy and readability across breakpoints.

How to Update Typography

To make global typography changes, update the linked variables rather than styling individual elements.

Open the Variables panel in Webflow and select the Typography collection.
Update the relevant font family, size, line height, letter spacing, or weight variables.
Keep the existing text utility classes in place so the updated values continue to propagate across the site.
When changing a font family, make sure the new font is available in the project before assigning it to the typography variables.

System Principles

The typography system separates content typography from interface typography while keeping both responsive and consistent.

Display text and H1–H6 use Archivo at weight 600.
Large, main, and small body text use Archivo at weight 400.
Meta, button, and navigation styles use IBM Plex Mono at weight 500.
Responsive font sizes use clamp() so type scales smoothly between breakpoints.
Use the existing typography utilities and variables before introducing one-off text styles.

Color Guidelines

Rovyn uses a variable-based color system built around three foundational Base Colors: Base Light, Base Dark, and Base Accent. Most semantic colors reference these values directly or through color-mix(), making global palette changes easier without editing individual elements.

How the system works

The color system separates foundational brand values from semantic colors used throughout the interface.

Base Colors define the light, dark, and accent foundations of the template.
Neutral Scale creates reusable intermediate tones from the light and dark base colors.
Semantic groups such as Surface Colors, Text Colors, Background Colors, Border And Divider Colors, Accent Colors, and Overlay Colors are used by components throughout the site.
Many derived colors use variable references or color-mix(), so changes to the Base Colors automatically flow into connected tokens.
Specialized groups such as Dark Surfaces, Glass Colors, and Atmosphere Colors contain additional supporting values and should be reviewed after major palette changes.

How to customize colors

For a brand-wide color change, start with the three Base Colors before adjusting individual semantic tokens.

Open the Variables panel in Webflow and select the Colors collection.
Update Base Colors / Base Light, Base Dark, and Base Accent to match your brand.
Review the derived Surface, Text, Background, Border, Accent, and Overlay tokens. Most will update automatically through references or color-mix().
Review specialized values such as Dark Surfaces, Glass Colors, and Atmosphere Colors manually if the new palette differs significantly from the original.
Check text and interface contrast after every major color change, especially accent-on-light, accent-on-dark, and inverse text combinations.

Best practices

Keep the system token-driven and make changes at the highest useful level instead of introducing one-off color values.

Use the three Base Colors as the primary brand controls and keep the overall palette intentionally restrained.
Use semantic Text, Surface, Background, Border, Accent, and Overlay variables in styles instead of hard-coded colors whenever possible.
Use Base Accent to control the default Rovyn yellow and review Accent Hover, Accent Active, Accent On Light, and Accent On Dark after changing it.
Do not delete or rename existing variables unless you also update every connected style.
Maintain sufficient contrast between text and its background, particularly for muted and inverse text styles.
Before creating a new color token, check whether an existing semantic variable already serves the same purpose.

SVG Icons — How They Work

Rovyn uses inline SVG icons for interface elements that need to remain sharp, lightweight, and easy to style. The icon set is based primarily on Lucide icons and is inserted through Webflow Embed elements.

How icons are set up

The SVG markup is kept intentionally simple so the surrounding Webflow class controls the icon’s size and color.

width="100%" and height="100%" make the SVG fill its Webflow wrapper.
stroke="currentColor" or fill="currentColor" lets the SVG inherit the CSS color of its wrapper, depending on the icon style.
Lucide icons use a consistent viewBox="0 0 24 24", which keeps sizing predictable when icons are exchanged.
Stroke attributes such as linecap, linejoin, and stroke width should remain consistent with the existing icon style.

In most cases you should style the Webflow wrapper rather than changing presentation values inside the SVG itself.

How to replace an icon

To replace an existing inline icon, keep the surrounding Webflow element and replace only the SVG markup inside its Embed element.

Select the Webflow Embed element that contains the icon.
Replace the existing <svg>…</svg> markup with the new icon code.
For Lucide-style icons, keep viewBox="0 0 24 24", width="100%", height="100%", and stroke="currentColor".
Keep the existing Webflow wrapper class in place so the icon continues to use the same dimensions, color, and interaction behavior.
Check the icon at its actual rendered size. If the replacement feels visually heavier or lighter, adjust the SVG stroke width rather than changing the wrapper dimensions.

How to style icons

Icon presentation is controlled primarily through the Webflow class applied to the icon or its wrapper.

Color: change the wrapper’s CSS color. SVGs using currentColor update automatically.
Size: adjust the wrapper width and height rather than hard-coding a different SVG size.
Hover states: style the surrounding button or link class so the icon follows the same interaction state.
Consistency: reuse the existing icon wrapper classes where possible instead of creating one-off sizing rules.

Rovyn also contains a small number of non-SVG interface symbols built directly with Webflow elements, such as the plus icon. Those should be edited through their existing Webflow classes rather than replaced with SVG markup unless you intentionally want to change the component.