# EasyForma — identità di marca
Documento per chi progetta e per chi installa il marchio. Estende `docs/design-system.md`: palette, tipografia e
tono restano quelli; qui si definisce solo il segno. Dominio: **easyforma.it**. Promessa: **il registro che si
scrive da solo**.
---
## 1. Concept
Il prodotto non vende "formazione online", vende un documento: il registro presenze che regge un audit del fondo.
Il marchio deve dire quella cosa lì — una riga che si completa da sola e viene spuntata — senza i due cliché di
categoria (tocco accademico, simboli da videoconferenza) e senza il cliché SaaS dello swoosh astratto. Sono state
disegnate tre direzioni e rasterizzate tutte a 16 px prima di scegliere.
### Direzione A — "La riga che si chiude" _(scelta)_
Un filo di margine verticale e tre righe orizzontali: la prima compilata per intero, la seconda a metà, la terza
che corre breve e poi si solleva in una spunta. La spunta non è un'icona appiccicata sopra: è la riga stessa che
cambia direzione, e il suo vertice atterra esattamente sull'altezza della riga di mezzo, cioè sulla riga che
dichiara completata. Letto come oggetto è un frammento di registro; letto come lettera è la **E** di EasyForma,
perché una E maiuscola _è già_ un'asta di margine con tre righe attaccate. È un solo tratto continuo di pensiero,
funziona in monocromia, e a 16 px restano leggibili tutti e quattro gli elementi.
### Direzione B — "Il timbro"
Un anello ruotato di -6°, come un timbro appoggiato storto, con dentro una spunta che poggia su una riga di
inchiostro sbavata. Nasce da un'osservazione vera sul pubblico: responsabili formazione e amministrativi ricevono
e appongono timbri su documenti reali ogni giorno, e il design system usa già il timbro per marcare il pacchetto
Pro. **Scartata** per due motivi. Primo, il cerchio con la spunta dentro è il segno "verificato" più battuto del
web, indistinguibile da mille badge di conferma. Secondo, il timbro è già speso: se diventa anche il logo, il
timbro "SCELTA PIÙ FREQUENTE" sulla card Pro smette di essere un segnale e diventa un'eco del marchio.
### Direzione C — "La casella che si riempie"
Una griglia tabellare di sei celle con l'ultima in basso a destra inchiostrata piena: l'ultimo dato è arrivato, la
tabella è chiusa. Geometricamente è la direzione più solida delle tre a dimensioni minime, perché è fatta solo di
rette ortogonali. **Scartata per ragioni di contenuto, non di forma**: quella griglia è un foglio di calcolo, e il
foglio di calcolo è esattamente ciò che EasyForma promette di togliere di mezzo ("senza fogli excel", copy della
landing). Un marchio che raffigura il problema invece della soluzione lavora contro la prima riga del sito.
### Perché A
Perché è l'unica delle tre che racconta un **processo** invece di uno stato. B e C mostrano il risultato finale
(verificato, pieno); A mostra il registro in tre stadi contemporaneamente — riga piena, riga a metà, riga che si
chiude — ed è quello il prodotto: non "i dati sono corretti", ma "i dati si scrivono mentre tu fai lezione". In
più il marchio coincide con l'iniziale del nome senza che il nome debba essere presente, cosa che nessuna delle
altre due ottiene, e resta un disegno a tratto singolo con un solo spessore, quindi sopravvive a 16 px, in negativo
e su fondo scuro senza varianti semplificate.
---
## 2. Costruzione
Griglia **32 × 32**. Un solo spessore di tratto, terminali e giunzioni tondi.
```
0 6.2 23.4 27.6
│ │ │ │
├─────┼─────────────────────┤ ← riga 1 (y 5.6) — compilata
│ │
│ ├───────────┤ ← riga 2 (y 16) — a metà
│ │ 16
│ │ ╲
├─────┼───────────╱ ← riga 3 (y 26.4) → sale a (25.8, 16)
│ │
asta = filo di margine (x 6.2, da y 5.6 a y 26.4)
```
| Elemento | Geometria | Nota |
| ------------------------------ | -------------------------------------- | ------------------------------------------- |
| Filo di margine (asta della E) | `M6.2 5.6V26.4` | il bordo sinistro del foglio |
| Riga 1 | `M6.2 5.6H23.4` | compilata |
| Riga 2 | `M6.2 16H16` | a metà |
| Riga 3 + spunta | `M6.2 26.4H16L25.8 16` | l'unico tratto che cambia direzione |
| Tratto | `3.6` · `linecap`/`linejoin` = `round` | pareggia visivamente le aste di Archivo 700 |
Vincoli di costruzione, da rispettare in ogni ridisegno:
- **Passo delle righe 10,4 unità**, identico fra riga 1–2 e 2–3. È la misura madre del marchio.
- **La spunta atterra a y 16**, cioè sull'asse della riga che completa. Non più in alto (sembrerebbe scappare dal
registro), non più in basso (perderebbe il senso di riga chiusa).
- **Riga 2 e piega della riga 3 sono allineate a x 16**, l'asse verticale della griglia.
- L'inchiostro, compreso lo spessore, occupa `4.4 3.8 → 27.6 28.2`: **il marchio è centrato otticamente sul box**,
quindi si può posare in un contenitore quadrato senza correzioni.
### Lockup orizzontale
Wordmark **Archivo 700 convertito in curve**, corpo 25.5 unità sulla griglia del marchio, tracking −1,5 %, altezza
maiuscola 17,49, linea di base a y 24,75. L'inchiostro del wordmark parte a x 37,6, cioè **10 unità dopo la fine
dell'inchiostro del marchio** — la stessa aria del passo delle righe. Il lockup completo misura **175,9 × 32**.
Il wordmark è in curve in tutti i file consegnati: nessun SVG dipende da un font installato, e nessun ``
compare negli asset. Chi deve ricostruirlo parte dal corpo e dal tracking qui sopra.
### Aria di rispetto e misure minime
- **Aria di rispetto: 10 unità della griglia 32** su tutti i lati, cioè poco meno di un passo di riga. Applicata
anche al lockup, misurata dall'inchiostro e non dal viewBox. Dentro quell'area non entrano testo, bordi,
immagini né il bordo del contenitore.
- **Marchio da solo: minimo 16 px.** Sotto i 16 px il passo delle righe scende sotto il pixel e il segno impasta.
- **Lockup: minimo 120 px di larghezza** (maiuscola ≈ 12 px). Sotto quella soglia si usa il marchio da solo, non
un lockup rimpicciolito.
- **Su fondo pieno** (favicon, icone app) il marchio va usato a scala 1 : 1 rispetto alla piastrella, senza
aggiungere altro margine: la sua aria è già dentro il disegno. L'unica eccezione è `apple-touch-icon.png`, dove
il marchio è a 0,78 perché iOS ritaglia gli angoli con la sua maschera.
---
## 3. Colore
Nessun colore nuovo. Il marchio usa i token di `docs/design-system.md` §2, con una sola aggiunta riservata alla
marca.
| Uso | Colore | Token | Contrasto |
| --------------------------------- | ---------------------- | -------------------------------------- | -------------------------------------- |
| Marchio su fondo chiaro | `#0F6B4F` | `--marketing-primary` | 5,96:1 su `#F3F6F4` · 6,49:1 su bianco |
| Wordmark su fondo chiaro | `#142420` | `--marketing-ink` | 14,81:1 su `#F3F6F4` |
| Marchio su fondo scuro | `#46A883` | `--brand-primary-light` (solo marca) | 5,52:1 su `#142420` |
| Wordmark su fondo scuro | `#F3F6F4` | `--marketing-bg` usato come inchiostro | 14,81:1 su `#142420` |
| Marchio in negativo su piastrella | `#F3F6F4` su `#0F6B4F` | — | 5,96:1 |
Il verde è il colore che nel design system significa già "presente / verificato": applicarlo all'intero marchio,
spunta compresa, è coerente e non inventa un secondo significato.
**Perché esiste `#46A883`.** Il verde primario su inchiostro dà 2,48:1, sotto la soglia 3:1 per gli elementi non
testuali: su fondo scuro sarebbe illeggibile. `#46A883` è lo stesso verde schiarito. Nasce per il marchio sui
fondi scuri e oggi è anche il `--primary` del tema scuro dell'applicazione (`--brand-green-light`, 6,09:1 sul
fondo notte): stessa tinta, stesso significato, un valore solo. Nelle pagine marketing non compare, perché quelle
restano volutamente chiare.
**Monocromia.** Il marchio nasce monocromatico: `mark-mono.svg` e i componenti React usano `currentColor` ed
ereditano il colore del contenitore. Ogni uso in cui il verde non è disponibile — fax, stampa a un colore,
watermark, inchiostro bianco su foto — usa la versione mono, mai una tinta approssimata del verde.
---
## 4. Tipografia
Il wordmark è **Archivo 700**, tracking −1,5 %, in curve. Archivo è già la famiglia display del design system, e
il peso 700 è quello che pareggia lo spessore 3,6 del marchio: con il 600 il wordmark risulta più leggero del
segno e il lockup si sbilancia a destra.
Nota per chi implementa: `docs/design-system.md` §5 descriveva il logo di testata come "wordmark in Archivo 600".
**Quella riga è superata da questo documento**: la testata usa il lockup, che è 700 e in curve.
Il resto non cambia. Instrument Sans resta il corpo testo, IBM Plex Mono resta riservata a timestamp, durate e
prezzi. Il marchio non introduce font nuovi nel prodotto: gli asset sono già vettorizzati, quindi Archivo serve
al sito solo per i titoli, come prima.
Il nome si scrive sempre **EasyForma**, una parola sola, due maiuscole interne. Mai "Easyforma", "EASYFORMA",
"Easy Forma" né "EasyForm" (il vecchio nome, rimasto in `.env.example`: vedi §7).
---
## 5. Da fare / da non fare
**Da fare**
- Usare il lockup dove c'è spazio orizzontale, il marchio da solo dove non c'è.
- Lasciare sempre le 10 unità di aria, anche quando il layout è stretto: meglio rimpicciolire il logo che
comprimerne i margini.
- Su fondo scuro passare a `logo-dark.svg`, non schiarire il verde a occhio.
- In-app, usare `EasyFormaMark` con `currentColor` e lasciare che erediti il tema: è l'unico modo perché il
marchio resti corretto in dark mode senza duplicare asset.
- Ridisegnare gli asset dai numeri della §2 se servono formati nuovi.
**Da non fare**
- Non ruotare il marchio, non specchiarlo, non inclinarlo. La spunta ha una direzione di lettura.
- Non cambiare lo spessore del tratto per "farlo più elegante": 3,6 sulla griglia 32 è calibrato sui 16 px.
- Non riempire il marchio, non mettergli un'ombra, un gradiente o un alone.
- Non chiudere il marchio dentro un cerchio: diventerebbe la direzione B, già scartata, e collide con il timbro
del pacchetto Pro.
- Non allungare o restringere il lockup in modo non proporzionale, e non rifare il wordmark impostando Archivo a
runtime: i file consegnati sono in curve, un fallback di sistema cambierebbe il marchio.
- Non affiancare al marchio un pittogramma aggiuntivo (spunta, orologio, calendario): la spunta è già dentro.
- Non usare il marchio verde su fondo scuro né il marchio chiaro su fondo chiaro: i contrasti della §3 sono i
soli combinati verificati.
- Non usare `#46A883` fuori dal logo.
---
## 6. Inventario dei file
Tutto in `public/brand/`, servito da `/brand/...`.
| File | Dimensione | Uso previsto |
| ---------------------- | ---------: | ------------------------------------------------------------------------------------ |
| `logo.svg` | 6.134 B | Lockup orizzontale a due colori, per fondi chiari. Testata marketing, mail, stampa. |
| `logo-dark.svg` | 6.161 B | Lockup per fondi scuri (`#46A883` + `#F3F6F4`). |
| `logo-email.png` | 3.279 B | Lockup 528 × 96 su fondo trasparente, cioè 4× i 24 px dell'intestazione delle mail. |
| `logo-email-dark.png` | 3.290 B | Stesso lockup, stessa misura, colori da `logo-dark.svg`: per i client in tema scuro. |
| `mark.svg` | 342 B | Solo marchio, verde primario. Avatar, badge, contesti stretti. |
| `mark-mono.svg` | 347 B | Solo marchio in `currentColor`. Stampa a un colore, watermark, inline. |
| `favicon.svg` | 394 B | Favicon vettoriale: piastrella verde, marchio in colore carta, raggio 6/32. |
| `favicon-32.png` | 418 B | Favicon 32 × 32 di riserva. |
| `favicon-16.png` | 280 B | Favicon 16 × 16 di riserva. |
| `favicon.ico` | 7.406 B | ICO multi-risoluzione 16/32/48, per `public/favicon.ico` (vedi §7). |
| `apple-touch-icon.png` | 803 B | 180 × 180, quadrato pieno, marchio a 0,78 perché iOS applica la sua maschera. |
| `icon-192.png` | 1.607 B | Icona PWA 192 × 192, `purpose: any`. |
| `icon-512.png` | 4.413 B | Icona PWA 512 × 512, `purpose: any`. |
| `og-image.svg` | 78.810 B | Sorgente dell'anteprima social, testo già in curve. |
| `og-image.png` | 21.203 B | 1200 × 630 per Open Graph e Twitter. |
| `site.webmanifest` | 975 B | Manifest PWA, `theme_color` `#0F6B4F`, `background_color` `#F3F6F4`. |
E in `resources/js/components/brand/logo.tsx`:
- `EasyFormaMark` — solo marchio, `viewBox 0 0 32 32`.
- `EasyFormaLogo` — lockup, `viewBox 0 0 175.9 32`, anche export di default.
Entrambi accettano tutte le props di un `