Componenti

Vision e Mission

Vogliamo migliorare la gestione dei processi documentali in azienda con progetti digitali intelligenti, creativi e su misura.

Per semplificare la vita digitale delle persone.

Il nome

Il nome del brand è frutto di una ricerca di essenzialità, quell’essenzialità che esprime l’iniziale: a è la prima lettera dell’alfabeto.

Una parola conosciuta, elegante, musicale, foneticamente morbida e priva di consonanti “dure”.

Il riferimento a un materiale resistente vuole esprimere solidità e sicurezza, un materiale forte che viene plasmato dall’uomo per create oggetti eleganti, pratici e resistenti.

Logo

Ardesia

Il logo di Ardesia esprime la vision e la mission aziendale. La scelta di un carattere minuscolo si sposa con il tone of voice aziendale: semplice, chiaro, leggibile, informale e rassicurante.

Attraverso il minuscolo Ardesia sottolinea l’appartenenza a un mondo digitale, dove il maiuscolo, al contrario, viene percepito come urlo. Un’appartenenza che viene esaltata dalla scomposizione del carattere nell’elemento archetipico dell’informatica: il pixel.

L’idea di semplicità è rappresentata anche dal colore nero, essenziale e leggibile, e dalla scelta di un unico colore differenziante.

Il payoff esprime il cuore del nostro business: tradurre processi tecnologici complessi in soluzioni semplici per l’utente.

Costruzione

Il logo di Ardesia è stato costruito partendo da un font, l’Arial, dal quale è stato ricavato l’elemento che idealmente rappresenta il pixel. Il pixel diventa quindi l’unità di misura su cui si basano tutte le altezze intermedie tra le aste ascendente e discendente del carattere.

Area di rispetto

Il marchio Ardesia deve essere sempre circondato da uno spazio bianco per assicurare leggibilità e impatto visivo. Lo spazio minimo identificato corrisponde alla dimensione della “a” del logo.

Versione negativa

Il logo dovrebbe essere utilizzato nella versione in nero su sfondi più chiari e in bianco su sfondi più scuri.

Dimensioni minime

Il logo è progettato per ridimensionarsi su stampa e schermo. La dimensiona minime corrisponde a 100 pixel di larghezza, al di sotto della quale si consiglia l’utilizzo del monogramma a. la cui dimensioni minime sono di 10px.

Timeline

La storia del logo di Ardesia inizia nel 1997. Ogni versione è figlia del suo tempo. Negli anni, ogni cambiamento è stato affrontato con l’idea di stare sempre al passo anche con le evoluzioni stilistiche che caratterizzano la storia della grafica.

In tutti i suoi progetti di rebrand, Ardesia ha favorito l’utilizzo di colori primari caldi, per esaltare l’informalità con cui si interfaccia con i propri clienti.

1997

2010

2020

a.

Il monogramma a. rappresenta la sintesi perfetta del brand: la a, in quanto prima lettera dell’alfabeto, e il pixel, che assume il significato di punto, lo rendono riconoscibile, essenziale, semplice e geniale.

Costruzione

Area di rispetto

Il monogramma a. deve essere sempre circondato da uno spazio bianco per assicurare leggibilità e impatto visivo. Lo spazio minimo identificato corrisponde alla dimensione della “a” stessa.

Versione negativa

Il monogramma a. dovrebbe essere utilizzato nella versione in nero su sfondi più chiari e in bianco su sfondi più scuri.

a.suite

Il logo a.suite è una derivazione diretta del logo Ardesia. Il naming esprime l’appartenenza al brand e ogni pixel rappresenta un prodotto della a.suite

Costruzione

Area di rispetto

Il marchio a.suite deve essere sempre circondato da uno spazio bianco per assicurare leggibilità e impatto visivo. Lo spazio minimo identificato corrisponde alla dimensione della “a” del logo.

Versione negativa

Il logo dovrebbe essere utilizzato nella versione in nero su sfondi più chiari e in bianco su sfondi più scuri.

Dimensioni minime

Il logo è progettato per ridimensionarsi su stampa e schermo. Al di sotto dei 100 pixel di larghezza è consigliabile l’utilizzo del monogramma e.

Prodotti

I loghi dei prodotti si ispirano ai principi del Material Design e derivano direttamente dall’elemento pixel.

Ogni prodotto viene identificato con un colore e un’icona che fa riferimento alla funzione principale e, in quanto parte della a.suite, il loro nome è identificato con il prefisso a.

La cornice di fondo forma idealmente una figura somigliante al monogramma a. e vuole essere una proiezione verso il futuro e al contempo un legame con il passato e i precedenti loghi prodotto.

