## Tavolozza dei colori

### Colori primari

**Sfondo**

- Colore: `#f2f2f0`

- Descrizione: Bianco sporco neutro chiaro, pulito e minimalista

- Utilizzo: Tutti gli sfondi delle diapositive senza eccezioni

**Testo e linee principali**

- Colore: `#2B2B2B` o `#1A1A1A`

- Descrizione: Grigio molto scuro, quasi nero

- Utilizzo: Tutto il contenuto testuale, le linee di separazione dell'intestazione, i contorni geometrici, i contorni dei caratteri

### Colori di accento

**Blu brillante**

- Colore: `#5B7FFF` (alternativa: `#4D6FE8`)

- Descrizione: Blu medio-brillante con energia

- Utilizzo: Nodi circolari su forme geometriche, abiti/sciarpe dei personaggi, riempimenti di bottoni, punti decorativi

**Oro tenue**

- Colore: `#C9B568` (alternativa: `#D4C17A`)

- Descrizione: Tonalità calda senape/oro

- Utilizzo: Nodi circolari su forme geometriche (alternati con il blu), accenti decorativi

### Regole per l'applicazione del colore

- Lo sfondo è SEMPRE `#E8E6E3`

- Il testo è SEMPRE `#2B2B2B`

- Il blu e l'oro sono utilizzati SOLO per nodi circolari e dettagli dei caratteri

- Non utilizzare mai il blu o l'oro come colori per blocchi di grandi dimensioni o per il testo.

- Mantenere un elevato contrasto tra testo e sfondo

## Sistema tipografico

### Famiglie di caratteri

**Carattere principale per i titoli: Roca Two (o un carattere serif simile e corposo)**

- Caratteristiche: Serif audace e amichevole con tratti arrotondati

- Peso: Grassetto/Pesante

- Utilizzo: Tutti i titoli delle diapositive, i titoli principali, le intestazioni di sezione

- Mantieni lo stesso carattere

**Carattere secondario per il corpo del testo: Poppins (o Inter)**

- Caratteristiche: Carattere sans-serif pulito e moderno con ottima leggibilità

- Peso: Normale (400) per il corpo, Medio (500) per l'enfasi

- Utilizzo: Tutto il testo del corpo, sottotitoli, didascalie, numeri di pagina, testo del logo

- mantieni lo stesso carattere

### Gerarchia delle dimensioni dei caratteri

**Titoli extra large** (diapositive di copertina, divisori delle sezioni principali)

- Carattere: **Roca Two**

- Dimensione: 72-96pt

- Colore: `#2B2B2B`

- Utilizzo: "Titolo principale", "Grazie", "Ordine del giorno"

**Titoli di grandi dimensioni** (Titoli delle diapositive)

- Carattere: **Roca Two**

- Dimensione: 48-60pt

- Colore: `#2B2B2B`

- Utilizzo: "La nostra visione", "Posizionamento del marchio", "Di cosa ti occupi YouMind?"

**Testo del corpo** (Paragrafi, descrizioni)

- Carattere: Poppins Regular

- Dimensione: 18-24pt

- Colore: `#2B2B2B`

- Altezza della linea: 1,6-1,8

- Utilizzo: Tutto il contenuto del paragrafo, descrizioni

**Testo piccolo** (numeri di pagina, piè di pagina, didascalie)

- Carattere: Poppins Regular

- Dimensione: 16-18pt

- Colore: `#2B2B2B`

- Utilizzo: "Pagina X", URL di siti web, indirizzi email

**Testo del pulsante/pillola**

- Carattere: Poppins Regular o Medium

- Dimensione: 20-24pt

- Colore: `#2B2B2B`

- Utilizzo: Testo all'interno di pulsanti a forma di pillola arrotondati

### Regole tipografiche

- Non mescolare mai i caratteri serif - solo **Roca Two** per la visualizzazione

- Non usare mai caratteri serif per il testo del corpo - solo Poppins

