1.1 Neutral colors classes

Neutral colors are used when the support should not convey any specific information. They can be used ad background color or text colors.

You can customize the name and values you need by changing the list of colors in the colors/variable.less file.

1.1.1 Neutral background colors

A scale of neutral background colors

• .bg-white

  Add a white background
• .bg-white-soil

  Add a white soil background
• .bg-bright-soil

  Add a bright soil background
• .bg-light-soil

  Add a light soil background
• .bg-soil

  Add a soil background
• .bg-deep-soil

  Add a deep soil background
• .bg-dark-soil

  Add a dark soil background

<div style="height:100px; width: 100px" class="{$modifiers}"></div>

1.1.2 Soil text colors

A scale of soil text colors

• .text-white

  Color the text in white

  Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

• .text-white-soil

  Color the text in a white soil

  Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

• .text-bright-soil

  Color the text in a bright soil

  Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

• .text-light-soil

  Color the text in a light soil

  Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

• .text-soil

  Color the text in a soil

  Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

• .text-deep-soil

  Color the text in a deep soil

  Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

• .text-dark-soil

  Color the text in a dark soil

  Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

<p class="{$modifiers}">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>

1.1.3 Soil border colors

A scale of soil border colors

• .border-white

  Color the border in white
• .border-white-soil

  Color the border in a white soil
• .border-bright-soil

  Color the border in a bright soil
• .border-light-soil

  Color the border in a light soil
• .border-soil

  Color the border in a soil
• .border-deep-soil

  Color the border in a deep soil
• .border-dark-soil

  Color the border in a dark soil

<div style="height:100px; width: 100px" class="{$modifiers}"></div>

1.2 Palette color classes

These colors are defined in the brand palette. They are used when a specific meaning is associated with the element

1.2.1 Background colors

A scale of palette background colors

• .bg-orange

  Add a orange background
• .bg-pool

  Add a blue background
• .bg-gold

  Add a yellow background
• .bg-lime

  Add a green background
• .bg-sienna

  Add a red background

<div style="height:100px; width: 100px" class="{$modifiers}"></div>

1.2.2 Text colors

A scale of palette text colors

• .text-orange

  Color the text in orange

  Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

• .text-pool

  Color the text in blue

  Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

• .text-gold

  Color the text in yellow

  Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

• .text-lime

  Color the text in green

  Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

• .text-sienna

  Color the text in red

  Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

<p class="{$modifiers}">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>

1.2.3 Border colors

A scale of palette border colors

• .border-orange

  Color the border in orange
• .border-pool

  Color the border in blue
• .border-gold

  Color the border in yellow
• .border-lime

  Color the border in green
• .border-sienna

  Color the border in red

<div style="height:100px; width: 100px" class="{$modifiers}"></div>