Substack

संपादकीय कार्यालय में डेस्क पर नारंगी स्याही के धब्बे

सबस्टैक एक जाने-माने न्यूज़ रूम डैशबोर्ड जैसा दिखता है—एक सफ़ेद कैनवास, गर्म, लगभग काले रंग का टेक्स्ट, और कंटेंट निर्माण के प्रत्येक चरण को दर्शाने वाला एक चमकीला नारंगी रंग। दृश्य संरचना सजावट के बजाय सघनता पर आधारित है: पतली धूसर रेखाएँ फ़ीड तत्वों को अलग करती हैं, अवतार छोटे हैं, मेटाडेटा हल्का है, और पाठक की नज़र नारंगी रंग के कॉल टू एक्शन, नारंगी लोगो, नारंगी "सब्सक्राइब" लिंक और नारंगी "क्रिएट" बटन पर केंद्रित होती है। सतहों को सपाट और खुला रखा गया है—कोई कार्ड शैडो नहीं, कोई क्रोम पैनल तत्व नहीं—जिससे टाइपोग्राफी (एक कॉम्पैक्ट क्रोम सिस्टम UI तत्व को कस्टम सेरिफ़ हेडलाइन फ़ॉन्ट के साथ जोड़ा गया है) संपादकीय भार को वहन करती है। इसकी विशिष्ट शैली संयमित क्रोम तत्व और जीवंत, एकल-रंग के पॉप हैं: एक रीडिंग ऐप जो प्रकाशन उपकरण जैसा अनुभव कराता है।

तीन कॉलम वाला डेस्कटॉप लेआउट: एक स्थिर बायां साइडबार (~200px, आइकन और लेबल के साथ नेविगेशन, स्टिकी), एक मध्य फ़ीड (अधिकतम चौड़ाई ~600px, पोस्ट की लंबवत स्क्रॉलिंग सूची), और एक स्थिर दायां साइडबार (~300px, खोज + अनुशंसाएं + पंजीकरण)। मध्य फ़ीड संपादकीय केंद्र है—कोई कार्ड नहीं, बस पतले विभाजकों और अनुभागों के बीच 32px के अंतराल के साथ एक दूसरे के ऊपर पोस्ट व्यवस्थित हैं। मुख्य बैनर फ़ीड के शीर्ष पर एक पूर्ण-चौड़ाई वाले कार्ड के रूप में स्थित है। बाएं साइडबार में ब्रांड लोगो (ओवरलेड लाइनों वाला एक नारंगी चिह्न), छह नेविगेशन आइटम और नीचे एक पूर्ण-चौड़ाई वाला नारंगी "बनाएं" बटन है। दाएं साइडबार में एक खोज फ़ील्ड, एक पंजीकरण कार्ड और पढ़ने के लिए "अगला" सूची है। नेविगेशन न्यूनतम है—कोई शीर्ष बार नहीं, कोई ब्रेडक्रम्ब्स नहीं; साइडबार ही नेविगेशन है। सामग्री का घनत्व अधिक है: पोस्ट में 12-13px मेटाडेटा और 15-19px बॉडी टेक्स्ट का उपयोग किया जाता है, जिससे बाजार के कार्ड ग्रिड की अनुभूति के बजाय समाचार पत्र जैसी लय बनती है।

फ़ोटो उपयोगकर्ता द्वारा निर्मित सामग्री हैं (लेखक अवतार, पोस्ट थंबनेल, पोस्ट इमेज) - सबस्टैक अपनी ओर से सजावटी फ़ोटो प्रदान नहीं करता है। मुख्य कार्ड में फ़िरोज़ी से हरे रंग का ग्रेडिएंट है और पृष्ठभूमि के रूप में अमूर्त चित्रात्मक तत्व (ज्यामितीय आकार, कलम और नोट्स जैसी शैलीबद्ध वस्तुएँ) हैं। दाईं ओर के साइडबार में पोस्ट थंबनेल छोटे (64px) हैं, 8px त्रिज्या में हैं, और पठन सूची के पूर्वावलोकन के रूप में कार्य करते हैं। समग्र दृश्य भाषा पाठ-आधारित है: इंटरफ़ेस एक पठन कैनवास है, और छवियाँ वातावरण बनाने के बजाय छोटे दृश्य एंकर के रूप में कार्य करती हैं।

अतिसूक्ष्मवाद शुद्ध SaaS संपादकीय

https://substack.com

पैलेट

ब्रांड

