
Dub
लिङ्कको म्याट राइस पेपर कन्ट्रोल प्यानल
डबको दृश्य प्रणालीमा एक संयमित, लगभग सम्पादकीय SaaS सौन्दर्य छ: बाहिर निस्कने तत्वहरूको सट्टा पातलो किनाराहरूद्वारा एकसाथ राखिएको लगभग सेतो क्यानभास, बाक्लो मोनोक्रोम टाइपोग्राफीले संरचनात्मक समर्थन प्रदान गर्दछ र एकल चम्किलो नीलो रंग (#2563eb) ले एक बयान दिन्छ। पहिलो नजरमा सतहहरू समतल र फ्रेमलेस रहन्छन्, तर प्रत्येक कन्टेनरमा 1px #e5e5e5 मार्जिन हुन्छ, जसले छापिएको कागजातको अनुभूति जगाउँछ। व्यक्तित्व रंगीन "पिल" एक्सेन्टहरूको सानो सेट (सुन्तला, हरियो, बैजनी) मार्फत प्राप्त गरिन्छ जुन तटस्थ प्यालेट माथि तैरिन्छ, र हेडरहरू जुन चम्किलो नभई आत्मविश्वासी र आधुनिक महसुस गर्छन्। कम्पोनेन्टहरू कम्प्याक्ट र बाक्लो छन्: 8px गटरहरू, 12px कार्ड त्रिज्या, 9999px मा गोली आकारको लेबलहरू, र भारी, भरिएका बटनहरूको सट्टा अदृश्य नियन्त्रणहरू।
पृष्ठ लगभग १२०० पिक्सेलको अधिकतम चौडाइ भएको केन्द्रित लेआउटमा बनाइएको छ। मुख्य तत्व भनेको केन्द्रित टेक्स्ट ब्लक हो जसमा तीन फ्लोटिंग एलिमेन्टहरू (एफिलिएट प्रोग्रामहरू, रूपान्तरण एनालिटिक्स, छोटो लिङ्कहरू) ठूलो उत्पादन लेआउट माथि तेर्सो रूपमा राखिएको छ। सेक्सनहरू ठाडो रूपमा मिल्दोजुल्दो ६४ पिक्सेल गटरहरूसहित व्यवस्थित छन्, सेतो क्यानभास र #f5f5f5 पेपर हेज बीच टोनल विभाजनको लागि वैकल्पिक। तल्लो खण्डले Z-आकारको लेआउट प्रयोग गर्दछ: सम्पादकीय पाठ बीचको तेस्रो भागमा केन्द्रित छ, र फ्लोटिंग UI कार्डहरू बायाँ र दायाँ मार्जिनमा लंगर गरिएका छन्, जसले असममित, पत्रिका जस्तो लय सिर्जना गर्दछ। लोगो क्लाउड पृष्ठमा केन्द्रित एक साधारण ५x२ ग्रिड हो। नेभिगेसन एक न्यूनतम शीर्ष पट्टी हो—बायाँमा लोगो, केन्द्रमा नेभिगेसन, दायाँमा दुई बटनहरूको समूह (भूत "लगइन" बटन + भरिएको "दर्ता" बटन)—निश्चित वा मेगा-मेनु बिना। मुख्य विन्डोको ड्यासबोर्ड लेआउटले क्लासिक दुई-स्तम्भ एप लेआउट प्रदर्शन गर्दछ: एक निश्चित साइडबार (२४०px जस्तै) + एक सामग्री क्षेत्र जसले आगन्तुकहरूले स्क्रोल गर्न सुरु गर्नु अघि उत्पादन जानकारीको घनत्व परिभाषित गर्दछ।
दृश्यहरू उत्पादन-केन्द्रित छन्, जीवनशैली-केन्द्रित छैनन्। मुख्य स्क्रिन ठूलो ड्यासबोर्ड स्क्रिनसटमा केन्द्रित छ, जसले साइडबार नेभिगेसन, डेटा तालिका, र फ्लोटिंग UI तत्वहरू सहितको वास्तविक-विश्व उत्पादन मकअप प्रतिनिधित्व गर्दछ, जुन सेतो क्यानभासमा समतल प्यानलको रूपमा राखिएको छ। ग्राहक लोगोहरू तिनीहरूको सामाजिक मिडिया प्रदर्शनलाई स्वीकार गर्न एक असंतृप्त ग्रेस्केल ग्रिड (बीहिभ, सुपरपावर, च्याटबेस, आदि) मा प्रदर्शित हुन्छन्, पृष्ठको एकल नीलो उच्चारणलाई प्रभावशाली रहन अनुमति दिन रंग हटाइन्छ। फ्लोटिंग पार्टनर कार्डहरू (साना प्रोफाइलहरू र राजस्व/भुक्तानी डेटा भएका टाइलहरू) तल सम्पादकीय पाठको ब्लकहरू वरिपरि घुम्छन्, पाठमा छायाँको प्रयोग बिना गहिराइको भावना सिर्जना गर्दछ। डटेड ग्रिड पृष्ठभूमि ढाँचा एक हस्ताक्षर सुविधा हो: धेरै कम अस्पष्टता भएको साना थोप्लाहरूको पातलो पङ्क्तिले बनावट र डिजाइन प्रणाली/चित्र सतहको अनुभूति सिर्जना गर्दछ, साइटको "आधुनिक लिङ्क एट्रिब्युसन प्लेटफर्म" को रूपमा स्थितिलाई जोड दिन्छ। आइकनोग्राफी न्यूनतम छ, रूपरेखा र भरणहरू सहित, र सुविधा ट्यागहरूको लागि एक्सेन्ट प्यालेट (ट्याङ्गेरिन सुन्तला, ल्याभेन्डर बैजनी, पुदिना हरियो) प्रयोग गर्दछ। कुनै पनि तस्बिर, चित्रण, वा थ्रीडी मोडेलहरू प्रयोग गरिएको छैन - उत्पादनको प्रयोगकर्ता इन्टरफेस आफैंमा दृश्य भाषा हो।
प्यालेट
ब्रान्ड
- Electric Blue
#2563eb— प्राथमिक ब्रान्ड रङ—लोगो, लिङ्कहरू, प्रमुख कार्यसम्पादन सूचकहरू, सक्रिय अवस्थाहरू, र आइकन एक्सेन्टहरू—प्रयोग गरिएको छ। सेतो पृष्ठभूमिमा गाढा नीलोले प्रणालीको एकमात्र दृश्य अपील सिर्जना गर्दछ। - Deep Sapphire
#1e40af— एक्सन बटनको मुख्य पृष्ठभूमि, कल टु एक्सनको बोल्ड फिल - एक्सनलाई जनाउने एक मात्र रङ - ध्यान आकर्षित गर्न कम प्रयोग गरिन्छ।
तटस्थ
- Canvas White
#ffffff— पृष्ठ पृष्ठभूमि, कार्ड सतह, पप-अप प्यानलहरू प्रत्येक स्क्रिनको पूर्ण जग हुन्। - Paper Mist
#f5f5f5— नेस्टेड कार्डहरू, अतिरिक्त प्यानलहरू, र भरणहरूको लागि सूक्ष्म होभर रङ परिवर्तनहरू। - Ash
#e5e5e5— कार्डहरू, इनपुट कनेक्टरहरू र डिभाइडरहरूमा रहेका पातला किनाराहरू प्रणालीलाई एकसाथ राख्ने संरचनात्मक रेखा हुन्। - Smoke
#d4d4d4— चयन गरिएका कन्टेनरहरू र थप बटन रूपरेखाहरूको लागि तीखा किनाराहरू। - Pebble
#c8c8c8— मध्यम कन्ट्रास्ट भएका किनाराहरू, नियन्त्रण रूपरेखाहरू, र संरचनात्मक डिभाइडरहरू। यो रङलाई कल टु एक्शनको लागि प्राथमिक रङको रूपमा प्रयोग गर्नु हुँदैन। - Midnight Ink
#0a0a0a— अधिकतम कन्ट्रास्टको लागि बटनहरूको मुख्य पाठ, हाइलाइट गरिएका बटनहरू, र नेभिगेसन पाठ लगभग कालो छन्।
टाइपोग्राफी
११ देखि ४८ पिक्सेल सम्म · ९ चरणहरू
- Satoshi — प्रतिस्थापन: Inter (weight 500 · रूपरेखाहरू 500 · डिस्प्ले हेडिङहरू - हेडिङ र सेक्सन शीर्षकहरूको लागि केवल ३६–४८ पिक्सेल लाइनहरूमा प्रयोग गरिन्छ। फन्टको तौल - ५०० (मध्यम, बोल्ड होइन): हेडिङहरू आत्मविश्वासी र आधुनिक देखिन्छन्, तर कहिल्यै पनि शक्तिशाली हुँदैनन्। सातोशीको ज्यामितीय अनुपातले टाइपफेसलाई थोरै सम्पादकीय, आधुनिक अनुभूति दिन्छ जुन इन्टरको बडी प्रतिलिपिले दोहोर्याउन सक्दैन।
- Inter — प्रतिस्थापन: Inter (native) · रूपरेखाहरू 400, 500, 600 · मुख्य भागको प्रतिलिपि, UI लेबलहरू, नेभिगेसन, उपशीर्षकहरू, र माइनर शीर्षकहरू। इन्टर प्राथमिक कार्यक्षेत्र हो, जसले ११px माइक्रो-लेबलहरूदेखि ३०px माध्यमिक शीर्षकहरूसम्म सबै कुरा ह्यान्डल गर्दछ। मुख्य भागको प्रतिलिपिको लागि ४०० को भार पूर्वनिर्धारित हो, हाइलाइट गरिएका तत्वहरू र बटन लेबलहरूको लागि ५००, र महत्त्वपूर्ण UI लेबलहरूको लागि ६०० आरक्षित छ। १.५ को रेखा उचाइ भएको १६px सबैभन्दा धेरै भेटिने एकल-चरण आकार (१२२० घटनाहरू) हो, जसले १६px क्यानोनिकल बडी प्रतिलिपि आकार हो भनेर पुष्टि गर्दछ।
- Geist Mono — प्रतिस्थापन: JetBrains Mono or IBM Plex Mono · रूपरेखाहरू 400, 500 · कोड स्निपेटहरू, प्राविधिक मेटाडेटा, र एम्बेडेड मोनोस्पेस्ड टोकनहरू १२–१४ पिक्सेलमा कोड ब्लकहरूमा र २४ पिक्सेलमा ठूला कोड डिस्प्ले तत्वहरूमा प्रयोग गरिन्छ। यसले डबको उत्पादन स्थितिसँग सुसंगत, विकासकर्ता उपकरणको विश्वसनीयता सुनिश्चित गर्दछ।
अन्तराल र रूप
| उद्देश्य | अर्थ |
|---|---|
| घनत्व | औसत |
| आधारभूत चरण | 8px |
| बटनको त्रिज्या | 8px |
| कार्डको अर्धव्यास | 12px |
| छायाँहरू | छायाँको सट्टा कुनै - किनारा छैन |
| खण्डहरू बीच | 64px |
| पृष्ठ चौडाइ | 1200px |
एआईले तपाईंको वेबसाइट Dub शैलीमा बनाउनेछ र यसलाई भर्नेछ
- लिङ्क मार्फत उत्पादनहरू र पोस्टहरू भर्नुहोस् - Instagram, TikTok, Facebook ।
- आफ्नो पुरानो साइटबाट सामग्री स्थानान्तरण गर्नुहोस्—केवल ठेगाना निर्दिष्ट गर्नुहोस्।
- उत्कृष्ट इन्जिनमा आधुनिक डिजाइन: सर्भर रेन्डरिङ र SEO अप्टिमाइजेसनको साथ React ( Next.js)।
- खोज परिणाम र तंत्रिका नेटवर्क सिफारिसहरूको लागि पूर्ण स्वचालित SEO अप्टिमाइजेसन।
उस्तै शैलीहरू
- ElevenLabs — सूक्ष्म शीर्षकहरू सहितको न्यानो क्रिम टोनमा फोटो निबन्ध। बौहाउस शैलीको नोटबुक—अण्डाको खोल रंगको कागज, कालो मसी, र उत्पादन प्रदर्शनको लागि एकल बैजनी र सुन्तला रंगको उच्चारण।
- Awesomic — कन्फेटीको सम्झना दिलाउने सुन्तला विराम चिन्हहरू भएको सम्पादकीय जस्ता जाल
- Monad — न्यानो चर्मपत्रमा सम्पादकीय प्राविधिक जर्नल
- Seline Analytics — न्यानो कागजमा शान्त विश्लेषणात्मक तालिका
- Notion — दिउँसोको घाममा न्यानो कागजको नोटबुक
- Anthropic — न्यानो भेल्लममा आधारित वैज्ञानिक क्षेत्र पत्रिका—शान्त हस्तिहाडका सतहहरू, सेरिफ गरिएका सम्पादकीय शीर्षकहरू, र कार्य आवश्यक पर्दा मात्र देखा पर्ने एकल माटोको उच्चारण।
- Calendly — चिसो संगमरमरमा गाढा नीलो मसी
- Augen Pro — एप्पलको सेतो प्रस्तुतीकरणमा मोनोक्रोम स्पेसमा एकमात्र उच्चारणको रूपमा क्लिनिकल, वजनहीन, इलेक्ट्रिक नीलो रंग रहेको छ।
- Antimetal — क्रिम पेपरमा छापिएको सम्पादकीय घटनाक्रम—वैज्ञानिक जर्नलमा एक शान्त बिहान, जहाँ संयमले आत्मविश्वास व्यक्त गर्छ र सेरिफले ठूलो काम गर्छ।
- Perk — तातो चर्मपत्र कागजमा विद्युतीय चुना
- Ditto — जंगली फूलका नमुनाहरू सिर्जना गर्ने घामले उज्यालो भएको कार्यशाला। न्यानो क्रिम सतहहरू, जीवन्त पहेंलो आधार रंग, गाढा नेभी नीलो मसी, टुक्रा पछाडि फूलेको जैविक रंगका रूपहरू।
- Officevibe — न्यानो क्रिम रंगको कागजमा सम्पादकीय पत्रिका। HR व्यवस्थापनमा एउटा विचारशील निबन्धको कल्पना गर्नुहोस्, जुन उत्पादनको रूपमा प्रस्तुत गरिएको छ—आधुनिक नीलो इन्टरफेस मार्फत फुसफुसाउने कर्सिभ सेरिफ फन्ट।