Skip to main content
logo regione lombardia

Bootstrap Regione Lombardia

Versione di Bootstrap Italia per la Regione Lombardia per lo sviluppo di applicazioni web per la PA

Colors

Colors

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

I colori primari sono il Verde Regione Lombardia e il bianco.
Il Verde Regione Lombardia è il colore identificativo dell’intera brand identity e rappresenta la radice per creare altri colori della palette primaria.

#297A38
primary
#FFFFFF
Testo bianco su background colore primario
Testo colore primario su background con bordo primario

1
2

<div class="primary-bg p-3"><span class="white-color">Testo bianco su background colore primario</span></div>
<div class="primary-border-color border p-3"><span class="primary-color">Testo colore primario su background con bordo primario</span></div>

Utilizzo delle classi:

.primary-bg : per background color
.primary-color : per text color
.primary-border-color : per border color

Brand colors

La palette dei colori è suddivisa in tre gruppi: brand colors, neutral e triadic.
Per utilizzarle è sufficiente utilizzare la relativa classe

Green

0
#E4F6E8
100
#CAEDD0
200
#98DCA4
300
#62CA76
400
#3BB050
500
#297A38
600
#21632D
700
#184921
800
#113217
900
#08170A

1
2
3
4
5
6
7
8
9
10
11
12

<div class="d-flex flex-wrap">
  <div class="c-square primary-bg-0"><div>0</div><div>#E4F6E8</div></div>
  <div class="c-square primary-bg-100"><div>100</div><div>#CAEDD0</div></div>
  <div class="c-square primary-bg-200"><div>200</div><div>#98DCA4</div></div>
  <div class="c-square primary-bg-300"><div>300</div><div>#62CA76</div></div>
  <div class="c-square primary-bg-400 text-black"><div>400</div><div>#3BB050</div></div>
  <div class="c-square primary-bg-500 white-color"><div>500</div><div>#297A38</div><div class="dot mt-2"></div></div>
  <div class="c-square primary-bg-600 white-color"><div>600</div><div>#21632D</div></div>
  <div class="c-square primary-bg-700 white-color"><div>700</div><div>#184921</div></div>
  <div class="c-square primary-bg-800 white-color"><div>800</div><div>#113217</div></div>
  <div class="c-square primary-bg-900 white-color"><div>900</div><div>#08170A</div></div>
</div>

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-300 per utilizzare come background il colore primario con variante 300 )

Cold

v7
#00AEC3
v6
#08B0A0
v5
#009B6F

1
2
3
4
5

<div class="d-flex flex-wrap">
  <div class="c-square primary-bg-v7 text-black"><div>v7</div><div>#00AEC3</div></div>
  <div class="c-square primary-bg-v6 text-black"><div>v6</div><div>#08B0A0</div></div>
  <div class="c-square primary-bg-v5 text-black"><div>v5</div><div>#009B6F</div></div>
</div>

Hot

v4
#009E3D
v3
#52AE32
v2
#95C11F
v1
#005D31

1
2
3
4
5
6

<div class="d-flex flex-wrap">
  <div class="c-square primary-bg-v4 text-black"><div>v4</div><div>#009E3D</div></div>
  <div class="c-square primary-bg-v3 text-black"><div>v3</div><div>#52AE32</div></div>
  <div class="c-square primary-bg-v2 text-black"><div>v2</div><div>#95C11F</div></div>
  <div class="c-square primary-bg-v1 white-color"><div>v1</div><div>#005D31</div></div>
</div>

News

v8
#00362E
v9
#187A6A
v10
#EDF7ED

1
2
3
4
5

<div class="d-flex flex-wrap">
  <div class="c-square primary-bg-v8 white-color"><div>v8</div><div>#00362E</div></div>
  <div class="c-square primary-bg-v9 white-color"><div>v9</div><div>#187A6A</div></div>
  <div class="c-square primary-bg-v10"><div>v10</div><div>#EDF7ED</div></div>
</div>

Warm

g1
#EEAA38

1
2
3

<div class="d-flex flex-wrap">
  <div class="c-square primary-bg-g1"><div>g1</div><div>#EEAA38</div></div>
</div>

Colori neutrali

I colori neutrali nelle linee guida sono tre, ma le classi previste riguardano solo i primi due (nero e grigio).
Il terzo colore neutro è il bianco, pertanto non serve una classe specifica.

#000000
neutral-1
#5F7381
neutral-2
#FFFFFF
white

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

Esempio:

Testo bianco su background neutro 1
Testo e bordo neutro 1
Testo bianco su background neutro 2
Testo e bordo neutro 2

1
2
3
4
5
6
7
8
9
10

  <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>
    </div>
    <div class="col-xs-12 col-md-4">
      <div class="neutral-2-bg white-color p-3">Testo bianco su background neutro 2</div>
      <div class="neutral-2-border-color border p-3"><span class="neutral-2-color">Testo e bordo neutro 2</span></div>
    </div>
  </div>

Grigi

0
#FBFBFB
100
#F6F7F9
200
#E6E9F0
300
#B9C5CC
400
#91A3B0
500
#5F7381
600
#556875
700
#4A5B66
800
#404D57
900
#293339

1
2
3
4
5
6
7
8
9
10
11
12

<div class="d-flex flex-wrap">
  <div class="c-square grey-bg-0"><div>0</div><div>#FBFBFB</div></div>
  <div class="c-square grey-bg-100"><div>100</div><div>#F6F7F9</div></div>
  <div class="c-square grey-bg-200"><div>200</div><div>#E6E9F0</div><div class="dot mt-2"></div></div>
  <div class="c-square grey-bg-300"><div>300</div><div>#B9C5CC</div></div>
  <div class="c-square grey-bg-400 text-black"><div>400</div><div>#91A3B0</div></div>
  <div class="c-square grey-bg-500 white-color"><div>500</div><div>#5F7381</div><div class="dot mt-2"></div></div>
  <div class="c-square grey-bg-600 white-color"><div>600</div><div>#556875</div></div>
  <div class="c-square grey-bg-700 white-color"><div>700</div><div>#4A5B66</div></div>
  <div class="c-square grey-bg-800 white-color"><div>800</div><div>#404D57</div></div>
  <div class="c-square grey-bg-900 white-color"><div>900</div><div>#293339</div></div>
</div>

Utilizzo delle classi:

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

(es. .grey-bg-300 per utilizzare come background il colore primario con variante 300 )

Colori Triadici

#C83A32
complementary-1
#F19937
complementary-2
#62AF60
complementary-3

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

Documentazione tecnica

Per l’applicazione di colori semantici al testo e allo sfondo si veda alla voce:
Colori

Breaking change

Riduzione dei colori della palette e cambiamento dei colori secondari.
Può generare contrasti cromatici indesiderati su componenti personalizzati.
Si consiglia di testare tutte le pagine con un tool di controllo del contrasto colori (es. pa11y o pa11y-ci), per prevenire problemi di accessibilità.