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
- Mollie — Un bancone in cashmere, un registro contabile scuro. Lascia ampio spazio bianco per la grafica editoriale attorno al testo nero, quindi rafforza i punti relativi al prodotto con tonalità crema calde, marroni caffè espresso e foto realistiche dei metodi di pagamento.
- Kagi — Una sala lettura separata. Create uno spazio bianco e aperto attorno a un testo in grafite audace, utilizzando delicati accenti viola e superfici dai toni pastello caldi per rompere la tranquillità.
- Milanote — Milanote è uno studio creativo specializzato. Realizziamo pagine editoriali in stile galleria utilizzando pannelli visivi fluttuanti: pareti incorniciate di scuro, spazi espositivi bianchi e screenshot che sembrano oggetti reali con una morbida profondità.
- Co2 — Un atlante climatico illuminato dalla luce invernale. Crea pagine che ricordano un paesaggio documentario aereo, dove titoli con grazie, dati codificati per categoria e immagini ghiacciate mettono in risalto ampi margini bianchi.
- GitButler — Turchese alla fine del testo. Una combinazione di titoli con grazie ad alto contrasto, sottili griglie tecniche, superfici color grafite calda e un discreto accento turchese.
- 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