- Mantenere un'altezza di riga costante (1,6-1,8) per una buona leggibilità.

- Tutto il testo deve essere `#2B2B2B` - nessuna eccezione

- Ampia spaziatura tra i paragrafi (24-32pt)

## Sistema di layout

### Struttura dell'intestazione globale

**Solo diapositiva di copertina (Pagina 1):**

**Elemento dell'intestazione sinistra:**

- Logo

- Dimensioni: diametro 32-40pt

- Colore: Contorno nero `#2B2B2B`

- Posizione: 60-80px dal bordo sinistro, 60-80px dall'alto

- Spaziatura: 12-16 pixel tra logo e testo

**Elemento di intestazione destra:**

- Carattere: Poppins Regular, 16-18pt

- Colore: `#2B2B2B`

- Posizione: 60-80px dal bordo destro, 60-80px dall'alto

- Allineamento: allineato a destra

**Divisore dell'intestazione:**

- Linea orizzontale sottile

- Peso: 1-2 pt

- Colore: `#2B2B2B`

- Posizione: Sotto gli elementi dell'intestazione, a larghezza intera con margini

- Margine dai bordi: 60-80px a sinistra e a destra

**Slide dei contenuti (pagine 2-4) e diapositiva conclusiva (pagina 5):**

- Nessun logo YouMind

- Solo testo "Pagina X"

- Posizione: angolo in alto a destra, centro in basso o altro posizionamento discreto

- Nessuna linea divisoria dell'intestazione

- Maggiore spazio verticale disponibile per i contenuti

### Sistema di margine

**Margini standard:**

