Duolingo

सफेद कागज पर चंचल कक्षा का शुभंकर

डुओलिंगो का इंटरफ़ेस बच्चों की चित्र-पुस्तक की तरह डिज़ाइन किया गया है: एक सफ़ेद कैनवास, गोल-मटोल फ़ॉन्ट और एक गहरा हरा रंग जो तुरंत "सही उत्तर" का संकेत देता है। मुख्य टेक्स्ट हल्के भूरे रंग का है, जिससे हरा और नीला रंग भावनात्मक प्रभाव पैदा करते हैं—हरा रंग प्रगति और शीर्षकों के लिए, और नीला रंग क्लिक करने योग्य लिंक और अतिरिक्त कार्यों के लिए। बटन गोलियों के आकार के या गोल कोनों वाले मोटे बटनों के रूप में हैं, जिन पर मोटी काली या रंगीन बॉर्डर हैं, जिससे प्रत्येक बटन किसी सपाट UI कंट्रोल की बजाय पेज पर चिपके स्टिकर जैसा लगता है।

प्रत्येक अनुभाग पृष्ठ की पूरी चौड़ाई में फैला हुआ है और एक ही स्तंभ में लंबवत रूप से व्यवस्थित है, प्रत्येक अनुभाग लगभग 800 पिक्सेल ऊँचा है। अधिकतम सामग्री की चौड़ाई केंद्र में लगभग 1 पिक्सेल है। बाईं ओर पाठ और दाईं ओर चित्र बारी-बारी से आते हैं, जिससे अनुभागों के बीच पर्याप्त लंबवत स्थान (80 पिक्सेल) मिलता है। इसमें कोई ग्रिड कार्ड या बहु-स्तंभ लेआउट नहीं है—प्रत्येक अनुभाग एक एकल पाठ ब्लॉक है जिसके साथ एक एकल चित्र दिया गया है। नेविगेशन एक न्यूनतम शीर्ष पट्टी है जिसमें लोगो और भाषा चयनकर्ता है, जो अनुभागों के बीच एक स्थिर पट्टी के रूप में दिखाई देता है। फ़ूटर पृष्ठ की पूरी चौड़ाई में फैली एक हरी पट्टी है। इसकी शैली संपादकीय है: शीर्षक, अनुच्छेद, कॉल टू एक्शन, चित्र, पुनरावृति।

पुस्तक की चित्रात्मक भाषा में सपाट, द्वि-आयामी शुभंकर पात्रों (उल्लू डुएट और विभिन्न मानव आकृतियाँ) का उपयोग किया गया है, जिनमें गोल ज्यामितीय आकृतियाँ, मोटी काली रूपरेखाएँ और गुलाबी, बैंगनी, पीला, नारंगी और नीले रंग का पूरक रंग संयोजन है, जो इंटरफ़ेस में कभी दिखाई नहीं देता। चित्र प्रत्येक अनुभाग के दाईं ओर पाठ के बगल में, बिना किसी कंटेनर या पृष्ठभूमि के, शुद्ध सफेद पृष्ठभूमि पर स्थित हैं। कोई फ़ोटो नहीं है—पात्र ही दृश्य सामग्री के रूप में कार्य करते हैं। चित्रकला में मोटी रूपरेखाओं का उपयोग किया गया है, जो शुभंकरों की शैली के अनुरूप है। चित्र घनत्व मध्यम है: प्रत्येक अनुभाग में पात्र का एक बड़ा चित्र है, और पृष्ठ का शेष भाग टाइपोग्राफी और खाली स्थान के लिए समर्पित है।

चंचल अतिसूक्ष्मवाद

https://duolingo.com

पैलेट

ब्रांड

Eager Green #58cc02 — लिंक, टैग और छोटे वाक्यांशों को हाइलाइट करने के लिए हरे रंग का उपयोग किया जाता है। इसे कॉल टू एक्शन के लिए प्राथमिक रंग के रूप में उपयोग नहीं किया जाना चाहिए।
Storybook Green #d7ffb8 — हल्की सतहों पर कोमल हाइलाइट्स, फुटर में नेविगेशन लेबल के पीछे सूक्ष्म पृष्ठभूमि टोन।

