Notion
Notebook tal-karta sħuna fix-xemx ta’ nofsinhar
L-interfaċċja ta' Notion tidher qisha notebook tal-karta maħbub fid-dawl tax-xemx: kanvas sħun u kremuż (#f6f5f4) li jħossu tattili aktar milli sterili, tipografija sans-serif ġeneruża li tagħti piż editorjali lill-kopja tal-prodott, u kulur użat bħala punteġġjatura skarsa—"pilloli" ħawħ jenfasizzaw il-verbi, blu wieħed jankra l-azzjoni ewlenija, u firxa rotanti ta' lewn aċċentwat (qroll, ambra, sema, nofsillejl) jikkulurixxu l-isfondi tal-karti bħal stikers. Il-karti huma rranġati fuq kanvas bi borduri u kantunieri rqaq—bla dellijiet, bla kromju—bħas-sezzjonijiet miksija ta' notebook Moleskine. L-animazzjoni hija ferrieħa u elastika, b'tranżizzjonijiet bla xkiel f'200ms u animazzjonijiet tal-karattri elastiċi li jagħtu l-ħajja lill-interfaċċja mingħajr ma jkunu dekorattivi.
Iċċentrat, il-wisa' massima hija limitata għal madwar 1440px. L-element prinċipali huwa munzell iċċentrat: ringiela ta' simboli → titlu kbir b'żewġ linji b'pillola kkulurita inkorporata → sottotitlu → ringiela b'żewġ buttuni ta' sejħa għall-azzjoni → mockup kbir tal-UI tal-prodott. Taħt l-element prinċipali, it-taqsimiet jalternaw bejn grilji ta' karti bojod u pannelli aċċentwati bil-kulur sħiħ. Il-ħajt tal-logo huwa grilja ċċentrata b'ringiela waħda ta' logos ta' msieħba fi skala griża. Il-blokki tal-karatteristiċi jużaw tqassim ta' żewġ kolonni (test fuq ix-xellug, pannell ikkulurit fuq il-lemin), li jalternaw mix-xellug għal-lemin bejn it-taqsimiet. It-taqsima "Staqsi lill-assistenti tiegħek fuq talba" tuża grilja ta' karti 2x2, fejn il-karta ta' fuq tieħu l-wisa' kollha, u r-ringiela t'isfel hija maqsuma f'żewġ kolonni ugwali. Il-kanali bejn it-taqsimiet huma ġenerużi (~80px), u joħolqu ritmu vertikali kalm. In-navigazzjoni hija bar ta' fuq fiss ta' 64px għoli b'elementi ta' navigazzjoni ċċentrati u buttuni ta' azzjoni allinjati mal-lemin.
L-illustrazzjonijiet huma importanti ħafna, mingħajr ritratti. Il-lingwaġġ viżwali huwa mibni fuq simboli ċatti u illustrati (trufijiet imdawwrin f'ċrieki kkuluriti ta' 2px), elementi dekorattivi astratti (disinji mħakkma bl-idejn, glitter, vleġeġ, forom ta' fjuri), u mockups tal-interfaċċja tal-utent tal-prodott. Is-simboli jidhru fit-tieqa prinċipali bħala ringiela orizzontali ta' seba' avatars u huma mxerrda mal-paġna bħala punteġġjatura umoristika. L-iskrinshots tal-prodott huma l-uniċi elementi viżwali "reali": juru l-interfaċċja attwali ta' Notion (Kanban boards, veduti tad-dokumenti, pannelli tal-aġenti tal-AI) b'sett sħiħ ta' elementi u dejta reali. Il-mockup tal-prodott fit-tieqa prinċipali huwa kbir, iċċentrat, u jitfa' dell wieħed li jisseparah mill-kanvas. M'hemm l-ebda ritratti tal-istil tal-ħajja, l-ebda immaġni tal-istokk, l-ebda renders 3D astratti.
Paletta
Marka
- Notion Blue
#0075de— L-element prinċipali li jimla l-buttuna tas-sejħa għall-azzjoni (CTA), aċċent fin-navigazzjoni attiva, il-buttuni ta' azzjoni mimlija huma l-unika skema ta' kuluri f'sistema kważi monokromatika li hija saturata biżżejjed biex tiġi pperċepita bħala swiċċ.
Newtrali
- Paper Warmth
#f6f5f4— Il-kanvas tal-paġna, l-isfond tat-tieqa prinċipali, u l-isfond tas-sezzjoni huma kollha kuluri sħan, kemxejn beige li jagħtu lis-sistema sensazzjoni tattili u analoga. - Pure White
#ffffff— Uċuħ tal-karti, pannelli mqajma, sfond tal-logo, test kuntrastanti fuq karti skuri. - Ink Black
#000000— Test prinċipali, links ta' navigazzjoni, intestaturi - użati b'trasparenza differenti (100%, 95%, 90%, 60%, 40%, 20%) biex tinbena ġerarkija mingħajr ma jiżdiedu kuluri ġodda. - Charcoal
#111111— Għażla ta' test skur għal dawk iż-żoni tal-UI fejn l-iswed pur jidher wisq aħrax. - Stone
#757575— Test ta' navigazzjoni sekondarja, test ta' għajnuna siekta, tikketti tal-buttuni diżattivati - 60% linka alfa - Graphite
#615d59— It-test prinċipali għandu ton sħun - griż kannella, li jarmonizza mal-isfond sħun.
Tipografija
minn 12 sa 96px · 10 passi
- NotionInter — sostituzzjoni: Inter · linji gwida 400, 500, 600, 700 · Il-font sans-serif ewlieni huwa umanista ġeometriku b'sfumaturi sottili, użat f'daqsijiet 400 għat-test tal-ġisem, 500 għan-navigazzjoni/interfaċċja tal-utent, u 600-700 għat-titoli. L-iskala tal-font tuża spazjar negattiv aggressiv bejn l-ittri f'daqsijiet akbar (-4.6px f'96px, -2px f'72px), li jagħmel it-titlu jħossu aktar kompatt u kunfidenti, aktar milli ħafif.
- Lyon Text — sostituzzjoni: Source Serif Pro · linji gwida 400 · It-tipa serif editorjali, riservata għal sezzjonijiet individwali tat-test prinċipali u introduzzjonijiet ta’ sezzjonijiet, tintuża bil-moderazzjoni (erba’ darbiet) biex tagħti lit-tipa piż letterarju, simili għal kwotazzjoni f’tqassim ta’ rivista. Tiffunzjona bħala aċċent sistemiku aktar milli bħala ġerarkija parallela.
Intervalli u forma
| Skop | Tifsira |
|---|---|
| Densità | medja |
| Pass bażiku | 8px |
| Raġġ tal-buttuna | 8px |
| Raġġ tal-karta | 12px |
| Dellijiet | le - fruntieri minflok dellijiet |
| Bejn is-sezzjonijiet | 80px |
| Wisa' tal-paġna | 1440px |
L-AI se tibni l-websajt tiegħek fl-istil ta' Notion u timlieha
- Imla bi prodotti u postijiet permezz tal-link - Instagram, TikTok, Facebook.
- Ittrasferixxi l-kontenut mis-sit il-qadim tiegħek—speċifika biss l-indirizz.
- Disinn modern fuq l-aqwa magna: React ( Next.js) b'rendering tas-server u ottimizzazzjoni SEO lesti għall-użu.
- Ottimizzazzjoni SEO kompletament awtomatizzata għar-riżultati tat-tfittxija u rakkomandazzjonijiet tan-netwerk newrali.
Stili simili
- Mollie — Bank tal-kaxxmir, reġistru skur. Ħalli biżżejjed spazju abjad għad-disinn editorjali madwar it-test iswed, imbagħad saħħaħ il-punti relatati mal-prodott bi kremi sħan, kannella espresso, u ritratti tattili tal-metodi ta' ħlas attwali.
- Kagi — Kamra tal-qari separata. Oħloq spazju abjad miftuħ madwar test tal-grafita b'tipa grassa, billi tuża aċċenti vjola sottili u uċuħ pastel sħan biex tkisser it-trankwillità.
- Milanote — Milanote huwa studio kreattiv dedikat. Oħloq paġni stil gallerija editorjali billi tuża bordijiet viżwali f'wiċċ l-ilma: ħitan inkwadrati skuri, spazju abjad għall-wiri, u screenshots li jidhru qishom oġġetti reali b'fond artab.
- Co2 — Atlas tal-klima fid-dawl tax-xitwa. Oħloq paġni bħal pajsaġġ ta' dokumenti mill-ajru, fejn intestaturi serif, dejta kkodifikata skont il-kategorija, u stampi tas-silġ jenfasizzaw marġini bojod wesgħin.
- GitButler — Turkuż fl-aħħar tat-test. Taħlita ta' titoli serif b'kuntrast għoli ma' grilji tekniċi sottili, uċuħ tal-grafita sħan, u aċċent turkuż diskret.
- ElevenLabs — Esej bir-ritratti f'toni krema sħan b'titoli sottili. Notebook stil Bauhaus—karta kkulurita bħal qoxra tal-bajda, linka sewda, u aċċent wieħed vjola u oranġjo għall-wiri tal-prodott.
- Awesomic — Xibka taż-żingu editorjali b'marki ta' punteġġjatura oranġjo li jfakkru fil-konfetti
- Monad — ġurnal tekniku editorjali fuq parċmina sħuna
- Dub — Il-pannell tal-kontroll tal-karta tar-ross matte ta' Link
- Seline Analytics — Tabella analitika kwieta fuq karta sħuna
- Anthropic — Ġurnal xjentifiku fuq il-post fuq vellum sħun—uċuħ kalmi tal-avorju, intestaturi editorjali b'serif, u aċċent wieħed tat-tafal li jidher biss meta tkun meħtieġa azzjoni.
- Calendly — Linka blu skura fuq irħam kiesaħ