Text elements and classes are used strictly for sizing, not styling.
Usually these elements are wrapped with a title-wrapper or a text-wrapper to have access to frequently used modifiers as combo classes.

HTML tags have matching classes for their styles. Heading levels should follow the correct hierarchy in the HTML, but styles can be overriden with classes. We recommend always using the class to make separating the tag from the style a habit. Avoid combo classes when possible.

Text classes are strictly used for font-size and line-height. If you need bigger sizes, you should use heading classes. Any other styling usually comes from a parent element. Sometimes you need to override the parent element's color or font-weight, in which case you can use combo classes or spans.

Other HTML tag defaults

Other HTML tag defaults

This area is not to set specific classes, but rather a checkpoint to add your project's colors to the global swatches and describe how they're used.

Having to apply gradients each time on new classes is annoying. So is having a class that takes up space just for a gradient.
That's why you can copy them from Figma into the global custom code block designated for gradients, allowing you to apply gradient backgrounds using an attribute.

For clipping text, make sure the property is background-image, not background

Shadows are set in the global CSS embed block to make it easier to copy layered shadows from Figma and avoid adding an extra combo-class to your elements by assigning them to attributes.

This elements are used to structure the content of the website and add consistency. All this classes have combo classes to change their properties to adapt to all designed scenarios.

Use the section class with its combo classes for all your sections to maintain consistency and avoid creating a new class for every new section. There are of course exceptions, but whenever possible, think of reusable ways to create elements.
These combo classes can be stacked.
If you find yourself stacking more than 3 classes, you should create a new combo class for that case.
‍
You could also add more variations (i.e. cc-top-xl, cc-cta, ...)

Sections usually need a container to keep layouts from becoming too wide. Containers also control the horizontal padding in order to maintain the same spacing throughout your project.
A default container acts as "12 columns", as it takes up the full design width (usually 1440px). That's why combo class names mention columns.

Layouts will usually have more unique names depending on the design. In a lot of cases, there are some basic layout options that can act as building blocks.

These components are of a special type!! They have been created to help you save time by just dragging and dropping them into the canvas to create your layouts faster.

Spacers are useful when you need some extra space in a layout but you don't want to create a new wrapper or class for it.

Utilities have a u- prefix to separate them from base styles. They can work on their own, but usually you use them to modify a base element, like a title-wrapper.
‍
On sections, avoid them as much as possible since you usually apply paddings on them, but background changes are fine.
‍
Things like text alignment should be on the layout layer.

These can be added to any element, although it's recommended to place it as high as possible according to your needs.
For example, if you want a two text blocks to have this color and they are sibling elements, you could apply it to their parent element.
If you have a lot of colored headings, it is a good idea to apply it on the element instead of the parent or in a span, to make it easier to access next time.

Font utilities change the font and weight of an element.

You could replace sans & serif with other variations (i.e. main & display).

Use to align text in layouts, or individual text elements.

Other decorations and styles.

Background modifiers also have a text property added to them, to avoid having to override all the text elements inside them.
You could use "u-bg-dark" to apply dark mode too, instead of the theme attribute.

Background modifiers also have a text property added to them, to avoid having to override all the text elements inside them.
‍
You could use u-bg-dark to apply dark mode too, instead of the theme attribute.

Background modifiers also have a text property added to them, to avoid having to override all the text elements inside them.
‍
You could use u-bg-dark to apply dark mode too, instead of the theme attribute.