Notion
Un quaderno di carta calda à u sole di meziornu
L'interfaccia di Notion s'assumiglia à un amatu quaderno di carta in pienu ghjornu: una tela calda è cremosa (#f6f5f4) chì si sente tattile piuttostu chè sterile, una generosa tipografia sans-serif chì dà pesu editoriale à a copia di u pruduttu, è u culore adupratu cum'è puntuazione sparsa - e "pillule" di pesca mettenu in risaltu i verbi, un solu blu ancora l'azione principale, è una gamma rotante di tonalità d'accentu (corallo, ambra, celu, mezzanotte) culuriscenu i sfondi di e carte cum'è adesivi. E carte sò disposte nantu à una tela cù bordi è anguli sottili - senza ombre, senza cromu - cum'è e sezioni allineate di un quaderno Moleskine. L'animazione hè scherzosa è elastica, cù transizioni fluide à 200 ms è animazioni di caratteri elastiche chì danu vita à l'interfaccia senza esse decorative.
Centratu, a larghezza massima hè limitata à circa 1440px. L'elementu principale hè una pila centrata: una fila di simbuli → un grande titulu di duie righe cù una pillula culurata integrata → un sottutìtulu → una fila cù dui buttoni di chjama à l'azzione → una grande mockup di l'interfaccia utente di u produttu. Sottu à l'elementu principale, e sezioni alternanu trà griglie di carte bianche è pannelli d'accentu à culori cumpleti. U muru di u logò hè una griglia centrata à una sola fila di loghi di partenarii in scala di grigi. I blocchi di funzione utilizanu un layout à duie colonne (testu à manca, pannellu culuritu à diritta), alternendu da manca à diritta trà e sezioni. A sezione "Dumandate à i vostri assistenti à dumanda" utilizza una griglia di carte 2x2, induve a carta superiore occupa tutta a larghezza, è a fila inferiore hè divisa in duie colonne uguali. I gutter trà e sezioni sò generosi (~80px), creendu un ritmu verticale calmu. A navigazione hè una barra superiore fissa alta 64px cù elementi di navigazione centrati è buttoni d'azzione allineati à diritta.
L'illustrazioni sò di primura, senza foto. U linguaghju visuale hè custruitu annantu à simbuli piatti è illustrati (bordi arrotondati in cerchi culuriti di 2px), elementi decorativi astratti (scarabocchi disegnati à manu, glitter, frecce, forme di fiori) è mockup di l'interfaccia utente di u pruduttu. I simbuli cumpariscenu in a finestra principale cum'è una fila horizontale di sette avatar è sò spargugliati in tutta a pagina cum'è una punteggiatura scherzosa. E screenshot di u pruduttu sò l'unichi elementi visuali "veri": mostranu l'interfaccia Notion attuale (tavule Kanban, viste di documenti, pannelli di l'agente IA) cù un inseme cumpletu di elementi è dati veri. U mockup di u pruduttu in a finestra principale hè grande, centratu è prughjetta una sola ombra chì u separa da a tela. Ùn ci sò foto di stile di vita, nè immagini di stock, nè rendering 3D astratti.
Paletta
Marca
- Notion Blue
#0075de— L'elementu principale chì riempie u buttone di chjama à l'azzione (CTA), un accentu in a navigazione attiva, i buttoni d'azzione pieni sò l'unicu schema di culori in un sistema guasi monocromu chì hè abbastanza saturatu per esse percepitu cum'è un interruttore.
Neutru
- Paper Warmth
#f6f5f4— A tela di a pagina, u fondu di a finestra principale è u fondu di a sezione sò tutti culori caldi, ligeramente beige, chì danu à u sistema una sensazione tattile è analogica. - Pure White
#ffffff— Superficie di carte, pannelli in rilievu, fondu di u logu, testu cuntrastante nantu à carte scure. - Ink Black
#000000— Testu principale, ligami di navigazione, tituli - usati cù diverse trasparenze (100%, 95%, 90%, 60%, 40%, 20%) per custruisce una gerarchia senza aghjunghje novi culori. - Charcoal
#111111— Una opzione di testu scuru per quelle zone di l'interfaccia utente induve u neru puru parerebbe troppu duru. - Stone
#757575— Testu di navigazione secundariu, testu d'aiutu silenziatu, etichette di i buttoni disattivati - 60% inchiostru alfa - Graphite
#615d59— U testu principale hà un tonu caldu - grisgiu brunastru, chì s'armonizza cù u fondu caldu.
Tipografia
da 12 à 96px · 10 passi
- NotionInter — rimpiazzamentu: Inter · contorni 400, 500, 600, 700 · U principale carattere sans-serif hè un umanistu geometricu cù sfumature suttili, adupratu à dimensioni 400 per u testu di u corpu, 500 per a navigazione/interfaccia utente, è 600-700 per i tituli. A scala di u carattere usa una spaziatura negativa aggressiva trà e lettere à dimensioni più grande (-4.6px à 96px, -2px à 72px), ciò chì face chì u titulu pare più compactu è sicuru, invece di arioso.
- Lyon Text — rimpiazzamentu: Source Serif Pro · contorni 400 · U caratteru serif editoriale, riservatu per e sezzioni individuali di u testu principale è l'introduzioni di e sezzioni, hè adupratu cù parsimonia (quattru volte) per dà à u caratteru un pesu literariu, simile à una citazione in un layout di rivista. Funziona cum'è un accentu sistemicu piuttostu chè una ghjerarchia parallela.
Intervalli è forma
| Scopu | Significatu |
|---|---|
| Densità | mediu |
| Passu basicu | 8px |
| Raggiu di u buttone | 8px |
| Raggiu di a carta | 12px |
| Ombre | nò - bordi invece di ombre |
| Trà e sezioni | 80px |
| Larghezza di a pagina | 1440px |
L'IA custruisce u vostru situ web in stile Notion è u riempirà
- Riempite cù prudutti è publicazioni via u ligame - Instagram, TikTok, Facebook.
- Trasferisce u cuntenutu da u vostru vechju situ - basta à specificà l'indirizzu.
- Design mudernu nant'à u megliu mutore: React ( Next.js) cù rendering di u servitore è ottimizazione SEO pronta per l'usu.
- Ottimizazione SEO cumpletamente automatizata per i risultati di ricerca è e raccomandazioni di rete neurale.
Stili simili
- ElevenLabs — Un saggio fotograficu in toni caldi di crema cù tituli suttili. Un quaderno in stile Bauhaus - carta culurata cum'è un gusciu d'ovu, inchiostru neru è un unicu accentu viola è aranciu per a presentazione di u pruduttu.
- Awesomic — Maglia di zincu editoriale cù segni di punteggiatura aranciu chì ricordanu i confetti
- Monad — rivista tecnica editoriale nantu à pergamena calda
- Dub — U pannellu di cuntrollu di carta di risu opaca di Link
- Seline Analytics — Una tavula analitica tranquilla nantu à carta calda
- Anthropic — Una rivista scientifica di campu nantu à pergamena calda - superfici d'avorio calme, tituli editoriali serifati è un unicu accentu d'argilla chì appare solu quandu hè necessaria un'azione.
- Calendly — Inchiostru turchinu scuru nantu à u marmaru fretu
- Augen Pro — A presentazione bianca d'Apple presenta un turchinu elettricu clinicu, senza pesu cum'è unicu accentu in un spaziu monocromu.
- Antimetal — Una cronaca editoriale nantu à carta crema - una matina tranquilla in una rivista scientifica, induve a moderazione trasmette fiducia è i serif facenu u travagliu pesante.
- Perk — Calce elettrica nantu à carta pergamena calda
- Ditto — Un attellu illuminatu da u sole chì crea campioni di fiori salvatichi. Superfici crema calde, un culore di basa giallu vibrante, inchiostri blu marinu scuru, forme di culore organiche chì fiuriscenu daretu à l'opera.
- Officevibe — Una rivista editoriale nantu à carta di culore crema calda. Imaginate un saggio riflessivu nantu à a gestione di e risorse umane, presentatu cum'è un pruduttu - un carattere serif cursivu chì sussurra attraversu una interfaccia blu muderna.