Superlist
कोरल एम्बरहरू भएको रात्रिकालीन कार्यस्थान—एउटा शान्त बैंगन एप सतह जहाँ एउटा न्यानो सुन्तला रंगको चिंगारीले हरेक कार्यको संकेत दिन्छ।
सुपरलिस्टले मध्यरातको बैजनी रंगमा उत्पादकता भाषा प्रयोग गर्दछ: गहिरो बैंगनी, एकमात्र प्राथमिक रंगको रूपमा न्यानो कोरल, र ठूला सेन्स-सेरिफ हेडलाइनहरू जसले सम्पूर्ण वातावरणलाई कब्जा गर्दछ। इन्टरफेसले ढिलो-रातमा केन्द्रित कामको भावना जगाउँछ - शान्त, तहबद्ध, र आत्मविश्वासी, कल टु एक्शन, सक्रिय अवस्थाहरू, र मुख्य बुँदाहरूमा कार्यात्मक विराम चिह्नको रूपमा मात्र प्रयोग गरिएको रंग। सतहहरू बैजनी अन्डरटोन (#181824 → #26253b) को साथ सूक्ष्म गाढा टोनमा तहबद्ध छन्, गहिराइ बाँझ भन्दा न्यानो महसुस गर्न शुद्ध कालोलाई बेवास्ता गर्दै। कम्पोनेन्टहरूले उदार गोलाकार आकारहरू (20px कार्डहरू, गोली बटनहरू), नरम छायाँहरू, र कडा ग्रिडहरूको सट्टा आरामदायी 10-16px अन्तरालहरू मार्फत "सास फेर्नुहोस्" सुविधा दिन्छ। हेडलाइनको आवाज नै सबै कुरा हो: -0.02em को कडा अक्षर स्पेसिङको साथ 70-88px मा 600-पोइन्ट वजनले UI भन्दा टाइपोग्राफिकको रूपमा पाठलाई व्यवहार गर्दछ - यो SaaS भन्दा सम्पादकीय प्रतिलिपिको नजिक छ।
अँध्यारो खण्डहरू पृष्ठको सम्पूर्ण चौडाइमा फैलिएका हुन्छन्, केन्द्रित, अधिकतम-चौडाइ सामग्री कन्टेनरहरू सहित। मुख्य खण्ड ठाडो रूपमा केन्द्रित छ र यसमा हेडलाइन, सबटेक्स्ट, र कल टु एक्शन (CTA) समावेश छ, त्यसपछि अर्को खण्डलाई ओभरल्याप गर्ने ठूलो उत्पादन स्क्रिनसट हुन्छ। त्यसपछिका खण्डहरू केन्द्रित पाठ ब्लकहरू र कार्ड ग्रिडहरू बीच वैकल्पिक हुन्छन्। समीक्षा खण्डले समीक्षा कार्डहरू र १६ गटरहरू सहितको तीन-स्तम्भ ग्रिड प्रयोग गर्दछ। नेभिगेसन बायाँमा लोगो, केन्द्रित लिङ्कहरू, र दायाँमा लगइन कार्यहरू भएको एकल शीर्ष पट्टी हो—कुनै निश्चित साइडबार वा मेगा-मेनु छैन। खण्डहरू बीचका गटरहरू उदार छन् (१६ गटरहरू), घना उत्पादन ग्रिडको सट्टा फराकिलो, सम्पादकीय लय सिर्जना गर्दछ।
दृश्यात्मक ठाउँमा उत्पादन स्क्रिनसटहरूको प्रभुत्व हुन्छ—गोलाकार कुनाहरू भएको ठूलो फ्रेम, वास्तविक एप इन्टरफेस प्रदर्शन गर्दै, मुख्य र माध्यमिक खण्डहरू भर्छ। तस्बिरहरू न्यूनतम छन्, केवल प्रयोगकर्ता अवतार वा इन-एप मिडियाको पूर्वावलोकनको रूपमा प्रयोग गरिन्छ (उदाहरणका लागि, उत्पादन मकअपको दायाँ प्यानलमा कन्सर्ट छवि)। ट्रस्ट बारमा लोगोहरू समतल, म्यूट सेतो पाठ प्रतीकहरू हुन्। त्यहाँ कुनै सजावटी चित्रणहरू छैनन्, कुनै अमूर्त ग्राफिक्स छैनन्, कुनै 3D रेन्डरहरू छैनन्। दृश्य रणनीति भनेको उत्पादनलाई स्केलमा प्रदर्शन गर्नु, टाइपोग्राफीलाई भावनात्मक काम गर्न दिनु र कोरललाई एकमात्र उच्चारण रंगको रूपमा प्रयोग गर्नु हो।
प्यालेट
ब्रान्ड
- Coral Ember
#ff4a36— सुन्तला रंगलाई सजावटी विवरणहरूको लागि र दुर्लभ संकेतहरूलाई हाइलाइट गर्नको लागि दोस्रो उच्चारणको रूपमा प्रयोग गरिन्छ। यसलाई कल टु एक्शनको लागि प्राथमिक रंगको रूपमा प्रयोग गर्नु हुँदैन।
तटस्थ
- Aubergine Canvas
#181824— पृष्ठको पृष्ठभूमि, मुख्य क्यानभास, न्यानो, गाढा छायाँ हो जसले शुद्ध कालोलाई प्रतिस्थापन गर्दछ, जसले गर्दा प्रयोगकर्ता इन्टरफेस समतल भन्दा पनि तहयुक्त देखिन्छ। - Elevated Plum
#26253b— कार्ड सतहहरू, इनपुट फिल्डहरू, नेभिगेसन कन्टेनरहरू - दृश्यात्मक सीमा बिना गहिराई सिर्जना गर्न क्यानभास भन्दा एक कदम सजिलो। - Pure White
#ffffff— मुख्य शीर्षकहरू, बटन पाठ, र आइकन रूपरेखाहरू - गाढा क्यानभासमा अधिकतम कन्ट्रास्ट। - Fog Text
#696f81— मुख्य पाठ, माध्यमिक शीर्षकहरू, र मौन किनाराहरू सबैमा बैंगन रंगको पृष्ठभूमिमा आरामदायी पढ्नको लागि ७:१ कन्ट्रास्ट अनुपात रहेको छ। - Ash Text
#8e8da0— माध्यमिक UI तत्वहरू, डिभाइडरहरू, र म्यूट गरिएका लेबलहरूको लागि तटस्थ रङ समर्थित छ। यसलाई कल टु एक्शनको लागि प्राथमिक रङको रूपमा प्रयोग गर्नु हुँदैन। - Mist Highlight
#a3a3a7— सूक्ष्म किनाराहरू, डिभाइडरहरू, र निष्क्रिय नेभिगेसन तत्वहरूले एक सूक्ष्म तटस्थ स्वर सिर्जना गर्दछ जुन अझै पनि क्यानभासको बिरूद्ध खडा हुन्छ।
टाइपोग्राफी
१२ देखि ८८ पिक्सेल सम्म · ९ चरणहरू
- sans-serif — प्रतिस्थापन: Inter · रूपरेखाहरू 400 · sans-serif - निकालिएको डेटामा फेला पर्यो तर AI द्वारा वर्णन गरिएको छैन।
- Haffer XH SemiBold — प्रतिस्थापन: Inter Tight · रूपरेखाहरू 400, 600 · प्रदर्शन र शीर्षकहरूको लागि प्राथमिक फन्ट। यो -०.०२em को अक्षर स्पेसिङ र ६०० को तौल भएका हिरो हेडिङहरूको लागि ७०–८८px को साइजमा प्रयोग गरिन्छ। साँघुरो अक्षर स्पेसिङ र ठूलो अक्षरको उचाइले शीर्षकहरूलाई सम्पादकीय वजन दिन्छ, जसले गर्दा गाढा इन्टरफेस ड्यासबोर्ड भन्दा पत्रिकाको आवरण जस्तो देखिन्छ। बोल्ड वजनमा इन्टर टाइट वा जनरल सान्सले बदल्नुहोस्।
- Jersey 10 — प्रतिस्थापन: Anybody · रूपरेखाहरू 400 · उच्चारण संख्या र हाइलाइटहरूको लागि ठूलो, सजावटी फन्ट। टाइपोग्राफिक उच्चारणहरू सिर्जना गर्न धेरै ठूला आकारहरूमा कम प्रयोग गरिन्छ। एनीबडी वा क्याबिनेट ग्रोटेस्कले प्रतिस्थापन गर्न सकिन्छ।
अन्तराल र रूप
| उद्देश्य | अर्थ |
|---|---|
| घनत्व | औसत |
| आधारभूत चरण | 10-16px |
| बटनको त्रिज्या | 100px |
| कार्डको अर्धव्यास | 20px |
| छायाँहरू | नरम छायाँ |
| खण्डहरू बीच | 80px |
| पृष्ठ चौडाइ | 1200px |
एआईले तपाईंको वेबसाइट Superlist शैलीमा बनाउनेछ र यसलाई भर्नेछ
- लिङ्क मार्फत उत्पादनहरू र पोस्टहरू भर्नुहोस् - Instagram, TikTok, Facebook ।
- आफ्नो पुरानो साइटबाट सामग्री स्थानान्तरण गर्नुहोस्—केवल ठेगाना निर्दिष्ट गर्नुहोस्।
- उत्कृष्ट इन्जिनमा आधुनिक डिजाइन: सर्भर रेन्डरिङ र SEO अप्टिमाइजेसनको साथ React ( Next.js)।
- खोज परिणाम र तंत्रिका नेटवर्क सिफारिसहरूको लागि पूर्ण स्वचालित SEO अप्टिमाइजेसन।
उस्तै शैलीहरू
- DNA — कण लेन्स मार्फत देखिने मध्यरात वेधशाला
- Abetterlou — स्याडल लेदरमा स्पार्क - गहिरो कफी-कालो पृष्ठभूमिमा चम्किरहेको न्यानो क्रिमी फन्ट, पृष्ठमा थिचिएको तातो धातु जस्तो महसुस हुने एम्बर-गोल्ड बटनहरू सहित।
- Galileo-ft — विद्युतीय नीलो संकेतहरू सहितको गहिरो-अन्तरिक्ष कमाण्ड डेक
- Decide AI — मध्यरातमा वेधशाला - मिन्ट सिग्नल
- Redis Agency — घण्टापछि खुल्ने सम्पादकीय कार्यशाला एकदमै अँध्यारो ठाउँ हो जहाँ सबै ब्रान्डिङ काम सेरिफ फन्टहरू र एउटा रातो मूलाद्वारा गरिन्छ।
- Spellbook — कोरल मसीले उज्यालो पारिएको मध्यरातको अदालत—एउटा अँध्यारो सम्पादकीय सतह जहाँ केवल न्यानो सुन्तला रंगको कलमको स्ट्रोकको आवाज मात्र आउँछ।
- Linear — मध्यरातको परिशुद्धता उपकरण
- Origin Financial — शान्त ऐश्वर्यको मध्यरातको ग्यालरी। एउटा शान्त, लगभग अँध्यारो कोठा जहाँ ठूला सेरिफ फन्टहरू र केही उज्यालो रंगीन प्यानलहरूले वित्तलाई ध्यानपूर्वक क्युरेट गरिएको कलाकृति हो भन्ने भावना सिर्जना गर्छन्।
- Hyperstudio — डिजाइनलाई ओब्सिडियनमा कोरिएको छ। पाठ र मसिना रेखाहरूले शुद्ध कालो रंगको सेतो ठाउँलाई फ्रेम गर्छन्, कहिलेकाहीं सुनौलो कम्पास चिन्हहरूले बाटो संकेत गर्दछ।
- Air — "ग्लास मार्फत मध्यरातको आकाश" मूर्तिकला
- Raycast — मिडनाइट कमाण्ड सेन्टर, कोरल नियोन
- dope.security — बैजनी बिकनहरू भएको मध्यरातको टर्मिनल