Stripe
धूसर काचेवर निळ्या शाईने लिहिलेले हिशोबाचे पुस्तक
Stripe आर्थिक साधनांसाठी जवळजवळ एकरंगी भाषा वापरते: एक सौम्य, शांत पांढरा कॅनव्हास, गडद निळ्या रंगाची शीर्षके, जवळजवळ कोणतेही सजावटीचे क्रोम घटक नाहीत आणि एकच तेजस्वी निळसर निळा रंग (#533afd) जो बटण, लिंक किंवा आयकॉनची बाह्यरेषा म्हणून योग्यरित्या वापरला जाऊ शकतो. टायपोग्राफी अत्यंत बारीक आहे, 56px आकारातही तिचे वजन 300-पॉइंट आहे, जे उघडपणे कॉर्पोरेट वाटण्याऐवजी आत्मविश्वासाने संयमित वाटते; आकार वाढल्याने अक्षरांमधील अंतर झपाट्याने कमी होते. बटणे लहान, चौरस (4px) आहेत आणि त्यात जांभळा रंग भरलेला आहे किंवा अत्यंत बारीक जांभळ्या रंगाची बाह्यरेषा आहे. ही प्रणाली सावल्या पूर्णपणे टाळते; उंचीऐवजी पार्श्वभूमीच्या रंगछटा बदलून (पांढरा → #f8fafd → #e5edf5 → जांभळ्या रंगछटा) खोली साधली जाते. संपूर्ण इंटरफेस एखाद्या अकाउंटिंग लेजर किंवा टर्मिनलप्रमाणे कार्य करतो: दाट माहिती, स्पष्ट रेषा, विभागांमध्ये पुरेशी जागा आणि एखादी कृती आवश्यक असेल तेव्हाच रंग दिसतो.
पांढऱ्या कॅनव्हासवरील मध्यभागी असलेल्या मजकूर स्तंभाची कमाल रुंदी सुमारे १३२० पिक्सेल आहे. 'हिरो' हा पूर्ण आकाराचा (५६ पिक्सेल) डावीकडे संरेखित केलेला मजकूर ब्लॉक आहे, ज्याच्या खाली दोन 'कॉल टू ॲक्शन' आहेत, कोणतीही 'हिरो इमेज' नाही—म्हणजेच, टायपोग्राफीच 'हिरो' आहे. विभाग समान ९६ पिक्सेलच्या गटर आणि १ पिक्सेलच्या #e5edf5 विभाजकांसह उभ्या मांडणीत आहेत; यात एकाआड एक गडद/फिकट पट्ट्या नाहीत. प्रत्येक विभाग एका पुनरावृत्ती होणाऱ्या रचनेचे अनुसरण करतो: सर्व मोठ्या अक्षरांतील एक लहान विभाग शीर्षक (धुसर रंग, १२ पिक्सेल), त्यानंतर ३२-४८ पिक्सेलचे शीर्षक, त्यानंतर २२ पिक्सेलचा परिच्छेद, त्यानंतर उत्पादन कार्डांची एक ग्रिड (डेस्कटॉपवर ३ स्तंभ) किंवा दृश्य कलेसह २-स्तंभीय मजकूर ब्लॉक. क्लायंटचे लोगो एका अरुंद उभ्या पट्टीत, डावीकडे संरेखित केलेले दिसतात. फुटर ही एक रुंद #f8fafd पट्टी असून त्यात लिंक्सच्या बहु-स्तंभीय याद्या आहेत. एकूण लय संथ, मोजकी आणि प्रामुख्याने मजकूरात्मक आहे—लांब स्क्रोल लांबी असूनही माहितीची घनता कमी आहे.
प्रतिमांचा वापर संयमित आणि माहितीपट-शैलीचा आहे. पूर्ण-पानाचे फोटो केवळ केस स्टडीज (उदा. हर्ट्झसाठी हवाई वाहतूक छायाचित्रण) असलेल्या विभागांमध्ये दिसतात, जे वरून किंवा नाट्यमय कोनातून काढलेले असून नैसर्गिक रंगांचा वापर करतात—कोणतीही ड्युओटोन किंवा कलर प्रोसेसिंग नाही. उत्पादनाच्या युझर इंटरफेसचे स्क्रीनशॉट्स फीचर कार्ड्समध्ये वापरले जातात, जे डिव्हाइस फ्रेम्सशिवाय, टोकदार कोन आणि स्पष्ट सीमांसह प्रस्तुत केले जातात. भागीदारांचे लोगो कोणत्याही कंटेनरशिवाय, त्यांच्या स्वतःच्या रंगांमध्ये प्रदर्शित केले जातात. यात कोणतीही चित्रे, 3D रेंडर्स किंवा सजावटीचे अमूर्त ग्राफिक घटक नाहीत. आयकॉन्स एकसमान आहेत: पांढऱ्या पार्श्वभूमीवर लाइन वेट १, लाइन वेट २, भौमितिक रेखीय कलेसह (शेवरॉन, बाण, चेक मार्क, दस्तऐवज चिन्हे). पानामध्ये प्रामुख्याने मजकूर आणि मोकळी जागा आहे; प्रतिमा एकूण दृश्य क्षेत्राच्या ३% पेक्षा कमी जागा व्यापतात.
पॅलेट
ब्रँड
- Indigo Ink
#533afd— जांभळा रंग भरलेल्या बटणांसाठी, निवडलेल्या नॅव्हिगेशन स्थितींसाठी आणि फोकस-चालित रूपांतरण क्षणांसाठी वापरला जातो. - Indigo Hover
#7389ff— जांभळा रंग लिंक्स, टॅग्ज आणि लहान वाक्ये ठळक करण्यासाठी वापरला जातो. कृतीसाठीच्या आवाहनांकरिता (calls to action) तो मुख्य रंग म्हणून वापरला जाऊ नये.
तटस्थ
- Midnight Ink
#061b31— मुख्य शीर्षक आणि मजकूर गडद, जवळजवळ काळ्या रंगाचे असून त्याला निळ्या रंगाची छान छटा आहे, जो संपूर्ण फॉन्ट प्रणालीचा आधार आहे. - Slate
#64748d— राखाडी मजकूर लिंक्स, टॅग्ज आणि लहान वाक्यांशांना ठळक करतो. - Steel
#50617a— उपपरवान्यांवर वापरलेल्या स्लेट आणि फिकट जांभळ्या रंगांच्या छटांच्या मध्ये अतिरिक्त मजकूर आणि पूरक सामग्री ठेवण्यात आली आहे. - Smoke
#839bc8— मोठ्या सजावटीच्या शीर्षकांसाठी आणि त्यासोबतच्या मजकुरासाठी, फिकट जांभळ्या रंगाचा वापर केला जातो - मुख्य परिच्छेदांमध्ये कधीही नाही. - Pure White
#ffffff— पृष्ठाचा कॅनव्हास आणि कार्डांचे उंचवलेले पृष्ठभाग; ही एक पूर्वनिर्धारित पार्श्वभूमी आहे, जिच्या आधारे इतर सर्व गोष्टींचे मूल्यमापन केले जाते. - Mist
#f8fafd— फुटरची पार्श्वभूमी आणि विभाग विभाजक ही एक सौम्य, शांत छटा आहे, जी दृश्यमान सीमाेशिवाय भागांना वेगळे करते.
टायपोग्राफी
१२ ते ५६ पिक्सेल · ९ पायऱ्या
- sohne-var — बदली: Inter Tight (variable · रूपरेषा 300, 400 · संपूर्ण इंटरफेसमध्ये फक्त शीर्षके, मुख्य मजकूर, नेव्हिगेशन, बटणे आणि लेबल्ससाठी फॉन्ट वापरला आहे. ५६px च्या स्क्रीन आकारावरही ३०० वेट कायम राहते, जे एक वैशिष्ट्यपूर्ण गुणधर्म आहे: शीर्षके ओरडण्याऐवजी कुजबुजतात, आणि आवाजाऐवजी संयमाने अधिकार प्रस्थापित करतात. ४०० वेट फक्त १४-१६px वर नेव्हिगेशन आणि बटणांच्या मजकुरासाठी दिसते, जिथे लहान आकारांमध्ये सुवाच्यतेसाठी अतिरिक्त स्ट्रोकची आवश्यकता असते.
अंतर आणि स्वरूप
| उद्देश | अर्थ |
|---|---|
| घनता | प्रशस्त |
| मूलभूत पायरी | 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 — उबदार चर्मपत्रावरील उत्पादन सुविधेचे रेखाचित्र हे एक शांत, एकरंगी दृश्य आहे, जिथे औद्योगिक भव्यता आणि सुक्ष्म टायपोग्राफी संपूर्ण ब्रँडला मूर्त रूप देतात.