Signal Orange #ff6719 — नारंगी रंग का उपयोग सजावटी विवरणों में द्वितीयक संकेत के रूप में और कभी-कभार उपयोग होने वाले संकेतों को उजागर करने के लिए किया जाता है। इसे कार्रवाई के लिए प्राथमिक रंग के रूप में उपयोग नहीं किया जाना चाहिए।

तटस्थ

Ink #363737 — बॉडी टेक्स्ट—मुख्य पाठ, हेडिंग, पोस्ट टाइटल, टाइमस्टैम्प और लेखक के नाम; पढ़ने में आसानी के लिए शुद्ध #000 के बजाय एक गर्म, लगभग काला रंग।
Paper #ffffff — पेज कैनवास, कार्ड की सतहें, इनपुट फ़ील्ड और नेविगेशन बैकग्राउंड प्रमुख सतहें हैं जो इंटरफ़ेस के विशाल बहुमत को कवर करती हैं।
Charcoal #232525 — उच्च चयन स्तर वाले अतिरिक्त टेक्स्ट और लिंक के लिए होवर स्थिति; कोड ब्लॉक और चयन ब्लॉक के लिए इंक मोड से भी गहरी स्थिति।
Stone #777777 — द्वितीयक यूआई तत्वों, विभाजकों और म्यूटेड लेबलों के लिए एक तटस्थ रंग समर्थित है। इसे कॉल टू एक्शन के प्राथमिक रंग के रूप में उपयोग नहीं किया जाना चाहिए।
Ash #b6b6b6 — पतली बॉर्डर लाइनें, बटन की आउटलाइन, आइकन की आउटलाइन, निष्क्रिय नियंत्रणों पर बॉर्डर।
Mist #c8c8c8 — विभाजक रेखाएं, आइकनों के लिए सूक्ष्म पृष्ठभूमि, कंकाल के रूप में खाली सेल भरना।

टाइपोग्राफी

12 से 32px तक · 5 चरण

system-ui — प्रतिस्थापन: -apple-system · रूपरेखा 400, 500, 600 · यूज़र इंटरफ़ेस और बॉडी टेक्स्ट के लिए मुख्य फ़ॉन्ट का उपयोग नेविगेशन लेबल, बटन, संदेश टेक्स्ट, मेटाडेटा, इनपुट फ़ील्ड और सभी इंटरफ़ेस तत्वों के लिए किया जाता है। मेटाडेटा के लिए 12-13px और बॉडी टेक्स्ट के लिए 15-19px के कॉम्पैक्ट आकार से सघन न्यूज़ फ़ीड का अनुभव मिलता है। बॉडी टेक्स्ट का फ़ॉन्ट वेट 400, नेविगेशन तत्वों और बटन लेबल का वेट 500 और हाइलाइट किए गए संदेश शीर्षकों और अनुभाग शीर्षकों का वेट 600 है।
Cahuenga — प्रतिस्थापन: Charter · रूपरेखा 500 · उत्पाद-स्तरीय शीर्षकों (साइडबार शीर्षक, पंजीकरण कार्ड शीर्षक, मुख्य पाठ) के लिए एक विशिष्ट सजावटी सेरिफ़ फ़ॉन्ट। इसका मध्यम वज़न और हल्की लाइन हाइट इसे भारी-भरकम लगे बिना एक विशिष्ट रूप प्रदान करती है; नारंगी रंग के अलावा, यह एकमात्र फ़ॉन्ट है जो सबस्टैक की पहचान को दर्शाता है।
Spectral — प्रतिस्थापन: Charter · रूपरेखा 400 · लंबे लेखों के लिए एक सेरिफ़ फ़ॉन्ट—जिसका उपयोग पठन कक्षों और समाचार फ़ीड सामग्री में संपादकीय सामग्री की पठनीयता को बेहतर बनाने के लिए किया जाता है। थोड़ी कम पंक्ति अंतराल (1.20) समाचार कक्षों की विशिष्ट संक्षिप्तता को बनाए रखते हुए पैराग्राफ को आराम से पढ़ने को सुनिश्चित करता है।

अंतराल और रूप

उद्देश्य	अर्थ
घनत्व	घना
बुनियादी कदम	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 — धूप से जगमगाती एक कार्यशाला में जंगली फूलों के नमूने तैयार किए जा रहे हैं। गर्म क्रीम रंग की सतहें, चमकीला पीला आधार रंग, गहरे नीले रंग की स्याही, और कलाकृति के पीछे खिलते हुए जैविक रंग के आकार।