Costruzione

I loghi prodotto sono costruiti a partire da una griglia, sulla quale sono disposti i pixel a formare una cornice. Ogni pixel è riproposto nel colore del prodotto utilizzato in percentuale differente. Tutti gli elementi figurativi si dispongono alle medesime altezze, definite da due linee costruttive.

Area di rispetto

I loghi dei prodotti devono essere sempre circondati da uno spazio bianco per assicurare leggibilità e impatto visivo. Lo spazio minimo identificato corrisponde alla dimensione dell’elemento rettangolare centrale.

Versione negativa

Il logo dovrebbe essere utilizzato nella versione in nero su sfondi più chiari e in bianco su sfondi più scuri. 

App

I loghi delle app si differenziano rispetto ai prodotti per forma e colori. L a forma scelta è infatti quella nativa delle app, affinché ogni icona venga visualizzata in modo identico sia su iOS sia su Android e non subisca eventuali adattamenti da parte dei sistemi operativi. I colori non sono piatti bensì sfumati, dove la sfumatura, però deriva dai toni dei prodotti.

I nomi delle app sono caratterizzati dal prefisso i., per una riconoscibilità immediata.

Costruzione

I loghi sono costruiti a partire da una griglia, che viene interamente riempita di pixel.

Versione negativa

Il logo dovrebbe essere utilizzato nella versione in nero su sfondi più chiari e in bianco su sfondi più scuri.

Custom Fit

Il Custom Fit è un prodotto realizzato su misura per il cliente: nella sua rappresentazione grafica, la cornice che caratterizza i loghi prodotti della a.suite qui è vuota, proprio per trasmettere l’idea di un prodotto che ancora non esiste e che verrà realizzato ad hoc. Tutti i software Custom Fit sono caratterizzati dal prefisso my.

Costruzione

Area di rispetto

I loghi dei prodotti customizzati devono essere sempre circondati da uno spazio bianco per assicurare leggibilità e impatto visivo. Lo spazio minimo identificato corrisponde alla dimensione dell’elemento rettangolare centrale.

Versione negativa

Il logo dovrebbe essere utilizzato nella versione in nero su sfondi più chiari e in bianco su sfondi più scuri.

Declinazioni

Ogni software customizzato acquisterà una sua identità attraverso una declinazione grafica del logo. Le varianti sono tante quante le opportunità offerte dalla customizzazione e possono interessare il colore, il nome (sempre preceduto da my.), la tipografia ecc…

Pixel

Il pixel è l’elemento primario della comunicazione di brand. Identifica il mondo digitale a cui appartiene Ardesia e, in quanto componente elementare e unità di misura primaria, rappresenta l’essenzialità che caratterizza il marchio.

Nella comunicazione di brand il pixel può essere utilizzato a livello grafico come elemento geometrico e nel copy come elemento di punteggiatura.

Il pixel/punto, infatti, rappresenta la semplicità che contraddistinguono Ardesia: è il primo nucleo di una composizione e nei testi è in grado di dare ai messaggi maggiore incisività.

Nella comunicazione corporate prevale l’elemento pixel. Ciò significa che quando si comunica il brand è preferibile utilizzare figure geometriche e astratte.

Costruzione

Il pixel di Ardesia deriva dalla scomposizione del carattere del logo. Le sue dimensioni non sono quindi perfettamente quadrate ma rispettano le seguenti proporzioni:

H=Bx1,2

Colori

I colori principali del marchio Ardesia sono il bianco, il nero e le sue tonalità. Sono utilizzati per fornire accessibilità, semplicità, pulizia e coerenza in tutte le comunicazioni del brand.

Il rosso luminoso e distintivo aggiunge una maggiore attenzione ai dettagli più importanti. Il colore rappresenta vivacità e dinamicità, ma anche calore a familiarità.

Colori primari del brand

HEX: #FF3300
RGB: 255 51 0
CMYK: 0 93 100 0

HEX: #1A171B
RGB: 26 23 27
CMYK: 79 74 58 82

HEX: #808080
RGB: 128 128 128
CMYK: 29 39 38 20

