
Calendly
ठंडे संगमरमर पर गहरे नीले रंग की स्याही
Calendly एक शांत, आत्मविश्वासपूर्ण प्लानिंग वर्कस्पेस जैसा लगता है: लगभग सफेद कैनवास, जिसमें पर्याप्त स्पेस है, ठंडे ग्रे बैकग्राउंड पर तैरते हुए साफ सफेद प्रोडक्ट कार्ड, और सभी टाइपोग्राफी शुद्ध काले रंग के बजाय गहरे नीले रंग में दिखाई देती है। इसका मुख्य तत्व गहरा नीला रंग (#0b3558) है, जिसका उपयोग हर जगह किया गया है जहाँ टेक्स्ट दिखाई देता है—हेडलाइन, बटन, आइकन, लिंक—जो पूरे इंटरफ़ेस को सौम्य बनाता है, इसे सामान्य SaaS लैंडिंग पेज की तुलना में अधिक आकर्षक और स्टाइलिश बनाता है। सभी मुख्य कार्यों के लिए एक ही चमकीले नीले रंग (#006bff) का उपयोग किया गया है, और प्रोडक्ट लेआउट से परे फैले सजावटी गुलाबी और नीले रंग के छींटे अव्यवस्था पैदा किए बिना गर्माहट का एहसास कराते हैं। कंपोनेंट्स को सरल रखा गया है: पतले 1px बॉर्डर, हल्के नीले रंग की छाया, बड़े 24px कार्ड रेडियस और 8px बटन कोने नीरस लगने के बजाय जानबूझकर किए गए लगते हैं।
डेस्कटॉप पर अधिकतम चौड़ाई 1200px, बीच में, चौड़े मार्जिन के साथ। मुख्य स्क्रीन दो कॉलम में विभाजित है: बाएँ कॉलम में 80px का हेडर + बॉडी टेक्स्ट + स्टैक्ड लॉगिन बटन हैं, जबकि दाएँ कॉलम में पृष्ठभूमि में सजावटी तत्वों के साथ एक बुकिंग विजेट कार्ड है। मुख्य स्क्रीन के नीचे ट्रस्ट लोगो वाली एक सिंगल, पूरी चौड़ाई वाली पट्टी है। इसके बाद के अनुभाग बीच में स्थित हेडर ब्लॉक (H2 + सबटेक्स्ट + वैकल्पिक कॉल टू एक्शन) और फिर दो-कॉलम ब्लॉक के बीच बारी-बारी से आते हैं, जिनमें प्रत्येक उत्पाद छवि के पीछे सजावटी तत्व होते हैं। कार्ड ग्रिड का उपयोग शायद ही कभी किया जाता है—यह लेआउट बहु-कॉलम ग्रिड के बजाय अगल-बगल रखे गए युग्मित अनुभागों को प्राथमिकता देता है। अनुभागों के बीच की दूरी 48 से 64px तक होती है। नेविगेशन एक 64px की निश्चित शीर्ष पट्टी है जिसमें बाईं ओर लोगो, बीच में स्थित मेनू और दाईं ओर कॉल टू एक्शन का एक समूह है।
मुख्य दृश्य तत्व उत्पाद स्क्रीनशॉट हैं—बुकिंग कैलेंडर उपयोगकर्ता इंटरफ़ेस के सरल मॉकअप, चौड़े, गोल कोनों वाले साफ़ सफ़ेद कार्ड पर प्रदर्शित। सजावटी डिज़ाइन: प्रत्येक उत्पाद कार्ड मूंगा बैंगनी (#e55cff) या नीला (#0099ff) रंग के हल्के धब्बे से घिरा हुआ है, जो थोड़ा सा ऑफसेट और धुंधला है, जिससे एक सपाट स्क्रीनशॉट के बजाय कोलाज जैसा प्रभाव उत्पन्न होता है। कोई फ़ोटो या जीवनशैली संबंधी चित्र नहीं हैं—सभी दृश्य तत्व उत्पाद उपयोगकर्ता इंटरफ़ेस, अमूर्त आकृतियों या ट्रस्ट बार पर मोनोक्रोम पार्टनर लोगो को दर्शाते हैं। आइकन 1.5–2px की लाइन चौड़ाई वाले रैखिक, मोनोक्रोम और गहरे नीले (इंक नेवी) या नीले (सिग्नल ब्लू) रंग में हैं।
पैलेट
ब्रांड
- Ink Navy
#0b3558— मुख्य पाठ, शीर्षक, आइकन, कॉल टू एक्शन के लिए गहरा बैकग्राउंड, नेविगेशन लिंक। - Signal Blue
#006bff— प्राथमिक कॉल टू एक्शन (CTA), सक्रिय नेविगेशन, लिंक पर ज़ोर, चयनित राज्य
तटस्थ
- Carbon
#0a0a0a— शुद्ध काले रंग में टेक्स्ट (फॉलबैक), लोगो का प्रतीक, आइकन फिल। - Slate Gray
#476788— अतिरिक्त मुख्य पाठ, सहायक पाठ, म्यूट किए गए लेबल। - Mist Gray
#a6bbd1— अक्षम टेक्स्ट, निष्क्रिय फ़ंक्शन लेबल, हल्के आइकन आउटलाइन - Cloud
#f8f9fb— पेज कैनवास, फुटर बैकग्राउंड, अतिरिक्त सतह - Paper
#ffffff— कार्ड की सतहें, उभरे हुए पैनल, गहरे रंग की पृष्ठभूमि पर बटन का टेक्स्ट। - Pebble
#f0f3f8— आइकनों के लिए पृष्ठभूमि छवियां, इनपुट फ़ील्ड शेडिंग, सूक्ष्म विभाजक, होवर प्रभाव।
टाइपोग्राफी
12 से 80px तक · 10 चरण
- Gilroy — प्रतिस्थापन: Manrope · रूपरेखा 400, 500, 600, 700 · सभी इंटरफ़ेस टेक्स्ट। गिलरॉय एक ज्यामितीय मानवतावादी सैन्स-सेरिफ़ फ़ॉन्ट है जिसमें चौड़े अपर्चर और एकसमान स्ट्रोक कंट्रास्ट है; इसके बोल्ड वेट (700) का उपयोग शीर्षकों के लिए किया जाता है, जबकि 500-600 का उपयोग बटनों और उपशीर्षकों के लिए किया जाता है। इसे मैनरोप या इंटर से बदलें।
- Gilroy — प्रतिस्थापन: Inter · रूपरेखा 400 · बॉडी टेक्स्ट और सामान्य उपयोग वाले यूआई लेबल - 400-पॉइंट फॉन्ट वेट यह सुनिश्चित करता है कि लंबे टेक्स्ट भारी लगे बिना आसानी से पढ़े जा सकें।
- Gilroy — प्रतिस्थापन: Inter · रूपरेखा 500 · द्वितीयक शीर्षक और हाइलाइट किया गया मुख्य पाठ - 14/500 फ़ॉन्ट कार्ड शीर्षकों और इनलाइन लेबल के लिए प्राथमिक उपकरण है।
अंतराल और रूप
| उद्देश्य | अर्थ |
|---|---|
| घनत्व | घना |
| बुनियादी कदम | 8-16px |
| बटन त्रिज्या | 8px |
| कार्ड त्रिज्या | 24px |
| छैया छैया | नहीं - छाया के बजाय बॉर्डर |
| अनुभागों के बीच | 48-64px |
| पृष्ठ की चौड़ाई | 1200px |
एआई आपकी वेबसाइट को Calendly शैली में बनाएगा और उसमें डेटा भरेगा।
- इन लिंक के माध्यम से उत्पादों और पोस्ट से भरें - Instagram, TikTok, Facebook ।
- अपनी पुरानी वेबसाइट से सामग्री स्थानांतरित करें—बस पता निर्दिष्ट करें।
- सर्वश्रेष्ठ इंजन पर आधुनिक डिजाइन: React ( Next.js) जिसमें सर्वर रेंडरिंग और एसईओ अनुकूलन की सुविधा अंतर्निहित है।
- खोज परिणामों और न्यूरल नेटवर्क अनुशंसाओं के लिए पूरी तरह से स्वचालित एसईओ अनुकूलन।
समान शैलियाँ
- ElevenLabs — हल्के क्रीम रंग के शेड्स में एक फोटो निबंध, जिसमें सूक्ष्म शीर्षक हैं। बॉहॉस शैली की एक नोटबुक—अंडे के छिलके के रंग का कागज, काली स्याही, और उत्पाद प्रदर्शन के लिए बैंगनी और नारंगी रंग का एक विशेष स्पर्श।
- Awesomic — नारंगी रंग के विराम चिह्नों से सजी संपादकीय जस्ता जाली, जो कॉन्फेटी की याद दिलाती है।
- Monad — गर्म चर्मपत्र पर संपादकीय तकनीकी पत्रिका
- Dub — लिंक का मैट राइस पेपर कंट्रोल पैनल
- Seline Analytics — गर्म कागज पर एक शांत विश्लेषणात्मक तालिका
- Notion — दोपहर की धूप में गर्म कागज की नोटबुक
- Anthropic — गर्म चर्मपत्र पर छपी एक वैज्ञानिक क्षेत्र पत्रिका—शांत हाथीदांत जैसी सतहें, सेरिफ़ वाले संपादकीय शीर्षक, और मिट्टी का एक हल्का सा स्पर्श जो केवल तभी दिखाई देता है जब कार्रवाई की आवश्यकता होती है।
- Augen Pro — एप्पल के सफेद रंग के प्रेजेंटेशन में एक मोनोक्रोम स्पेस में एकमात्र एक्सेंट के रूप में एक क्लीनिकल, भारहीन, इलेक्ट्रिक ब्लू रंग का इस्तेमाल किया गया है।
- Antimetal — क्रीम रंग के कागज़ पर छपा एक संपादकीय लेख—एक वैज्ञानिक पत्रिका में एक शांत सुबह, जहाँ संयम आत्मविश्वास को दर्शाता है और सेरिफ़ फ़ॉन्ट मुख्य भूमिका निभाते हैं।
- Perk — गर्म चर्मपत्र कागज पर इलेक्ट्रिक लाइम
- Ditto — धूप से जगमगाती एक कार्यशाला में जंगली फूलों के नमूने तैयार किए जा रहे हैं। गर्म क्रीम रंग की सतहें, चमकीला पीला आधार रंग, गहरे नीले रंग की स्याही, और कलाकृति के पीछे खिलते हुए जैविक रंग के आकार।
- Officevibe — हल्के क्रीम रंग के कागज पर छपी एक संपादकीय पत्रिका। कल्पना कीजिए मानव संसाधन प्रबंधन पर लिखे एक विचारोत्तेजक निबंध की, जिसे एक उत्पाद के रूप में प्रस्तुत किया गया है—एक आधुनिक नीले इंटरफ़ेस पर घुमावदार सेरिफ़ फ़ॉन्ट में छपे शब्द।