Stripe
फ्रॉस्टेड ग्लास पर नीली स्याही से लिखा हुआ एक लेखा-बही
Stripe वित्तीय उपकरणों के लिए लगभग एकरंगी भाषा का उपयोग करता है: एक सौम्य, शांत सफेद कैनवास, गहरे नीले रंग की हेडिंग, लगभग कोई सजावटी क्रोम तत्व नहीं, और एक चमकीला इंडिगो (#533afd) रंग जिसका उपयोग बटन, लिंक या आइकन आउटलाइन के रूप में किया जा सकता है। टाइपोग्राफी असाधारण रूप से पतली है, 56px पर भी 300 पॉइंट की मोटाई के साथ, जो स्पष्ट रूप से कॉर्पोरेट होने के बजाय आत्मविश्वास से संयमित लगती है; आकार बढ़ने के साथ अक्षरों के बीच की दूरी तेजी से घटती है। बटन छोटे, वर्गाकार (4px) हैं और बैंगनी रंग से भरे हुए हैं या सबसे पतली बैंगनी आउटलाइन का उपयोग करते हैं। सिस्टम परछाई का बिल्कुल भी उपयोग नहीं करता है; गहराई उभार के बजाय पृष्ठभूमि के बदलते रंगों (सफेद → #f8fafd → #e5edf5 → बैंगनी रंग) के माध्यम से प्राप्त की जाती है। पूरा इंटरफ़ेस एक लेखा बही या टर्मिनल की तरह व्यवहार करता है: सघन जानकारी, स्पष्ट रेखाएं, अनुभागों के बीच पर्याप्त स्थान, और रंग केवल तभी दिखाई देता है जब किसी क्रिया की आवश्यकता होती है।
सफेद कैनवास पर केंद्रित कंटेंट कॉलम की अधिकतम चौड़ाई लगभग 1320px है। हीरो एक पूर्ण आकार (56px) का बाएँ-संरेखित टेक्स्ट ब्लॉक है जिसके नीचे दो कॉल टू एक्शन हैं, कोई हीरो इमेज नहीं है—टाइपोग्राफी ही हीरो है। सेक्शन 96px के बराबर गैप और 1px #e5edf5 डिवाइडर के साथ लंबवत रूप से व्यवस्थित हैं; कोई वैकल्पिक गहरे/हल्के रंग की पट्टियाँ नहीं हैं। प्रत्येक सेक्शन एक दोहराव वाले पैटर्न का अनुसरण करता है: एक छोटा सेक्शन शीर्षक सभी बड़े अक्षरों में (धुएँ के रंग का, 12px), फिर 32-48px का शीर्षक, फिर 22px का पैराग्राफ, फिर प्रोडक्ट कार्ड का ग्रिड (डेस्कटॉप पर 3 कॉलम) या विजुअल आर्ट के साथ 2-कॉलम टेक्स्ट ब्लॉक। क्लाइंट लोगो एक संकीर्ण लंबवत पट्टी में बाएँ-संरेखित दिखाई देते हैं। फ़ूटर लिंक की बहु-कॉलम सूचियों के साथ एक चौड़ी #f8fafd पट्टी है। समग्र लय धीमी, सधी हुई और मुख्य रूप से टेक्स्ट आधारित है—लंबी स्क्रॉल लंबाई के बावजूद सूचना घनत्व कम है।
चित्र संयमित और वृत्तचित्र शैली में हैं। पूरे पृष्ठ की तस्वीरें केवल केस स्टडी वाले अनुभागों में ही दिखाई देती हैं (उदाहरण के लिए, हर्ट्ज़ के लिए हवाई यातायात फोटोग्राफी), जिन्हें ऊपर से या नाटकीय कोणों से प्राकृतिक रंगों का उपयोग करके खींचा गया है—कोई डुओटोन या रंग प्रसंस्करण नहीं। उत्पाद के उपयोगकर्ता इंटरफ़ेस के स्क्रीनशॉट फ़ीचर कार्ड के भीतर उपयोग किए जाते हैं, जिन्हें स्पष्ट कोणों और स्पष्ट बॉर्डर के साथ प्रस्तुत किया गया है, बिना डिवाइस फ्रेम के। साझेदार लोगो बिना किसी कंटेनर के अपने रंगों में प्रदर्शित होते हैं। कोई चित्र, 3डी रेंडर या सजावटी अमूर्त ग्राफिक तत्व नहीं हैं। आइकन एकसमान हैं: सफेद पृष्ठभूमि पर लाइन वेट 1, लाइन वेट 2, ज्यामितीय रेखा कला के साथ (शेवरॉन, तीर, चेक मार्क, दस्तावेज़ प्रतीक)। पृष्ठ में मुख्य रूप से पाठ और खाली स्थान है; चित्र कुल दृश्य क्षेत्र के 3% से कम भाग घेरते हैं।
पैलेट
ब्रांड
- Indigo Ink
#533afd— बैंगनी रंग का उपयोग भरे हुए बटनों, चयनित नेविगेशन स्थितियों और फोकस-आधारित रूपांतरण क्षणों के लिए किया जाता है। - Indigo Hover
#7389ff— बैंगनी रंग का उपयोग लिंक, टैग और छोटे वाक्यांशों को हाइलाइट करने के लिए किया जाता है। इसे कॉल टू एक्शन के लिए प्राथमिक रंग के रूप में उपयोग नहीं किया जाना चाहिए।
तटस्थ
- Midnight Ink
#061b31— मुख्य शीर्षक और बॉडी टेक्स्ट गहरे, लगभग काले रंग के हैं जिसमें नीले रंग की हल्की सी झलक है, जो संपूर्ण फॉन्ट सिस्टम का आधार है। - Slate
#64748d— ग्रे रंग का टेक्स्ट लिंक, टैग और छोटे वाक्यांशों को हाइलाइट करता है। - Steel
#50617a— अतिरिक्त पाठ और सहायक सामग्री को स्लेट और उप-लाइसेंसों पर उपयोग किए जाने वाले हल्के बैंगनी रंगों के बीच रखा गया है। - Smoke
#839bc8— बड़े सजावटी शीर्षकों और उनसे संबंधित पाठ के लिए, हल्के बैंगनी रंग का उपयोग किया जाता है - मुख्य अनुच्छेदों में कभी नहीं। - Pure White
#ffffff— पृष्ठ का कैनवास और कार्ड की उभरी हुई सतहें; वह डिफ़ॉल्ट पृष्ठभूमि जिसके आधार पर बाकी सब कुछ मापा जाता है। - Mist
#f8fafd— फ़ूटर का बैकग्राउंड और सेक्शन डिवाइडर एक सौम्य, शांत रंग के हैं जो बिना किसी स्पष्ट बॉर्डर के क्षेत्रों को अलग करते हैं।
टाइपोग्राफी
12 से 56px तक · 9 चरण
- sohne-var — प्रतिस्थापन: Inter Tight (variable · रूपरेखा 300, 400 · पूरे इंटरफ़ेस में केवल हेडिंग, बॉडी टेक्स्ट, नेविगेशन, बटन और लेबल के लिए ही फ़ॉन्ट का उपयोग किया गया है। 56px स्क्रीन साइज़ पर भी 300 वेट का फ़ॉन्ट ही प्रमुखता से दिखाई देता है, जो इसकी एक खास विशेषता है: हेडिंग ज़ोर से चिल्लाने के बजाय धीरे से बोलती हैं, और ज़ोरदार आवाज़ के बजाय संयम से अपनी बात रखती हैं। 400 वेट का फ़ॉन्ट केवल 14–16px स्क्रीन साइज़ पर नेविगेशन और बटन के टेक्स्ट के लिए ही दिखाई देता है, जहाँ छोटे साइज़ में स्पष्टता के लिए एक अतिरिक्त स्ट्रोक की आवश्यकता होती है।
अंतराल और रूप
| उद्देश्य | अर्थ |
|---|---|
| घनत्व | विशाल |
| बुनियादी कदम | 8px |
| बटन त्रिज्या | 4px |
| कार्ड त्रिज्या | 4px |
| छैया छैया | नहीं - छाया के बजाय बॉर्डर |
| अनुभागों के बीच | 96px |
| पृष्ठ की चौड़ाई | 1320px |
एआई आपकी वेबसाइट को Stripe शैली में बनाएगा और उसमें डेटा भरेगा।
- इन लिंक के माध्यम से उत्पादों और पोस्ट से भरें - Instagram, TikTok, Facebook ।
- अपनी पुरानी वेबसाइट से सामग्री स्थानांतरित करें—बस पता निर्दिष्ट करें।
- सर्वश्रेष्ठ इंजन पर आधुनिक डिजाइन: React ( Next.js) जिसमें सर्वर रेंडरिंग और एसईओ अनुकूलन की सुविधा अंतर्निहित है।
- खोज परिणामों और न्यूरल नेटवर्क अनुशंसाओं के लिए पूरी तरह से स्वचालित एसईओ अनुकूलन।
समान शैलियाँ
- Ui — मैट पेपर पर नैदानिक योजना
- monopo saigon — संपादकीय चुप्पी के पीछे एक तरल, इंद्रधनुषी चमक—पिघली हुई रोशनी पर तैरती एक मोनोक्रोम संपादकीय गैलरी
- Ventriloc — गर्म कागज पर डेटा का एक संपादकीय अवलोकन - एक नारंगी अंगारा जो एकरंगी सटीकता को उजागर करता है
- Hyer Aviation — चर्मपत्र पर बने कॉकपिट में गोधूलि बेला छाई हुई है। धुंधली सुबह का आकाश विमान के धड़ के आकार के सेरिफ़ लोगो से मिलता है, और एक हल्का सा गर्म मिट्टी का स्पर्श एकरंगी रंग की सादगी को तोड़ता है।
- Family — क्रीम रंग के चर्मपत्र पर छपी एक परीकथा की कहानी का एक पृष्ठ।
- OFF+BRAND. — गर्म चर्मपत्र पर इंद्रधनुषी गोला
- Geniestudio — एक मुलायम, दिन के उजाले में काम आने वाली नोटबुक—चौड़े हाशिये वाली और मोटी कलम की एक ही रेखा वाली नोटबुक
- xAI — काली गोली के साथ वार्म क्रीम लैब
- Seed — प्रयोगशाला के कांच के नीचे एक जीवित जीव
- Cosmos — एक गैलरी की दीवार जिस पर लिनन बिछा है और पोलरॉइड तस्वीरें टंगी हैं।
- Cal — मोनोक्रोम व्यावहारिकता, एक मानवीय दृष्टिकोण। एक ऐसी प्रणाली जो सख्त काले और सफेद रंग के पैलेट के माध्यम से स्पष्टता और कार्यक्षमता को प्राथमिकता देती है, लेकिन मैत्रीपूर्ण टाइपोग्राफी और गोल आकृतियों के साथ इसे सौम्य बनाती है।
- T1 Energy — गर्म चर्मपत्र पर एक उत्पादन सुविधा का चित्र एक शांत, मोनोक्रोम दृश्य है जहां औद्योगिक पैमाना और सूक्ष्म टाइपोग्राफी पूरे ब्रांड को समाहित करती है।