Notion
ഉച്ചവെയിലിൽ ഒരു ചൂടുള്ള കടലാസ് നോട്ട്ബുക്ക്
നോഷന്റെ ഇന്റർഫേസ് പകൽ വെളിച്ചത്തിൽ പ്രിയപ്പെട്ട ഒരു പേപ്പർ നോട്ട്ബുക്ക് പോലെ കാണപ്പെടുന്നു: അണുവിമുക്തമാക്കുന്നതിനു പകരം സ്പർശിക്കുന്ന ഒരു ചൂടുള്ള, ക്രീം നിറമുള്ള ക്യാൻവാസ് (#f6f5f4), ഉൽപ്പന്ന പകർപ്പിന് എഡിറ്റോറിയൽ ഭാരം നൽകുന്ന ഉദാരമായ സാൻസ്-സെരിഫ് ടൈപ്പോഗ്രാഫി, കൂടാതെ വിരളമായ ചിഹ്നനമായി ഉപയോഗിക്കുന്ന നിറം - പീച്ച് "ഗുളികകൾ" ഹൈലൈറ്റ് ക്രിയകൾ, ഒരു നീല പ്രധാന പ്രവർത്തനത്തെ നങ്കൂരമിടുന്നു, കൂടാതെ കറങ്ങുന്ന ആക്സന്റ് ഹ്യൂകൾ (പവിഴം, ആംബർ, ആകാശം, അർദ്ധരാത്രി) കാർഡ് പശ്ചാത്തലങ്ങളെ സ്റ്റിക്കറുകൾ പോലെ വർണ്ണിക്കുന്നു. മോൾസ്കൈൻ നോട്ട്ബുക്കിന്റെ വരയുള്ള ഭാഗങ്ങൾ പോലെ നേർത്ത ബോർഡറുകളും കോണുകളും ഉള്ള ഒരു ക്യാൻവാസിലാണ് കാർഡുകൾ ക്രമീകരിച്ചിരിക്കുന്നത് - നിഴലുകൾ ഇല്ല, ക്രോം ഇല്ല. ആനിമേഷൻ കളിയും വസന്തവുമാണ്, 200ms-ൽ സുഗമമായ സംക്രമണങ്ങളും അലങ്കാരമാകാതെ ഇന്റർഫേസിന് ജീവൻ നൽകുന്ന വസന്ത സ്വഭാവമുള്ള ആനിമേഷനുകളും.
മധ്യഭാഗത്ത്, പരമാവധി വീതി ഏകദേശം 1440px ആയി പരിമിതപ്പെടുത്തിയിരിക്കുന്നു. പ്രധാന ഘടകം ഒരു കേന്ദ്രീകൃത സ്റ്റാക്ക് ആണ്: ചിഹ്നങ്ങളുടെ ഒരു നിര → ഉൾച്ചേർത്ത നിറമുള്ള പില്ലുള്ള ഒരു വലിയ രണ്ട്-വരി തലക്കെട്ട് → ഒരു ഉപതലക്കെട്ട് → രണ്ട് കോൾ-ടു-ആക്ഷൻ ബട്ടണുകളുള്ള ഒരു വരി → ഒരു വലിയ ഉൽപ്പന്ന UI മോക്ക്അപ്പ്. പ്രധാന ഘടകത്തിന് താഴെ, വെളുത്ത കാർഡുകളുടെ ഗ്രിഡുകളും പൂർണ്ണ വർണ്ണ ആക്സന്റ് പാനലുകളും തമ്മിൽ വിഭാഗങ്ങൾ മാറിമാറി വരുന്നു. ഗ്രേസ്കെയിലിൽ പങ്കാളി ലോഗോകളുടെ ഒരു കേന്ദ്രീകൃത ഒറ്റ-വരി ഗ്രിഡാണ് ലോഗോ വാൾ. ഫീച്ചർ ബ്ലോക്കുകൾ രണ്ട്-കോളം ലേഔട്ട് ഉപയോഗിക്കുന്നു (ഇടതുവശത്ത് വാചകം, വലതുവശത്ത് നിറമുള്ള പാനൽ), വിഭാഗങ്ങൾക്കിടയിൽ ഇടത്തുനിന്ന് വലത്തോട്ട് മാറിമാറി വരുന്നു. "ആവശ്യാനുസരണം നിങ്ങളുടെ സഹായികളോട് ചോദിക്കുക" വിഭാഗം ഒരു 2x2 കാർഡ് ഗ്രിഡ് ഉപയോഗിക്കുന്നു, അവിടെ മുകളിലെ കാർഡ് മുഴുവൻ വീതിയും എടുക്കുന്നു, താഴത്തെ വരി രണ്ട് തുല്യ നിരകളായി തിരിച്ചിരിക്കുന്നു. വിഭാഗങ്ങൾക്കിടയിലുള്ള ഗട്ടറുകൾ ഉദാരമാണ് (~80px), ശാന്തമായ ലംബ താളം സൃഷ്ടിക്കുന്നു. നാവിഗേഷൻ കേന്ദ്രീകൃത നാവിഗേഷൻ ഘടകങ്ങളും വലതുവശത്ത് വിന്യസിച്ച പ്രവർത്തന ബട്ടണുകളും ഉള്ള ഒരു നിശ്ചിത 64px ഉയരമുള്ള മുകളിലെ ബാറാണ്.
ചിത്രീകരണങ്ങൾ പരമപ്രധാനമാണ്, ഫോട്ടോകളൊന്നുമില്ല. ദൃശ്യഭാഷ പരന്നതും ചിത്രീകരിച്ചതുമായ ചിഹ്നങ്ങൾ (2px നിറമുള്ള വൃത്താകൃതിയിലുള്ള അരികുകൾ), അമൂർത്ത അലങ്കാര ഘടകങ്ങൾ (കൈകൊണ്ട് വരച്ച സ്ക്വിഗിളുകൾ, തിളക്കം, അമ്പുകൾ, പുഷ്പാകൃതികൾ), ഉൽപ്പന്നത്തിന്റെ ഉപയോക്തൃ ഇന്റർഫേസിന്റെ മോക്കപ്പുകൾ എന്നിവയിലാണ് നിർമ്മിച്ചിരിക്കുന്നത്. ചിഹ്നങ്ങൾ പ്രധാന വിൻഡോയിൽ ഏഴ് അവതാരങ്ങളുടെ തിരശ്ചീന നിരയായി ദൃശ്യമാകുന്നു, കൂടാതെ പേജിലുടനീളം ചിതറിക്കിടക്കുന്നു, രസകരമായ ചിഹ്നനങ്ങളായി. ഉൽപ്പന്ന സ്ക്രീൻഷോട്ടുകൾ മാത്രമാണ് "യഥാർത്ഥ" ദൃശ്യ ഘടകങ്ങൾ: അവ യഥാർത്ഥ നോഷൻ ഇന്റർഫേസ് (കാൻബൻ ബോർഡുകൾ, ഡോക്യുമെന്റ് വ്യൂകൾ, AI ഏജന്റ് പാനലുകൾ) പൂർണ്ണമായ ഘടകങ്ങളും യഥാർത്ഥ ഡാറ്റയും ഉപയോഗിച്ച് കാണിക്കുന്നു. പ്രധാന വിൻഡോയിലെ ഉൽപ്പന്ന മോക്കപ്പ് വലുതും കേന്ദ്രീകൃതവുമാണ്, കൂടാതെ ക്യാൻവാസിൽ നിന്ന് അതിനെ വേർതിരിക്കുന്ന ഒരൊറ്റ നിഴൽ വീശുന്നു. ജീവിതശൈലി ഫോട്ടോകളില്ല, സ്റ്റോക്ക് ഇമേജുകളില്ല, അമൂർത്തമായ 3D റെൻഡറുകളൊന്നുമില്ല.
പാലറ്റ്
ബ്രാൻഡ്
- Notion Blue
#0075de— സജീവ നാവിഗേഷനിലെ ഒരു ആക്സന്റായ കോൾ-ടു-ആക്ഷൻ (CTA) ബട്ടൺ പൂരിപ്പിക്കുന്ന പ്രധാന ഘടകം, പൂരിപ്പിച്ച ആക്ഷൻ ബട്ടണുകൾ മാത്രമാണ് ഒരു സ്വിച്ച് ആയി കാണാൻ കഴിയുന്നത്ര പൂരിതമായ, ഏതാണ്ട് മോണോക്രോം സിസ്റ്റത്തിലെ ഏക വർണ്ണ സ്കീം.
നിഷ്പക്ഷം
- Paper Warmth
#f6f5f4— പേജ് ക്യാൻവാസ്, പ്രധാന വിൻഡോ പശ്ചാത്തലം, സെക്ഷൻ പശ്ചാത്തലം എന്നിവയെല്ലാം ഊഷ്മളവും ചെറുതായി ബീജ് നിറങ്ങളുമാണ്, ഇത് സിസ്റ്റത്തിന് സ്പർശനപരവും അനലോഗ് അനുഭവവും നൽകുന്നു. - Pure White
#ffffff— കാർഡ് പ്രതലങ്ങൾ, ഉയർത്തിയ പാനലുകൾ, ലോഗോ പശ്ചാത്തലം, ഇരുണ്ട കാർഡുകളിലെ കോൺട്രാസ്റ്റിംഗ് വാചകം. - Ink Black
#000000— പ്രധാന വാചകം, നാവിഗേഷൻ ലിങ്കുകൾ, തലക്കെട്ടുകൾ - പുതിയ നിറങ്ങൾ ചേർക്കാതെ ശ്രേണി നിർമ്മിക്കുന്നതിന് വ്യത്യസ്ത സുതാര്യതയോടെ (100%, 95%, 90%, 60%, 40%, 20%) ഉപയോഗിക്കുന്നു. - Charcoal
#111111— ശുദ്ധമായ കറുപ്പ് നിറം വളരെ കഠിനമായി കാണപ്പെടുന്ന UI ഏരിയകൾക്കുള്ള ഒരു ഡാർക്ക് ടെക്സ്റ്റ് ഓപ്ഷൻ. - Stone
#757575— ദ്വിതീയ നാവിഗേഷൻ ടെക്സ്റ്റ്, മ്യൂട്ട് ചെയ്ത ഹെൽപ്പർ ടെക്സ്റ്റ്, പ്രവർത്തനരഹിതമാക്കിയ ബട്ടൺ ലേബലുകൾ - 60% ഇങ്ക് ആൽഫ - Graphite
#615d59— പ്രധാന വാചകത്തിന് ഒരു ഊഷ്മള ടോൺ ഉണ്ട് - തവിട്ട് കലർന്ന ചാരനിറം, അത് ഊഷ്മള പശ്ചാത്തലവുമായി യോജിക്കുന്നു.
ടൈപ്പോഗ്രാഫി
12 മുതൽ 96px വരെ · 10 ചുവടുകൾ
- NotionInter — മാറ്റിസ്ഥാപിക്കൽ: Inter · രൂപരേഖകൾ 400, 500, 600, 700 · പ്രധാന സാൻസ്-സെരിഫ് ഫോണ്ട് സൂക്ഷ്മമായ സൂക്ഷ്മതകളുള്ള ഒരു ജ്യാമിതീയ മാനവികതയാണ്, ബോഡി ടെക്സ്റ്റിന് 400, നാവിഗേഷൻ/യൂസർ ഇന്റർഫേസിന് 500, തലക്കെട്ടുകൾക്ക് 600-700 എന്നീ വലുപ്പങ്ങളിൽ ഉപയോഗിക്കുന്നു. ഫോണ്ട് സ്കെയിൽ വലിയ വലുപ്പങ്ങളിൽ (96px-ൽ -4.6px, 72px-ൽ -2px) ആക്രമണാത്മക നെഗറ്റീവ് ലെറ്റർ സ്പേസിംഗ് ഉപയോഗിക്കുന്നു, ഇത് തലക്കെട്ടിനെ വായുസഞ്ചാരമുള്ളതാക്കുന്നതിനുപകരം കൂടുതൽ ഒതുക്കമുള്ളതും ആത്മവിശ്വാസമുള്ളതുമാക്കുന്നു.
- Lyon Text — മാറ്റിസ്ഥാപിക്കൽ: Source Serif Pro · രൂപരേഖകൾ 400 · പ്രധാന വാചകത്തിലെ വ്യക്തിഗത വിഭാഗങ്ങൾക്കും വിഭാഗ ആമുഖങ്ങൾക്കുമായി നീക്കിവച്ചിരിക്കുന്ന എഡിറ്റോറിയൽ സെരിഫ് ഫോണ്ട്, ഒരു മാഗസിൻ ലേഔട്ടിലെ ഒരു ഉദ്ധരണി പോലെ, ടൈപ്പ്ഫേസിന് സാഹിത്യ ഭാരം നൽകുന്നതിന് (നാലു തവണ) മിതമായി ഉപയോഗിക്കുന്നു. ഇത് ഒരു സമാന്തര ശ്രേണിയെക്കാൾ ഒരു വ്യവസ്ഥാപിത ഉച്ചാരണമായി പ്രവർത്തിക്കുന്നു.
ഇടവേളകളും രൂപവും
| ഉദ്ദേശ്യം | അർത്ഥം |
|---|---|
| സാന്ദ്രത | ശരാശരി |
| അടിസ്ഥാന ഘട്ടം | 8px |
| ബട്ടൺ ആരം | 8px |
| കാർഡ് ആരം | 12px |
| ഷാഡോകൾ | ഷാഡോകൾക്ക് പകരം ബോർഡറുകൾ ഇല്ല |
| വിഭാഗങ്ങൾക്കിടയിൽ | 80px |
| പേജ് വീതി | 1440px |
AI നിങ്ങളുടെ വെബ്സൈറ്റ് Notion ശൈലിയിൽ നിർമ്മിച്ച് അത് പൂരിപ്പിക്കും.
- Instagram, TikTok, Facebook ലിങ്കുകൾ വഴി ഉൽപ്പന്നങ്ങളും പോസ്റ്റുകളും പൂരിപ്പിക്കുക.
- നിങ്ങളുടെ പഴയ സൈറ്റിൽ നിന്ന് ഉള്ളടക്കം കൈമാറുക—വിലാസം മാത്രം വ്യക്തമാക്കുക.
- മികച്ച എഞ്ചിനിൽ ആധുനിക ഡിസൈൻ: സെർവർ റെൻഡറിംഗും SEO ഒപ്റ്റിമൈസേഷനും ഉള്ള React ( Next.js).
- തിരയൽ ഫലങ്ങൾക്കും ന്യൂറൽ നെറ്റ്വർക്ക് ശുപാർശകൾക്കുമായി പൂർണ്ണമായും ഓട്ടോമേറ്റഡ് SEO ഒപ്റ്റിമൈസേഷൻ.
സമാനമായ ശൈലികൾ
- ElevenLabs — സൂക്ഷ്മമായ തലക്കെട്ടുകളുള്ള ഊഷ്മളമായ ക്രീം ടോണുകളിൽ ഒരു ഫോട്ടോ ഉപന്യാസം. ബൗഹൗസ് ശൈലിയിലുള്ള ഒരു നോട്ട്ബുക്ക് - മുട്ടത്തോടിന്റെ നിറമുള്ള പേപ്പർ, കറുത്ത മഷി, ഉൽപ്പന്ന പ്രദർശനത്തിനായി പർപ്പിൾ, ഓറഞ്ച് നിറങ്ങളിലുള്ള ഒറ്റ ആക്സന്റ്.
- Awesomic — കൺഫെറ്റിയെ അനുസ്മരിപ്പിക്കുന്ന ഓറഞ്ച് വിരാമചിഹ്നങ്ങളുള്ള എഡിറ്റോറിയൽ സിങ്ക് മെഷ്.
- Monad — ചൂടുള്ള കടലാസിൽ എഡിറ്റോറിയൽ ടെക്നിക്കൽ ജേണൽ
- Dub — ലിങ്കിന്റെ മാറ്റ് റൈസ് പേപ്പർ നിയന്ത്രണ പാനൽ
- Seline Analytics — ചൂടുള്ള കടലാസിൽ ഒരു നിശബ്ദ വിശകലന പട്ടിക
- Anthropic — ഊഷ്മളമായ വെല്ലത്തെക്കുറിച്ചുള്ള ഒരു ശാസ്ത്രീയ ഫീൽഡ് ജേണൽ - ശാന്തമായ ആനക്കൊമ്പ് പ്രതലങ്ങൾ, സെറിഫൈഡ് എഡിറ്റോറിയൽ തലക്കെട്ടുകൾ, ആവശ്യമുള്ളപ്പോൾ മാത്രം ദൃശ്യമാകുന്ന ഒറ്റ കളിമൺ ആക്സന്റ്.
- Calendly — തണുത്ത മാർബിളിൽ കടും നീല മഷി
- Augen Pro — മോണോക്രോം നിറത്തിലുള്ള ഇടത്തിലെ ഏക ആകർഷണമായി ക്ലിനിക്കൽ, ഭാരമില്ലാത്ത, ഇലക്ട്രിക് നീലയാണ് ആപ്പിളിന്റെ വെള്ള നിറത്തിലുള്ള അവതരണത്തിൽ ഉള്ളത്.
- Antimetal — ക്രീം പേപ്പറിൽ ഒരു എഡിറ്റോറിയൽ ക്രോണിക്കിൾ - ഒരു ശാസ്ത്ര ജേണലിലെ ശാന്തമായ ഒരു പ്രഭാതം, അവിടെ സംയമനം ആത്മവിശ്വാസം പകരുകയും സെരിഫുകൾ ഭാരിച്ച കാര്യങ്ങൾ ചെയ്യുകയും ചെയ്യുന്നു.
- Perk — ചൂടുള്ള കടലാസ് പേപ്പറിൽ ഇലക്ട്രിക് കുമ്മായം
- Ditto — കാട്ടുപൂക്കളുടെ സാമ്പിളുകൾ നിർമ്മിക്കുന്ന സൂര്യപ്രകാശത്തിൽ പ്രവർത്തിക്കുന്ന ഒരു വർക്ക്ഷോപ്പ്. ചൂടുള്ള ക്രീം നിറമുള്ള പ്രതലങ്ങൾ, തിളക്കമുള്ള മഞ്ഞ അടിസ്ഥാന നിറം, കടും നേവി നീല മഷികൾ, കഷണത്തിന് പിന്നിൽ വിരിഞ്ഞുനിൽക്കുന്ന ജൈവ നിറമുള്ള രൂപങ്ങൾ.
- Officevibe — ചൂടുള്ള ക്രീം നിറമുള്ള പേപ്പറിൽ ഒരു എഡിറ്റോറിയൽ മാസിക. ഒരു ഉൽപ്പന്നമായി അവതരിപ്പിച്ചിരിക്കുന്ന, HR മാനേജ്മെന്റിനെക്കുറിച്ചുള്ള ഒരു ചിന്തനീയമായ ഉപന്യാസം സങ്കൽപ്പിക്കുക - ഒരു ആധുനിക നീല ഇന്റർഫേസിലൂടെ മന്ത്രിക്കുന്ന ഒരു കഴ്സീവ് സെരിഫ് ഫോണ്ട്.