Scala di grigi

  • HEX: #1A171B
    RGB: 26 23 27
    CMYK: 79 74 58 82
  • HEX: #484549
    RGB: 72 69 73
    CMYK: 64 58 49 50
  • HEX: #767476
    RGB: 118 116 118
    CMYK: 52 43 40 25
  • HEX: #A3A2A4
    RGB: 163 162 164
    CMYK: 38 30 29 8
  • HEX: #D1D1D1
    RGB: 209 209 209
    CMYK:21 16 16 1
  • HEX: #E9E8E9
    RGB: 233 232 233
    CMYK: 10 8 8 0
  • HEX: #fafafa
    RGB: 250 250 250
    CMYK: 2 2 2 0
  • HEX: #1A171B
    RGB: 26 23 27
    CMYK: 79 74 58 82
  • HEX: #484549
    RGB: 72 69 73
    CMYK: 64 58 49 50
  • HEX: #767476
    RGB: 118 116 118
    CMYK: 52 43 40 25
  • HEX: #A3A2A4
    RGB: 163 162 164
    CMYK: 38 30 29 8
  • HEX: #D1D1D1
    RGB: 209 209 209
    CMYK:21 16 16 1
  • HEX: #E9E8E9
    RGB: 233 232 233
    CMYK: 10 8 8 0
  • HEX: #fafafa
    RGB: 250 250 250
    CMYK: 2 2 2 0

Proporzioni di utilizzo

Il bianco e, in generale i colori chiari, giocano un ruolo molto importante in tutte le comunicazioni del marchio. Il rosso viene utilizzato solo per i momenti che richiedono particolare attenzione o interazioni dell’utente.

60%
Predominanza di colori neutri chiari

Conferiscono essenzialità, semplicità e pulizia.
Essenzialità per focalizzare l’attenzione su ciò che è davvero importante.
Semplicità intesa come processo di sintesi.
Pulizia intesa come eliminazione del superfluo, per una maggior chiarezza.

25%
Colori neutri scuri

Conferiscono solidità strutturale al brand. Demarcano sicurezza e stabilità, aiutando nel processo di sintesi, a infondere autorevolezza all’immagine dell’azienda.

15%
Accento

Limitare l’utilizzo di un colore così importante enfatizza i focus

Colori prodotti

Per ogni prodotto della a.suite abbiamo individuato uno specifico colore che risponde a diverse necessità. Per le due app abbiamo optato per sfumature basate sui colori già esistenti dei prodotti.

  • a.pecoffice

    HEX: #02A17C
    RGB: 2 161 124
    CMYK: 88 0 66 0
  • a.docukey

    HEX: #B6A63D
    RGB: 182 166 61
    CMYK: 30 25 97 8
  • a.sendway

    HEX: #3476CB
    RGB: 52 118 203
    CMYK: 80 51 0 0
  • a.gopec

    HEX: #7340BF
    RGB: 115 64 191
    CMYK: 73 81 0 0
  • a.invoice

    HEX: #BD569B
    RGB: 189 86 155
    CMYK: 23 80 0 0
  • i.pec

    GRADIENT
    a.pecoffice + a.sendway

    HEX: #01A04A
    RGB: 1 160 164
    CMYK: 87 3 40 0
  • i.tablet

    GRADIENT
    a.docukey + a.invoice

    HEX: #D06223
    RGB: 208 98 35
    CMYK: 7 74 100 1
  • a.pecoffice

    HEX: #02A17C
    RGB: 2 161 124
    CMYK: 88 0 66 0
  • a.docukey

    HEX: #B6A63D
    RGB: 182 166 61
    CMYK: 30 25 97 8
  • a.sendway

    HEX: #3476CA
    RGB: 52 118 202
    CMYK: 80 51 0 0
  • a.gopec

    HEX: #7340BF
    RGB: 115 64 191
    CMYK: 73 81 0 0
  • a.invoice

    HEX: #BD569B
    RGB: 189 86 155
    CMYK: 23 80 0 0
  • i.pec

    GRADIENT
    a.pecoffice + a.sendway

    HEX: #01A04A
    RGB: 1 160 164
    CMYK: 87 3 40 0
  • i.tablet

    GRADIENT
    a.docukey + a.invoice

    HEX: #D06223
    RGB: 208 98 35
    CMYK: 7 74 100 1

Variazioni colori

