Structure

The Base System uses sections and containers to align and group content. This layout structure should feel instantly familiar to anyone with experience building websites.

Sections

Sections are used to group related content — like blogs, testimonials, or features. They include both vertical and horizontal padding to prevent content from touching the screen edges and to maintain visual consistency.

Sections are also semantically important: they use the native HTML <section> tag, which helps browsers and screen readers better understand the page structure. We recommend using Webflow’s built-in Section element, which includes this semantic tag by default.

The Base System provides multiple section sizes, each with different levels of vertical padding. These are connected to variables, allowing you to create custom section classes while still keeping consistency across your site.

---

Containers

Containers live inside sections and are used to horizontally center and constrain content. They use a max-width with margin: auto to center the content on the page.

Just like sections, the Base System includes several container sizes, all linked to variables for easy customization.

---

Spacing

The Base System primarily uses flex gap for spacing — a technique inspired by Figma’s Auto Layout and Framer’s Columns & Rows.

While you're free to use margin if it suits your layout better, flex gap offers several advantages:

• Visually group elements

• Consistent spacing without margin conflicts

• Easier to reorder and reuse elements

• Reduces the need for manual margin adjustments

• Space multiple elements simulataneously

Flex Gap + Webflow Shortcuts

Flex gap works especially well with Webflow shortcuts:

• Ctrl + arrow keys – quickly rearrange elements

• Ctrl + Alt + G – wrap selected elements

• Ctrl + Shift + G – unwrap elements

You can apply gap variables to any parent class to manage spacing between its children — no extra wrappers required.

Columns

Column utility classes apply vertical spacing between direct child elements. All children stretch to the full parent width by default.

You can modify alignment using combo classes like:

• Column Center

• Column Left

• Column Right

The Base System provides multiple column spacing options using variables (e.g., Column Small, Column Large, Column 2X Large).

Rows

Row utility classes apply horizontal spacing between child elements. By default, Rows use align-items: center.

Need wrapping? Add the combo class:

• Row Wrap → enables flex-wrap

For more complex behavior, you can always create a custom class.

---

Max Widths

Use max-width utility classes to control the horizontal sizing of elements in a consistent, scalable way. These ensure your design remains visually balanced across different screen sizes.

---

Appendix

Starter Styles

Section

Class Name	Vertical Padding	Vertical Padding (Mobile)
Section X Large	128px / 8rem	96px / 6rem
Section Large	96px / 6rem	64px / 4rem
Section Regular	64px / 4rem	48px / 3rem
Section Small	48px / 3rem	40px / 2.5rem
Section X Small	32px / 2rem
{Custom} Section

Container

Class Name	Max Width
Container X Large	1280px / 80rem
Container Large	1120px / 70rem
Container Regular	960px / 60rem
Container Small	800px / 50rem
Container X Small	640px / 40rem
{Custom} Container	{Custom}

Column

Class Name	Flex Gap
Column 2X Large	40px / 2.5rem
Column X Large	32px / 2rem
Column Large	24px / 1.5rem
Column Regular	16px / 1rem
Column Small	12px / 0.75rem
Column X Small	8px / 0.5rem
Column 2X Small	4px / 0.25rem
{Custom} Column	X

Class Name	Flex Gap
Column Center	align-items: center, text-align: center
Column Left	align-items: left
Column Right	align-items: flex-end
Column Space Between	justify-content: space-between

Row

Name	Flex Gap
Row 2X Large	40px / 2.5rem
Row X Large	32px / 2rem
Row Large	24px / 1.5rem
Row Regular	16px / 1rem
Row Small	12px / 0.75rem
Row X Small	8px / 0.5rem
Row 2X Small	4px / 0.25rem
{Custom} Row	X

Name	Flex Gap
Row Left	justify-content: flex-start
Row Center	justify-content: center
Row Right	justify-content: flex-end
Row Space Between	justify-content: space-between
Row Wrap	flex-wrap: wrap

Max Width

Class Name	Max Width
Max Width X Large	832px / 52rem
Max Width Large	640px / 40rem
Max Width Regular	512px / 32rem
Max Width Small	384px / 24rem
Max Width X Small	320px / 20rem
{Custom} Max Width	X