Column
ठंडी सुबह की रोशनी में एक गहरे नीले रंग की बहीखाता
कॉलम लगभग सफेद पृष्ठभूमि पर गहरे, संस्थागत नेवी ब्लू रंग का उपयोग करता है: पृष्ठ पहली नज़र में एक मजबूत बैंकिंग उत्पाद की सतह जैसा और दूसरी नज़र में एक डेवलपर के खेल के मैदान जैसा लगता है। ब्रांड का रंग एक नहीं, बल्कि समन्वित जोड़ी है—गंभीर संरचना के लिए नेवी ब्लू #111a4a, डेटा और कोड के लिए मिंट ग्रीन #44b48b—और ब्रेक्स कार्ड जैसी उच्च-तीव्रता वाली सतहों के लिए एक हल्का नारंगी (#ec652b) रंग आरक्षित है। टाइपोग्राफी में सुइसइंट्ल का प्रभुत्व है, जो 300 (लिंक) से 600 (डिस्प्ले) तक की पूरी वेट रेंज में इस्तेमाल किया गया एक ज्यामितीय सैन्स सेरिफ़ फ़ॉन्ट है, जो सिस्टम को एक परिष्कृत, संपादकीय शैली प्रदान करता है जो अधिकांश फिनटेक कंपनियों में नहीं मिलती। कार्ड सूक्ष्म, स्तरित छायाओं वाली बड़ी सफेद सतहों पर तैरते हुए दिखाई देते हैं; अधिकांश इंटरफ़ेस तत्व सपाट हैं, गहराई केवल वहीं दिखाई देती है जहाँ कार्ड को एक भौतिक वस्तु जैसा महसूस होना चाहिए (लेनदेन विजेट, उत्पाद मॉकअप)। कोड और वित्तीय डेटा मोनोक्रोम, सीफोम रंग में प्रस्तुत किए गए हैं—यह एक दृश्य संकेत है कि यह बैंक इंजीनियरों द्वारा इंजीनियरों के लिए बनाया गया है।
पेज का लेआउट पूरी चौड़ाई में है, बीच में व्यवस्थित है और किनारों पर चौड़े मार्जिन (डेस्कटॉप पर 64–15 सेमी) हैं। मुख्य स्क्रीन का लेआउट दो भागों में बंटा हुआ है: शीर्षक और कॉल टू एक्शन 25 सेमी की दूरी पर बाईं ओर हैं, जबकि एक फ्लोटिंग ट्रांजैक्शन विजेट 55 सेमी की दूरी पर दाईं ओर हाफटोन मैप बैकग्राउंड पर स्थित है। मुख्य स्क्रीन के नीचे, सेक्शन सफेद (4 सेमी) और हल्के कैनवास (5 सेमी) रंग में बारी-बारी से हैं, जिनके बीच 6 सेमी का वर्टिकल गैप है। कंटेंट को एक सिंगल 6-कॉलम ग्रिड में व्यवस्थित किया गया है: टेक्स्ट ब्लॉक 4 कॉलम (7 सेमी) में हैं, इमेज/प्रोडक्ट कार्ड 5–6 कॉलम में हैं, जो ग्रिड से जानबूझकर थोड़ा हटकर हैं। फीचर्स का वर्णन करने वाले सेक्शन 2-कॉलम लेआउट का उपयोग करते हैं: टेक्स्ट बाईं ओर और प्रोडक्ट दाईं ओर। ट्रस्ट स्टैटिस्टिक्स सेक्शन को पेज की पूरी चौड़ाई में 4-कॉलम ग्रिड में विभाजित किया गया है। कस्टमर लोगो 48px गैप वाली एक सिंगल सेंटर्ड पंक्ति में स्थित हैं। फुटर का लेआउट कॉम्पैक्ट दो-कॉलम वाला है। नेविगेशन के लिए मुख्य स्क्रीन के ऊपर एक स्थिर, 62px ऊँचा, पारदर्शी टॉप बार है जिसका बैकग्राउंड धुंधला है और स्क्रॉल करने पर धीरे-धीरे सफेद हो जाता है। इसमें कोई साइडबार या मेगा-मेनू नहीं है—ड्रॉपडाउन सरल तीर-शैली के मेनू हैं।
दृश्य शैली न्यूनतम और कार्यात्मक है—कॉलम ने स्टॉक फोटोग्राफी का बिल्कुल भी उपयोग नहीं किया है। दृश्य भाषा तीन स्रोतों पर आधारित है: (1) SVG डेटा चित्रण, विशेष रूप से एक बिंदीदार हाफटोन विश्व मानचित्र, जिसे इंडिगो से नारंगी से फ़िरोज़ी रंग के ग्रेडिएंट के साथ प्रस्तुत किया गया है, जो मुख्य तत्व के पीछे वैश्विक स्तर का वातावरण बनाता है; (2) उत्पाद कार्ड लेआउट—फ्लैटिंग विजेट जो खाता शेष, हस्तांतरण विवरण और JSON कोड स्निपेट को नाटकीय छाया वाले सफेद कार्डों में प्रदर्शित करते हैं; (3) चार्ट विज़ुअलाइज़ेशन—विश्वास/सांख्यिकी अनुभाग में उपयोग किए जाने वाले पतली कनेक्टिंग लाइनों वाले फ़िरोज़ी कैंडलस्टिक या बार चार्ट। हाफटोन मानचित्र एक विशिष्ट दृश्य तत्व है—इसका ग्रेडिएंट #d65620 (नारंगी) से बैंगनी, नीला, एज्योर, फ़िरोज़ी और पीले रंग में बदलता है, जिससे एक ऐसा स्पेक्ट्रम बनता है जो संपूर्ण ब्रांड पैलेट को एक ही सजावटी सतह पर एकजुट करता है। आइकनों की आउटलाइन की मोटाई #232730 या #a9acb6 वेरिएंट में 1.5–2px है, और सक्रिय अवस्थाओं के लिए फिल का उपयोग किया गया है। कोई लाइफस्टाइल फोटो नहीं, कोई अमूर्त 3डी रेंडर नहीं—यह संयम जानबूझकर अपनाया गया है ताकि ध्यान उत्पाद और डेटा पर केंद्रित रहे।
पैलेट
ब्रांड
- Indigo Navy
#111a4a— मुख्य ब्रांड रंग का उपयोग कॉल टू एक्शन, सक्रिय नेविगेशन स्टेट्स, हेडर और लोगो में किया गया है। गहरा बैंगनी-नीला रंग साइट को एक ठोस लेकिन समृद्ध काला रंग देता है; सफेद टेक्स्ट के साथ मिलकर, यह साइट पर सबसे प्रभावशाली बटन बनाता है। - Seafoam 600
#44b48b— कोड और डेटा का रंग JSON कुंजी, पहचानकर्ता और कोड स्निपेट में वित्तीय मूल्यों के लिए ब्रांड रंग है। इसका उपयोग चार्ट और विकास विज़ुअलाइज़ेशन में डेटा बिंदुओं के लिए भी किया जाता है। - Seafoam 700
#167e6c— डेटा संदर्भ में रूपरेखा, चार्ट रेखाओं और आइकन एक्सेंट के लिए गहरे समुद्री झाग रंग का उपयोग किया गया है। इससे गहरे रंग की पृष्ठभूमि के साथ समुद्री झाग का पैमाना संतुलित दिखता है। - Seafoam 400
#94efb7— हाइलाइट किए गए कोड अंश में कोड ब्लॉक के भीतर स्ट्रिंग मान, यूआरएल और एपीआई एंडपॉइंट शामिल हैं। सबसे हल्के समुद्री झाग रंग को हरे रंग के आभास वाले मोनोस्पेस्ड फ़ॉन्ट के रूप में पढ़ा जा सकता है। - Deep Sea
#023247— चार्ट की सजावटी रूपरेखा और एक्सेंट रंग एक समृद्ध फ़िरोज़ी रंग है जिसका उपयोग एसवीजी चित्रण और डेटा विज़ुअलाइज़ेशन में समुद्री झाग रंग पैमाने के साथ किया जाता है।
तटस्थ
- Midnight Ink
#011821— गहरे रंग की सतह और हाइलाइट किया हुआ टेक्स्ट – प्रोडक्ट कार्ड का बैकग्राउंड, हाई-कॉन्ट्रास्ट वाला मुख्य टेक्स्ट। हल्के नीले-हरे रंग के शेड के साथ ग्रे के करीब; किसी सेक्शन को इनवर्ट करने के लिए डार्क मोड के बेस के रूप में उपयोग किया जाता है। - Slate Ink
#3b3e47— द्वितीयक शीर्षक और मुख्य पाठ मिडनाइट इंक की तुलना में थोड़े गर्म रंग के हैं, इनका उपयोग वहां किया गया है जहां हल्के कैनवास पर शुद्ध काला रंग बहुत कठोर प्रतीत होता। - Steel
#7c7f88— मुख्य पाठ और लिंक पाठ में एक शांत रंग का प्रभुत्व है (मुख्य पाठ में इसका प्रयोग 245 बार किया गया है)। यह एक तटस्थ धूसर-नीला रंग है जो शांत प्रतीत होता है, न कि फीका। - Fog
#a9acb6— आइकन की रूपरेखा, तृतीयक बॉर्डर और प्लेसहोल्डर टेक्स्ट। एक मध्यम धूसर रंग जो टेक्स्ट से प्रतिस्पर्धा किए बिना उसे अलग करता है। - Mist
#cbcccf— मुख्य पाठ—हस्ताक्षर, अस्वीकरण और छोटे अक्षरों में लिखी गई जानकारी—सफेद पृष्ठभूमि पर स्पष्ट रूप से पढ़ी जा सकती है, लेकिन देखने में कम ध्यान आकर्षित करती है। - Silver Lining
#e3e4e8— कार्ड बॉर्डर, इनपुट फ़ील्ड बॉर्डर, विभाजक रेखाएँ। इस संरचनात्मक, सूक्ष्म रंग का उपयोग वहाँ किया जाता है जहाँ दो सतहों को बिना छाया के अलग करने की आवश्यकता होती है।
टाइपोग्राफी
10 से 60px तक · 10 चरण
- SuisseIntl — प्रतिस्थापन: Inter · रूपरेखा 300, 400, 500, 600 · मुख्य फ़ॉन्ट – सभी शीर्षकों, बॉडी टेक्स्ट, बटनों, नेविगेशन, लिंक और कार्ड टेक्स्ट के लिए उपयोग किया जाता है। अद्वितीय ज्यामितीय सैन्स सेरिफ़ फ़ॉन्ट कॉलम को एक विशिष्ट संपादकीय शैली प्रदान करता है, जो इसे केवल इंटर-ओनली के साथ काम करने वाली अन्य फिनटेक कंपनियों से अलग करता है। शीर्षकों के लिए फ़ॉन्ट का वज़न 600 (52–60px), उपशीर्षकों के लिए 500, बॉडी टेक्स्ट के लिए 400 और कम महत्व वाले लिंकों के लिए 300 है।
- SuisseIntlMono — प्रतिस्थापन: JetBrains Mono · रूपरेखा 400 · SuisseIntl के समान एक मोनोस्पेस्ड फॉन्ट, जिसका उपयोग तकनीकी लेबल, API पहचानकर्ताओं और UI तत्वों में एम्बेडेड डेटा के लिए किया जाता है। यह SuisseIntl के समान अनुपात बनाए रखता है, इसलिए मोनोस्पेस्ड और प्रोपोर्शनल टेक्स्ट मिश्रित संदर्भों में सही ढंग से संरेखित होते हैं।
- SFMono — प्रतिस्थापन: Fira Code · रूपरेखा 400 · कोड स्निपेट डिस्प्ले – JSON उदाहरणों और API दस्तावेज़ीकरण ब्लॉकों में प्रदर्शित होता है। कोड को UI टेक्स्ट से अलग दिखाने के लिए समुद्री झाग रंग का उपयोग किया जाता है।
अंतराल और रूप
| उद्देश्य | अर्थ |
|---|---|
| घनत्व | औसत |
| बुनियादी कदम | 8px |
| बटन त्रिज्या | 8px |
| कार्ड त्रिज्या | 8px |
| छैया छैया | नहीं - छाया के बजाय बॉर्डर |
| अनुभागों के बीच | 72px |
| पृष्ठ की चौड़ाई | 1200px |
एआई आपकी वेबसाइट को Column शैली में बनाएगा और उसमें डेटा भरेगा।
- इन लिंक के माध्यम से उत्पादों और पोस्ट से भरें - Instagram, TikTok, Facebook ।
- अपनी पुरानी वेबसाइट से सामग्री स्थानांतरित करें—बस पता निर्दिष्ट करें।
- सर्वश्रेष्ठ इंजन पर आधुनिक डिजाइन: React ( Next.js) जिसमें सर्वर रेंडरिंग और एसईओ अनुकूलन की सुविधा अंतर्निहित है।
- खोज परिणामों और न्यूरल नेटवर्क अनुशंसाओं के लिए पूरी तरह से स्वचालित एसईओ अनुकूलन।
समान शैलियाँ
- dope.security — बैंगनी बीकन वाला मध्यरात्रि टर्मिनल
- Leonardo — एक उलटी संपादकीय गैलरी। एक काले रंग की दीवारों वाला संग्रहालय जहाँ बैंगनी रंग की हेडलाइनें दीवार पर लगी कलाकृतियों की तरह काम करती हैं, और नीचे एआई द्वारा निर्मित चित्र एक घनी ग्रिड में लटके हुए हैं।
- VEED — नियॉन हरे रंग के लाइट बटनों वाली सफेद गैलरी की दीवार
- Craft Docs — स्क्रैपबुकिंग के लिए एक डिजिटल कोलाज। इसका डिज़ाइन एक विचारशील, स्पर्शनीय स्क्रैपबुक जैसा दिखता है, जहाँ संरचित डिजिटल नोट्स कोमल, प्राकृतिक बनावटों के साथ मिलकर एक अनूठा संयोजन बनाते हैं।
- Letter — एक निजी गैलरी जिसमें संग्रहण क्षेत्र से लाई गई चमकीली कलाकृतियाँ प्रदर्शित हैं। एक काले रंग की दीवारों वाला प्रदर्शनी स्थल जहाँ रंगीन दीवारों पर क्रोम की मूर्तियों के ऊपर सेरिफ़्ड हेडलाइनें तैरती हुई प्रतीत होती हैं।
- Railway — कॉस्मिक मिडनाइट एक्सप्रेस। स्पष्ट संकेतों द्वारा निर्देशित, अंधेरे, तारों से जगमगाते अंतरिक्ष में एक शांत, रोमांचकारी यात्रा।
- Garden Eight — क्रीम रंग के कागज पर छपा एक भव्य संपादकीय लेख। 215px सेरिफ़ वाला शीर्षक गर्म चर्मपत्र पर अकेला बैठा है, जिसके चारों ओर तैरती हुई मूर्तिकला जैसी आकृतियाँ और समुद्र की हवा की याद दिलाने वाला खाली स्थान है—यह पृष्ठ किसी डैशबोर्ड की बजाय कला ग्रंथ के कवर जैसा अधिक प्रतीत होता है।
- Bevel — क्लाउडलाइट में मॉर्निंग मेट्रिक्स। ऐसी स्क्रीन बनाएं जो चमकदार सफेद स्वास्थ्य डायरी की तरह दिखती हों, और आपके पहनने योग्य डिवाइस पर एक हल्की चमक वाला डैशबोर्ड भी दिखाई दे।
- Mollie — एक कश्मीरी काउंटर, एक गहरे रंग का बहीखाता। काले अक्षरों के चारों ओर संपादकीय डिजाइन के लिए पर्याप्त खाली जगह छोड़ें, फिर गर्म क्रीम, एस्प्रेसो ब्राउन और वास्तविक भुगतान विधियों की स्पर्शनीय तस्वीरों के साथ उत्पाद से संबंधित बिंदुओं को सुदृढ़ करें।
- Baselayer — बेसलेयर आधी रात को एक इलेक्ट्रॉनिक बहीखाता है। इसके इंटरफ़ेस को एक संस्थागत दस्तावेज़ की तरह समझें, जो एक चमकते हुए जोखिम विश्लेषण कंसोल पर खुला हुआ है।
- Bajgart Office — संपादकीय गैलरी की दीवार। एक बड़े सफेद स्थान का उपयोग करें जहां सूक्ष्म सेरिफ फ़ॉन्ट और पोर्टफोलियो के अंश चमकदार इंटरफ़ेस तत्वों की तुलना में अधिक दृश्य प्रभाव डालें।
- Azione — एक धूप से जगमगाता संपादकीय द्विपक्षी चित्र। गर्मजोशी से भरी, अपूर्ण अभियान छवियों का संयोजन, गैलरी जैसी टाइपोग्राफी और जंग लगे रंग के सूचना खंडों के साथ।