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 / Neutral

Bg / Neutral Light

Bg / Neutral Lighter

Bg / Neutral Lighest

Bg / Neutral Dark

Bg / Neutral Darker

Bg / Neutral Darkest

Bg / Bright

Bg / Bright Light

Bg / Bright Lighter

Bg / Bright Lighest

Bg / Bright Dark

Bg / Bright Darker

Bg / Bright Darkest

Index

• The System
  1. 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. Heading
        5. Color
        6. Font Size
        7. Font Style
        8. Font
        9. Bg
        10. Line Height
        11. Align
        12. Position
        13. Display
        14. Ratio
  2. Class combination
     1. Combo-classes
     2. Muti-classes
  3. 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
  4. Grid
  5. Gap