Superhuman
गोल्डन आवर संपादकीय पैनल
सुपरह्यूमन संपादकीय फोटोग्राफी और सॉफ्टवेयर यूआई के संगम पर टिका है—एक गर्म, चर्मपत्र जैसी सतह (जो कभी भी पूरी तरह सफेद नहीं होती) पर गहरे लाल रंग के ब्रांडिंग तत्व और चमकीले बैंगनी रंग के लहजे दिखाई देते हैं। 460 फ़ॉन्ट में सेट की गई हेडलाइनें ज़ोर से चिल्लाने के बजाय फुसफुसाती हैं, जिससे पूरे पृष्ठ की सिनेमाई फोटोग्राफी को मुख्य भूमिका निभाने का मौका मिलता है, जबकि पारदर्शी उत्पाद यूआई कार्ड छवियों के ऊपर कांच की तरह तैरते हैं। रंग पैलेट ज्यादातर समय शांत और संपादकीय बना रहता है: क्रीम रंग की सतहें, चारकोल रंग का टेक्स्ट, हल्के गर्म-भूरे रंग के बॉर्डर और तत्वों के बीच पर्याप्त जगह, जबकि रंग का उपयोग केवल ब्रांड को दर्शाने के लिए किया जाता है—एक गहरा लाल रंग का कॉल-टू-एक्शन, बैंगनी लिंक, एक हल्का बैंगनी रंग का ऐड-ऑन बटन। सिस्टम जानबूझकर यूआई सतहों पर गहरी छाया और ग्रेडिएंट से बचता है; गहराई स्टैकिंग प्रभाव के बजाय लेयर्ड फोटोग्राफी और शीर्षक में सूक्ष्म पृष्ठभूमि धुंधलेपन के माध्यम से प्राप्त की जाती है।
मुख्य एलिमेंट एक फुल-विड्थ फ़ोटोग्राफ़ है जिसमें बीच में एक हेडलाइन (48-64px/460) है और एक सिंगल कॉल टू एक्शन है जिसमें वाइन की इमेज है। इसके बाएँ और दाएँ किनारों पर फ्लोटिंग ट्रांसलूसेंट प्रोडक्ट UI कार्ड्स ओवरले किए गए हैं। मुख्य एलिमेंट के नीचे एक सफ़ेद स्ट्राइप लोगो स्ट्रिप (प्रति पंक्ति 6 सेल, अधिकतम चौड़ाई सीमित) है, फिर पार्चमेंट कैनवास पर सफ़ेद कार्ड सतहों वाला एक टैब सेक्शन है। पेज के लगभग दो-तिहाई हिस्से में एक गहरा फ़िरोज़ी रंग की स्ट्रिप लय को तोड़ती है—फुल-विड्थ, दो कॉलम (बाईं ओर इमेज, दाईं ओर टेक्स्ट)—जो स्क्रॉल करते समय एकमात्र टोनल कंट्रास्ट बनाती है। इसके बाद एक ग्रेडिएंट एटमॉस्फेरिक स्ट्रिप आती है। सेक्शन के बीच वर्टिकल स्पेसिंग 64-96px है। अधिकतम कंटेंट चौड़ाई लगभग 1200px है, जिसमें मुख्य एलिमेंट और डार्क स्ट्रिप व्यूपोर्ट की पूरी चौड़ाई में फैली हुई हैं। नेविगेशन एक सिंगल फिक्स्ड हेडर है जिसका बैकग्राउंड ब्लर है; कोई साइडबार नहीं, कोई मेगा मेनू नहीं। फ़ूटर एक पूर्ण चौड़ाई वाला बरगंडी रंग का पृष्ठ है जिसमें लिंकों का बहु-स्तंभ लेआउट है। समग्र लय इस प्रकार है: मुख्य फ्रेम → शांत सफेद/क्रीम रंग की सामग्री → मुख्य छवि वाली गहरी पट्टी → वायुमंडलीय ग्रेडिएंट → बरगंडी फ़ूटर, संपादकीय लय बनाने के लिए हल्की और गहरी पट्टियों का बारी-बारी से उपयोग किया गया है।
मुख्य दृश्य तत्व सिनेमाई फोटोग्राफी है: खुले आकाश के सामने एक पूर्ण-चौड़ाई वाला चित्र केंद्रबिंदु के रूप में कार्य करता है, और पृष्ठ के निचले भाग में एक दूसरी वायुमंडलीय पट्टी स्थित है। छवि गर्म टोन वाली, सूक्ष्म रूप से शांत और प्रोफ़ाइल में ली गई है, जो सुनहरे घंटे की याद दिलाती है, जिससे कॉर्पोरेट की तुलना में संपादकीय जैसा अनुभव होता है। एक विचारमग्न व्यक्ति की तस्वीर पर पारदर्शी ज्यामितीय आयतों और हस्तलिखित शिलालेखों वाली एक गहरी पट्टी आरोपित की गई है—यह एक एकल छवि के बजाय सतहों का एक कोलाज है। उपयोगकर्ता इंटरफ़ेस को अलग-अलग स्क्रीनशॉट के बजाय सीधे तस्वीर पर आरोपित तैरते हुए कांच के कार्ड के रूप में प्रस्तुत किया गया है। ग्रेडिएंट वायुमंडलीय पट्टी को छोड़कर, कोई स्टॉक चित्र, कोई 3डी रेंडर या कोई अमूर्त सजावटी रूप नहीं हैं। आइकन न्यूनतम मोनोक्रोम लाइन आइकन हैं, जिनकी चौड़ाई लगभग 16-20 पिक्सेल है, और इनकी चौड़ाई 460 पॉइंट टेक्स्ट वेट के अनुरूप है।
पैलेट
ब्रांड
- Midnight Wine
#421d24— मुख्य एक्शन बटन, विज्ञापन बैनर और फुटर एक गर्म, लगभग काले बरगंडी रंग के हैं जो लाल रंग की बजाय स्याही जैसा लगता है, और यह रंग पैलेट को हावी हुए बिना स्थिरता प्रदान करता है। - Royal Violet
#714cb6— बैंगनी रंग का उपयोग लिंक, टैग और छोटे वाक्यांशों को हाइलाइट करने के लिए किया जाता है। इसे कॉल टू एक्शन के लिए प्राथमिक रंग के रूप में उपयोग नहीं किया जाना चाहिए।
तटस्थ
- Lilac Mist
#d4c7ff— सेकेंडरी सरफेस फिल, लाइट आइकन और घोस्ट बटन बैकग्राउंड सभी में एक म्यूटेड पर्पल रंग है जो अनावश्यक ध्यान आकर्षित किए बिना ब्रांड की शैली का संकेत देता है। - Deep Lagoon
#0c4243— स्ट्रिप के लिए इस्तेमाल की जाने वाली गहरी पृष्ठभूमि, जिसे मुख्य कथात्मक तत्व के रूप में उपयोग किया जाता है, सिस्टम में एकमात्र गहरी सतह है, जिसे एक ओवरलेड ज्यामितीय पैटर्न के साथ संयोजित किया गया है। - Warm Parchment
#f2f0eb— पृष्ठ की कार्य सतह प्रमुख तत्व है; आधार के रूप में सफेद रंग के स्थान पर एक गर्म क्रीम रंग का उपयोग किया गया है, जो पूरी प्रणाली को संपादकीय गर्माहट प्रदान करता है। - Soft Mist
#e3e3e2— बारीक बॉर्डर, कार्ड की रूपरेखा, विभाजक रेखाएं—एक गर्म, हल्का धूसर रंग जो चर्मपत्र के साथ घुलमिल जाता है लेकिन किनारों को स्पष्ट रूप से परिभाषित करता है। - Ink Charcoal
#292827— मुख्य पाठ, शीर्षक, आइकन की रूपरेखा - एक गर्म, लगभग काला रंग जिसमें पर्याप्त भूरापन हो ताकि कागज पर स्याही का एहसास हो, कभी ठंडा नहीं #000 - Stone Gray
#666666— द्वितीयक पाठ, सहायक पाठ, संक्षिप्त विवरण - एक ही मध्यम ग्रे रंग का उपयोग किया गया है, जिसका प्रयोग संयम से किया गया है ताकि यह मुख्य पाठ से प्रतिस्पर्धा न करे।
टाइपोग्राफी
12 से 64px तक · 8 चरण
- Super Sans VF — प्रतिस्थापन: Inter (closest open equivalent for variable weight range) · रूपरेखा 460, 500, 540, 600, 700 · पूरे सिस्टम में केवल एक ही फ़ॉन्ट का उपयोग किया गया है। एक्सिस वैरिएबल 460 (सभी बड़े शीर्षकों के लिए एक विशिष्ट, थोड़ा क्रॉप किया हुआ फ़ॉन्ट) से लेकर 540 (मुख्य भाग के लिए विशेष रूप से हाइलाइट किया गया टेक्स्ट) और 700 (छोटे, बोल्ड कैप्शन) तक की रेंज में उपलब्ध हैं। एक विशेष रूप से डिज़ाइन किया गया VF 460-वेट वाले शीर्षकों को अव्यवस्थित के बजाय अधिक सुनियोजित दिखाता है—48-64px के आकार और कम स्पेसिंग के साथ, "थोड़ा क्रॉप किया हुआ" प्रभाव पतला लगने के बजाय आत्मविश्वासपूर्ण प्रतीत होता है।
अंतराल और रूप
| उद्देश्य | अर्थ |
|---|---|
| घनत्व | घना |
| बुनियादी कदम | 8px |
| बटन त्रिज्या | 16px |
| कार्ड त्रिज्या | 16px |
| छैया छैया | नहीं - छाया के बजाय बॉर्डर |
| अनुभागों के बीच | 64-96px |
| पृष्ठ की चौड़ाई | 1200px |
एआई आपकी वेबसाइट को Superhuman शैली में बनाएगा और उसमें डेटा भरेगा।
- इन लिंक के माध्यम से उत्पादों और पोस्ट से भरें - Instagram, TikTok, Facebook ।
- अपनी पुरानी वेबसाइट से सामग्री स्थानांतरित करें—बस पता निर्दिष्ट करें।
- सर्वश्रेष्ठ इंजन पर आधुनिक डिजाइन: React ( Next.js) जिसमें सर्वर रेंडरिंग और एसईओ अनुकूलन की सुविधा अंतर्निहित है।
- खोज परिणामों और न्यूरल नेटवर्क अनुशंसाओं के लिए पूरी तरह से स्वचालित एसईओ अनुकूलन।
समान शैलियाँ
- AI for Business — गर्म धूसर रंगों में ब्रूटलिस्ट शैली का संपादकीय शोरूम
- Jeton — वार्म मार्बल पर फिनटेक के बारे में एक संपादकीय
- Airtable — अलग-अलग रंगों से चिह्नित अध्यायों वाला एक आरामदायक सेमिनार
- Osmo — धूसर कंक्रीट पर बना डेवलपर्स संग्रहालय
- Linktr — संपादकीय पोस्टर मिठाई की तरह सजे हुए हैं। वेबसाइट को रंगीन ब्लॉकों में डिज़ाइन किया गया है, जिसमें चमकीले हरे रंग की हेडलाइनें कोबाल्ट-नीले रंग की पृष्ठभूमि पर छपी हैं, और सफेद गोली के आकार के नेविगेशन तत्व बरगंडी रंग के बैकग्राउंड के ऊपर तैरते हुए दिखाई देते हैं।
- Outsource Consultants — बोन पेपर पर छपी एक बड़े आकार की आर्किटेक्चरल शीट। एक मोनोग्राफिक सौंदर्यशास्त्र, जहाँ इंडिगो का एक चमकीला धब्बा अन्यथा गर्म, टाइपोग्राफिक रूप से मैक्सिमलिस्ट ग्रिड को बाधित करता है।
- Streamtime — स्पर्शनीय रचनात्मक मूड बोर्ड - डिज़ाइनर स्क्रैपबुकिंग टेबल
- Switch-Lit — क्रीम रंग के कागज पर स्याही से मुद्रित संपादकीय ग्रिड
- HubSpot — हल्के क्रीम रंग का कागज जिस पर नारंगी रंग का हल्का सा स्पर्श है। हबस्पॉट एक भारी कागज पर छपी डिज़ाइनर पत्रिका जैसा दिखता है—सेरिफ़ हेडलाइन, हल्के क्रीम रंग के पन्ने और एक चटख नारंगी रंग का स्पर्श जो केवल सबसे महत्वपूर्ण बिंदुओं को उजागर करता है।
- Granola — गर्म चर्मपत्र पर लिखे गए फील्ड नोट्स—ग्रैनोला किसी धूप से रोशन डेस्क पर खुली हुई पुरानी मोल्सकिन नोटबुक की तरह लगती है: सेरिफ हेडिंग्स मजबूती का एहसास देती हैं, ऑर्गेनिक हरे रंग के एक्सेंट पौधों से बनी स्याही की तरह लगते हैं, और कार्ड के हाशिये में बनी बारीक रेखाएं हस्तलिखित नोट्स जैसी दिखती हैं।
- Secure — हल्की धूप में किसी यूरोपीय कैफे में की गई बातचीत वीडियो कॉलिंग का एक गर्मजोशी भरा और स्टाइलिश रूप है, जहां सेरिफ हेडलाइन किसी तकनीकी उत्पाद पृष्ठ के बजाय एक विचारशील पत्रिका लेख की तरह लगती हैं।
- Mockups made easy — सफेद कागज पर संपादकीय डिजाइन स्टूडियो