Nelle diverse interfacce e nella comunicazione di prodotto, spesso sono utili abbinamenti tono su tono. Ecco quindi le diverse tonalità individuate per la nostra palette primaria.

  • HEX: #340A00
    RGB: 52 10 0
    CMYK: 53 91 77 79
  • HEX: #661400
    RGB: 102 20 0
    CMYK: 33 100 100 50
  • HEX: #9A1E00
    RGB: 154 30 0
    CMYK: 21 100 100 19
  • HEX: #CC2900
    RGB: 204 41 0
    CMYK: 3 99 100 1
  • HEX: #FF3300
    RGB: 255 51 0
    CMYK: 0 93 100 0
  • HEX: #FF5F33
    RGB: 255 92 51
    CMYK: 0 79 83 0
  • HEX: #FF8465
    RGB: 255 132 101
    CMYK: 0 65 59 0
  • HEX: #FFCDC1
    RGB: 255 205 193
    CMYK: 0 30 21 0
  • HEX: #FFEAE5
    RGB: 255 234 229
    CMYK: 0 13 9 0
  • HEX: #002018
    RGB: 0 32 24
    CMYK: 96 56 74 80
  • HEX: #014032
    RGB: 1 64 50
    CMYK: 99 42 78 55
  • HEX: #01604A
    RGB: 1 96 74
    CMYK: 98 32 77 28
  • HEX: #028163
    RGB: 2 129 99
    CMYK: 95 19 73 6
  • HEX: #02A17C
    RGB: 2 161 124
    CMYK: 88 0 66 0
  • HEX: #35B496
    RGB: 53 180 150
    CMYK: 79 0 54 0
  • HEX: #68C6B0
    RGB: 104 198 176
    CMYK: 65 0 42 0
  • HEX: #96D8C9
    RGB: 150 216 201
    CMYK: 50 0 30 0
  • HEX: #CEEDE5
    RGB: 206 237 229
    CMYK: 26 0 15 0
  • HEX: #25200C
    RGB: 37 32 12
    CMYK: 67 63 77 81
  • HEX: #494218
    RGB: 73 66 24
    CMYK: 58 53 97 97
  • HEX: #6E6324
    RGB: 110 99 36
    CMYK: 49 44 100 37
  • HEX: #928531
    RGB: 146 133 49
    CMYK: 40 34 100 20
  • HEX: #B6A63D
    RGB: 182 166 61
    CMYK: 30 25 97 8
  • HEX: #C5B864
    RGB: 197 184 100
    CMYK: 26 20 76 4
  • HEX: #D3C98A
    RGB: 211 201 138
    CMYK: 20 15 58 2
  • HEX: #E1DAAF
    RGB: 225 218 175
    CMYK: 15 10 40 0
  • HEX: #F1EED9
    RGB: 241 238 217
    CMYK: 7 4 20 0
  • HEX: #0B1728
    RGB: 11 23 40
    CMYK: 100 86 51 70
  • HEX: #152F51
    RGB: 21 47 81
    CMYK: 100 82 39 35
  • HEX: #1F4678
    RGB: 31 70 120
    CMYK: 99 74 24 9
  • HEX: #2A5EA2
    RGB: 42 94 162
    CMYK: 91 61 2 0
  • HEX: #3476CA
    RGB: 52 118 202
    CMYK: 80 51 0 0
  • HEX: #5D91D5
    RGB: 93 145 213
    CMYK: 69 36 0 0
  • HEX: #86ACDF
    RGB: 134 172 223
    CMYK: 55 24 0 0
  • HEX: #ABC6E9
    RGB: 171 198 233
    CMYK: 39 14 0 0
  • HEX: #D8E4F5
    RGB: 216 228 245
    CMYK: 19 7 0 0
  • HEX: #170D25
    RGB: 23 13 37
    CMYK: 96 98 48 71
  • HEX: #2E1A4C
    RGB: 46 26 76
    CMYK: 94 100 34 34
  • HEX: #452672
    RGB: 69 38 114
    CMYK: 89 100 14 4
  • HEX: #5C3399
    RGB: 92 51 153
    CMYK: 78 89 0 0
  • HEX: #7340BF
    RGB: 115 64 191
    CMYK: 73 81 0 0
  • HEX: #8F66CC
    RGB: 143 102 204
    CMYK: 59 67 0 0
  • HEX: #AC8CD8
    RGB: 172 140 216
    CMYK: 40 51 0 0
  • HEX: #C5B0E4
    RGB: 197 176 228
    CMYK: 26 36 0 0
  • HEX: #E4DAF3
    RGB: 228 218 243
    CMYK: 11 18 0 0
  • HEX: #27111E
    RGB: 39 17 30
    CMYK: 79 88 50 78
  • HEX: #4C223E
    RGB: 76 34 62
    CMYK: 60 93 38 49
  • HEX: #72335C
    RGB: 114 51 92
    CMYK: 51 91 29 22
  • HEX: #97457C
    RGB: 151 69 124
    CMYK: 40 87 16 3
  • HEX: #BD569B
    RGB: 189 86 155
    CMYK: 23 80 0 0
  • HEX: #CA78AF
    RGB: 202 120 175
    CMYK: 17 66 0 0
  • HEX: #D899C3
    RGB: 216 153 195
    CMYK: 0 52 0 0
  • HEX: #E3B9D6
    RGB: 227185 214
    CMYK: 7 37 0 0
  • HEX: #F2DEEB
    RGB: 242 222 235
    CMYK: 3 18 1 0
  • HEX: #002020
    RGB: 0 32 32
    CMYK: 99 58 64 78
  • HEX: #004042
    RGB: 0 64 66
    CMYK: 98 44 57 54
  • HEX: #006062
    RGB: 0 96 98
    CMYK: 96 33 53 29
  • HEX: #008184
    RGB: 0 129 132
    CMYK: 92 22 48 8
  • HEX: #01A04A
    RGB: 1 160 164
    CMYK: 87 3 40 0
  • HEX: #33B4B7
    RGB: 51 180 183
    CMYK: 78 0 34 0
  • HEX: #67C6C9
    RGB: 103 198 201
    CMYK: 65 0 27 0
  • HEX: #95D8DA
    RGB: 149 216 218
    CMYK: 50 0 20 0
  • HEX: #CDEDED
    RGB: 205 237 237
    CMYK: 26 0 11 0
  • HEX: #2A1307
    RGB: 42 19 7
    CMYK: 56 79 74 83
  • HEX: #53270E
    RGB: 83 39 14
    CMYK: 40 82 92 62
  • HEX: #7E3A15
    RGB: 126 58 21
    CMYK: 30 82 100 35
  • HEX: #A64E1C
    RGB: 166 78 28
    CMYK: 22 78 100 14
  • HEX: #D06223
    RGB: 208 98 35
    CMYK: 7 74 100 1
  • HEX: #D9814F
    RGB: 217 129 79
    CMYK: 5 61 78 1
  • HEX: #E3A07A
    RGB: 227 160 122
    CMYK: 3 47 56 0
  • HEX: #EBBEA4
    RGB: 235 190 164
    CMYK: 3 33 37 0
  • HEX: #F6E0D4
    RGB: 246 224 212
    CMYK: 1 16 17 0
  • HEX: #340A00
    RGB: 52 10 0
    CMYK: 53 91 77 79
  • HEX: #661400
    RGB: 102 20 0
    CMYK: 33 100 100 50
  • HEX: #9A1E00
    RGB: 154 30 0
    CMYK: 21 100 100 19
  • HEX: #CC2900
    RGB: 204 41 0
    CMYK: 3 99 100 1
  • HEX: #FF3300
    RGB: 255 51 0
    CMYK: 0 93 100 0
  • HEX: #FF5F33
    RGB: 255 92 51
    CMYK: 0 79 83 0
  • HEX: #FF8465
    RGB: 255 132 101
    CMYK: 0 65 59 0
  • HEX: #FFCDC1
    RGB: 255 205 193
    CMYK: 0 30 21 0
  • HEX: #FFEAE5
    RGB: 255 234 229
    CMYK: 0 13 9 0
  • HEX: #002018
    RGB: 0 32 24
    CMYK: 96 56 74 80
  • HEX: #014032
    RGB: 1 64 50
    CMYK: 99 42 78 55
  • HEX: #01604A
    RGB: 1 96 74
    CMYK: 98 32 77 28
  • HEX: #028163
    RGB: 2 129 99
    CMYK: 95 19 73 6
  • HEX: #02A17C
    RGB: 2 161 124
    CMYK: 88 0 66 0
  • HEX: #35B496
    RGB: 53 180 150
    CMYK: 79 0 54 0
  • HEX: #68C6B0
    RGB: 104 198 176
    CMYK: 65 0 42 0
  • HEX: #96D8C9
    RGB: 150 216 201
    CMYK: 50 0 30 0
  • HEX: #CEEDE5
    RGB: 206 237 229
    CMYK: 26 0 15 0
  • HEX: #25200C
    RGB: 37 32 12
    CMYK: 67 63 77 81
  • HEX: #494218
    RGB: 73 66 24
    CMYK: 58 53 97 97
  • HEX: #6E6324
    RGB: 110 99 36
    CMYK: 49 44 100 37
  • HEX: #928531
    RGB: 146 133 49
    CMYK: 40 34 100 20
  • HEX: #B6A63D
    RGB: 182 166 61
    CMYK: 30 25 97 8
  • HEX: #C5B864
    RGB: 197 184 100
    CMYK: 26 20 76 4
  • HEX: #D3C98A
    RGB: 211 201 138
    CMYK: 20 15 58 2
  • HEX: #E1DAAF
    RGB: 225 218 175
    CMYK: 15 10 40 0
  • HEX: #F1EED9
    RGB: 241 238 217
    CMYK: 7 4 20 0
  • HEX: #0B1728
    RGB: 11 23 40
    CMYK: 100 86 51 70
  • HEX: #152F51
    RGB: 21 47 81
    CMYK: 100 82 39 35
  • HEX: #1F4678
    RGB: 31 70 120
    CMYK: 99 74 24 9
  • HEX: #2A5EA2
    RGB: 42 94 162
    CMYK: 91 61 2 0
  • HEX: #3476CA
    RGB: 52 118 202
    CMYK: 80 51 0 0
  • HEX: #5D91D5
    RGB: 93 145 213
    CMYK: 69 36 0 0
  • HEX: #86ACDF
    RGB: 134 172 223
    CMYK: 55 24 0 0
  • HEX: #ABC6E9
    RGB: 171 198 233
    CMYK: 39 14 0 0
  • HEX: #D8E4F5
    RGB: 216 228 245
    CMYK: 19 7 0 0
  • HEX: #170D25
    RGB: 23 13 37
    CMYK: 96 98 48 71
  • HEX: #2E1A4C
    RGB: 46 26 76
    CMYK: 94 100 34 34
  • HEX: #452672
    RGB: 69 38 114
    CMYK: 89 100 14 4
  • HEX: #5C3399
    RGB: 92 51 153
    CMYK: 78 89 0 0
  • HEX: #7340BF
    RGB: 115 64 191
    CMYK: 73 81 0 0
  • HEX: #8F66CC
    RGB: 143 102 204
    CMYK: 59 67 0 0
  • HEX: #AC8CD8
    RGB: 172 140 216
    CMYK: 40 51 0 0
  • HEX: #C5B0E4
    RGB: 197 176 228
    CMYK: 26 36 0 0
  • HEX: #E4DAF3
    RGB: 228 218 243
    CMYK: 11 18 0 0
  • HEX: #27111E
    RGB: 39 17 30
    CMYK: 79 88 50 78
  • HEX: #4C223E
    RGB: 76 34 62
    CMYK: 60 93 38 49
  • HEX: #72335C
    RGB: 114 51 92
    CMYK: 51 91 29 22
  • HEX: #97457C
    RGB: 151 69 124
    CMYK: 40 87 16 3
  • HEX: #BD569B
    RGB: 189 86 155
    CMYK: 23 80 0 0
  • HEX: #CA78AF
    RGB: 202 120 175
    CMYK: 17 66 0 0
  • HEX: #D899C3
    RGB: 216 153 195
    CMYK: 0 52 0 0
  • HEX: #E3B9D6
    RGB: 227185 214
    CMYK: 7 37 0 0
  • HEX: #F2DEEB
    RGB: 242 222 235
    CMYK: 3 18 1 0
  • HEX: #002020
    RGB: 0 32 32
    CMYK: 99 58 64 78
  • HEX: #004042
    RGB: 0 64 66
    CMYK: 98 44 57 54
  • HEX: #006062
    RGB: 0 96 98
    CMYK: 96 33 53 29
  • HEX: #008184
    RGB: 0 129 132
    CMYK: 92 22 48 8
  • HEX: #01A04A
    RGB: 1 160 164
    CMYK: 87 3 40 0
  • HEX: #33B4B7
    RGB: 51 180 183
    CMYK: 78 0 34 0
  • HEX: #67C6C9
    RGB: 103 198 201
    CMYK: 65 0 27 0
  • HEX: #95D8DA
    RGB: 149 216 218
    CMYK: 50 0 20 0
  • HEX: #CDEDED
    RGB: 205 237 237
    CMYK: 26 0 11 0
  • HEX: #2A1307
    RGB: 42 19 7
    CMYK: 56 79 74 83
  • HEX: #53270E
    RGB: 83 39 14
    CMYK: 40 82 92 62
  • HEX: #7E3A15
    RGB: 126 58 21
    CMYK: 30 82 100 35
  • HEX: #A64E1C
    RGB: 166 78 28
    CMYK: 22 78 100 14
  • HEX: #D06223
    RGB: 208 98 35
    CMYK: 7 74 100 1
  • HEX: #D9814F
    RGB: 217 129 79
    CMYK: 5 61 78 1
  • HEX: #E3A07A
    RGB: 227 160 122
    CMYK: 3 47 56 0
  • HEX: #EBBEA4
    RGB: 235 190 164
    CMYK: 3 33 37 0
  • HEX: #F6E0D4
    RGB: 246 224 212
    CMYK: 1 16 17 0

