Designsystem

Couleurs de fond 

<p class="text-white background-primary">Donec in arcu mi. Nam condimentum purus purus, nec aliquam nunc eleifend semper.</p>
<p class="text-white background-primary-dark">Donec in arcu mi. Nam condimentum purus purus, nec aliquam nunc eleifend semper.</p>
<p class="text-white background-primary-complement">Donec in arcu mi. Nam condimentum purus purus, nec aliquam nunc eleifend semper.</p>

<p class="text-white background-grey-nero">Donec in arcu mi. Nam condimentum purus purus, nec aliquam nunc eleifend semper.</p>
<p class="text-white background-grey-dove">Donec in arcu mi. Nam condimentum purus purus, nec aliquam nunc eleifend semper.</p>
<p class="text-black background-grey-swirl">Donec in arcu mi. Nam condimentum purus purus, nec aliquam nunc eleifend semper.</p>
<p class="text-black background-grey-smoke">Donec in arcu mi. Nam condimentum purus purus, nec aliquam nunc eleifend semper.</p>

<p class="text-black background-yellow">Donec in arcu mi. Nam condimentum purus purus, nec aliquam nunc eleifend semper.</p>
<p class="text-black background-turquoise">Donec in arcu mi. Nam condimentum purus purus, nec aliquam nunc eleifend semper.</p>
<p class="text-white background-carmine">Donec in arcu mi. Nam condimentum purus purus, nec aliquam nunc eleifend semper.</p>
<p class="text-black background-gold">Donec in arcu mi. Nam condimentum purus purus, nec aliquam nunc eleifend semper.</p>
<p class="text-black background-orange">Donec in arcu mi. Nam condimentum purus purus, nec aliquam nunc eleifend semper.</p>
<p class="text-black background-pink">Donec in arcu mi. Nam condimentum purus purus, nec aliquam nunc eleifend semper.</p>
<p class="text-black background-blue">Donec in arcu mi. Nam condimentum purus purus, nec aliquam nunc eleifend semper.</p>
 
<p class="text-white background-primary">{{ text }}</p>
<p class="text-white background-primary-dark">{{ text }}</p>
<p class="text-white background-primary-complement">{{ text }}</p>

<p class="text-white background-grey-nero">{{ text }}</p>
<p class="text-white background-grey-dove">{{ text }}</p>
<p class="text-black background-grey-swirl">{{ text }}</p>
<p class="text-black background-grey-smoke">{{ text }}</p>

<p class="text-black background-yellow">{{ text }}</p>
<p class="text-black background-turquoise">{{ text }}</p>
<p class="text-white background-carmine">{{ text }}</p>
<p class="text-black background-gold">{{ text }}</p>
<p class="text-black background-orange">{{ text }}</p>
<p class="text-black background-pink">{{ text }}</p>
<p class="text-black background-blue">{{ text }}</p>
 
{
  "text": "Donec in arcu mi. Nam condimentum purus purus, nec aliquam nunc eleifend semper."
}
  • Handle: @background-colors
  • Preview:
  • Filesystem Path: components\2-objects\colors\02-background-colors\background-colors.hbs

Couleurs de fond (background-color)

Liste des couleurs disponibles :

  • couleur #000000 background-black

  • couleur #ffffff background-white

  • couleur #e0001a background-primary

  • couleur #bf1615 background-primary-dark

  • couleur #00985f background-secondary

  • couleur #222222 background-grey-nero

  • couleur #6e6767 background-grey-dove

  • couleur #d1cdc7 background-grey-swirl

  • couleur #f2f2f2 background-grey-smoke

  • couleur #F6DC6B background-yellow

  • couleur #00A5B5 background-turquoise

  • couleur #9D002E background-carmine

  • couleur #B9975B background-gold

  • couleur #FC6E00 background-orange

  • couleur #F1A693 background-pink

  • couleur #99D4E5 background-blue