Notion
Un caiet de hârtie cald în soarele de la amiază
Interfața Notion arată ca un caiet de hârtie îndrăgit în plină zi: o pânză caldă, cremoasă (#f6f5f4) care se simte tactil mai degrabă decât steril, o tipografie sans-serif generoasă care conferă greutate editorială textelor produsului, iar culoarea este folosită ca punctuație rară - „pastilele” de culoarea piersicii evidențiază verbele, un singur albastru ancorează acțiunea principală, iar o gamă rotativă de nuanțe de accent (coral, chihlimbar, cer, miezul nopții) colorează fundalurile cărților de joc ca niște autocolante. Cărțile de joc sunt aranjate pe o pânză cu margini și colțuri subțiri - fără umbre, fără crom - precum secțiunile liniate ale unui caiet Moleskine. Animația este jucăușă și elastică, cu tranziții line la 200 ms și animații elastice ale personajelor care dau viață interfeței fără a fi decorative.
Centrat, lățimea maximă este limitată la aproximativ 1440px. Elementul principal este o stivă centrată: un rând de simboluri → un titlu mare pe două rânduri cu o pilulă colorată încorporată → un subtitlu → un rând cu două butoane de îndemn la acțiune → o machetă mare a interfeței utilizator a produsului. Sub elementul principal, secțiunile alternează între grile de carduri albe și panouri de accent color. Peretele logo-ului este o grilă centrată pe un singur rând de logo-uri ale partenerilor în tonuri de gri. Blocurile de caracteristici utilizează un aspect pe două coloane (text în stânga, panou colorat în dreapta), alternând de la stânga la dreapta între secțiuni. Secțiunea „Întreabă-ți asistenții la cerere” utilizează o grilă de carduri 2x2, unde cardul de sus ocupă întreaga lățime, iar rândul de jos este împărțit în două coloane egale. Marginile dintre secțiuni sunt generoase (~80px), creând un ritm vertical calm. Navigarea este o bară superioară fixă, înaltă de 64px, cu elemente de navigare centrate și butoane de acțiune aliniate la dreapta.
Ilustrațiile sunt primordiale, fără fotografii. Limbajul vizual este construit pe simboluri plate, ilustrate (muchii rotunjite în cercuri colorate de 2px), elemente decorative abstracte (zgârieturi desenate manual, sclipici, săgeți, forme de flori) și machete ale interfeței utilizator a produsului. Simbolurile apar în fereastra principală ca un rând orizontal de șapte avatare și sunt împrăștiate pe pagină ca semne de punctuație jucăușe. Capturile de ecran ale produsului sunt singurele elemente vizuale „reale”: ele prezintă interfața Notion reală (panouri Kanban, vizualizări ale documentelor, panouri ale agenților AI) cu un set complet de elemente și date reale. Macheta produsului din fereastra principală este mare, centrată și aruncă o singură umbră care o separă de pânză. Nu există fotografii cu stil de viață, imagini de stoc, randări 3D abstracte.
Paletă
Marca
- Notion Blue
#0075de— Elementul principal care umple butonul de îndemn la acțiune (CTA), un accent în navigarea activă, butoanele de acțiune umplute sunt singura schemă de culori într-un sistem aproape monocrom care este suficient de saturată pentru a fi percepută ca un comutator.
Neutru
- Paper Warmth
#f6f5f4— Pânza paginii, fundalul ferestrei principale și fundalul secțiunii sunt toate în culori calde, ușor bej, care conferă sistemului o senzație tactilă, analogică. - Pure White
#ffffff— Suprafețe de card, panouri în relief, fundal cu logo, text contrastant pe carduri închise la culoare. - Ink Black
#000000— Textul principal, linkurile de navigare, titlurile - utilizate cu diferite grade de transparență (100%, 95%, 90%, 60%, 40%, 20%) pentru a construi ierarhie fără a adăuga culori noi. - Charcoal
#111111— O opțiune de text închis la culoare pentru acele zone ale interfeței utilizator unde negrul pur ar părea prea dur. - Stone
#757575— Text de navigare secundar, text auxiliar dezactivat, etichete butoane dezactivate - 60% cerneală alfa - Graphite
#615d59— Textul principal are un ton cald - gri-maroniu, care se armonizează cu fundalul cald.
Tipografie
de la 12 la 96px · 10 pași
- NotionInter — înlocuire: Inter · contururi 400, 500, 600, 700 · Fontul principal sans-serif este un umanist geometric cu nuanțe subtile, utilizat la dimensiuni de 400 pentru text, 500 pentru navigare/interfață utilizator și 600-700 pentru titluri. Scara fontului folosește o spațiere negativă agresivă între litere la dimensiuni mai mari (-4,6px la 96px, -2px la 72px), ceea ce face ca titlul să pară mai compact și mai încrezător, decât aerisit.
- Lyon Text — înlocuire: Source Serif Pro · contururi 400 · Fontul serif editorial, rezervat pentru secțiuni individuale ale textului principal și introducerile secțiunilor, este folosit cu moderație (de patru ori) pentru a da fontului greutate literară, similar unui citat dintr-o machetă de revistă. Funcționează ca un accent sistemic, mai degrabă decât ca o ierarhie paralelă.
Intervale și formă
| Scop | Sens |
|---|---|
| Densitate | medie |
| Pasul de bază | 8px |
| Raza butonului | 8px |
| Raza cardului | 12px |
| Umbre | fără - margini în loc de umbre |
| Între secțiuni | 80px |
| Lățimea paginii | 1440px |
Inteligența artificială vă va construi site-ul web în stilul Notion și îl va completa
- Completează cu produse și postări prin link - Instagram, TikTok, Facebook.
- Transferați conținut de pe vechiul site - specificați doar adresa.
- Design modern pe cel mai bun motor: React ( Next.js) cu randare pe server și optimizare SEO gata de utilizare.
- Optimizare SEO complet automatizată pentru rezultatele căutării și recomandări de rețele neuronale.
Stiluri similare
- Mollie — Un ghișeu din cașmir, un registru închis la culoare. Lăsați suficient spațiu alb pentru design editorial în jurul textului negru, apoi consolidați punctele legate de produs cu creme calde, cafele espresso și fotografii tactile ale metodelor de plată reale.
- Kagi — O sală de lectură separată. Creați un spațiu alb deschis în jurul unui text grafit îndrăzneț, folosind accente subtile de violet și suprafețe pastelate calde pentru a întrerupe liniștea.
- Milanote — Milanote este un studio de creație dedicat. Creați pagini în stil galerie editorială folosind panouri vizuale plutitoare: pereți înrămați întunecați, spațiu de afișare alb și capturi de ecran care arată ca obiecte reale cu o profunzime delicată.
- Co2 — Un atlas climatic în lumina iernii. Creați pagini asemănătoare unui peisaj aerian al documentelor, unde titlurile cu serif, datele codificate pe categorii și imaginile înghețate evidențiază margini albe late.
- GitButler — Turcoaz la sfârșitul textului. O combinație de titluri serif cu contrast ridicat cu grile tehnice subtile, suprafețe calde de grafit și un accent turcoaz discret.
- ElevenLabs — Un eseu foto în tonuri calde de crem, cu titluri subtile. Un caiet în stil Bauhaus — hârtie de culoarea cojii de ou, cerneală neagră și un singur accent violet și portocaliu pentru prezentarea produsului.
- Awesomic — Plasă de zinc editorială cu semne de punctuație portocalii care amintesc de confetti
- Monad — revistă tehnică editorială pe pergament cald
- Dub — Panoul de control din hârtie de orez mată al lui Link
- Seline Analytics — O masă analitică liniștită pe hârtie caldă
- Anthropic — O revistă științifică de teren pe pergament cald — suprafețe calme de fildeș, titluri editoriale cu serife și un singur accent de lut care apare doar atunci când este nevoie de acțiune.
- Calendly — Cerneală albastru închis pe marmură rece