# Cosa c’è in un brand kit e come tenerlo in ordine

[Canonical HTML page](https://gradiently.design/it/guide/brand-kit)

La guida di stile dice cosa fare. Il brand kit è ciò che le persone prendono davvero in mano. Con file, formati e cartelle giusti, tutti creano lavori in linea con il brand senza chiederti niente.

## The short version

- Un brand kit è la raccolta di file pronti all’uso che permette a chiunque di creare lavori in linea con il brand: loghi, codici colore, font, sfondi, template, immagini approvate e la guida di stile.
- I loghi entrano nel kit come SVG per gli schermi, PNG trasparente per gli strumenti di uso quotidiano e versioni a un colore in bianco e nero.
- I codici colore vanno indicati in tutte le notazioni che serviranno, di solito esadecimale e RGB per lo schermo e CMYK per la stampa.
- Sfondi e template sono le parti più usate e più spesso dimenticate di un brand kit.
- Un brand kit resta in ordine quando ha una sola casa, un solo responsabile, nomi di file chiari e una cartella d’archivio per ciò che è stato ritirato.

Un **brand kit** è l’insieme di file pronti all’uso di cui chiunque ha bisogno per creare qualcosa in linea con il brand: file del logo, codici colore, font, sfondi, template, immagini approvate e una breve guida di stile. Dove la [brand style guide](https://gradiently.design/it/guide/brand-style-guide) spiega le regole, il kit consegna i materiali. Un buon kit permette a un freelance, a un nuovo collega o a un assistente AI di iniziare a lavorare in pochi minuti senza farti una sola domanda.

## La checklist del brand kit

| Elemento | Cosa includere | Perché conta |
| --- | --- | --- |
| Logo | SVG, PNG trasparente, versioni a un colore in nero e bianco, versione avatar quadrata | Ogni strumento e ogni sfondo richiede un file diverso |
| Colori | Nomi, codici esadecimali, RGB e CMYK, con il compito di ogni colore | Evita che si prendano colori dagli screenshot |
| Font | Nomi dei font con link o file per scaricarli, più note sulla licenza | Evita sostituti che cambiano tutta l’atmosfera |
| Sfondi | Sfondo distintivo nei formati più comuni, codice CSS, colore piatto di riserva | Riempie l’area più grande della maggior parte dei design |
| Template | I tuoi post, storie, slide e header email più frequenti | Il modo più rapido per restare coerenti |
| Immagini | Foto approvate, illustrazioni o set di icone | Impedisce alle foto stock di insinuarsi |
| Guida di stile | Le regole in una pagina, come PDF o link | Spiega quando usare ogni file |

Sette elementi. La maggior parte dei kit ha i primi tre; i tre successivi sono da dove nasce davvero la coerenza.

Aiuta pensare a chi apre il kit e a cosa cerca per primo:

- **Chi gestisce i social** vuole template e sfondi nei formati giusti
- **Chi sviluppa il sito** vuole il logo SVG, i codici colore in CSS e le fonti dei font
- **Chi stampa** vuole il logo per la stampa, i valori CMYK e gli eventuali colori speciali
- **Un nuovo collega** vuole la guida di una pagina e un buon esempio per ogni formato
- **Un assistente AI** vuole le regole in testo semplice e i colori come codici

## File del logo: quali formati servono

Un logo, più file. Ogni formato risolve un problema diverso, e quello sbagliato è di solito la causa di loghi sfocati, incorniciati o dai colori errati.

| Formato | Usalo per | Attenzione a |
| --- | --- | --- |
| SVG | Siti web, app e tutto ciò che si ridimensiona | Alcuni strumenti d’ufficio e social non lo accettano |
| PNG, trasparente | Slide, documenti, strumenti social, email | Esportalo grande, ad esempio 2.000 px di larghezza, così resta nitido |
| PDF o EPS | Stampa, insegne e merchandising | Da inviare alle tipografie, non ai social |
| JPEG | Quasi mai per i loghi | Niente trasparenza, quindi arriva in un riquadro bianco |

Come minimo: SVG e PNG trasparente del logo principale, più le versioni a un colore in bianco e nero per foto e gradienti.

Includi anche una versione che funzioni sul tuo sfondo distintivo. Un logo che sparisce sul tuo stesso gradiente è un problema comune e facilmente evitabile; [mettere un logo su un gradiente](https://gradiently.design/it/guide/logo-on-gradient-background) spiega le soluzioni.

## Colori, font e il resto delle basi

- Blu notte: #0e1424
- Farina: #f3e6d0
- Bagliore del forno: #e0823d
- Crosta: #6b4a2f

I colori di un kit hanno bisogno di nomi oltre che di codici. Ci si ricorda «bagliore del forno»; nessuno si ricorda #e0823d.

```css
:root {
  --night-blue: #0e1424; /* rgb(14 20 36) grounds, 60% */
  --flour: #f3e6d0;      /* rgb(243 230 208) text and panels, 30% */
  --oven-glow: #e0823d;  /* rgb(224 130 61) accents only, 10% */
  --crust: #6b4a2f;      /* rgb(107 74 47) support */

  /* Signature background, with the flat fallback first */
  --ground: #0e1424;
  --ground-gradient: radial-gradient(90% 70% at 50% 110%, #e0823d 0%, #6b4a2f 25%, #1b2238 55%, #0e1424 100%);
}
```

Metti nel kit un file dei colori per chi costruisce il tuo sito. Evita un giro di tentativi a partire dagli screenshot.

Per i font, annota da dove arriva ciascuno e cosa permette la sua licenza. Molti ottimi caratteri sono gratuiti su [Google Fonts](https://fonts.google.com); i font commerciali spesso richiedono una licenza per persona o per sito, quindi scrivilo. [Come scegliere i font del brand](https://gradiently.design/it/guide/brand-fonts) aiuta nella scelta vera e propria.

## Sfondi e template: i file più usati

I loghi ricevono l’attenzione, ma sfondi e template ricevono l’uso. Prepara il tuo sfondo distintivo nei formati che pubblichi di più, così nessuno stira un’immagine quadrata fino a farne un banner. Poi costruisci i template sopra.

- Post 4:5: 1080 × 1350
- Storia 9:16: 1080 × 1920
- Slide 16:9: 1920 × 1080
- Anteprima link: 1200 × 630
- Header email: 1200 × 600
- Banner LinkedIn: 1584 × 396

Sei formati che coprono la maggior parte dei piccoli brand. Genera lo sfondo per ogni forma invece di ritagliare una sola immagine.

## Una struttura di cartelle per il brand kit che resta in ordine

```text
brand-kit/
  00-read-me-first.pdf          (the one-page style guide)
  01-logo/
    cornerloaf-logo-primary.svg
    cornerloaf-logo-primary.png
    cornerloaf-logo-white.png
    cornerloaf-logo-black.png
    cornerloaf-avatar-square.png
    print/cornerloaf-logo-primary.pdf
  02-colour/
    colours.css
    colours.pdf                 (hex, RGB, CMYK, names, jobs)
  03-type/
    fonts.txt                   (names, links, licence notes)
  04-backgrounds/
    ground-1080x1350.png
    ground-1080x1920.png
    ground-1920x1080.png
  05-templates/
  06-imagery/
  _archive/                     (retired files, never deleted)
```

Le cartelle numerate mantengono l’ordine, un solo file «leggimi» sta in cima e i file vecchi finiscono in un archivio invece di restare accanto ai nuovi.

### Kit disordinato

- logo-finale-v3-NUOVO-usa-questo.png
- Cinque copie del kit su unità diverse
- Colori vecchi e nuovi affiancati
- Font nominati ma senza link

### Kit in ordine

- brand-logo-bianco.png, nominato per ciò che è
- Una sola casa, richiamata da tutte le altre parti
- File ritirati spostati in _archive
- Ogni font con la sua fonte e la sua licenza

## Come mantenere aggiornato un brand kit

1. **Una casa, un responsabile** Tieni una sola copia principale e indica una persona che può modificarla. Tutti gli altri rimandano a quella invece di scaricare copie.
2. **Nomina i file per ciò che sono** Brand, elemento, variante, formato. Mai «finale» o «nuovo»: smettono di essere veri la settimana dopo.
3. **Archivia, non eliminare** Quando qualcosa viene ritirato, spostalo in una cartella d’archivio. I file vecchi accanto ai nuovi sono il modo in cui tornano i vecchi colori.
4. **Rivedi a ogni cambiamento** Nuovo template, nuovo colore, nuovo lock-up del logo: aggiorna il kit lo stesso giorno, poi la guida di stile. Vedi [la coerenza del brand](https://gradiently.design/it/guide/brand-consistency) per capire perché la deriva parte da qui.

Gradiently tiene un brand kit dentro lo Studio, con logo, colori e font a un clic da ogni design, e il Designer lo applica quando crea o modifica un lavoro. Se gestisci più di un brand, ognuno ha il suo kit e i suoi Mark. [Configurare il brand kit in Gradiently](https://gradiently.design/it/guide/brand-kit-setup) lo spiega passo per passo.

## FAQ

### Che cos’è un brand kit?

Un brand kit è una raccolta di file del brand pronti all’uso: loghi, codici colore, font, sfondi, template, immagini approvate e una breve guida di stile.

### Quali file del logo devono stare in un brand kit?

Un SVG e un PNG trasparente del logo principale, versioni a un colore in bianco e nero, una versione avatar quadrata e un PDF o EPS per la stampa.

### Che differenza c’è tra un brand kit e una guida di stile?

La guida di stile sono le regole; il brand kit sono i file. Il kit dovrebbe includere la guida, e la guida dovrebbe dire dove si trova il kit.

### Come condivido un brand kit con un freelance?

Condividi il link all’unica cartella principale, con la guida di stile in cima. Evita di inviare copie, che si disallineano.