Getting started

Page structure

Every page in System.exe follows a strict DOM structure. Understanding it makes layout, GSAP integration, and background visuals predictable across the entire project.

Structure

Open the System.exe cloneable link and click Copy project in Webflow. This gives you a full copy of the project — all variables, classes, and structure included.

Figure 1.4.0 Screenshot of System.exe page structure.

page_wrap

The root wrapper. Global CSS variables and the grid guide overlay live here.

page_main

Renders as a <main> tag for SEO. Contains all page sections.

sections

The full-width row. Handles background visuals. Set a background color, image, or place a decorative element as a sibling to the container. Name the section class after its content. A hero section becomes hero_wrap, a features section becomes features_wrap.

section_contain

The max-width container and the GSAP ScrollTrigger anchor. Pin and scrub animations target this element. Content always lives inside here. The container follows the same naming as its parent section. hero_wrap contains hero_contain, features_wrap contains features_contain.