
Shop
सफेद संगमरमर पर तैरता हुआ व्यापारिक तारामंडल
ऑनलाइन स्टोर "व्हाइट कैनवस" मॉडल पर काम करता है, जिसमें उत्पादों को थंबनेल ग्रिड के बजाय बड़े, घुमावदार इमेज कार्ड के रूप में प्रदर्शित किया जाता है। पूरा इंटरफ़ेस बेहद स्मूथ है: 20-28px रेडियस, पिल-शेप कंट्रोल और कॉम्पैक्ट 16px GT स्टैंडर्ड बॉडी, जिसमें टाइट नेगेटिव ट्रैकिंग है जो टेक्स्ट को क्रिस्प और बोल्ड बनाती है। सिस्टम का एकमात्र बोल्ड एक्सेंट वाइब्रेंट पर्पल (#5433eb) है, जो लोगो, गोलाकार सर्च रिजल्ट फ़ील्ड और उसी बटन पर टिंटेड शैडो के रूप में दिखाई देता है। बाकी पैलेट वार्म न्यूट्रल है: सफेद सतहें, एक सूक्ष्म कूल ग्रे कैनवस, सूक्ष्म बॉर्डर और लगभग काला टेक्स्ट। 12px गटर के साथ डेंसिटी कॉम्पैक्ट रहती है, लेकिन हीरो और कैटेगरी स्ट्रिप्स 64-80px के उदार वर्टिकल रिदम के कारण जीवंत दिखती हैं, जिससे खरीदारी का अनुभव कैटलॉग ब्राउज़ करने जैसा नहीं बल्कि ब्राउज़िंग जैसा लगता है।
अधिकतम चौड़ाई 1200px है, जो एक पारदर्शी #f2f4f5 कैनवास पर केंद्रित है, और बाईं ओर 64px चौड़ाई का एक स्थायी साइडबार है जिसमें केवल नेविगेशन आइकन हैं। मुख्य तत्व एक पूर्ण-चौड़ाई वाली पट्टी है, जिसमें उत्पाद कार्ड एक केंद्रित बैंगनी "शॉप" लोगो के ऊपर स्थित हैं, और इसके ठीक नीचे एक पिल-आकार का सर्च बार है। श्रेणी पिल्स सर्च बार के नीचे एक ही केंद्रित पंक्ति में व्यवस्थित हैं। सामग्री अनुभाग (महिला, पुरुष, सौंदर्य, घर, शिशु और बच्चे) निर्दिष्ट पट्टियों के रूप में हैं, जिनमें से प्रत्येक में उत्पाद छवियों के साथ 4-कॉलम ग्रिड या 2-कॉलम "मुख्य तत्व और ग्रिड" संरचना है। ऊर्ध्वाधर अंतराल पर्याप्त है: मुख्य अनुभागों के बीच 64–80px का अंतर है। फ़ूटर पृष्ठ के निचले भाग में एक गहरे रंग की पट्टी है जिसमें कॉलम-आकार के लिंक समूह हैं। क्षैतिज उत्पाद पैनलों के दाईं ओर कैरोसेल तीर बिना पेजिंग बिंदुओं के स्क्रॉल करने योग्य सामग्री को इंगित करते हैं।
फोटोग्राफी प्रमुख दृश्य तत्व है: सफेद पृष्ठभूमि पर पूर्ण-स्क्रीन उत्पाद तस्वीरें, 1:1 अनुपात में क्रॉप की गई, और गर्म मिट्टी के रंगों (बेज, टेराकोटा, सेज, आइवरी) वाली जीवनशैली छवियां। उत्पाद छवियों का अपना रंग है—उपयोगकर्ता इंटरफ़ेस रंगहीन रहता है, जिससे उत्पाद के रंग दृश्य विविधता प्रदान करते हैं। ब्रांड लोगो अलग-अलग आइकन के बजाय गहरे या हल्के मुख्य चित्रों पर ओवरले टेक्स्ट के रूप में दिखाई देते हैं। मुख्य संरचना में, उत्पाद कार्ड वर्डमार्क के ऊपर एक तैरते हुए, हल्के से ओवरलैप होते हुए समूह के रूप में स्थित हैं। श्रेणी आइकन को छोड़कर, आइकन न्यूनतम और मोनोक्रोम (काली रूपरेखा) हैं, जिनमें एक ही ब्रांड रंग का उपयोग किया गया है। उत्पाद छवियों में कोई चित्र, 3डी प्रभाव या ग्रेडिएंट नहीं हैं।
पैलेट
ब्रांड
- Shop Violet
#5433eb— सेंड बटन, बिंदीदार टेक्स्ट मार्क और ब्रांड लोगो ही ऐसे तत्व हैं जो सफेद पृष्ठभूमि पर गतिविधि और विशिष्टता को उजागर करते हैं। - Violet Wash
#c0b5f3— बैंगनी रंग के सेंड बटन के पीछे एक पारदर्शी आभा मंडल है जो रंग बदले बिना अपनी चमक बरकरार रखता है।
तटस्थ
- Canvas Mist
#f2f4f5— उभरे हुए कार्डों के पीछे पृष्ठ की पृष्ठभूमि और अतिरिक्त सतह उपचार। - Pure White
#ffffff— कार्ड, इनपुट फ़ील्ड, फ़्लोटिंग साइन और पिल-आकार के बटन के लिए मुख्य सतह। - Ink Black
#000000— मुख्य पाठ, शीर्षक, आइकन, नेविगेशन प्रतीक और उत्पाद कार्ड डार्क मोड में। - Faint Border
#ebebeb— कार्डों पर पतली विभाजक रेखाएं, इनपुट फ़ील्ड की रूपरेखा और गोली के आकार के बटन फ्रेम। - Muted Gray
#787574— निष्क्रिय होने पर द्वितीयक पाठ, नेविगेशन लेबल, आइकन की रूपरेखा - Cool Stone
#cccccc— प्लेसहोल्डर, अक्षम अवस्थाएँ और निष्क्रिय आइकन पृष्ठभूमि
टाइपोग्राफी
11 से 16px तक · 4 चरण
- GT Standard — प्रतिस्थापन: Inter · रूपरेखा 400 · बॉडी टेक्स्ट और हेडिंग दोनों के लिए सभी साइज़ में एक ही फ़ॉन्ट का इस्तेमाल किया जाता है। 16px/-0.031em साइज़ में GTStandard-MRegular फ़ॉन्ट बॉडी टेक्स्ट, बटन और लेबल के लिए मुख्य फ़ॉन्ट है। 20px/-0.05em साइज़ में GTStandard-MSemibold फ़ॉन्ट का इस्तेमाल कई बड़ी हेडिंग के लिए किया जाता है; 11–12px साइज़ में GTStandard-MMedium फ़ॉन्ट का इस्तेमाल माइक्रो कैप्शन के लिए किया जाता है। हर फ़ॉन्ट वेरिएंट को 400 के ऑप्टिकल वेट के साथ दिखाया जाता है—फ़ॉन्ट की बनावट को बोल्ड कंट्रास्ट के बजाय हल्के ग्रेडिएंट और घने नेगेटिव लेटर स्पेसिंग के ज़रिए दिखाया गया है। यह एक खास स्टाइल है: शॉप बोल्ड फ़ॉन्ट का इस्तेमाल करके टेक्स्ट को आकर्षक नहीं बनाता, बल्कि लेटर स्पेसिंग के ज़रिए उसे एक खास आकार देता है।
- Shopify Sans — प्रतिस्थापन: Inter · रूपरेखा 400, 700 · यह ऐप लोडिंग बैनर और कुकी सहमति टेक्स्ट जैसे सिस्टम-स्तरीय संदेशों के लिए आरक्षित है।
अंतराल और रूप
| उद्देश्य | अर्थ |
|---|---|
| घनत्व | औसत |
| बुनियादी कदम | 12px |
| बटन त्रिज्या | 9999px |
| कार्ड त्रिज्या | 28px |
| छैया छैया | कोमल छायाएँ |
| अनुभागों के बीच | 64px |
| पृष्ठ की चौड़ाई | 1200px |
एआई आपकी वेबसाइट को Shop शैली में बनाएगा और उसमें डेटा भरेगा।
- इन लिंक के माध्यम से उत्पादों और पोस्ट से भरें - Instagram, TikTok, Facebook ।
- अपनी पुरानी वेबसाइट से सामग्री स्थानांतरित करें—बस पता निर्दिष्ट करें।
- सर्वश्रेष्ठ इंजन पर आधुनिक डिजाइन: React ( Next.js) जिसमें सर्वर रेंडरिंग और एसईओ अनुकूलन की सुविधा अंतर्निहित है।
- खोज परिणामों और न्यूरल नेटवर्क अनुशंसाओं के लिए पूरी तरह से स्वचालित एसईओ अनुकूलन।
समान शैलियाँ
- Cursor — सुलगते कोयलों की रोशनी से जगमगाती एक आरामदायक चर्मपत्र कार्यशाला।
- Slush — पेस्टल पेपर पर स्टिकर से बना एक फुलाने योग्य ब्रह्मांड
- MindMarket — क्रीम रंग के कागज पर छपी एक आरामदायक परीकथा की किताब - एक मैत्रीपूर्ण संपादकीय कैनवास जहां इंटर के बड़े-बड़े शीर्षक और कागज के कटे हुए पात्र धूप से सराबोर, स्टिकर-सहज सतह पर एक साथ मौजूद हैं।
- Airbnb — एक शांत सफेद गैलरी की दीवार जिस पर एक मूंगा लाल रंग का बुकमार्क लगा है।
- Superr — दोपहर की हल्की रोशनी में एक गर्म स्कूल की नोटबुक। एक क्रीम रंग का पन्ना, बिना ढक्कन वाला एक नारंगी मार्कर और चिपकाए गए नाम के स्टिकरों का एक ढेर, जिन्हें अभी निकालना बाकी है।
- Apple (España) — दिन के हल्के प्रकाश में संग्रहालय की गैलरी एक एकल, मनमोहक, भारहीन सफेद स्थान है, जिसमें प्रत्येक प्रदर्शनी हल्के रंग की दीवार के सामने एक स्पॉटलाइट द्वारा प्रकाशित होती है।
- Lamborghini — शोरूम में काली बॉडी वाली कार, स्पॉटलाइट के नीचे - एक पीली कार
- Amplemarket — धूप से जगमगाता कार्यस्थल, जहाँ चारों ओर रंगीन कागज के टुकड़े बिखरे हुए हैं।
- Getharvest — सुनहरे समय में एक मेज – एक गर्म क्रीम रंग का कैनवास, कैनवास पर लटके हुए सफेद पोस्टकार्ड और एक चमकीली नारंगी लौ।
- Agence Foudre — पत्रिका का कवर पेज हल्के गुलाबी रंग का है, जो लिपस्टिक की याद दिलाता है।
- Drive Capital — गर्म कागज पर रेट्रो रोड ट्रिप पोस्टर
- Apple (España) — सफेद गैलरी डिस्प्ले केस