REAL FICTION

01 — Colori

Quattro colori, nient'altro

Clicca su un codice per copiarlo. Sono gli stessi identici del sito: se un colore non è in questa lista, non appartiene al brand.

Come si usano insieme

Su una schermata comanda un solo colore acceso. Se il pulsante è fucsia, l'etichetta è lime e l'indigo resta fuori. Tre colori accesi nella stessa immagine si annullano a vicenda.

Testo bianco su fucsia: solo se grande e in grassetto. Testo bianco su lime: mai — il lime è troppo chiaro, si legge solo il nero.

02 — Semantica dei colori

Ogni colore dice una cosa sola

Non è decorazione: chi legge impara il significato dopo due schermate e poi lo riconosce da solo. Se il significato cambia da una pagina all'altra, il sistema smette di funzionare.

Colori degli strumenti

Nelle lezioni ogni strumento ha il suo colore fisso, così lo studente lo riconosce senza leggere: Higgsfield Soul è fucsia, Nano Banana Pro è lime. Vale nelle pastiglie, nei numeri dei passi e nelle didascalie delle foto.

03 — La regola che non si tocca

Nessun gradiente

Unica eccezione: la barra a tre colori in cima alle slide e ai documenti. Non è una sfumatura — sono tre tinte piatte affiancate, una per colore del brand.

04 — Caratteri

Anton per gridare, Inter per parlare

Interlinea di Anton

I titoli in Anton hanno sempre line-height: .9. Le righe si stringono e il blocco diventa compatto: è il tratto riconoscibile del brand, lo stesso di REAL FICTION sul sito. Con l'interlinea normale il titolo si sfalda e sembra di chiunque.

Misure

Maiuscolo sì, maiuscolo no

Maiuscolo: titoli, etichette, pulsanti, nomi di sezione. Sempre con un po' di spaziatura fra le lettere, altrimenti si impasta.

Minuscolo: qualsiasi frase che si legge, non si guarda. Una descrizione tutta maiuscola rallenta la lettura del 15–20% e sul sito l'abbiamo tolta proprio per questo.

05 — Adesivi

Le forme del brand

Forme piatte, geometriche, senza contorni sottili. Servono come punteggiatura visiva: una accanto a un'etichetta, una in un angolo, mai cinque nella stessa immagine.

06 — Elementi pronti

Come sono fatti

Spaziature e angoli

07 — Immagini

Qualità massima, formato WebP

Le foto sono il prodotto: se sono compresse male, tutto il resto non conta. La regola è una sola e non si negozia — si parte sempre dall'originale alla massima qualità e si esporta in WebP. Mai riesportare un file già compresso: ogni passaggio toglie dettaglio e non lo restituisce.

Il comando che usiamo

Lo strumento è cwebp (libwebp, gratuito). Un file alla volta:

cwebp -q 90 -m 6 -sharp_yuv -resize 1600 0 originale.png -o finale.webp

-q 90 qualità · -m 6 compressione più lenta ma migliore · -sharp_yuv tiene i colori e la texture della pelle · -resize 1600 0 porta il lato lungo a 1600 px mantenendo le proporzioni.

Quanto pesa davvero

Sulle dodici foto della lezione 1 il passaggio da JPEG a WebP ha tolto il 52% del peso — da 5,9 a 2,8 MB — senza toccare la risoluzione. Non è un compromesso fra qualità e peso: è lo stesso dettaglio in metà spazio.

Che misura serve

Come si mettono nelle pagine

Cornice a misura fissa, immagine ritagliata con object-fit: cover — così tutte le foto di una fila restano identiche anche se gli originali hanno proporzioni diverse. Se il volto rischia di essere tagliato si sposta l'inquadratura con object-position, non si cambia l'altezza della cornice.

Nelle pagine autonome (slide, documenti da mandare) le foto vanno incorporate nel file come data URI: un file solo, che si apre ovunque e non perde le immagini quando lo mandi.

08 — Slide delle lezioni

Anatomia di una slide

Formato fisso 1280 × 720, scalato via CSS per riempire qualsiasi schermo. Margine interno 64 px sopra e sotto, 72 px ai lati. Fondo #0D0D0D.

I cinque elementi fissi

Impaginazione

Due colonne: a sinistra il testo, a destra schede o foto. Le due colonne si allineano in alto sul titolo e in basso sull'ultima riga — non basta metterle una accanto all'altra, vanno legate ai bordi del testo.

Le schede in griglia (le «pastiglie grandi») hanno testo 14 px e si allungano fino a riempire l'altezza della colonna di testo. Il testo resta piccolo, cambia solo l'aria dentro.

Navigazione e stampa

Frecce, barra spaziatrice, Home ed End girano le slide; il tasto a schermo intero sta in basso a destra. Nel CSS di stampa ogni slide diventa una pagina: @page{size:1280px 720px;margin:0} e break-after:page. Così Ctrl+P → Salva come PDF produce il PDF senza rifare niente.

09 — Documenti

Guide, piani, promemoria

Quando il contenuto si legge invece di guardarsi — una guida, un listino, un promemoria di vendita — non si usano le slide ma una pagina che scorre, larga 820–960 px, stesso fondo e stessi colori.

Struttura

1. Barra del brand in cima Gli stessi 5 px a tre colori delle slide: lega il documento al resto.
2. Testata Kicker lime, titolo in Anton su due righe con la seconda fucsia, una frase di spiegazione.
3. Sezioni numerate Pallino colorato con il numero + titolo in Inter 700. Il pallino alterna fucsia, lime e indigo.
4. Passi Elenco con numeri in cerchietto, riga di titolo in grassetto e spiegazione sotto in grigio.
5. Riquadri di avviso Fondo appena colorato e un'etichetta tonda: fucsia per «Importante», lime per «Consiglio», indigo per le note tecniche.
6. Piede REAL FICTION a sinistra, nome del documento a destra.

Stampa

Ogni documento porta con sé il CSS di stampa: formato A4, margini 14 × 12 mm, e break-inside: avoid su schede, passi e riquadri, così niente si spezza a metà fra due pagine. Il PDF si genera dal documento stesso, non si rifà a mano.

10 — Presentazioni e post

Come portare tutto questo in Canva

1. Metti i caratteri Anton e Inter sono gratuiti su Google Fonts e già presenti nell'elenco caratteri di Canva. Cercali per nome. Se non li trovi, scaricali da fonts.google.com e caricali fra i caratteri del brand.
2. Salva i colori Nel pannello colori crea una palette con i quattro codici qui sopra. Così non li ridigiti ogni volta e non sbagli una cifra.
3. Parti sempre da un fondo nero #0D0D0D su tutta la diapositiva. Il bianco non fa parte di questo brand.
4. Un titolo, una parola accesa Titolo in Anton maiuscolo, bianco, e una sola parola in fucsia. È il meccanismo di REAL FICTION, ripetuto ovunque.
5. L'etichetta va sopra il titolo Pastiglia lime con testo nero, piccola. Dice di cosa si parla prima ancora che si legga il titolo.
6. Le foto a tutta pagina Senza cornice, senza ombra. Se serve un testo sopra, mettilo dentro una pastiglia lime: si legge sempre, su qualsiasi foto.
7. Un adesivo per diapositiva Uno in un angolo, come firma. Due sono già troppi.
8. Esporta in WebP quando puoi Se la destinazione è il web, esporta al massimo della qualità e converti con cwebp. Per Instagram va bene il JPEG di Canva a qualità piena: è il social a ricomprimere.

Misure che userai

11 — Prova del nove

Prima di pubblicare