Notion
Un quaderno di carta calda sotto il sole di mezzogiorno
L'interfaccia di Notion ricorda un amato quaderno di carta alla luce del giorno: una tela calda e cremosa (#f6f5f4) piacevole al tatto anziché sterile, una tipografia sans-serif generosa che conferisce spessore editoriale al testo del prodotto e il colore usato come punteggiatura discreta: "pillole" color pesca evidenziano i verbi, un singolo blu ancora l'azione principale e una gamma rotante di tonalità di accento (corallo, ambra, cielo, mezzanotte) colora gli sfondi delle schede come adesivi. Le schede sono disposte su una tela con bordi e angoli sottili, senza ombre né cromature, come le sezioni a righe di un taccuino Moleskine. Le animazioni sono vivaci ed elastiche, con transizioni fluide a 200 ms e animazioni dei personaggi dinamiche che danno vita all'interfaccia senza essere decorative.
Centrato, la larghezza massima è limitata a circa 1440px. L'elemento principale è una pila centrata: una riga di simboli → un grande titolo su due righe con una pillola colorata incorporata → un sottotitolo → una riga con due pulsanti di invito all'azione → un grande mockup dell'interfaccia utente del prodotto. Sotto l'elemento principale, le sezioni si alternano tra griglie di schede bianche e pannelli di accento a colori. La parete dei loghi è una griglia centrata a riga singola di loghi dei partner in scala di grigi. I blocchi delle funzionalità utilizzano un layout a due colonne (testo a sinistra, pannello colorato a destra), alternando da sinistra a destra tra le sezioni. La sezione "Chiedi ai tuoi assistenti su richiesta" utilizza una griglia di schede 2x2, dove la scheda superiore occupa l'intera larghezza e la riga inferiore è divisa in due colonne uguali. Gli spazi tra le sezioni sono ampi (~80px), creando un ritmo verticale armonioso. La navigazione è costituita da una barra superiore fissa alta 64px con elementi di navigazione centrati e pulsanti di azione allineati a destra.
Le illustrazioni sono di primaria importanza, senza l'utilizzo di fotografie. Il linguaggio visivo si basa su simboli piatti e illustrati (bordi arrotondati in cerchi colorati di 2 pixel), elementi decorativi astratti (scarabocchi disegnati a mano, glitter, frecce, forme floreali) e mockup dell'interfaccia utente del prodotto. I simboli appaiono nella finestra principale come una riga orizzontale di sette avatar e sono sparsi per la pagina come una punteggiatura giocosa. Gli screenshot del prodotto sono gli unici elementi visivi "reali": mostrano l'interfaccia effettiva di Notion (lavagne Kanban, visualizzazioni dei documenti, pannelli degli agenti AI) con un set completo di elementi e dati reali. Il mockup del prodotto nella finestra principale è grande, centrato e proietta un'unica ombra che lo separa dalla tela. Non ci sono foto di lifestyle, né immagini di repertorio, né rendering 3D astratti.
Tavolozza
Marca
- Notion Blue
#0075de— L'elemento principale che riempie il pulsante di invito all'azione (CTA), un elemento di spicco nella navigazione attiva, i pulsanti di azione riempiti sono l'unica combinazione di colori in un sistema quasi monocromatico che è sufficientemente satura da essere percepita come un interruttore.
Neutro
- Paper Warmth
#f6f5f4— Lo sfondo della pagina, della finestra principale e della sezione sono tutti di colori caldi, leggermente beige, che conferiscono al sistema un aspetto tattile e analogico. - Pure White
#ffffff— Superfici delle carte, pannelli in rilievo, sfondo con logo, testo a contrasto su carte scure. - Ink Black
#000000— Testo principale, link di navigazione, intestazioni: utilizzati con diverse trasparenze (100%, 95%, 90%, 60%, 40%, 20%) per creare una gerarchia senza aggiungere nuovi colori. - Charcoal
#111111— Un'opzione di testo scuro per quelle aree dell'interfaccia utente in cui il nero puro risulterebbe troppo aggressivo. - Stone
#757575— Testo di navigazione secondario, testo di aiuto silenziato, etichette dei pulsanti disabilitate - trasparenza inchiostro 60% - Graphite
#615d59— Il testo principale ha una tonalità calda, grigio-brunastra, che si armonizza con lo sfondo caldo.
Tipografia
da 12 a 96 pixel · 10 passaggi
- NotionInter — sostituzione: Inter · contorni 400, 500, 600, 700 · Il carattere sans-serif principale è un umanista geometrico con sottili sfumature, utilizzato nelle dimensioni 400 per il corpo del testo, 500 per la navigazione/interfaccia utente e 600-700 per i titoli. La scala del carattere utilizza una spaziatura negativa aggressiva tra le lettere nelle dimensioni maggiori (-4,6px a 96px, -2px a 72px), che conferisce al titolo un aspetto più compatto e deciso, anziché arioso.
- Lyon Text — sostituzione: Source Serif Pro · contorni 400 · Il carattere serif editoriale, riservato a singole sezioni del testo principale e alle introduzioni di sezione, è usato con parsimonia (quattro volte) per conferire al carattere un peso letterario, simile a una citazione nell'impaginazione di una rivista. Funziona come un accento sistemico piuttosto che come una gerarchia parallela.
Intervalli e forma
| Scopo | Senso |
|---|---|
| Densità | media |
| Passo base | 8px |
| Raggio del pulsante | 8px |
| Raggio della carta | 12px |
| Ombre | no - bordi invece di ombre |
| Tra le sezioni | 80px |
| Larghezza del pannello | 1440px |
L'IA creerà il tuo sito web nello stile Notion e lo riempirà
- Pubblica prodotti e contenuti tramite il link: Instagram, TikTok, Facebook.
- Trasferisci i contenuti dal tuo vecchio sito: basta specificare l'indirizzo.
- Design moderno sul miglior motore: React ( Next.js) con rendering lato server e ottimizzazione SEO integrata.
- Ottimizzazione SEO completamente automatizzata per i risultati di ricerca e raccomandazioni basate su reti neurali.
Stili simili
- ElevenLabs — Un reportage fotografico dai toni caldi color crema con titoli delicati. Un taccuino in stile Bauhaus: carta color guscio d'uovo, inchiostro nero e un unico accento viola e arancione per la presentazione del prodotto.
- Awesomic — Rete metallica in zinco per uso editoriale con segni di punteggiatura arancioni che ricordano i coriandoli.
- Monad — Rivista tecnica editoriale sulla pergamena calda
- Dub — Pannello di controllo in carta di riso opaca di Link
- Seline Analytics — Un tranquillo tavolo analitico su carta calda
- Anthropic — Un diario scientifico da campo su calda pergamena: superfici color avorio, titoli editoriali con grazie e un unico accento color argilla che compare solo quando è necessario intervenire.
- Calendly — Inchiostro blu scuro su marmo freddo
- Augen Pro — La presentazione bianca di Apple presenta un blu elettrico, clinico e impalpabile, come unico accento in uno spazio monocromatico.
- Antimetal — Una cronaca editoriale su carta color crema: una tranquilla mattinata in una rivista scientifica, dove la sobrietà trasmette sicurezza e i caratteri serif svolgono il lavoro più impegnativo.
- Perk — Calce elettrica su carta da forno calda
- Ditto — Un laboratorio illuminato dal sole dove si creano campioni di fiori selvatici. Superfici color crema caldo, una base di colore giallo vibrante, inchiostri blu scuro intenso, forme di colore organiche che sbocciano sullo sfondo dell'opera.
- Officevibe — Una rivista editoriale stampata su carta color crema caldo. Immaginate un saggio approfondito sulla gestione delle risorse umane, presentato come un prodotto: un carattere serif corsivo che sussurra attraverso un'interfaccia blu moderna.