Tipografia

La tipografia rispecchia lo spirito di Ardesia: semplice, professionale, di facile lettura su qualsiasi dispositivo e con diverse dimensioni.

Il carattere primario, Arial, è stato progettato nel 1982 da Robin Nicholas e Patricia Saunders per Monotype e in seguito ampiamente adottato da Microsoft proprio per la sua particolare predisposizione a essere utilizzato in prodotti digitali.

La forma dei singoli caratteri e gli spazi tra i caratteri stessi sono infatti stati disegnati per permettere una maggiore leggibilità sullo schermo nelle varie risoluzioni.

A corredo dell’Arial, usato per tutti i titoli e le comunicazioni cartacee e le email, abbiamo scelto il Roboto, Google font leggermente più snello, che alleggerisce e facilita la lettura su monitor.

Font

Gerarchia

Titoletto

Arial Bold

Font size: 12 px
Leading: 1
Kerning: 12 px
Uppercase

Titolo

Arial Regular

Font size: 60 px
Leading: 1.3
Kerning: 0 px
Normal

Sottotitolo

Roboto Regular

Font size: 17 px
Leading: 1.4
Kerning: 0 px
Normal

Testo

Roboto Light

Font size: 15 px
Leading: 1.6
Kerning: 0 px
Normal

Icone

