Colori

Di seguito sono riportati i colori coerenti con la brand identity digitale di Regione Lombardia e con il brandbook.
Si consiglia l’utilizzo di una palette composta da non più di 5 colori per un progetto digitale.

Colori Primari

Il Verde è il colore identificativo dell’intera brand identity e rappresenta la radice per creare altri colori della palette primaria.

Utilizzo delle classi:
.primary(-blue/gray)-bg : per background color
.primary(-blue/gray)-color : per text color
.primary(-blue/gray)-border-color : per border color

Esempio:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
  <div class="row">
    <div class="col-xs-12 col-md-4">
      <div class="primary-bg p-3"><span class="white-color">Testo bianco su background primario</span></div>
      <div class="primary-border-color border p-3"><span class="primary-color">Testo e bordo primario</span></div><br/>
    </div>
    <div class="col-xs-12 col-md-4">
      <div class="primary-blue-bg p-3"><span class="white-color">Testo bianco su background blu primario</span></div>
      <div class="primary-blue-border-color border p-3"><span class="primary-blue-color">Testo e bordo blu primario</span></div><br/>
    </div>
    <div class="col-xs-12 col-md-4">
      <div class="primary-gray-bg p-3"><span class="white-color">Testo bianco su background grigio primario</span></div>
      <div class="primary-gray-border-color border p-3"><span class="primary-gray-color">Testo e bordo grigio primario</span></div>
    </div>
  </div>

Varianti colore principale

Il colore primario principale possiede tre tipologie di varianti monocromatiche.
Per utilizzarle è sufficiente utilizzare la relativa classe

Utilizzo delle classi:

.primary-bg-(variante-colore) : per background color
.primary-color-(variante-colore) : per text color
.primary-border-color-(variante-colore) : per border color

(es. .primary-bg-a5 per utilizzare come background il colore primario con variante a5 )

Colori neutrali

I colori neutrali nelle linee guida sono tre, ma le classi previste riguardano solo i primi due (blu e grigio).
Il terzo colore neutro è molto simile al bianco, pertanto può essere utilizzato al suo posto ove necessario.

Utilizzo delle classi:
.neutral(-1/2/3)-bg : per background color
.neutral(-1/2/3)-color : per text color
.neutral(-1/2/3)-border-color : per border color

Esempio:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
  <div class="row">
    <div class="col-xs-12 col-md-4">
      <div class="neutral-1-bg p-3"><span class="white-color">Testo bianco su background neutro 1</span></div>
      <div class="neutral-1-border-color border p-3"><span class="neutral-1-color">Testo e bordo neutro 1</span></div><br/>
    </div>
    <div class="col-xs-12 col-md-4">
      <div class="neutral-2-bg p-3">Testo su background neutro 2</div>
      <div class="neutral-1-bg neutral-2-border-color border p-3"><span class="neutral-2-color">Testo e bordo neutro 2</span></div><br/>
    </div>
    <div class="col-xs-12 col-md-4">
      <div class="neutral-3-bg p-3">Testo su background neutro 3</div>
      <div class="neutral-1-bg neutral-3-border-color border p-3"><span class="neutral-3-color">Testo e bordo neutro 3</span></div><br/>
    </div>
  </div>

Varianti colori neutrali

Utilizzo delle classi:

.neutral-(+ 1/2 +)-bg- + variante-colore : per background color
.neutral-(+ 1/2 +)-color- + variante-colore : per text color
.neutral-(+ 1/2 +)-border-color- + variante-colore : per border color

(es. .neutral-1-bg-a5 per utilizzare come background il colore neutrale 1 con variante a5 )

Colori Triadici

Utilizzo delle classi:

.complementary-(1/2/3)-bg : per background color
.complementary-(1/2/3)-color : per text color
.complementary-(1/2/3)-border-color : per border color

Varianti colori triadici

Utilizzo delle classi:

.complementary-(1/2/3)-bg- + variante-colore : per background color
.complementary-(1/2/3)-color- + variante-colore : per text color
.complementary-(1/2/3)-border-color- + variante-colore : per border color

(es. .complementary-1-bg-a5 per utilizzare come background il colore complementare 1 con variante a5 )