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
- 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
- Augen Pro — Prezentarea albă a Apple prezintă un albastru electric, clinic, imponderabil, ca unic accent într-un spațiu monocrom.
- Antimetal — O cronică editorială pe hârtie crem - o dimineață liniștită la o revistă științifică, unde reținerea transmite încredere, iar serifele fac munca grea
- Perk — Varză electrică pe hârtie de copt caldă
- Ditto — Un atelier însorit care creează mostre de flori sălbatice. Suprafețe crem calde, o culoare de bază galben vibrant, cerneluri bleumarin intens, forme organice de culoare înflorind în spatele piesei.
- Officevibe — O revistă editorială pe hârtie crem-verzuie. Imaginați-vă un eseu profund despre managementul resurselor umane, prezentat ca un produs - un font cursiv serif care șoptește printr-o interfață albastră modernă.