Il Sistema di icone si articola in diversi filoni, ognuno dei quali rappresenta i temi principali di Ardesia: documenti, email e pec, spedizione.

Dato il ruolo meno preponderante rispetto ai loghi, pur rispettando gli assunti del Material Design, lo stile delle icone è volutamente più flat.

Sistema di icone

Il sistema di icone si ispira al minimalismo. Mira ad essere riconoscibile, comunicativo e preciso. Ogni icona ha 4 versioni: documento, email, spedizione e lineare.

monitor

certificazione

folder

multicanalità

euro

archivio

Colorazione

Le nostre icone si prestano ad essere utilizzate sia a livello istituzionale, assumendo le tipiche colorazioni di Brand rosse e nere, sia per i nostri prodotti, assumendo la colorazione specifica di ognuno.

Icone prodotti

I nostri prodotti, oltre alle icone generiche, sono corredati di icone specifiche. tali icone specifiche non possono essere utilizzate al di fuori dell’ambito dei prodotti di riferimento.

a.pecoffice

a.docukey

a.sendway

a.gopec

a.invoice

i.pec

i.tablet

User Interface

Le interfacce utente Ardesia sono tanto varie quanto il loro utilizzo, dal sito web fino ai prodotti. L’obiettivo è creare soluzioni varie e un’esperienza utente ben bilanciata.

