Vercel
सेतो कागजमा छापिएको टर्मिनल
Vercel डिजाइन प्रणाली अनुशासित मोनोक्रोममा अभ्यास हो: लगभग सेतो क्यानभास (#fafafa), कालो प्रकार, पातलो किनारा, र सजावटी रंगको पूर्ण अनुपस्थिति। दृश्य भाषाले प्रिन्टमा रेन्डर गरिएको विकासकर्ताको टर्मिनललाई उजागर गर्दछ—Geist Sans "वीर" स्केलमा ४००-४५० को तौल र -०.०६em को अक्षर स्पेसिङको साथ मुश्किलले पढ्न सकिन्छ, जबकि Geist Mono ले ११-१३px क्याप्समा लेबल, मेटाडेटा, र कोड नमूनाहरू लागू गर्दछ। बटनहरू तीखो ६px त्रिज्या वा सेतोमा शुद्ध कालो वा कालोमा सेतोको आयत हुन्। प्रणाली रंगको सट्टा कन्ट्रास्ट र टाइपोग्राफिक पदानुक्रममा निर्भर गर्दछ, त्रिकोणीय चिन्ह (▲) र दुई-लाइन शब्द चिन्हलाई मात्र ब्रान्डिङ तत्वहरूको रूपमा प्रयोग गर्दै। सतहहरू #fafafa → #ebebeb → #१७१७१७ क्रममा एकअर्काको माथि स्ट्याक गरिएका छन्, छाया वा रंगको सट्टा टोनल मानहरू परिवर्तन गरेर गहिराइ सिर्जना गर्दछ। प्रत्येक तत्व कम्प्याक्ट घनत्व भएको ४px ग्रिडमा बनाइएको छ, जसले गर्दा इन्जिनियरको नोटबुकको सम्झना दिलाउने इन्टरफेस हुन्छ—सटीक, कार्यात्मक, र सेतो ठाउँबाट नडराउने।
कन्टेनर १२८० पिक्सेल चौडा, केन्द्रित, उदार तेर्सो प्याडिङ (२४-४८ पिक्सेल) सहितको छ। मुख्य ब्लकले असममित तीन-क्षेत्र संरचना प्रयोग गर्दछ: बायाँमा ठूलो शीर्षक, ब्रान्ड ग्लिफ केन्द्रित, र दायाँमा "आँखीभौं" ब्लक। मुख्य ब्लकको तल, सामग्री वैकल्पिक स्ट्रिपहरूमा व्यवस्थित गरिएको छ: क्लाइन्टको लोगो सहितको पूर्ण-चौडाइ स्ट्रिप, त्यसपछि बायाँमा शीर्षक भएको दुई-स्तम्भ "एजेन्ट सिर्जनाकर्ताहरू" खण्ड र दायाँमा उत्पादन लेआउट, त्यसपछि सुविधाहरू सहित तीन कार्डहरूको ग्रिड। खण्डहरू डिभाइडर वा पृष्ठभूमि अफसेट बिना ९६-१२८ पिक्सेलको ठाडो गटरहरूद्वारा छुट्याइएको छ। नेभिगेसन धमिलो पृष्ठभूमि भएको एकल निश्चित ६४ पिक्सेल प्यानल हो। कार्ड ग्रिडहरूले लगातार १६-२४ पिक्सेल गटरहरू सहितको दुई- वा तीन-स्तम्भ लेआउट प्रयोग गर्दछ। समग्र घनत्व कम्प्याक्ट छ - पाठ पढ्न सजिलो छ, पर्याप्त सेतो ठाउँ छ, तर फन्ट आकार र घटक आकारहरूले पृष्ठलाई हावायुक्त महसुस हुनबाट रोक्छ।
छविहरू विरल र सधैं कार्यात्मक छन्। मुख्य दृश्य तत्व कालो त्रिकोण (▲) हो—एक ज्यामितीय ब्रान्ड चिन्ह जुन "क्यापिटल" स्केलमा होभरिङ सिल्हूटको रूपमा देखा पर्दछ। अवधारणाको प्रमाण पट्टीमा ग्राहक लोगोहरूले प्रत्येक ब्रान्डको वास्तविक शब्द चिन्हहरू ग्रेस्केलमा प्रयोग गर्छन्। उत्पादन मकअपहरू (नोशनको च्याट इन्टरफेस, CLI टर्मिनल आउटपुट, पासपोर्ट कार्ड) फ्रेम गरिएका कार्डहरू भित्र लाइट-मोड स्क्रिनसटहरूको रूपमा इम्बेड गरिएका छन्। त्यहाँ कुनै फोटो, चित्रण, वा 3D तत्वहरू छैनन्—प्रणाली शुद्ध टाइपोग्राफी र सेतो कागजमा ज्यामितीय आकारहरू हुन्।
प्यालेट
तटस्थ
- Obsidian
#171717— मुख्य शीर्षकहरू, नेभिगेसन किनाराहरू, गाढा बटन भरण, र सूची मार्करहरू सबै लगभग कालो छन्, कठोरता र भयानक संतृप्तिलाई बेवास्ता गर्दै। - Paper White
#fafafa— पृष्ठ क्यानभास, कार्डको सतह, बटनहरूको प्रकाश भरण—यो मानक पृष्ठभूमि हो जसमा अरू सबै कुरा अवस्थित छ। - Pure White
#ffffff— उठाइएका कार्ड सतहहरू, इन्सर्टहरू, इनपुट फिल्डहरू। - Hairline
#ebebeb— बटन, लिङ्क र कार्डहरूमा १ पिक्सेल बोर्डरहरू उच्च जुम स्तरहरूमा देखिन्छन्, तर कम जुम स्तरहरूमा अदृश्य हुन्छन्। - Ash
#c9c9c9— असक्षम पारिएको पाठ, म्यूट गरिएका लेबलहरू, क्लाइन्ट लोगोहरूमा ब्रान्ड नाम वाटरमार्कहरू। - Smoke
#a8a8a8— माध्यमिक पाठ, प्लेसहोल्डर पाठ, सूक्ष्म आइकन भरण।
टाइपोग्राफी
११ देखि ६४ पिक्सेल सम्म · ६ चरणहरू
- Geist Sans — प्रतिस्थापन: Inter · रूपरेखाहरू 400, 450, 500 · इन्टरफेस र हेडिङहरूको लागि प्राथमिक फन्ट भनेको Vercel बाट कस्टम-डिजाइन गरिएको ज्यामितीय sans-serif हो जसमा ठूला आकारहरूमा कडा अक्षर स्पेसिङ हुन्छ (-0.06em ५६-६४px मा, -0.05em ३०px मा)। पृष्ठको शीर्षमा रहेका हेडिङहरूको लागि, ४५० तौल छनोट गरिएको थियो: लाइट भन्दा बाक्लो तर सेमी-बोल्ड भन्दा हल्का, जसले आत्मविश्वासी, तर दबदबा नभएको, स्वर सिर्जना गर्दछ।
- Geist Mono — प्रतिस्थापन: JetBrains Mono · रूपरेखाहरू 400, 500, 600 · क्याप्सन, कोड ब्लक, CLI आउटपुट प्यानल, मेटाडेटा, र ठूलो अक्षरको पाठको लागि मोनोस्पेस गरिएको माध्यमिक फन्ट। ८px/६००px/ठूलो अक्षरको संयोजनले साना शब्द चिन्हहरूको सटीक स्थान निर्धारण गर्न अनुमति दिन्छ। मोनोस्पेस संस्करणमा फराकिलो अक्षर स्पेसिङ (०.०७१em) ले ठूलो अक्षरको पाठको लागि पर्याप्त ठाउँ प्रदान गर्दछ।
अन्तराल र रूप
| उद्देश्य | अर्थ |
|---|---|
| घनत्व | बाक्लो |
| आधारभूत चरण | 12px |
| बटनको त्रिज्या | 6px |
| कार्डको अर्धव्यास | 6px |
| छायाँहरू | छायाँको सट्टा कुनै - किनारा छैन |
| खण्डहरू बीच | 96-128px |
| पृष्ठ चौडाइ | 1280px |
एआईले तपाईंको वेबसाइट Vercel शैलीमा बनाउनेछ र यसलाई भर्नेछ
- लिङ्क मार्फत उत्पादनहरू र पोस्टहरू भर्नुहोस् - Instagram, TikTok, Facebook ।
- आफ्नो पुरानो साइटबाट सामग्री स्थानान्तरण गर्नुहोस्—केवल ठेगाना निर्दिष्ट गर्नुहोस्।
- उत्कृष्ट इन्जिनमा आधुनिक डिजाइन: सर्भर रेन्डरिङ र SEO अप्टिमाइजेसनको साथ React ( Next.js)।
- खोज परिणाम र तंत्रिका नेटवर्क सिफारिसहरूको लागि पूर्ण स्वचालित SEO अप्टिमाइजेसन।
उस्तै शैलीहरू
- Headspace — न्यानो कागजमा घमाइलो स्वास्थ्य कुना
- WHOOP — मध्यरातमा प्रदर्शन प्रयोगशाला - कालो नाटकीय शून्यता मुनि सेतो क्लिनिकल प्रयोगशाला टेबलहरू, बिजुलीको एकल बैजनी धड्कन
- Together AI — हिमनदी कागजमा अनुसन्धान कन्सोल
- v0 by Vercel — खराद रेखाचित्र। शुद्धता र कार्यक्षमता सर्वोपरि छन्, प्रत्येक तत्वले सफा, प्राविधिक रूपमा उत्तम सतहमा स्पष्ट उद्देश्य पूरा गर्दछ।
- Dovetail — कालो चन्द्रमा मुनिको खाका—मुश्किलले देखिने ग्राफ रेखाहरू, सेतो फन्ट, एउटा बैजनी चमक
- Glideapps — एउटा विद्युतीय फिरोजा चमक भएको मोनोक्रोम ड्राफ्टिङ टेबल
- Timescale — तातो ग्राफ पेपरमा इन्जिनियरिङ रेखाचित्र
- UGLYCASH — क्रिम रंगको कागजमा स्टिकरले ढाकिएको नोटबुकले एउटा साहसी, अधिकतमवादी फिनटेकको वातावरण प्रस्तुत गर्दछ जसले गर्वका साथ आफ्नो अराजकता प्रदर्शन गर्दछ।
- Sprout Social — कालो स्लेटमा हरियो अंकुर। कडा मोनोक्रोम क्यानभासमा एउटा उज्यालो उच्चारण, जसको रंग केवल कार्यको लागि प्रयोग गरिन्छ, साइनपोस्टको रूपमा काम गर्ने आत्मविश्वासी ज्यामितीय फन्टको साथ।
- Krea — मध्यरातमा ग्यालरी नोयर
- Evergreen — लिनेन पेपरमा सौर्य ग्रीनहाउस
- Factory — मध्यरातमा "युद्ध कक्ष" टर्मिनल। "कारखाना" एउटा कालो नियन्त्रण प्यानल हो जहाँ एउटा सेतो कार्ड टर्चलाइटले उज्यालो डिस्प्याच जस्तै अवतरण गर्छ - कोठामा एक मात्र वस्तु भनेको काम नै हो।