- In alto: 60-80px (sotto il divisore dell'intestazione aggiungere altri 40-60px)

- In basso: 60-80px

- Sinistra: 80-100px

- Destra: 80-100px

**Area dei contenuti:**

- Dopo aver considerato l'intestazione e i margini, l'area del contenuto è di circa 1200-1280 pixel di larghezza × 600-680 pixel di altezza (per un formato 16:9 a 1920×1080).

## Elementi visivi

### Forme geometriche disegnate a mano

**Progettazione di base:**

- Stile: rettangoli e quadrati imperfetti, disegnati a mano

- Spessore della linea: 2-3 pt

- Colore: Nero `#2B2B2B`

- Qualità: Organica, linee leggermente tremolanti (non perfettamente dritte)

- Connessione: linee che collegano le forme ad angoli diversi

**Nodi circolari:**

- Forma: cerchi perfetti

- Dimensioni: diametro 24-40pt

- Riempimento: Colore pieno - o `#5B7FFF` (blu) o `#C9B568` (oro)

- Posizione: Nei punti di connessione e negli angoli delle forme geometriche

- Motivo: alternare blu e oro per variare

**Regole di assegnazione:**

- Posizionamento negli angoli delle diapositive (in alto a sinistra, in alto a destra, in basso a sinistra, in basso a destra)

- Non sovrapporsi mai al contenuto del testo

- Mantenere una distanza di 40-60 pixel dalle aree di contenuto

- Creare equilibrio visivo: se il lato sinistro presenta delle forme, anche il lato destro dovrebbe averle.

- Disposizione tipica: 2-4 rettangoli collegati con 3-6 nodi circolari

### Bottoni a pillola arrotondati

**Specifiche di progettazione:**

- Forma: Rettangolo arrotondato (forma a pillola)

- Bordo: 2pt nero pieno `#2B2B2B`

- Riempimento: Trasparente o `#E8E6E3` (uguale allo sfondo)

- Raggio del bordo: Raggio a tutta altezza (pillola perfetta)

- Spaziatura interna: 16-24px in orizzontale, 12-16px in verticale

- Testo: Poppins Regular, 20-24pt, `#2B2B2B`

**Utilizzo:**

- Elementi di navigazione nelle diapositive dell'agenda

- Pulsanti di invito all'azione

- Etichette delle sezioni

- Sempre delineato, mai riempito di colore

**Stato di passaggio del mouse/Stato attivo (se interattivo):**

- Riempimento: `#5B7FFF` (blu)

- Testo: Bianco `#FFFFFF`

- Bordo: `#5B7FFF`

### Griglie decorative a punti

**Specifiche:**

- Punti: piccoli cerchi, diametro 3-4pt

- Colore: `#2B2B2B`

- Schema: Griglia regolare, spaziatura 12-16px

- Disposizione: griglia 6×6 o 8×8

- Posizione: angolo in alto a destra, a 100-150 pixel dai bordi

- Utilizzo: Elemento decorativo opzionale, aggiunge interesse visivo senza risultare eccessivo.

### Icone (Uso minimo)

**Stile:**

- Solo contorni, senza riempimenti

- Peso: 2-3 pt

- Colore: `#2B2B2B`

- Dimensione: 48-64pt

- Esempi: icona a forma di occhio (visione), bersaglio/mirino (missione)

- Utilizzo: Da utilizzare con parsimonia, solo per rafforzare concetti specifici.

## Sistema di illustrazione dei personaggi

### Specifiche per la progettazione dei personaggi

**Struttura di base:**

- Un'illustrazione minimalista, disegnata a mano, di un semplice personaggio umanoide bianco. Il personaggio ha una testa arrotondata e allungata, due piccoli punti neri per gli occhi e un naso appuntito prominente. Non ha dita delle mani o dei piedi definite. Indossa una sciarpa spessa, lunga e blu tinta unita [opzionale: sostituire con 'sciarpa color oro senape'] avvolta intorno al collo, con la coda che pende verso il basso. Lo stile artistico utilizza contorni spessi e materici di pennarello nero e colori piatti senza ombreggiature, su uno sfondo bianco sporco semplice. Il personaggio è [ciò che si adatta al contesto]

**Accent blu (CRITICO):**

- Elemento: Sciarpa, camicia o capo di abbigliamento

- Colore: `#5B7FFF` (blu acceso)

- Stile: forme organiche fluide disegnate a mano.

- Copertura: 15-25% del carattere

- Scopo: identità del marchio, interesse visivo, movimento

**Coerenza stilistica:**

- Qualità sempre realizzata a mano (linee organiche e imperfette)

- Includere sempre un elemento di accento blu

- Mantenere lo stesso spessore di linea su tutti i caratteri

- Mantenere proporzioni coerenti tra le diverse pose

### Linee guida per illustrazioni minimaliste

**Prima la semplicità:**

- Mantieni tutte le illustrazioni estremamente semplici e minimali

- L'altezza dei caratteri NON deve superare i 120 pt (circa il 10-12% dell'altezza della diapositiva)

- Gli elementi geometrici devono essere piccoli e confinati solo agli angoli.

- La copertura totale delle illustrazioni non deve superare il 15% della superficie della diapositiva.

- Evitare disegni complessi o dettagliati

**Spazio e stanza per respirare:**

- Mantenere ampi spazi bianchi in tutta la diapositiva

- Il testo dovrebbe occupare solo il 50-55% dell'area dei contenuti (in genere il lato sinistro).

- Il lato destro dovrebbe rimanere perlopiù vuoto per lasciare spazio visivo.

- Margini ampi su tutti i lati: minimo 100px, preferibilmente 100-120px

- Le illustrazioni devono essere confinate esclusivamente nell'angolo in basso a destra, ad almeno 100 pixel dai bordi.

**Bilanciamento del layout:**

- Il centro del vetrino deve essere pulito e vuoto

- Evita di accumulare oggetti o di riempire tutto lo spazio disponibile

- Utilizzare lo spazio bianco in modo strategico per creare concentrazione e chiarezza

- Meno è meglio: elimina gli elementi visivi superflui

- Dare priorità alla leggibilità e alla spaziosità rispetto alla decorazione