L’esperienza utente è fornita da un insieme congiunto di componenti, moduli e animazioni ispirati ai principi del Material Design, secondo cui ogni elemento si comporta come un oggetto.

Bottoni

I nostri bottoni primari sono leggeri e puliti coerentemente con il resto dell’architettura di Brand, mentre quelli secondari sono utilizzati solo in casi specifici. Quando si parla di prodotto, la gerarchia si inverte e i bottoni assumono la colorazione del prodotto stesso. I bottoni testuali vengono utilizzati in contesti già molto ricchi di contenuti, per evitare di appesantire i layout.

Specifiche

Border: 2px
Border radius: 50 px
Padding: 12px 24px

Specifiche

Border radius: 50 px
Padding: 12px 24px

Specifiche

Font family: Roboto
Font size: 15px
Font weight: 400 (regular)

Box

I nostri box vengono utilizzati per dare rilevanza a contenuti particolarmente importanti e per definire la gerarchia degli stessi. Sono utilizzati per lo più tono su tono, emergono dal contesto grazie all’ombra e all’interazione dell’utente al passaggio del mouse, restando leggeri e minimali.

Titolo del box

Trasformiamo le esigenze in processi tecnologici che ottimizzano le prestazioni aziendali.

Specifiche

Border radius: 10 px
Padding: 15%
Margin: 5%
Background color: #FFFFFF

Ombre

Le nostre ombre sono delicate e leggere, in linea con il Brand. Vengono utilizzate per far emergere dal contesto specifici contenuti, anche grazie all’interazione dell’utente al passaggio del mouse.

Titolo del box

Trasformiamo le esigenze in processi tecnologici che ottimizzano le prestazioni aziendali.

Specifiche Normal

Color: rgba (0, 0, 0, 0.1)
Sfocatura: 40


 

