Structure

Learn how to structure and organize content on your page to create modular, reusable and consistent layouts.

Overview

Layouts in the Base System are typically structured as follows

1. Sections – The main structural divisions of a page.

2. Containers – Centers content and applies max-width constraints.

3. Spacing Classes – Manages content spacing using columns and rows.

By using sections and containers for structure and flex gap for spacing, the Base System embraces a familiar, scalable, and intuitive approach to layout design. This ensures cleaner projects, better performance, and easier collaboration across designers and developers.

---

Sections

Sections are top level structural elements that divide a page into meaningful segments, such as a hero, testimonial, or footer. Sections create space through vertical-padding styles and prevents content from touch the edges of the screen.

Recommended: Use the Section Element, which comes with the <section> HTML tag by default.

Section Starter Classes

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

---

Containers

Containers define the boundaries of content by applying a max width and centering content in the middle of the page. If you need additional layout changes (e.g., flex, grid, background colors), nest a new <div> inside the container instead of modifying or creating a new container.

Why do we use variables for container max width?

Navigation Container

Container Starter Classes

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}

---

Spacing

The Base System uses flex-gap for spacing, similar to: Figma's Auto Layout and Framer's Columns & Rows. There's often no need to add additional wrappers as you can add flex gap variables to parent classes to create spacing between child elements without requiring extra wrappers.

If gap spacing cannot be applied to a parent class, you can use Column and Row utility classes to quickly create spacing.

We recommend learning two shortcuts to speed up your development.

• Ctrl + Alt + A to wrap an element in a div

• Ctrl + Alt + G to unwrap an element

Columns

Columns provide vertical spacing for all direct child elements. Elements inside a column utility class will stretch to the parent width. For alignment adjustments you can use combo classes like "Column Center" or "Column Left".

Column Starter Classes

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
Column Left	align-items: left
Column Right	align-items: flex-end
Column Space Between	justify-content: space-between

Rows

Rows are used to create horizontal spacing for all elements within it. By default, Rows use align-items: center. For wrapping you can use "Row Wrap" to enable flex-wrap but If you need more specific wrapping behavior, create a custom class instead.

Row Starter Classes

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 Widths

Max-width classes ensure consistent element sizing across your project.

Max Width Starter Classes

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