Ui
मैट पेपर पर नैदानिक योजना
shadcn/ui एक मोनोक्रोम डिज़ाइन सिस्टम बनाने की कार्यशाला है: एक साफ़ सफ़ेद कैनवास, हल्के गर्म भूरे रंग की सतहें और सूक्ष्म किनारों पर रखे गए बड़े त्रिज्या वाले कार्ड। इंटरफ़ेस लगभग पूरी तरह से रंगहीन है—काला टेक्स्ट, सफ़ेद सतहें, भूरे रंग के द्वितीयक टोन—जिसमें केवल एक ही, विघटनकारी लाल रंग का उपयोग त्रुटि स्थितियों के लिए किया गया है और कहीं नहीं। टाइपोग्राफी स्क्रीन पर अक्षरों की कम ऊँचाई के साथ Geist की ज्यामितीय तटस्थता पर आधारित है, जिससे एक शांत, कोड जैसा अनुभव होता है जो किसी उपभोक्ता उत्पाद की तुलना में डेवलपर इंफ्रास्ट्रक्चर जैसा अधिक लगता है।
न्यूनतम छवियों के साथ—सिस्टम लगभग पूरी तरह से यूजर इंटरफेस पर आधारित है। इसमें कोई मुख्य फ़ोटो, चित्र या सजावटी ग्राफ़िक्स नहीं हैं। उत्पाद डेमो को ग्रिड में घटक मॉकअप (कार्ड, इनपुट फ़ील्ड, बटन) के रूप में प्रस्तुत किया गया है, जो दस्तावेज़ीकरण और दृश्य सामग्री दोनों का काम करते हैं। आइकन पतली ज्यामितीय रेखाएं हैं (संभवतः लुसाइड से ली गई) जो 1.5–2px मोटी हैं और #0a0a0a या #737373 रंग में हैं, जिनका उपयोग कार्यात्मक संकेतों के रूप में सीमित मात्रा में किया गया है। दृश्य भाषा स्वयं यूआई घटक हैं—पृष्ठ एक जीवंत शैली मार्गदर्शिका के रूप में कार्य करता है, जहाँ प्रत्येक दृश्यमान तत्व एक दृश्यमान डिज़ाइन तत्व है।
पैलेट
तटस्थ
- Canvas
#f5f5f5— पेज की पृष्ठभूमि, म्यूटेड सरफेस फिल, अतिरिक्त बटन। - Paper
#ffffff— कार्ड की सतहें, पॉप-अप पृष्ठभूमि, प्राथमिक बटन फिल - Surface Alt
#fafafa— साइडबार की पृष्ठभूमि, अस्पष्ट कार्ड विकल्प, इनपुट फ़ील्ड की निष्क्रिय स्थिति। - Ink
#0a0a0a— मुख्य पाठ, शीर्षक, बटन लेबल, आइकन की रूपरेखा। - Ink Soft
#171717— बटन की पृष्ठभूमि छवियों में फिल और हल्की सतहों पर अतिरिक्त टेक्स्ट शामिल हैं। - Mid Gray
#737373— मुख्य टेक्स्ट, प्लेसहोल्डर टेक्स्ट, सहायक लेबल और आइकन फिल सभी म्यूट कर दिए गए हैं।
टाइपोग्राफी
12 से 48px तक · 8 चरण
- Geist — प्रतिस्थापन: Inter · रूपरेखा 400, 500, 600 · सभी इंटरफ़ेस टेक्स्ट—बॉडी टेक्स्ट 14px/400 की लाइन वेट के साथ, हेडिंग 24–48px/600 की लाइन वेट के साथ, और बटन 13–14px/500 की लाइन वेट के साथ। Geist के ज्यामितीय अक्षर आकार और एकसमान लाइन वेट डेवलपर टूल्स के लिए एक तटस्थ अनुभव प्रदान करते हैं; 600 की लाइन वेट, 48px लेटर स्पेसिंग और -0.05em लेटर स्पेसिंग स्पष्ट और आत्मविश्वासपूर्ण हेडिंग सुनिश्चित करती है जो संपादित होने के बजाय विचारशील प्रतीत होती हैं।
अंतराल और रूप
| उद्देश्य | अर्थ |
|---|---|
| घनत्व | घना |
| बुनियादी कदम | 8px |
| बटन त्रिज्या | 18px |
| कार्ड त्रिज्या | 24px |
| छैया छैया | नहीं - छाया के बजाय बॉर्डर |
| अनुभागों के बीच | 48-80px |
| पृष्ठ की चौड़ाई | 1280px |
एआई आपकी वेबसाइट को Ui शैली में बनाएगा और उसमें डेटा भरेगा।
- इन लिंक के माध्यम से उत्पादों और पोस्ट से भरें - Instagram, TikTok, Facebook ।
- अपनी पुरानी वेबसाइट से सामग्री स्थानांतरित करें—बस पता निर्दिष्ट करें।
- सर्वश्रेष्ठ इंजन पर आधुनिक डिजाइन: React ( Next.js) जिसमें सर्वर रेंडरिंग और एसईओ अनुकूलन की सुविधा अंतर्निहित है।
- खोज परिणामों और न्यूरल नेटवर्क अनुशंसाओं के लिए पूरी तरह से स्वचालित एसईओ अनुकूलन।
समान शैलियाँ
- Ventriloc — गर्म कागज पर डेटा का एक संपादकीय अवलोकन - एक नारंगी अंगारा जो एकरंगी सटीकता को उजागर करता है
- Geniestudio — एक मुलायम, दिन के उजाले में काम आने वाली नोटबुक—चौड़े हाशिये वाली और मोटी कलम की एक ही रेखा वाली नोटबुक
- xAI — काली गोली के साथ वार्म क्रीम लैब
- Cal — मोनोक्रोम व्यावहारिकता, एक मानवीय दृष्टिकोण। एक ऐसी प्रणाली जो सख्त काले और सफेद रंग के पैलेट के माध्यम से स्पष्टता और कार्यक्षमता को प्राथमिकता देती है, लेकिन मैत्रीपूर्ण टाइपोग्राफी और गोल आकृतियों के साथ इसे सौम्य बनाती है।
- Scale — एक उच्च गुणवत्ता वाली संग्रहालय-स्तरीय फोटो लैब, तकनीकी परियोजना के साथ संयुक्त
- Contractbook — अतिनीले आकाश के नीचे क्रीम रंग के कागज़ के अनुबंध
- AutoSend — एक आरामदायक पत्थर का स्टूडियो जिसमें एक बैंगनी रंग की रोशनी है—जहां सेरिफ हेडलाइन और चमकीले इंडिगो रंग के कॉल टू एक्शन एक शांत, लगभग सफेद स्थान में एक साथ मौजूद हैं।
- Air — "कांच के आर-पार आधी रात का आकाश" नामक मूर्ति
- SpatialChat — सफेद चर्मपत्र पर बैंगनी दाल
- Squarespace — सिनेमाई मोनोक्रोम गैलरी
- Giga — जमी हुई ओब्सीडियन के ऊपर आधी रात का क्षितिज
- Supabase — आधी रात को एक कोड एडिटर, जिसमें एक चमकीला हरा बिंदु है—कोयले की धूल के सागर पर एक एकल रंगीन स्पंदन।