Colori Custom
Modifica colori di background, testo e bordi con colori custom.
Definisci colori di background, bordi, colore di testo attraverso specifiche classi.
Colori Primari
I colori primari sono il Blu Italia e il bianco.
Il Blu Italia è il colore identificativo dell’intera brand identity e rappresenta la radice per creare altri colori della palette primaria.
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
Varianti monocromatiche del colore base
Il colore primario possiede tre tipologie di varianti cromatiche. 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 )
Tinte e ombre
Toni
Variazione di saturazione
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<div class="bd-example-border-utils">
<div class="row">
<div class="col-xs-12 col-md-3">
<p>Tinte e ombre</p>
<div class="c-line primary-bg-a1">a1</div>
<div class="c-line primary-bg-a2">a2</div>
<div class="c-line primary-bg-a3">a3</div>
<div class="c-line primary-bg-a4">a4</div>
<div class="c-line primary-bg-a5">a5</div>
<div class="c-line white-color primary-bg-a6">a6</div>
<div class="c-line white-color primary-bg-a7">a7</div>
<div class="c-line white-color primary-bg-a8">a8</div>
<div class="c-line white-color primary-bg-a9">a9</div>
<div class="c-line white-color primary-bg-a10">a10</div>
<div class="c-line white-color primary-bg-a11">a11</div>
<div class="c-line white-color primary-bg-a12">a12</div>
</div>
<div class="col-xs-12 col-md-3">
<p>Toni</p>
<div class="c-line primary-bg-b1 white-color">b1</div>
<div class="c-line primary-bg-b2 white-color">b2</div>
<div class="c-line primary-bg-b3 white-color">b3</div>
<div class="c-line primary-bg-b4 white-color">b4</div>
<div class="c-line primary-bg-b5 white-color">b5</div>
<div class="c-line primary-bg-b6 white-color">b6</div>
<div class="c-line primary-bg-b7 white-color">b7</div>
</div>
<div class="col-xs-12 col-md-3">
<p>Variazione di saturazione</p>
<div class="c-line primary-bg-c1">c1</div>
<div class="c-line primary-bg-c2">c2</div>
<div class="c-line primary-bg-c3">c3</div>
<div class="c-line primary-bg-c4">c4</div>
<div class="c-line primary-bg-c5">c5</div>
<div class="c-line primary-bg-c6">c6</div>
<div class="c-line primary-bg-c7">c7</div>
<div class="c-line primary-bg-c8">c8</div>
<div class="c-line primary-bg-c9">c9</div>
<div class="c-line primary-bg-c10">c10</div>
<div class="c-line white-color primary-bg-c11">c11</div>
<div class="c-line white-color primary-bg-c12">c12</div>
</div>
</div>
</div>
Colori secondari
Analoghi
Ai colori monocromatici può essere affiancato un accent color, definito così perché si tratta di un colore molto luminoso, serve ad attirare l’attenzione.
Devono essere usati in modo parsimonioso.
Utilizzo delle classi:
.analogue-(+ 1/2 +)-bg : per background color
.analogue-(+ 1/2 +)-color : per text color
.analogue-(+ 1/2 +)-border-color : per border color
1
2
<div class="analogue-1-bg p-3"><span class="white-color">Testo bianco su background colore analogo 1</span></div>
<div class="analogue-2-bg p-3"><span>Testo nero su background colore analogo 2</span></div>
Complementari e 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
1
2
3
<div class="complementary-1-bg p-3"><span>Testo su background colore complementare 1</span></div>
<div class="complementary-2-bg p-3"><span>Testo su background colore complementare 2</span></div>
<div class="complementary-3-bg p-3"><span>Testo su background colore complementare 3</span></div>
Varianti colori secondari
Analoghi
I colori analoghi possiedono due tipologie di varianti cromatiche. Per utilizzarle è sufficiente utilizzare la relativa classe
Utilizzo delle classi:
.analogue-(+ 1/2 )-bg- + variante-colore : per background color
.analogue-(+ 1/2 )-color- + variante-colore : per text color
.analogue-(+ 1/2 )-border-color- + variante-colore : per border color
(es. .analogue-1-bg-a5 per utilizzare come background il colore analogo 1 con variante a5 )
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<div class="row">
<div class="col-md-3">
<div class="c-line analogue-1-bg-a1">a1 </div>
<div class="c-line analogue-1-bg-a2">a2 </div>
<div class="c-line analogue-1-bg-a3">a3 </div>
<div class="c-line white-color analogue-1-bg-a4">a4 </div>
<div class="c-line white-color analogue-1-bg-a5">a5 </div>
<div class="c-line white-color analogue-1-bg-a6">a6 </div>
<div class="c-line white-color analogue-1-bg-a7">a7 </div>
<div class="c-line white-color analogue-1-bg-a8">a8 </div>
<div class="c-line white-color analogue-1-bg-a9">a9 </div>
<div class="c-line white-color analogue-1-bg-a10">a10 </div>
<div class="c-line white-color analogue-1-bg-a11">a11 </div>
<div class="c-line white-color analogue-1-bg-a12">a12 </div>
</div>
<div class="col-md-3">
<div class="c-line white-color analogue-1-bg-b1">b1</div>
<div class="c-line white-color analogue-1-bg-b2">b2</div>
<div class="c-line white-color analogue-1-bg-b3">b3</div>
<div class="c-line white-color analogue-1-bg-b4">b4</div>
<div class="c-line white-color analogue-1-bg-b5">b5</div>
<div class="c-line white-color analogue-1-bg-b6">b6</div>
<div class="c-line white-color analogue-1-bg-b7">b7</div>
<div class="c-line white-color analogue-1-bg-b8">b8</div>
</div>
<div class="col-md-3">
<div class="c-line analogue-2-bg-a1">a1</div>
<div class="c-line analogue-2-bg-a2">a2</div>
<div class="c-line analogue-2-bg-a3">a3</div>
<div class="c-line analogue-2-bg-a4">a4</div>
<div class="c-line analogue-2-bg-a5">a5</div>
<div class="c-line analogue-2-bg-a6">a6</div>
<div class="c-line analogue-2-bg-a7">a7</div>
<div class="c-line analogue-2-bg-a8">a8</div>
<div class="c-line white-color analogue-2-bg-a9">a9</div>
<div class="c-line white-color analogue-2-bg-a10">a10</div>
<div class="c-line white-color analogue-2-bg-a11">a11</div>
<div class="c-line white-color analogue-2-bg-a12">a12</div>
</div>
<div class="col-md-3">
<div class="c-line white-color analogue-2-bg-b1">b1</div>
<div class="c-line white-color analogue-2-bg-b2">b2</div>
<div class="c-line white-color analogue-2-bg-b3">b3</div>
<div class="c-line white-color analogue-2-bg-b4">b4</div>
<div class="c-line white-color analogue-2-bg-b5">b5</div>
<div class="c-line white-color analogue-2-bg-b6">b6</div>
<div class="c-line white-color analogue-2-bg-b7">b7</div>
<div class="c-line white-color analogue-2-bg-b8">b8</div>
</div>
</div>
Complementari e triadici
I colori Complementari possiedono due tipologie di varianti cromatiche. Per utilizzarle è sufficiente utilizzare la relativa classe
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 a4 )
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
<div class="row">
<div class="col-md-2">
<div class="c-line complementary-1-bg-a1">a1</div>
<div class="c-line complementary-1-bg-a2">a2</div>
<div class="c-line complementary-1-bg-a3">a3</div>
<div class="c-line complementary-1-bg-a4">a4</div>
<div class="c-line complementary-1-bg-a5">a5</div>
<div class="c-line white-color complementary-1-bg-a6">a6</div>
<div class="c-line white-color complementary-1-bg-a7">a7</div>
<div class="c-line white-color complementary-1-bg-a8">a8</div>
<div class="c-line white-color complementary-1-bg-a9">a9</div>
<div class="c-line white-color complementary-1-bg-a10">a10</div>
<div class="c-line white-color complementary-1-bg-a11">a11</div>
<div class="c-line white-color complementary-1-bg-a12">a12</div>
</div>
<div class="col-md-2">
<div class="c-line white-color complementary-1-bg-b1">b1</div>
<div class="c-line white-color complementary-1-bg-b2">b2</div>
<div class="c-line white-color complementary-1-bg-b3">b3</div>
<div class="c-line white-color complementary-1-bg-b4">b4</div>
<div class="c-line white-color complementary-1-bg-b5">b5</div>
<div class="c-line white-color complementary-1-bg-b6">b6</div>
<div class="c-line white-color complementary-1-bg-b7">b7</div>
<div class="c-line white-color complementary-1-bg-b8">b8</div>
</div>
<div class="col-md-2">
<div class="c-line complementary-2-bg-a1">a1</div>
<div class="c-line complementary-2-bg-a2">a2</div>
<div class="c-line complementary-2-bg-a3">a3</div>
<div class="c-line complementary-2-bg-a4">a4</div>
<div class="c-line complementary-2-bg-a5">a5</div>
<div class="c-line complementary-2-bg-a6">a6</div>
<div class="c-line white-color complementary-2-bg-a7">a7</div>
<div class="c-line white-color complementary-2-bg-a8">a8</div>
<div class="c-line white-color complementary-2-bg-a9">a9</div>
<div class="c-line white-color complementary-2-bg-a10">a10</div>
<div class="c-line white-color complementary-2-bg-a11">a11</div>
<div class="c-line white-color complementary-2-bg-a12">a12</div>
</div>
<div class="col-md-2">
<div class="c-line white-color complementary-2-bg-b1">b1</div>
<div class="c-line white-color complementary-2-bg-b2">b2</div>
<div class="c-line white-color complementary-2-bg-b3">b3</div>
<div class="c-line white-color complementary-2-bg-b4">b4</div>
<div class="c-line white-color complementary-2-bg-b5">b5</div>
<div class="c-line white-color complementary-2-bg-b6">b6</div>
<div class="c-line white-color complementary-2-bg-b7">b7</div>
<div class="c-line white-color complementary-2-bg-b8">b8</div>
</div>
<div class="col-md-2">
<div class="c-line complementary-3-bg-a1">a1</div>
<div class="c-line complementary-3-bg-a2">a2</div>
<div class="c-line complementary-3-bg-a3">a3</div>
<div class="c-line complementary-3-bg-a4">a4</div>
<div class="c-line complementary-3-bg-a5">a5</div>
<div class="c-line complementary-3-bg-a6">a6</div>
<div class="c-line complementary-3-bg-a7">a7</div>
<div class="c-line complementary-3-bg-a8">a8</div>
<div class="c-line white-color complementary-3-bg-a9">a9</div>
<div class="c-line white-color complementary-3-bg-a10">a10</div>
<div class="c-line white-color complementary-3-bg-a11">a11</div>
<div class="c-line white-color complementary-3-bg-a12">a12</div>
</div>
<div class="col-md-2">
<div class="c-line white-color complementary-3-bg-b1">b1</div>
<div class="c-line white-color complementary-3-bg-b2">b2</div>
<div class="c-line white-color complementary-3-bg-b3">b3</div>
<div class="c-line white-color complementary-3-bg-b4">b4</div>
<div class="c-line white-color complementary-3-bg-b5">b5</div>
<div class="c-line white-color complementary-3-bg-b6">b6</div>
<div class="c-line white-color complementary-3-bg-b7">b7</div>
<div class="c-line white-color complementary-3-bg-b8">b8</div>
</div>
</div>
Colori neutrali
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
1
2
<div class="neutral-1-bg p-3"><span class="white-color">Testo bianco su background colore neutrale 1</span></div>
<div class="neutral-2-bg p-3"><span>Testo su background colore neutrale 2</span></div>
Varianti colori neutrali
I colori neutrali possiedono tre tipologie di varianti cromatiche. Per utilizzarle è sufficiente utilizzare la relativa classe
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 )
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<div class="row">
<div class="col-md-3">
<div class="c-line neutral-1-bg-a1">a1</div>
<div class="c-line neutral-1-bg-a2">a2</div>
<div class="c-line neutral-1-bg-a3">a3</div>
<div class="c-line neutral-1-bg-a4">a4</div>
<div class="c-line neutral-1-bg-a5">a5</div>
<div class="c-line neutral-1-bg-a6">a6</div>
<div class="c-line white-color neutral-1-bg-a7">a7</div>
<div class="c-line white-color neutral-1-bg-a8">a8</div>
<div class="c-line white-color neutral-1-bg-a9">a9</div>
<div class="c-line white-color neutral-1-bg-a10">a10</div>
</div>
<div class="col-md-3">
<div class="c-line neutral-2-bg-b1">b1</div>
<div class="c-line neutral-2-bg-b2">b2</div>
<div class="c-line neutral-2-bg-b3">b3</div>
<div class="c-line neutral-2-bg-b4">b4</div>
<div class="c-line white-color neutral-2-bg-b5">b5</div>
<div class="c-line white-color neutral-2-bg-b6">b6</div>
<div class="c-line white-color neutral-2-bg-b7">b7</div>
</div>
<div class="col-md-3">
<div class="c-line neutral-2-bg-a1">a1</div>
<div class="c-line neutral-2-bg-a2">a2</div>
<div class="c-line neutral-2-bg-a3">a3</div>
<div class="c-line neutral-2-bg-a4">a4</div>
<div class="c-line white-color neutral-2-bg-a5">a5</div>
<div class="c-line white-color neutral-2-bg-a6">a6</div>
<div class="c-line white-color neutral-2-bg-a7">a7</div>
</div>
</div>
Grigi chiari
I grigi chiari sono di tre tipologie. Per utilizzarle è sufficiente utilizzare la relativa classe
Utilizzo delle classi:
.lightgrey-bg- + variante-colore : per background color
.lightgrey-color- + variante-colore : per text color
.lightgrey-border-color- + variante-colore : per border color
(es. .lightgrey-1-bg-a4 per utilizzare come background il grigio chiaro 1 con variante a5 )
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div class="row">
<div class="col-md-2">
<div class="c-line lightgrey-bg-a1">a1</div>
<div class="c-line lightgrey-bg-a2">a2</div>
<div class="c-line lightgrey-bg-a3">a3</div>
<div class="c-line lightgrey-bg-a4">a4</div>
</div>
<div class="col-md-2">
<div class="c-line lightgrey-bg-b1">b1</div>
<div class="c-line lightgrey-bg-b2">b2</div>
<div class="c-line lightgrey-bg-b3">b3</div>
<div class="c-line lightgrey-bg-b4">b4</div>
</div>
<div class="col-md-2">
<div class="c-line lightgrey-bg-c1">c1</div>
<div class="c-line lightgrey-bg-c2">c2</div>
</div>
</div>