
Substack
संपादकीय कार्यालयातील डेस्कवर नारंगी शाई
सबस्टॅक एखाद्या जुन्या, वापरलेल्या न्यूजरूम डॅशबोर्डसारखे दिसते—एक पांढरा कॅनव्हास, उबदार, जवळजवळ काळा मजकूर आणि मजकूर निर्मितीचा प्रत्येक टप्पा दर्शवणारा एकच चमकदार नारंगी रंग. याची दृश्य रचना सजावटीऐवजी घनतेवर आधारित आहे: पातळ राखाडी रेषा फीड घटकांना वेगळे करतात, अवतार लहान आहेत, मेटाडेटा अस्पष्ट ठेवला आहे, आणि वाचकाचे लक्ष नारंगी 'कॉल टू ॲक्शन', नारंगी लोगो, नारंगी 'सबस्क्राईब' लिंक आणि नारंगी 'क्रिएट' बटणावर केंद्रित होते. पृष्ठभाग सपाट आणि मुक्त ठेवले आहेत—कार्ड शॅडो नाहीत, क्रोम पॅनल घटक नाहीत—त्यामुळे टायपोग्राफीवर (एक संक्षिप्त क्रोम सिस्टम UI घटक जो कस्टम सेरिफ हेडलाइन फॉन्टसोबत जोडलेला आहे) संपादकीय भाराचा मुख्य भार येतो. संयमित क्रोम घटक आणि चमकदार, एक-रंगी ठसा ही याची खास शैली आहे: एक असे वाचन ॲप जे प्रकाशन साधनासारखे वाटते.
तीन-स्तंभीय डेस्कटॉप लेआउट: एक स्थिर डावी साइडबार (~२००px, आयकॉन्स आणि लेबल्ससह नेव्हिगेशन, स्टिकी), एक मध्यवर्ती फीड (कमाल रुंदी ~६००px, पोस्ट्सची उभी स्क्रोल होणारी यादी), आणि एक स्थिर उजवी साइडबार (~३००px, शोध + शिफारसी + नोंदणी). मध्यवर्ती फीड हा संपादकीय गाभा आहे—कोणतीही कार्ड्स नाहीत, फक्त पातळ विभाजकांसह आणि विभागांमध्ये ३२px अंतरासह एकावर एक रचलेल्या पोस्ट्स आहेत. मुख्य बॅनर फीडच्या शीर्षस्थानी एका पूर्ण-रुंदीच्या कार्डच्या स्वरूपात आहे. डाव्या साइडबारमध्ये ब्रँडचा लोगो (ओलांडलेल्या रेषा असलेले एक नारंगी चिन्ह), सहा नेव्हिगेशन आयटम्स आणि तळाशी एक पूर्ण-रुंदीचे नारंगी "Create" बटण आहे. उजव्या साइडबारमध्ये एक शोध क्षेत्र, एक नोंदणी कार्ड आणि वाचण्यासाठी "Up Next" यादी आहे. नेव्हिगेशन अगदी कमी आहे—कोणतीही टॉप बार नाही, कोणतेही ब्रेडक्रम्ब्स नाहीत; साइडबार हेच नेव्हिगेशन आहे. मजकुराची घनता जास्त आहे: पोस्टमध्ये १२-१३ पिक्सेलचा मेटाडेटा आणि १५-१९ पिक्सेलचा मुख्य मजकूर वापरला जातो, ज्यामुळे मार्केटप्लेसच्या कार्ड ग्रिडसारख्या अनुभवाऐवजी वृत्तपत्रासारखी लय निर्माण होते.
फोटो हे वापरकर्त्यांनी तयार केलेली सामग्री आहे (लेखकाचे अवतार, पोस्टचे थंबनेल, पोस्टच्या प्रतिमा)—सबस्टॅक स्वतःचे सजावटीचे फोटो पुरवत नाही. मुख्य कार्डमध्ये पार्श्वभूमी म्हणून नीळसर हिरव्या रंगापासून हिरव्या रंगापर्यंतचा ग्रेडियंट वापरला आहे, ज्यात अमूर्त चित्रणात्मक घटक (भूमितीय आकार, पेन आणि नोट्ससारख्या शैलीदार वस्तू) आहेत. उजव्या साइडबारमधील पोस्टचे थंबनेल लहान (64px) असून, ते 8px त्रिज्येमध्ये बंदिस्त आहेत आणि वाचन सूचीचे पूर्वावलोकन म्हणून काम करतात. एकूण दृश्य भाषा मजकूर-आधारित आहे: इंटरफेस हा एक वाचन कॅनव्हास आहे आणि प्रतिमा वातावरण तयार करण्याऐवजी लहान दृश्य आधार म्हणून काम करतात.
पॅलेट
ब्रँड
- Signal Orange
#ff6719— नारंगी रंगाचा वापर सजावटीच्या तपशिलांसाठी आणि क्वचित आढळणाऱ्या संकेतांना ठळक करण्यासाठी दुय्यम रंग म्हणून केला जातो. कृती करण्यास प्रवृत्त करण्यासाठी तो मुख्य रंग म्हणून वापरला जाऊ नये.
तटस्थ
- Ink
#363737— मुख्य मजकूर—मुख्य मजकूर, शीर्षके, पोस्टची नावे, टाइमस्टॅम्प आणि लेखकांची नावे; वाचायला सोपे जावे म्हणून शुद्ध #000 रंगाऐवजी उबदार, जवळजवळ काळा रंग. - Paper
#ffffff— पेज कॅनव्हास, कार्ड सरफेसेस, इनपुट फील्ड्स आणि नॅव्हिगेशन बॅकग्राउंड हे प्रमुख पृष्ठभाग आहेत जे इंटरफेसचा बहुतांश भाग व्यापतात. - Charcoal
#232525— अतिरिक्त मजकूर आणि उच्च निवड स्तरांसह लिंक्ससाठी होव्हर स्टेट; कोड ब्लॉक्स आणि सिलेक्शन ब्लॉक्ससाठी इंक मोडपेक्षा अधिक सखोल. - Stone
#777777— दुय्यम UI घटक, विभाजक आणि म्यूटेड लेबल्ससाठी न्यूट्रल रंग समर्थित आहे. कॉल टू ॲक्शनसाठी प्राथमिक रंग म्हणून त्याचा वापर करू नये. - Ash
#b6b6b6— पातळ बॉर्डर रेषा, बटणांची बाह्यरेखा, आयकॉनची बाह्यरेखा, निष्क्रिय नियंत्रणांवरील बॉर्डर. - Mist
#c8c8c8— विभाजक रेषा, आयकॉन्ससाठी सुस्पष्ट पार्श्वभूमी, सांगाड्याच्या स्वरूपात रिकाम्या जागा भरणे.
टायपोग्राफी
१२ ते ३२ पिक्सेल · ५ टप्पे
- system-ui — बदली: -apple-system · रूपरेषा 400, 500, 600 · युझर इंटरफेस आणि मुख्य मजकुरासाठी वापरला जाणारा प्राथमिक फॉन्ट हा नॅव्हिगेशन लेबल्स, बटन्स, मेसेज टेक्स्ट, मेटाडेटा, इनपुट फील्ड्स आणि सर्व इंटरफेस घटकांसाठी वापरला जातो. मेटाडेटासाठी १२-१३px आणि मुख्य मजकुरासाठी १५-१९px चे कॉम्पॅक्ट आकार एका दाट न्यूज फीडची भावना निर्माण करतात. फॉन्टची जाडी (वेट) मुख्य मजकुरासाठी ४००, नॅव्हिगेशन घटक आणि बटन लेबल्ससाठी ५००, आणि हायलाइट केलेल्या मेसेज टायटल्स व सेक्शन हेडिंगसाठी ६०० आहे.
- Cahuenga — बदली: Charter · रूपरेषा 500 · उत्पादन-स्तरीय शीर्षकांसाठी (साइडबार शीर्षके, नोंदणी कार्ड शीर्षके, मुख्य मजकूर) एक वैशिष्ट्यपूर्ण सजावटीचा सेरिफ फॉन्ट. त्याचे मध्यम वजन आणि किंचित उंचीमुळे तो अवजड न वाटता एक प्रतिष्ठित स्वरूप प्राप्त करतो; नारंगी रंगाव्यतिरिक्त, हा एकमेव फॉन्ट आहे जो सबस्टॅकची ओळख दर्शवतो.
- Spectral — बदली: Charter · रूपरेषा 400 · लांब लेखांसाठी असलेला हा सेरिफ फॉन्ट वाचन कक्षांमध्ये आणि न्यूजफीडमधील मजकुरात संपादकीय साहित्याची वाचनीयता सुधारण्यासाठी वापरला जातो. ओळींमधील थोडे कमी अंतर (१.२०) न्यूजरूममध्ये आढळणारी संक्षिप्तता कायम ठेवत, परिच्छेद वाचायला आरामदायक बनवते.
अंतर आणि स्वरूप
| उद्देश | अर्थ |
|---|---|
| घनता | दाट |
| मूलभूत पायरी | 8px |
| बटण त्रिज्या | 9999px |
| कार्ड त्रिज्या | 12px |
| सावल्या | सावल्यांऐवजी सीमा नाहीत |
| विभागांच्या दरम्यान | 32px |
| पृष्ठाची रुंदी | 1200px |
एआय तुमची वेबसाईट Substack स्टाईलमध्ये तयार करेल आणि ती भरेल.
- लिंकद्वारे उत्पादने आणि पोस्ट्स भरा - Instagram, TikTok, Facebook.
- तुमच्या जुन्या साइटवरून सामग्री हस्तांतरित करा—फक्त पत्ता नमूद करा.
- सर्वोत्तम इंजिनवर आधुनिक डिझाइन: React ( Next.js) ज्यामध्ये सर्व्हर रेंडरिंग आणि एसईओ ऑप्टिमायझेशन अंगभूत आहेत.
- शोध परिणामांसाठी पूर्णपणे स्वयंचलित एसईओ ऑप्टिमायझेशन आणि न्यूरल नेटवर्क शिफारसी.
समान शैली
- ElevenLabs — उबदार क्रीम रंगांच्या छटा असलेला आणि सुस्पष्ट मथळे असलेला एक छायाचित्र-निबंध. बाऊहाउस-शैलीची एक वही—अंड्याच्या कवचाच्या रंगाचा कागद, काळी शाई, आणि उत्पादने प्रदर्शित करण्यासाठी जांभळ्या व नारंगी रंगाचा एकच ठळक वापर.
- Awesomic — कॉन्फेटीची आठवण करून देणाऱ्या नारंगी विरामचिन्हांसह संपादकीय झिंक जाळी
- Monad — उबदार चर्मपत्रावरील संपादकीय तांत्रिक नियतकालिक
- Dub — लिंकचे मॅट राईस पेपर कंट्रोल पॅनल
- Seline Analytics — गरम कागदावर एक शांत विश्लेषणात्मक टेबल
- Notion — दुपारच्या उन्हात एक गरम कागदी वही
- Anthropic — उबदार वेल्लमवरील एक वैज्ञानिक क्षेत्रीय नियतकालिक—शांत हस्तिदंती पृष्ठभाग, सेरिफ अक्षरातील संपादकीय शीर्षके आणि केवळ आवश्यक कृतीच्या वेळी दिसणारा एकच चिकणमातीचा ठसा.
- Calendly — थंड संगमरवरावर गडद निळी शाई
- Augen Pro — ऍपलच्या पांढऱ्या प्रेझेंटेशनमध्ये, एकरंगी जागेत एकमेव ॲक्सेंट म्हणून स्वच्छ, वजनहीन, इलेक्ट्रिक निळ्या रंगाचा वापर करण्यात आला आहे.
- Antimetal — क्रीम रंगाच्या कागदावरील संपादकीय वृत्तांत—एका वैज्ञानिक नियतकालिकातील शांत सकाळ, जिथे संयम आत्मविश्वास दर्शवतो आणि सेरिफ्स (अक्षरांची विशिष्ट शैली) मुख्य कार्य करतात.
- Perk — गरम पार्चमेंट पेपरवर इलेक्ट्रिक लाईम
- Ditto — सूर्यप्रकाशित कार्यशाळेत रानफुलांचे नमुने तयार केले जात आहेत. उबदार क्रीम रंगाचा पृष्ठभाग, एक तेजस्वी पिवळा आधार रंग, गडद निळ्या रंगाची शाई आणि कलाकृतीच्या मागे फुलणारे नैसर्गिक रंगांचे आकार.