The “Bg” module allows applying different background colors.

Classes

The “Bg” values correspond to the project colors. As we cannot anticipate the number of colors that a specific design will have, we include all these variants so that later it is a matter of deleting those that are not necessary.

Bg / Primary

Bg / Primary Light

Bg / Primary Lighter

Bg / Primary Lighest

Bg / Primary Dark

Bg / Primary Darker

Bg / Primary Darkest

Bg / Secondary

Bg / Secondary Light

Bg / Secondary Lighter

Bg / Secondary Lighest

Bg / Secondary Dark

Bg / Secondary Darker

Bg / Secondary Darkest

Bg / Tertiary

Bg / Tertiary Light

Bg / Tertiary Lighter

Bg / Tertiary Lighest

Bg / Tertiary Dark

Bg / Tertiary Darker

Bg / Tertiary Darkest

Bg / Gray

Bg / Gray Light

Bg / Gray Lighter

Bg / Gray Lighest

Bg / Gray Dark

Bg / Gray Darker

Bg / Gray Darkest

Bg / Bright

Bg / Bright Light

Bg / Bright Lighter

Bg / Bright Lighest

Bg / Bright Dark

Bg / Bright Darker

Bg / Bright Darkest

Index

• Forward Slash
  1. What is Forward Slash?
  2. 4 class types
     1. Basic classes
     2. Component classes
     3. Structural classes
        1. Custom
        2. Page
        3. Section
        4. Container
        5. Grid
     4. Functional Classes
        1. Vertical
        2. Horizontal
        3. Padding
        4. Color
        5. Bg
        6. Heading
        7. Font Size
        8. Font Style
        9. Line Height
        10. Align
        11. Position
        12. Display
        13. Ratio
  3. Class combination
     1. Combo-classes
     2. Multi-classes
  4. Grid
  5. Gap
  6. Foundational scales
     1. Foundational scale for headings
     2. Foundational scale for heading in Rich Text
     3. Foundational scale for body text
     4. Foundational scale for spacing
  7. What’s New?

Shadowlord - Tints and Shades Generator Tool