तटस्थ

Spark Blue #1cb0f6 — लिंक, टैग और छोटे वाक्यांशों को हाइलाइट करने के लिए नीले रंग का उपयोग किया जाता है। इसे कॉल टू एक्शन के लिए प्राथमिक रंग के रूप में उपयोग नहीं किया जाना चाहिए।
Fresh Leaf #a5ed6e — लिंक, टैग और छोटे वाक्यांशों को हाइलाइट करने के लिए हरे रंग का उपयोग किया जाता है। इसे कॉल टू एक्शन के लिए प्राथमिक रंग के रूप में उपयोग नहीं किया जाना चाहिए।
Night Ink #000437 — लिंक, टैग और संक्षिप्त रूप से हाइलाइट किए गए वाक्यांश बैंगनी रंग में हाइलाइट किए गए हैं।
Paper White #ffffff — पेज कैनवास, कार्डबोर्ड सतहें, हरे/गहरे रंग की पृष्ठभूमि पर बटन टेक्स्ट।
Charcoal #4b4b4b — हीरो हेडर और बॉडी टेक्स्ट - यूनिवर्सल डार्क टेक्स्ट जो रंगीन हेडलाइंस को अलग से दिखाने में मदद करता है।
Pencil Gray #777777 — पाठ के मुख्य अनुच्छेदों को अस्पष्ट अक्षरों से हाइलाइट किया गया है, और द्वितीयक वर्णनात्मक पाठ पृष्ठभूमि में चला जाता है, ताकि रंगीन तत्व प्रमुखता से दिखाई दें।

टाइपोग्राफी

13 से 64px तक · 7 चरण

feather — प्रतिस्थापन: Inter · रूपरेखा 700 · "मुफ़्त. मज़ेदार. असरदार" और "डुओलिंगो इंग्लिश टेस्ट" जैसे सेक्शन हेडिंग्स को एक खास गोल फ़ॉन्ट में दिखाया गया है, जो ब्रांड को एक चंचल, दोस्ताना और शुभंकर जैसा अंदाज़ देता है। इसे उपयुक्त मोटाई वाले "फेदर बोल्ड" या "नुनीटो ब्लैक" फ़ॉन्ट से बदलें। अक्षरों के बीच की दूरी: -0.0200em
duolingo-sans — प्रतिस्थापन: Inter · रूपरेखा 500 · मुख्य पैराग्राफ और नेविगेशन लिंक 17px/500 पिक्सेल आकार में हैं—एक ज्यामितीय सैन्स-सेरिफ़ फ़ॉन्ट जो पठनीय बना रहता है, जिससे 700 लाइन वेट महत्वपूर्ण बिंदुओं को उजागर कर सके। इसे 'DIN Next', 'Inter' या 'Nunito Sans' से बदलें।
duolingo-sans — प्रतिस्थापन: Inter · रूपरेखा 700 · सभी वेट-700 मानों का उपयोग किया गया है: नेविगेशन लेबल में बड़े अक्षरों का आकार 15px (ls 0.0530em), उपशीर्षकों का आकार 19px और 32px, और लिंक एम्फेसिस का आकार 13px है। मुख्य टेक्स्ट के समान ही फ़ॉन्ट का उपयोग किया गया है—दृश्य अंतर केवल वेट में है, फ़ॉन्ट में बदलाव नहीं है। अक्षरों के बीच की दूरी: नेविगेशन लेबल में बड़े अक्षरों के लिए 0.0530em।

अंतराल और रूप

उद्देश्य	अर्थ
घनत्व	घना
बुनियादी कदम	12px
बटन त्रिज्या	12px
कार्ड त्रिज्या	12px
छैया छैया	नहीं - छाया के बजाय बॉर्डर
अनुभागों के बीच	80-120px
पृष्ठ की चौड़ाई	1200px

एआई आपकी वेबसाइट को Duolingo शैली में बनाएगा और उसमें डेटा भरेगा।