Specifiche Hover

Color: rgba (0, 0, 0, 0.2)
Sfocatura: normale * 1,5 (40*1,5=60)

Icone social

Le nostre icone social sono utilizzate con colorazione nera e cerchiate dal rosso Ardesia. Con dimensioni piccole è preferibile impostare un bordo di 1px, mentre con dimensioni maggiori è consigliato impostare un bordo di 2px.

Specifiche dimensioni inferiori ai 20px

Color: #1A171B
Decorazione: 1px solid #ff3300 

Specifiche dimensioni superiori ai 20px

Color: #1A171B
Decorazione: 2px solid #ff3300 

Form

I nostri form mantengono la semplicità e la leggerezza che distingue l’intera immagine di Brand. I campi sono delineati solamente da linee evidenziate dal colore rosso Ardesia.

Ardesia Srl ha bisogno delle tue informazioni di contatto per comunicare con te. Riceverai solamente contenuti di qualità e di tuo interesse. Non saremo uno spam, promesso!

Label

Roboto Light

Font size: 15 px
Leading: 1.6
Kerning: 0 px
Padding-top: 20 px
Color: #808080

Field

Roboto Regular

Font size: 16 px
Leading: 1.6
Kerning: 0 px
Color: #1A171B 
Border-bottom: 1px solid #ff3300

Legal consent

Roboto Light

Font size: 12 px
Leading: 1.2
Kerning: 0 px
Margin-left: 1rem 
Color: #808080

Immagini

Passione, precisione e perfezione: caratteristiche che parte integrante non solo di ogni dettaglio dei prodotti Ardesia ma anche delle nostre immagini. Lo stile è minimalista e luminoso, con un focus sull’elemento umano in ogni immagine.

Le immagini vengono utilizzate prevalentemente nella comunicazione di prodotto.

Soggetti

L’elemento umano è il focus dell’immaginario di Ardesia.

La mano, infatti, assume un significato metaforico: è il gesto umano a guidare la tecnologia, che in Ardesia viene sempre modellata sulla base delle esigenze delle persone.

Le immagini non sembrano affatto messe in scena, eppure ogni singolo dettaglio è composto meticolosamente.

Luci

Lo stile è minimalista e luminoso. Il risultato sono istantanee esclusive di situazioni autentiche, che abbinano perfettamente un’illuminazione importante e sofisticata a una contrastata atmosfera monocromatica.

Trattamento

Le nostre immagini vengono elaborate con un trattamento bianco e nero estremamente luminoso. Questo ci consente di creare immagini di alta qualità, cariche di emozioni che affascinano lo spettatore, esprimendo al contempo il nostro atteggiamento geniale, creativo e proattivo.

Don't

Evitare di applicare alle immagini overlay bianchi, neri o di qualsiasi colorazione. Evitare di utilizzare illustrazioni.

Composizione

Griglia

Lorem ipsum

Applicazioni della griglia

Lorem ipsum

Pixel in pattern geometrico in background

Pixel interno

Pixel in angolo

Comunicazione

  • Non si può non comunicare. 
  • Ogni comunicazione ha un aspetto di contenuto e un aspetto di relazione. 
  • La natura di una relazione dipende dalla punteggiatura delle sequenze di comunicazione tra i comunicanti.
  • La comunicazione umana è composta da codici analogici e digitali, corrispondendo i primi prevalentemente ad aspetti relazionali e i secondi ad aspetti di contenuto.
  • Tutti gli scambi di comunicazione sono simmetrici o complementari, a seconda che siano basati sull’uguaglianza o sulla differenza.

I quattro assiomi della comunicazione di Paul Watzlawick sono per noi un mantra: non solo per la scelta degli elementi visivi ma anche per tutto ciò che riguarda la relazione le persone.

Per questo vogliamo comunicare in modo chiaro e trasparente, attraverso un linguaggio e un metalinguaggio capace di arrivare ancor prima della parola.

Comunicazione di Brand

Nel comunicare il brand vogliamo esprimere la semplicità e la trasparenza che caratterizza Ardesia. Per questo prediligiamo l’utilizzo di elementi geometrici e razionali nonché del pixel: un semplice rettangolo rosso in grado di costruire cose geniali.

Per la comunicazione corporate e istituzionale l’accent color è il rosso.

Comunicazione di prodotto

 

I prodotti Ardesia risolvono esigenze che fanno parte della quotidianità: per questo a livello comunicativo si predilige l’utilizzo delle immagini, che esprimono gesti reali. 

Per la comunicazione di prodotto l’accent color è quello del prodotto stesso.