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