Class names must respect font sizes; when changing the font size, always change the corresponding number. Example: (h1-XX)

Help classes are utility classes (combos) created to complement and quickly modify the style of the main class, without needing to alter its base structure. They function as point adjustments that add specific behaviors or variations.

To add colors to a new project, we must access Theme Styles > Colors. This is where all the brand’s colors need to be registered, strictly following the defined palette.

Variations (such as lighter or darker shades) should also be added there, respecting the pattern established in the project’s reference image.

The rule is simple: every new palette must be configured within Theme Styles, maintaining organization, visual consistency, and facilitating reuse throughout development.

Example:
var(–bricks-color-grey-100) 
var(–bricks-color-primary)
var(–bricks-color-secondary)

To add colors to a new project, we must access Theme Styles > Colors. This is where all the brand’s colors need to be registered, strictly following the defined palette.

Variations (such as lighter or darker shades) should also be added there, respecting the pattern established in the project’s reference image.

The rule is simple: every new palette must be configured within Theme Styles, maintaining organization, visual consistency, and facilitating reuse throughout development.

Example:
var(–bricks-color-grey-100) 
var(–bricks-color-primary)
var(–bricks-color-secondary)

To define the global spacing of the website (body), we must follow a clear structural pattern:
every Section must always contain a Container as its direct child. Spacing should never be applied to the section itself, but instead inside the container.

This structure ensures consistent spacing across desktop and mobile, maintaining visual standardization and making global adjustments easier.

To configure it:

• Go to Theme Styles

• Open the first option under Elements

• In Container / Widget, set the container width

• In Padding, define the default horizontal and vertical spacing for each container

Following this structure, all elements inside a container should respect the hierarchy:

Section → Container → Block → Div

This keeps the layout organized, scalable, and prevents spacing inconsistencies throughout the project.