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— મુખ્ય લખાણમાં ગરમાગરમ સ્વર છે - ભૂરા રંગનો રાખોડી, જે ગરમ પૃષ્ઠભૂમિ સાથે સુમેળમાં આવે છે.
ટાઇપોગ્રાફી
૧૨ થી ૯૬ પિક્સેલ સુધી · ૧૦ પગલાં
- NotionInter — રિપ્લેસમેન્ટ: Inter · રૂપરેખા 400, 500, 600, 700 · મુખ્ય સેન્સ-સેરીફ ફોન્ટ એક ભૌમિતિક માનવતાવાદી ફોન્ટ છે જેમાં સૂક્ષ્મ સૂક્ષ્મતા છે, જેનો ઉપયોગ બોડી ટેક્સ્ટ માટે 400, નેવિગેશન/યુઝર ઇન્ટરફેસ માટે 500 અને હેડિંગ માટે 600-700 કદમાં થાય છે. ફોન્ટ સ્કેલ મોટા કદમાં આક્રમક નકારાત્મક અક્ષર અંતરનો ઉપયોગ કરે છે (-4.6px 96px પર, -2px 72px પર), જે હેડિંગને હવાદાર બનાવવાને બદલે વધુ કોમ્પેક્ટ અને આત્મવિશ્વાસપૂર્ણ બનાવે છે.
- 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 મેનેજમેન્ટ પર એક વિચારશીલ નિબંધ, જે એક ઉત્પાદન તરીકે રજૂ કરવામાં આવ્યો છે - એક કર્સિવ સેરીફ ફોન્ટ જે આધુનિક વાદળી ઇન્ટરફેસ દ્વારા ફફડાટ ફેલાવે છે.