Shopify
मध्यरातको ग्रीनहाउस - गहिरो फिरोजा पृष्ठभूमिमा ट्रेडमार्कहरू फुल्छन्, पुदिनाको एक झिल्कोले उज्यालो हुन्छ।
Shopify को डिजाइन प्रणाली वाणिज्यको लागि मध्यरातको कार्यशाला हो: गहिरो फिरोजा हरियो रंगले रंगिएको लगभग कालो क्यानभास, फराकिलो, आत्मविश्वासी sans-serif टाइपफेस, र अन्तरक्रियात्मक क्षणहरूलाई सक्रिय गर्ने एकल जीवन्त टकसाल उच्चारण। इन्टरफेस अँध्यारो कोठा जस्तो देखिन्छ, जहाँ उत्पादनहरू र ब्रान्डहरू प्रकाशको स्रोत हुन् - तस्बिरहरू र स्टोरफ्रन्टहरू लगभग कालो सतहहरू विरुद्ध चम्किन्छन्, जबकि क्रोम तत्वहरू घट्छन्। कम्पोनेन्टहरू ज्यामितीय तर नरम छन्: पातलो किनाराहरू, गोली आकारको बटनहरू, र 330-वजन टाइपफेस भएका 12px-त्रिज्या कार्डहरू जसले कराउनुको सट्टा स्केल फुसफुसाउँछ। एकल क्रोमेटिक विराम चिन्ह (#36f4a4) लिङ्कहरू, ट्यागहरू, र फोकस अवस्थाहरूमा कम प्रयोग गरिन्छ, व्यापारी कथाहरू दृश्य केन्द्र बिन्दु रहन सुनिश्चित गर्न कार्यात्मक क्षणहरूको लागि रंग आरक्षित गर्दछ।
अधिकतम चौडाइ ~१२८० पिक्सेल केन्द्रित छ, जसमा पूर्ण-चौडाइको स्प्ल्याश ब्लकहरू फोटो कन्टेनरभन्दा बाहिर फैलिएका छन्। पृष्ठ ताल वैकल्पिक रूपमा: (१) ओभरले गरिएको हेडलाइन र कल-टु-एक्शन बटनहरू भएको पूर्ण-चौडाइको गाढा स्प्ल्याश पृष्ठ, (२) २ स्तम्भहरूमा अधिकतम-चौडाइको पाठ र छवि ब्लकहरू वा ३ स्तम्भहरूमा छवि ग्रिडहरू सहितको आरामदायी गाढा खण्डहरू, (३) अन्तरक्रियात्मक शोकेस प्यानलहरू (उत्पादन कार्ड, ढुवानी क्याल्कुलेटर, विश्व नक्सा) गहिरो क्यानभासमा उठाइएको कार्डहरूको रूपमा प्रदर्शित। नेभिगेसन लोगो + ३ नेभिगेसन तत्वहरू + माध्यमिक लिङ्कहरू + प्राथमिक कल-टु-एक्शन बटनको साथ एक निश्चित शीर्ष पट्टी हो, सबै दायाँतिर पङ्क्तिबद्ध छन्। ठाडो तालले सहज संक्रमणको साथ खण्डहरू बीच ८० पिक्सेल अन्तरालहरू प्रयोग गर्दछ—गाढा खण्डहरू बीच कुनै विभाजकहरू छैनन्, सतहको टोनमा मात्र परिवर्तन।
दृश्य डिजाइन मुख्यतया खुद्रा विक्रेतामा केन्द्रित छ: पूर्ण-आकारको उत्पादन तस्बिरहरू र ब्रान्ड कार्यक्रमहरूका तस्बिरहरूले दृश्य भारको ठूलो हिस्सा बोक्छन्, प्रायः ओभरलेड सेतो पाठको साथ ठूला पृष्ठभूमिहरूको रूपमा। छविहरू कडा रूपमा क्रप गरिएका, उच्च-कन्ट्रास्ट, र उत्सवपूर्ण प्रकृतिका छन् (नास्ड्याक घण्टीको बजाइ, समूह अभिवादन, हातमा उत्पादनहरूको क्लोज-अप)। गाढा पृष्ठभूमिले यी तस्बिरहरू स्पटलाइटहरूद्वारा उज्यालो भएको छाप सिर्जना गर्दछ। चित्रहरू न्यूनतम छन् - मुख्य व्याख्यात्मक कार्य एम्बेडेड उत्पादन छविहरू र स्टोरफ्रन्टहरूको स्क्रिनसटहरू द्वारा गरिन्छ। आइकनहरू मोनोक्रोम छन्, 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— मुख्य पाठ, बटन भरण, शीर्षक, लोगोहरू।
टाइपोग्राफी
१२ देखि ७० पिक्सेल सम्म · ८ चरणहरू
- Neue Haas Grotesk — प्रतिस्थापन: Inter · रूपरेखाहरू 330, 400, 500, 550, 600 · मुख्य टाइपोग्राफिक प्रणालीमा ७०–९६ पिक्सेल (३३०–४००) को फन्ट तौल भएको हेडलाइनहरू छन् जुन ठूलो स्वरमा भन्दा सूक्ष्म छन्; १६–१८ पिक्सेल (४००–५००) को फन्ट तौल भएको बडी कपी; र १४–१६ पिक्सेल (५००–५५०) को फन्ट तौल भएको नेभिगेसन र प्रयोगकर्ता इन्टरफेस। ठूला स्क्रिन आकारहरूमा ३३० को अल्ट्रा-लाइट फन्ट तौल एक विशिष्ट विशेषता हो: यसले थोकको सट्टा संयम मार्फत विश्वास व्यक्त गर्दछ।
- Inter Variable — प्रतिस्थापन: Inter · रूपरेखाहरू 400, 420, 450, 550 · नेभिगेसनल इन्टरफेस तत्वहरू, साना नोटहरू, ट्याब नियन्त्रणहरू, र फुटरहरूमा माइक्रोटेक्स्टमा प्रयोग हुने माध्यमिक फन्ट प्रकार। यसको थोरै ठूला साना अक्षरहरू र थप मानक अक्षर स्पेसिङले यसलाई कम्प्याक्ट आकारहरूमा अझ पढ्न योग्य बनाउँछ। यो ४२०-वजनको फन्टले नियमित र मध्यम आकारको फन्ट बीचको खाडल भर्ने परिस्थितिहरूको लागि पनि उपयुक्त छ।
अन्तराल र रूप
| उद्देश्य | अर्थ |
|---|---|
| घनत्व | औसत |
| आधारभूत चरण | 12px |
| बटनको त्रिज्या | 9999px |
| कार्डको अर्धव्यास | 12px |
| छायाँहरू | छायाँको सट्टा कुनै - किनारा छैन |
| खण्डहरू बीच | 80px |
| पृष्ठ चौडाइ | 1280px |
एआईले तपाईंको वेबसाइट Shopify शैलीमा बनाउनेछ र यसलाई भर्नेछ
- लिङ्क मार्फत उत्पादनहरू र पोस्टहरू भर्नुहोस् - Instagram, TikTok, Facebook ।
- आफ्नो पुरानो साइटबाट सामग्री स्थानान्तरण गर्नुहोस्—केवल ठेगाना निर्दिष्ट गर्नुहोस्।
- उत्कृष्ट इन्जिनमा आधुनिक डिजाइन: सर्भर रेन्डरिङ र SEO अप्टिमाइजेसनको साथ React ( Next.js)।
- खोज परिणाम र तंत्रिका नेटवर्क सिफारिसहरूको लागि पूर्ण स्वचालित SEO अप्टिमाइजेसन।
उस्तै शैलीहरू
- Retool — न्यानो ओब्सिडियन कार्यशाला - सटीक उपकरणहरूको लागि सतह, धिपधिप बलिरहेको अंगारोले प्रज्वलित, जहाँ सबै कुरा सिर्जना गरिन्छ।
- Elektron — मध्यरातमा उपकरण नियन्त्रण प्यानल लगभग कालो क्यानभास हो, जहाँ उत्पादनका तस्बिरहरू चम्किन्छन् जबकि इन्टरफेस लगभग अदृश्य रहन्छ।
- REKKI — फोटो प्रयोगशालामा उडान नियन्त्रण प्यानल
- OFFFICE : — मोनोलिथिक फन्टले भरिएको नोयर ग्यालरी
- Clyde — एकल स्पटलाइट भएको शोरूम लगभग अँध्यारो ग्यालरी हो जहाँ कोठामा एक मात्र रंग न्यानो ग्रेडियन्ट बल हो।
- Channel Studio — एउटा कोरल ल्याम्पशेड भएको स्टुडियो फोटो ल्याब
- Electronic Materials Office — कोइलाले सजाइएको ग्यालरीमा चम्किरहेको अंगारो
- ORYZO AI — अँध्यारो कोठाको बारेमा एउटा फोटो निबन्ध। न्यानो अँध्यारोमा घुमिरहेको एक्लो वस्तु, क्रिम फन्ट मात्र सजावट।
- Factory — मध्यरातमा "युद्ध कक्ष" टर्मिनल। "कारखाना" एउटा कालो नियन्त्रण प्यानल हो जहाँ एउटा सेतो कार्ड टर्चलाइटले उज्यालो डिस्प्याच जस्तै अवतरण गर्छ - कोठामा एक मात्र वस्तु भनेको काम नै हो।
- Hungry Tiger — तन्दूरको भित्तामा बेसार जस्तो चम्किलो भित्तिचित्र। सुनौलो र खिया लागेको खैरो रंगको एकीकृत प्यालेट, यति ठूलो फन्टको साथ कि यो वेबसाइट भन्दा मसला बजारको चिन्ह जस्तो देखिन्छ।
- Bibliothèque — स्पटलाइट मुनि कालो घन आकारको ग्यालरी - विशाल, अँध्यारो हलमा एक्लो उज्यालो प्लेट
- Apple (España) — उज्यालो फिटिंगसहितको कालो रंगमञ्च