Shopify
मिडनाइट ग्रीनहाउस - गहरे फ़िरोज़ी रंग की पृष्ठभूमि पर ट्रेडमार्क खिलते हैं, जो पुदीने की एक हल्की सी चमक से जगमगाते हैं।
Shopify का डिज़ाइन सिस्टम वाणिज्य के लिए एक आधुनिक कार्यशाला जैसा है: गहरे फ़िरोज़ी हरे रंग से रंगा हुआ लगभग काला कैनवास, चौड़ा और आत्मविश्वास से भरा सैन्स-सेरिफ़ फ़ॉन्ट, और एक चमकीला मिंट रंग जो इंटरैक्टिव पलों को जीवंत बनाता है। इंटरफ़ेस एक अंधेरे कमरे जैसा दिखता है, जहाँ उत्पाद और ब्रांड प्रकाश के स्रोत हैं—फ़ोटो और स्टोरफ्रंट लगभग काली सतहों पर चमकते हैं, जबकि क्रोम तत्व धुंधले दिखाई देते हैं। घटक ज्यामितीय लेकिन कोमल हैं: पतले बॉर्डर वाले 12px त्रिज्या के कार्ड, पिल-आकार के बटन, और 330-वेट का फ़ॉन्ट जो आकार को ज़ोर से चिल्लाने के बजाय धीरे से दर्शाता है। लिंक, टैग और फ़ोकस स्टेट्स पर एक ही रंगीन विराम चिह्न (#36f4a4) का उपयोग बहुत कम किया गया है, ताकि कार्यात्मक पलों के लिए रंग का उपयोग किया जा सके और व्यापारी की कहानियाँ दृश्य केंद्र बिंदु बनी रहें।
अधिकतम चौड़ाई लगभग 1280px है, जो केंद्र में स्थित है, और पूरी चौड़ाई वाले स्प्लैश ब्लॉक फोटो कंटेनर से आगे तक फैले हुए हैं। पेज का पैटर्न बदलता रहता है: (1) एक पूरी चौड़ाई वाला गहरा स्प्लैश पेज जिस पर हेडलाइन और कॉल-टू-एक्शन बटन ओवरले किए गए हैं, (2) आरामदायक गहरे सेक्शन जिनमें अधिकतम चौड़ाई वाले टेक्स्ट और इमेज ब्लॉक 2 कॉलम में या इमेज ग्रिड 3 कॉलम में हैं, (3) इंटरैक्टिव शोकेस पैनल (प्रोडक्ट कार्ड, शिपिंग कैलकुलेटर, विश्व मानचित्र) जो गहरे कैनवास पर उभरे हुए कार्ड के रूप में प्रदर्शित होते हैं। नेविगेशन एक निश्चित टॉप बार है जिसमें लोगो + 3 नेविगेशन तत्व + सेकेंडरी लिंक + मुख्य कॉल-टू-एक्शन बटन हैं, ये सभी दाईं ओर संरेखित हैं। वर्टिकल पैटर्न में सेक्शन के बीच 80px का गैप है और एक सहज ट्रांजिशन है—गहरे सेक्शन के बीच कोई विभाजक नहीं है, केवल सतह के रंग में बदलाव है।
विज़ुअल डिज़ाइन मुख्य रूप से रिटेलर पर केंद्रित है: उत्पाद की पूरी साइज़ की तस्वीरें और ब्रांड इवेंट्स की तस्वीरें विज़ुअल प्रभाव का मुख्य केंद्र हैं, अक्सर बड़े बैकग्राउंड पर सफेद टेक्स्ट के साथ। इमेज को बारीकी से क्रॉप किया गया है, उनमें हाई-कॉन्ट्रास्ट है और वे उत्सवपूर्ण हैं (नैस्डैक की घंटी बजना, सामूहिक अभिवादन, हाथों में उत्पादों के क्लोज़-अप)। गहरा बैकग्राउंड ऐसा आभास देता है जैसे इन तस्वीरों पर स्पॉटलाइट पड़ी हो। इलस्ट्रेशन न्यूनतम हैं—मुख्य व्याख्यात्मक कार्य एम्बेडेड उत्पाद छवियों और स्टोरफ्रंट के स्क्रीनशॉट द्वारा किया जाता है। आइकन मोनोक्रोम हैं, जिनकी लाइन की चौड़ाई 1.5–2px है, आमतौर पर सक्रिय अवस्था के लिए सफेद या #36f4a4 रंग के होते हैं।
पैलेट
ब्रांड
- Shopify Mint
#36f4a4— सक्रिय नेविगेशन संकेतक, फोकस रिंग, टैग हाइलाइट्स और लिंक पर होवर हाइलाइट्स ही एकमात्र रंगीन चमक हैं जो एक अंधेरे पृष्ठभूमि के खिलाफ सक्षम इंटरैक्टिविटी की भावना पैदा करते हैं।
तटस्थ
- Midnight Forest
#02090a— पेज कैनवास, हेडर बैकग्राउंड इमेज, सेक्शन बैकग्राउंड इमेज - Deep Lichen
#061a1c— मुख्य कार्ड सतहें, उभरे हुए पैनल, सामग्री ब्लॉक। - Shaded Fern
#072720— नेविगेशन पैनल, अतिरिक्त कार्ड, पैनल का मुश्किल से दिखाई देने वाला उभार। - Spruce Border
#1e2c31— कार्डों के लिए पतली बॉर्डर, विभाजक रेखाएं, इनपुट फ़ील्ड की रूपरेखा। - Abyss Indigo
#000a1e— उत्पादों/प्रदर्शनों को प्रदर्शित करने के लिए अतिरिक्त सतह, कार्यों के विवरण वाले पैनल। - Pure White
#ffffff— मुख्य पाठ, बटन फिल, शीर्षक, लोगो।
टाइपोग्राफी
12 से 70px तक · 8 चरण
- Neue Haas Grotesk — प्रतिस्थापन: Inter · रूपरेखा 330, 400, 500, 550, 600 · मुख्य टाइपोग्राफिक प्रणाली में हेडलाइंस के लिए 70–96px (330–400) का फॉन्ट वेट होता है, जो भड़कीलेपन के बजाय सूक्ष्मता का परिचय देता है; बॉडी टेक्स्ट के लिए 16–18px (400–500) का फॉन्ट वेट होता है; और नेविगेशन और यूजर इंटरफेस के लिए 14–16px (500–550) का फॉन्ट वेट होता है। बड़े स्क्रीन साइज़ पर 330 का अल्ट्रा-लाइट फॉन्ट वेट एक विशिष्ट विशेषता है: यह भारीपन के बजाय संयम के माध्यम से आत्मविश्वास का भाव व्यक्त करता है।
- Inter Variable — प्रतिस्थापन: Inter · रूपरेखा 400, 420, 450, 550 · नेविगेशनल इंटरफ़ेस तत्वों, छोटे नोट्स, टैब कंट्रोल और फ़ूटर में माइक्रो टेक्स्ट में उपयोग किया जाने वाला एक द्वितीयक फ़ॉन्ट प्रकार। इसके थोड़े बड़े लोअरकेस अक्षर और मानक अक्षर स्पेसिंग इसे कॉम्पैक्ट साइज़ में अधिक पठनीय बनाते हैं। यह उन स्थितियों के लिए भी उपयुक्त है जहाँ 420-वेट का फ़ॉन्ट नियमित और मध्यम आकार के फ़ॉन्ट के बीच की कमी को पूरा करता है।
अंतराल और रूप
| उद्देश्य | अर्थ |
|---|---|
| घनत्व | औसत |
| बुनियादी कदम | 12px |
| बटन त्रिज्या | 9999px |
| कार्ड त्रिज्या | 12px |
| छैया छैया | नहीं - छाया के बजाय बॉर्डर |
| अनुभागों के बीच | 80px |
| पृष्ठ की चौड़ाई | 1280px |
एआई आपकी वेबसाइट को Shopify शैली में बनाएगा और उसमें डेटा भरेगा।
- इन लिंक के माध्यम से उत्पादों और पोस्ट से भरें - Instagram, TikTok, Facebook ।
- अपनी पुरानी वेबसाइट से सामग्री स्थानांतरित करें—बस पता निर्दिष्ट करें।
- सर्वश्रेष्ठ इंजन पर आधुनिक डिजाइन: React ( Next.js) जिसमें सर्वर रेंडरिंग और एसईओ अनुकूलन की सुविधा अंतर्निहित है।
- खोज परिणामों और न्यूरल नेटवर्क अनुशंसाओं के लिए पूरी तरह से स्वचालित एसईओ अनुकूलन।
समान शैलियाँ
- Retool — एक गर्म ओब्सीडियन कार्यशाला - सटीक औजारों के लिए एक सतह, सुलगते अंगारों से रोशन, जहाँ सब कुछ बनाया जाता है
- Elektron — आधी रात के समय उपकरण नियंत्रण पैनल लगभग एक काले कैनवास जैसा दिखता है, जहां उत्पाद की तस्वीरें चमकती हैं जबकि इंटरफ़ेस लगभग अदृश्य रहता है।
- REKKI — फोटो लैब में फ्लाइट कंट्रोल पैनल
- OFFFICE : — एक मोनोलिथिक फॉन्ट में डूबी हुई एक नॉयर गैलरी
- Clyde — शो रूम में सिर्फ एक स्पॉटलाइट है, और यह लगभग एक अंधेरी गैलरी है जहां कमरे में एकमात्र रंग एक गर्म ग्रेडिएंट बॉल है।
- Channel Studio — एक स्टूडियो फोटो लैब जिसमें एक मूंगे का लैंपशेड है
- Electronic Materials Office — कोयले से सजी एक गैलरी में एक सुलगता हुआ अंगारा
- ORYZO AI — एक डार्करूम के बारे में एक फोटो निबंध। गर्म अंधेरे में तैरती हुई एक अकेली वस्तु, क्रीम रंग के फ़ॉन्ट ही एकमात्र सजावट हैं।
- Factory — आधी रात को "वॉर रूम" का टर्मिनल। "फैक्ट्री" एक बिल्कुल काला कंट्रोल पैनल है जहाँ एक सफेद कार्ड टॉर्च की रोशनी में किसी संदेश की तरह गिरता है—कमरे में एकमात्र वस्तु स्वयं काम है।
- Hungry Tiger — तंदूर की दीवार पर हल्दी के चमकीले रंगों से बनी कलाकृति। सुनहरे और गहरे भूरे रंगों का एक सामंजस्यपूर्ण संयोजन, और इतने बड़े अक्षरों में लिखावट कि यह किसी वेबसाइट की बजाय मसाले बाजार के साइनबोर्ड जैसी दिखती है।
- Bibliothèque — स्पॉटलाइट के नीचे एक काले घन के आकार की गैलरी – एक विशाल, अंधेरे हॉल में अकेली प्रकाशित प्लेट
- Apple (España) — प्रकाशयुक्त साज-सज्जा वाला काला रंगमंच