इन लिंक के माध्यम से उत्पादों और पोस्ट से भरें - Instagram, TikTok, Facebook ।
अपनी पुरानी वेबसाइट से सामग्री स्थानांतरित करें—बस पता निर्दिष्ट करें।
सर्वश्रेष्ठ इंजन पर आधुनिक डिजाइन: React ( Next.js) जिसमें सर्वर रेंडरिंग और एसईओ अनुकूलन की सुविधा अंतर्निहित है।
खोज परिणामों और न्यूरल नेटवर्क अनुशंसाओं के लिए पूरी तरह से स्वचालित एसईओ अनुकूलन।

इस शैली में एक वेबसाइट बनाएं

समान शैलियाँ

Family — क्रीम रंग के चर्मपत्र पर छपी एक परीकथा की कहानी का एक पृष्ठ।
Say Briefly — क्रीम रंग के कागज पर बनी क्रिएटिव एजेंसी की स्केचबुक
Flying Papers — शनिवार की सुबह के कार्टून में स्वीकारोक्ति
Portrait — क्रीम रंग के कागज़ पर पोलरॉइड तस्वीरों में कैद यादों की एक दीवार। एक चमकीली, क्रीम रंग की स्क्रैपबुक जिसमें गहरे नीले रंग की स्याही ही एकमात्र टेक्स्ट, एकमात्र संरचना रेखाएँ और एकमात्र फ्रेम रंग है—और हाथ से बनाया गया एक इंद्रधनुष जो केवल एक बार "रजिस्टर" बटन पर और इटैलिक में लिखे "हमेशा" शब्द पर दिखाई देता है, फिर कभी नहीं।
Karl — धूप वाले दिन 3डी पॉप-अप बुक शैली का डायोरामा
Navigate — एक बोर्ड पर चिपके स्टिकरों का एक बड़ा सेट: बड़े-बड़े भद्दे अक्षरों में, सभी गोल आकृतियों में और पाँच बहुरंगी आइकन, जो एक लोगो की तरह दोहराए गए हैं।
Monte — समुद्र तट पर सुबह का नजारा थोड़ा जंग लगे रंग का है।
MotherDuck — क्रीम रंग के कागज पर रंगीन पेंसिल से टर्मिनल को कोडित किया गया।
Wise Design — एक वैश्विक सड़क पर एक नियॉन रंग का बाजार स्टॉल—एक चमकीला हरा साइनबोर्ड भीड़ भरे बाजार में चीखता हुआ दिखाई दे रहा है, जबकि उसके पीछे, एक परिष्कृत उत्पाद यूजर इंटरफेस विवेकपूर्ण ढंग से प्रकट होता है।
Hatch — हाथ से बनाया गया, गुप्त डिज़ाइन जिसमें हल्के रंग के कैंडी बाउल का मिश्रण है। मलाईदार कागज़ पर पुदीने के रंग, रंगीन बिंदीदार डॉट्स और गोली के आकार के संदेश लिखे हैं, जहाँ एक बड़ा, बोल्ड सेरिफ़ फ़ॉन्ट मस्ती का संकेत देता है, और कोने में एक नीला शुभंकर आँख मारता है।
Superr — दोपहर की हल्की रोशनी में एक गर्म स्कूल की नोटबुक। एक क्रीम रंग का पन्ना, बिना ढक्कन वाला एक नारंगी मार्कर और चिपकाए गए नाम के स्टिकरों का एक ढेर, जिन्हें अभी निकालना बाकी है।
Mews — भोर के समय, गुलाबी रंग में सराबोर एक आतिथ्य नियंत्रण केंद्र। सफेद दीवारों वाला, धूप से जगमगाता कार्यक्षेत्र, जहाँ गहरे काले अक्षर, हल्के क्रीम रंग के कार्ड और एक चटख गुलाबी रंग का एक्शन बटन प्रत्येक स्क्रीन की पहचान हैं—यह कॉर्पोरेट संयम के बजाय चंचल आत्मविश्वास को दर्शाता है।