Sistema di Design Ispirato a Notion

Category: Produttività e SaaS Spazio di lavoro tutto-in-uno. Minimalismo caldo, intestazioni con grazie, superfici morbide.

1. Tema Visivo e Atmosfera

Il sito di Notion incarna la filosofia dello strumento stesso: una tela bianca che non ostacola il tuo lavoro. Il sistema di design è costruito su neutri caldi anziché grigi freddi, creando un minimalismo distintivamente accessibile che evoca la sensazione di carta di qualità piuttosto che vetro sterile. La tela della pagina è bianco puro (#ffffff), ma il testo non è nero puro — è un nero caldo quasi assoluto (rgba(0,0,0,0.95)) che ammorbidisce impercettibilmente l’esperienza di lettura. La scala di grigi caldi (#f6f5f4, #31302e, #615d59, #a39e98) porta sottili sfumature giallo-marroni, conferendo all’interfaccia un calore tattile, quasi analogico.

Il font personalizzato NotionInter (una Inter modificata) è la colonna portante del sistema. Alle dimensioni di visualizzazione (64px), utilizza una spaziatura tra lettere negativa aggressiva (-2.125px), creando titoli che sembrano compressi e precisi. L’intervallo di pesi è più ampio dei sistemi tipici: 400 per il corpo, 500 per gli elementi dell’interfaccia, 600 per le etichette semi-grassetto e 700 per i titoli di visualizzazione. Le funzioni OpenType "lnum" (cifre allineate) e "locl" (forme localizzate) sono abilitate sui testi più grandi, aggiungendo sofisticazione tipografica che ricompensa la lettura attenta.

Ciò che rende distintivo il linguaggio visivo di Notion è la sua filosofia dei bordi. Invece di bordi pesanti o ombre, Notion usa bordi ultra-sottili 1px solid rgba(0,0,0,0.1) — bordi che esistono come sussurri, linee di divisione appena percettibili che creano struttura senza peso. Il sistema di ombre è ugualmente sobrio: pile a più livelli con opacità cumulativa che non supera mai 0.05, creando profondità che si percepisce più che si vede.

Key Characteristics:

• NotionInter (Inter modificata) con spaziatura negativa tra le lettere alle dimensioni di visualizzazione (-2.125px a 64px)
• Palette di neutri caldi: i grigi hanno sfumature giallo-marroni (#f6f5f4 bianco caldo, #31302e scuro caldo)
• Testo quasi nero tramite rgba(0,0,0,0.95) — non nero puro, crea micro-calore
• Bordi ultra-sottili: 1px solid rgba(0,0,0,0.1) in tutto il sistema — divisione dal peso di un sussurro
• Pile di ombre a più livelli con opacità sotto 0.05 per una profondità quasi impercettibile
• Blu Notion (#0075de) come unico colore d’accento per CTA ed elementi interattivi
• Badge a pillola (raggio 9999px) con sfondi blu sfumati per indicatori di stato
• Unità di spaziatura base di 8px con scala organica non rigida

2. Palette di Colori e Ruoli

Primario

• Nero Notion (rgba(0,0,0,0.95) / #000000f2): Testo principale, intestazioni, testo del corpo. L’opacità al 95% ammorbidisce il nero puro senza sacrificare la leggibilità.
• Bianco puro (#ffffff): Sfondo della pagina, superfici delle card, testo del pulsante su sfondo blu.
• Blu Notion (#0075de): CTA principale, colore dei link, accento interattivo — l’unico colore saturo nell’interfaccia principale.

Secondario del Brand

• Blu marino scuro (#213183): Colore secondario del brand, usato con parsimonia per enfasi e sezioni scure di funzionalità.
• Blu attivo (#005bab): Stato attivo/premuto del pulsante — variante più scura del Blu Notion.

Scala dei Neutri Caldi

• Bianco caldo (#f6f5f4): Tinta di superficie di sfondo, alternanza di sezioni, riempimento sottile delle card. La sfumatura gialla è fondamentale.
• Scuro caldo (#31302e): Sfondo di superficie scura, testo in sezioni scure. Più caldo dei grigi standard.
• Grigio caldo 500 (#615d59): Testo secondario, descrizioni, etichette attenuate.
• Grigio caldo 300 (#a39e98): Testo segnaposto, stati disabilitati, testo delle didascalie.

Colori d’Accento Semantici

• Verde acqua (#2a9d99): Stati di successo, indicatori positivi.
• Verde (#1aae39): Conferma, badge di completamento.
• Arancione (#dd5b00): Stati di avviso, indicatori di attenzione.
• Rosa (#ff64c8): Accento decorativo, evidenziazioni di funzionalità.
• Viola (#391c57): Funzionalità premium, accenti profondi.
• Marrone (#523410): Accento terroso, sezioni di funzionalità calde.

Interattivi

• Blu link (#0075de): Colore principale del link con sottolineatura al passaggio del cursore.
• Blu link chiaro (#62aef0): Variante di link più chiaro per sfondi scuri.
• Blu focus (#097fe8): Anello di focus sugli elementi interattivi.
• Sfondo badge blu (#f2f9ff): Sfondo del badge a pillola, superficie blu sfumata.
• Testo badge blu (#097fe8): Testo del badge a pillola, blu più scuro per la leggibilità.

Ombre e Profondità

• Ombra card (rgba(0,0,0,0.04) 0px 4px 18px, rgba(0,0,0,0.027) 0px 2.025px 7.84688px, rgba(0,0,0,0.02) 0px 0.8px 2.925px, rgba(0,0,0,0.01) 0px 0.175px 1.04062px): Elevazione card a più livelli.
• Ombra profonda (rgba(0,0,0,0.01) 0px 1px 3px, rgba(0,0,0,0.02) 0px 3px 7px, rgba(0,0,0,0.02) 0px 7px 15px, rgba(0,0,0,0.04) 0px 14px 28px, rgba(0,0,0,0.05) 0px 23px 52px): Elevazione profonda a cinque livelli per modali e contenuti in evidenza.
• Bordo sussurro (1px solid rgba(0,0,0,0.1)): Bordo di divisione standard — card, divisori, sezioni.

3. Regole Tipografiche

Famiglia di Font

• Principale: NotionInter, con fallback: Inter, -apple-system, system-ui, Segoe UI, Helvetica, Apple Color Emoji, Arial, Segoe UI Emoji, Segoe UI Symbol
• Funzioni OpenType: "lnum" (cifre allineate) e "locl" (forme localizzate) abilitate su testi di visualizzazione e intestazioni.

Gerarchia

Principi

• Compressione in scala: NotionInter alle dimensioni di visualizzazione usa -2.125px di spaziatura tra lettere a 64px, rilassandosi progressivamente a -0.625px a 26px e normale a 16px. La compressione crea densità nei titoli mantenendo la leggibilità alle dimensioni del corpo.
• Sistema a quattro pesi: 400 (corpo/lettura), 500 (interfaccia/interattivo), 600 (enfasi/navigazione), 700 (intestazioni/visualizzazione). L’intervallo di pesi più ampio rispetto alla maggior parte dei sistemi consente una gerarchia sfumata.
• Scala calda: L’altezza della riga si restringe all’aumentare delle dimensioni — 1.50 nel corpo (16px), 1.23-1.27 nei sottotitoli, 1.00-1.04 nella visualizzazione. Questo crea titoli più densi e d’impatto.
• Micro-tracking del badge: Il testo del badge a 12px usa spaziatura positiva tra le lettere (0.125px) — l’unico tracking positivo nel sistema, creando testo piccolo più ampio e leggibile.

4. Stili dei Componenti

Pulsanti

Blu Primario

• Sfondo: #0075de (Blu Notion)
• Testo: #ffffff
• Padding: 8px 16px
• Raggio: 4px (sottile)
• Bordo: 1px solid transparent
• Hover: lo sfondo si scurisce a #005bab
• Attivo: trasformazione scale(0.9)
• Focus: contorno 2px solid, ombra var(--shadow-level-200)
• Utilizzo: CTA principale (“Prova Notion gratis”, “Inizia”)

Secondario / Terziario

• Sfondo: rgba(0,0,0,0.05) (grigio caldo traslucido)
• Testo: #000000 (quasi nero)
• Padding: 8px 16px
• Raggio: 4px
• Hover: il colore del testo cambia, scale(1.05)
• Attivo: trasformazione scale(0.9)
• Utilizzo: Azioni secondarie, invii di moduli

Fantasma / Pulsante Link

• Sfondo: trasparente
• Testo: rgba(0,0,0,0.95)
• Decorazione: sottolineatura al passaggio del cursore
• Utilizzo: Azioni terziarie, link in linea

Pulsante Badge a Pillola

• Sfondo: #f2f9ff (blu sfumato)
• Testo: #097fe8
• Padding: 4px 8px
• Raggio: 9999px (pillola completa)
• Font: 12px peso 600
• Utilizzo: Badge di stato, etichette di funzionalità, tag “Nuovo”

Card e Contenitori

• Sfondo: #ffffff
• Bordo: 1px solid rgba(0,0,0,0.1) (bordo sussurro)
• Raggio: 12px (card standard), 16px (card in evidenza/hero)
• Ombra: rgba(0,0,0,0.04) 0px 4px 18px, rgba(0,0,0,0.027) 0px 2.025px 7.84688px, rgba(0,0,0,0.02) 0px 0.8px 2.925px, rgba(0,0,0,0.01) 0px 0.175px 1.04062px
• Hover: intensificazione sottile dell’ombra
• Card con immagine: raggio superiore di 12px, l’immagine riempie la metà superiore

Input e Moduli

• Sfondo: #ffffff
• Testo: rgba(0,0,0,0.9)
• Bordo: 1px solid #dddddd
• Padding: 6px
• Raggio: 4px
• Focus: anello di contorno blu
• Segnaposto: grigio caldo #a39e98

Navigazione

• Nav orizzontale pulita su sfondo bianco, non fissa
• Logo del brand allineato a sinistra (icona 33x34px + wordmark)
• Link: NotionInter 15px peso 500-600, testo quasi nero
• Hover: cambio di colore verso var(--color-link-primary-text-hover)
• CTA: pulsante a pillola blu (“Prova Notion gratis”) allineato a destra
• Mobile: menu a scomparsa con icona hamburger
• Menu a discesa del prodotto con menu categorizzati a più livelli

Trattamento delle Immagini

• Screenshot del prodotto con bordo 1px solid rgba(0,0,0,0.1)
• Immagini con angoli superiori arrotondati: raggio 12px 12px 0px 0px
• Gli screenshot del pannello/spazio di lavoro dominano le sezioni di funzionalità
• Sfondi con gradienti caldi dietro le illustrazioni hero (illustrazioni di personaggi decorativi)

Componenti Distintivi

Card di Funzionalità con Illustrazioni

• Intestazioni illustrative grandi (La Grande Onda, screenshot dell’interfaccia del prodotto)
• Card con raggio 12px e bordo sussurro
• Titolo a 22px peso 700, descrizione a 16px peso 400
• Variante con sfondo bianco caldo (#f6f5f4) per le sezioni alternate

Barra di Fiducia / Griglia di Loghi

• Loghi aziendali (sezione dei team fidati) nei loro colori del brand
• Layout a scorrimento orizzontale o griglia con conteggi dei team
• Visualizzazione delle metriche: numero grande + schema di descrizione

Card delle Metriche

• Visualizzazione di numeri grandi (es. “$4.200 di ROI”)
• NotionInter 40px+ peso 700 per la metrica
• Descrizione sotto in testo del corpo grigio caldo
• Contenitore card con bordo sussurro

5. Principi di Layout

Sistema di Spaziatura

• Unità base: 8px
• Scala: 2px, 3px, 4px, 5px, 6px, 7px, 8px, 11px, 12px, 14px, 16px, 24px, 32px
• Scala organica non rigida con valori frazionari (5.6px, 6.4px) per micro-aggiustamenti

Griglia e Contenitore

• Larghezza massima del contenuto: circa 1200px
• Hero: colonna singola centrata con padding superiore generoso (80-120px)
• Sezioni di funzionalità: griglie a 2-3 colonne per le card
• Sfondi di sezione a larghezza piena in bianco caldo (#f6f5f4) per l’alternanza
• Screenshot di codice/pannello contenuti con bordo sussurro

Filosofia dello Spazio Bianco

• Ritmo verticale generoso: 64-120px tra le sezioni principali. Notion lascia respirare il contenuto con ampio padding verticale.
• Alternanza calda: Le sezioni bianche si alternano con sezioni in bianco caldo (#f6f5f4), creando un ritmo visivo morbido senza bruschi cambi di colore.
• Densità orientata al contenuto: I blocchi di testo del corpo sono compatti (altezza riga 1.50), ma circondati da ampi margini, creando isole di contenuto leggibile in un mare di spazio bianco.

Scala del Raggio dei Bordi

• Micro (4px): Pulsanti, input, elementi interattivi funzionali
• Sottile (5px): Link, elementi di elenco, voci di menu
• Standard (8px): Card piccole, contenitori, elementi in linea
• Comodo (12px): Card standard, contenitori di funzionalità, parti superiori delle immagini
• Grande (16px): Card hero, contenuti in evidenza, blocchi promozionali
• Pillola completa (9999px): Badge, pillole, indicatori di stato
• Cerchio (100%): Indicatori di scheda, avatar

6. Profondità ed Elevazione

Filosofia delle Ombre: Il sistema di ombre di Notion usa più livelli con opacità individuale estremamente bassa (da 0.01 a 0.05) che si accumulano in un’elevazione morbida e dall’aspetto naturale. L’ombra card a 4 livelli va da 1.04px a 18px di sfocatura, creando un gradiente di profondità invece di un’unica ombra dura. L’ombra profonda a 5 livelli si estende a 52px di sfocatura con opacità 0.05, producendo un’occlusione ambientale che sembra luce naturale invece di profondità generata dal computer. Questo approccio a livelli fa sì che gli elementi sembrino integrati nella pagina invece di fluttuare sopra di essa.

Profondità Decorativa

• Sezione hero: illustrazioni di personaggi decorativi (stile giocoso, disegnato a mano)
• Alternanza di sezioni: cambiamenti di sfondo da bianco a bianco caldo (#f6f5f4)
• Nessun bordo duro di sezione — la separazione deriva da cambiamenti di colore dello sfondo e dalla spaziatura

7. Comportamento Responsivo

Breakpoint

Target di Tocco

• I pulsanti usano padding comodo (8px-16px verticale)
• I link di navigazione a 15px con spaziatura adeguata
• I badge a pillola hanno 8px di padding orizzontale per le aree di tocco
• Il pulsante del menu mobile usa il pulsante hamburger standard

Strategia di Collasso

• Hero: visualizzazione a 64px -> scala a 40px -> 26px su mobile, mantiene la spaziatura tra lettere proporzionale
• Navigazione: link orizzontali + CTA blu -> menu hamburger
• Card di funzionalità: 3 colonne -> 2 colonne -> colonna singola impilata
• Screenshot del prodotto: mantengono il rapporto d’aspetto con immagini responsive
• Loghi della barra di fiducia: griglia -> scorrimento orizzontale su mobile
• Footer: più colonne -> colonna singola impilata
• Spaziatura della sezione: 80px+ -> 48px su mobile

Comportamento delle Immagini

• Gli screenshot dello spazio di lavoro mantengono il bordo sussurro a tutte le dimensioni
• Le illustrazioni hero scalano proporzionalmente
• Gli screenshot del prodotto usano immagini responsive con raggio dei bordi consistente
• Le sezioni di bianco caldo a larghezza piena mantengono il trattamento da bordo a bordo

8. Accessibilità e Stati

Sistema di Focus

• Tutti gli elementi interattivi ricevono indicatori di focus visibili
• Contorno di focus: 2px solid con colore di focus + livello di ombra 200
• Navigazione da tastiera supportata in tutti i componenti interattivi
• Testo ad alto contrasto: quasi nero su bianco supera WCAG AAA (rapporto >14:1)

Stati Interattivi

• Predefinito: Aspetto standard con bordi sussurro
• Hover: Cambio di colore nel testo, scale(1.05) sui pulsanti, sottolineatura sui link
• Attivo/Premuto: Trasformazione scale(0.9), variante di sfondo più scuro
• Focus: Anello di contorno blu con rinforzo dell’ombra
• Disabilitato: Testo in grigio caldo (#a39e98), opacità ridotta

Contrasto dei Colori

• Testo principale (rgba(0,0,0,0.95)) su bianco: rapporto ~18:1
• Testo secondario (#615d59) su bianco: rapporto ~5.5:1 (WCAG AA)
• CTA blu (#0075de) su bianco: rapporto ~4.6:1 (WCAG AA per testo grande)
• Testo badge (#097fe8) su sfondo badge (#f2f9ff): rapporto ~4.5:1 (WCAG AA per testo grande)

9. Guida ai Prompt per Agenti

Riferimento Rapido ai Colori

• CTA principale: Blu Notion (#0075de)
• Sfondo: Bianco puro (#ffffff)
• Sfondo alternativo: Bianco caldo (#f6f5f4)
• Testo intestazione: Quasi nero (rgba(0,0,0,0.95))
• Testo corpo: Quasi nero (rgba(0,0,0,0.95))
• Testo secondario: Grigio caldo 500 (#615d59)
• Testo attenuato: Grigio caldo 300 (#a39e98)
• Bordo: 1px solid rgba(0,0,0,0.1)
• Link: Blu Notion (#0075de)
• Anello di focus: Blu focus (#097fe8)

Esempi di Prompt per Componenti

• “Crea una sezione hero su sfondo bianco. Titolo a 64px NotionInter peso 700, line-height 1.00, letter-spacing -2.125px, color rgba(0,0,0,0.95). Sottotitolo a 20px peso 600, line-height 1.40, color #615d59. Pulsante CTA blu (#0075de, raggio 4px, padding 8px 16px, testo bianco) e pulsante fantasma (sfondo trasparente, testo quasi nero, sottolineatura all’hover).”
• “Progetta una card: sfondo bianco, bordo 1px solid rgba(0,0,0,0.1), raggio 12px. Usa la pila di ombre: rgba(0,0,0,0.04) 0px 4px 18px, rgba(0,0,0,0.027) 0px 2.025px 7.85px, rgba(0,0,0,0.02) 0px 0.8px 2.93px, rgba(0,0,0,0.01) 0px 0.175px 1.04px. Titolo a 22px NotionInter peso 700, letter-spacing -0.25px. Corpo a 16px peso 400, color #615d59.”
• “Costruisci un badge a pillola: sfondo #f2f9ff, testo #097fe8, raggio 9999px, padding 4px 8px, 12px NotionInter peso 600, letter-spacing 0.125px.”
• “Crea la navigazione: intestazione bianca. NotionInter 15px peso 600 per i link, testo quasi nero. CTA a pillola blu ‘Prova Notion gratis’ allineato a destra (sfondo #0075de, testo bianco, raggio 4px).”
• “Progetta un layout a sezioni alternate: le sezioni bianche si alternano con sezioni in bianco caldo (#f6f5f4). Ogni sezione ha 64-80px di padding verticale, max-width 1200px centrato. Intestazione di sezione a 48px peso 700, line-height 1.00, letter-spacing -1.5px.”

Guida all’Iterazione

1. Usa sempre neutri caldi — i grigi di Notion hanno sfumature giallo-marroni (#f6f5f4, #31302e, #615d59, #a39e98), mai grigio-blu
2. La spaziatura tra lettere scala con la dimensione del font: -2.125px a 64px, -1.875px a 54px, -0.625px a 26px, normale a 16px
3. Quattro pesi: 400 (lettura), 500 (interazione), 600 (enfasi), 700 (annuncio)
4. I bordi sono sussurri: 1px solid rgba(0,0,0,0.1) — mai più pesanti
5. Le ombre usano 4-5 livelli con opacità individuale che non supera mai 0.05
6. Lo sfondo di sezione in bianco caldo (#f6f5f4) è essenziale per il ritmo visivo
7. Badge a pillola (9999px) per stato/tag, raggio 4px per pulsanti e input
8. Il Blu Notion (#0075de) è l’unico colore saturo nell’interfaccia principale — usalo con parsimonia per CTA e link