ब्रांड स्टूडियो

#/start पर स्थित ब्रांड स्टूडियो वह एकमात्र जगह है जहाँ आप अपने brand को आकार देते हैं - इसके logos, रंग, type, बाकी tokens और वे फ़ाइलें जो यह रखता है। इसे यहाँ एक बार सेट करें और हर टूल, पेज और export इसका पालन संरचना के अनुसार करता है, समीक्षा के अनुसार नहीं।

जैसे-जैसे आप बदलाव करते हैं, वे पूरे ऐप में लाइव प्रीव्यू होते हैं, ताकि आप किसी रंग या font को हर जगह उतरते हुए देख सकें, इसे अंतिम रूप देने से पहले। यह सब ऑन-डिवाइस है: आपकी brand फ़ाइलें और tokens कभी आपकी मशीन नहीं छोड़तीं (कोई Google Font चुनने पर सहमति डायलॉग के बाद Google से वह एक family एक बार लाई जाती है), और brand एक ही brand pack फ़ाइल में यात्रा करता है।

यह editor है। Dashboard केवल दर्पण है। Dashboard (#/d) का Design system टैब आपके brand को read-only दिखाता है; आप इसे यहाँ #/start पर एडिट करते हैं। अगर आप बाद में कोई रंग बदलना चाहें, तो Brand Studio पर वापस आएँ।

कमरे

स्टूडियो साइड में एक rail में सूचीबद्ध कमरों का एक सेट है - चरण नहीं। कुछ भी क्रमांकित नहीं है, कुछ भी किसी और चीज़ पर निर्भर नहीं है, और इनमें से किसी में भी पहुँचना जायज़ है:

• Overview - केंद्र बिंदु। अभी क्या मौजूद है, एक नज़र में, हर कमरे में जाने वाले दरवाज़े के साथ।
• Colours - एक-एक करके रंग जोड़ें, roles दें या एक से पूरा palette बनाएँ।
• Type - चार फेस जिन्हें ऐप, टूल और हर एक्सपोर्ट पढ़ते हैं।
• Logos - आपके निशान, हर orientation और treatment में।
• Tokens - corner radius, spacing, shadows और बाकी system।
• Files - image, audio और motion फ़ाइलें जो आपका brand रखता है।

फ़ोन पर वही सूची header के नीचे टिकी एक क्षैतिज chip पट्टी बन जाती है। कमरा बदलने पर कुछ भी दोबारा लोड नहीं होता - editor अपने सभी panels माउंटेड रखता है और बस वह दिखा देता है जो आपने माँगा।

किसी कमरे को deep-link करें #/start?area=<key> के साथ। keys हैं overview, color (URL में अमेरिकी वर्तनी पर ध्यान दें), type, logos, tokens, catalogue (Files कमरा - panel key एक स्थायी अनुबंध है, इसलिए URL पुराना नाम रखता है) और versions। ?tab= वही चीज़ के लिए पुराना alias है और अब भी resolve होता है, इसलिए पुराने links और bookmarks काम करते रहते हैं; जो कुछ पहचाना नहीं जाता वह dead-end होने के बजाय Overview खोल देता है।

rail के नीचे वे actions टिके हैं जो किसी एक कमरे के बजाय पूरे design system से जुड़े हैं:

• Add from… - सोर्स पिकर, किसी फ़ाइल, PDF, इमेज, फ़ॉन्ट या वेबसाइट से ब्रांड लाने के लिए। नीचे देखें एक ब्रांड लाएँ।
• Tray - वे कैंडिडेट जो किसी स्कैन ने ढूँढे लेकिन अभी कमिट नहीं किए। यह तब तक छिपा रहता है जब तक कोई स्कैन वाक़ई कुछ नहीं रखता, और तब एक काउंट दिखाता है; इसमें कुछ भी आपके ब्रांड को तब तक नहीं बदलता जब तक आप उस रो पर Add नहीं दबाते।
• Export - पूरे डिज़ाइन सिस्टम को एक LollyBrand-….lolly के रूप में लिखता है।
• Tokens (.json) - सादा डिज़ाइन-टोकन दस्तावेज़ अकेला, किसी रिपॉ, बिल्ड स्टेप या किसी और टोकन टूल के लिए।
• Restore brand settings - किसी इंपोर्ट या ब्रांड सेटिंग्स के बदलाव से पहले सेव किए चेकपॉइंट पर वापस जाएँ।
• Versions - डिज़ाइन सिस्टम की नामित कॉपियाँ पब्लिश, एक्टिवेट और रीस्टोर करें। तब तक छिपा रहता है जब तक पब्लिश करने के लिए आपका अपना कुछ न हो (या कोई ?area=versions लिंक इसे नाम से न माँगे)।

signed by Lolly2026-10-21vector SVG18 paths~1.2k nodes40 groups20 KBखुद जाँचेंसाइन की हुई फ़ाइल पाएँ signed by Lolly2026-10-21vector SVG18 paths~1.2k nodes40 groups20 KBखुद जाँचेंसाइन की हुई फ़ाइल पाएँTry it in the app

Overview

Overview पहला कमरा है, और इसके दो रूप हैं।

अभी कुछ नहीं चुना गया होने पर यह कहता है इसे अपना बनाएँ। Start from a reference किसी लोगो, स्क्रीनशॉट, वेब पेज या डिज़ाइन फ़ाइल के लिए सोर्स पिकर खोलता है। एक रंग चुनें, एक फेस चुनें और लोगो जोड़ें सीधे अपने मौजूदा कंट्रोल खोलते हैं। हर रास्ता एक चुनाव से शुरू होता है; किसी को खोलना कुछ नहीं लिखता। टूल एक्सप्लोर करें तुरंत उपलब्ध है।

एक बार जब कुछ भी आपका अपना हो जाए, वही कमरा आपके पास क्या है दिखाता है, आपके बनाए counts सबसे आगे। Colours उन रंगों की संख्या बताता है जो design system रखता है, और एक धुंधला · N starter तभी जोड़ता है जब दिखने वाले इनहेरिटेड रंग हों; उसके बगल की स्ट्रिप पहले आपके चुने रंग रखती है, फिर एक हेयरलाइन और उसके बाद फीके starter रंग। Type role के अनुसार पढ़ता है (हेडिंग के लिए Inter, और उसके नीचे बाक़ी के लिए Starter · SUSE, SUSE Mono)। Logos बताता है कितने स्लॉट भरे हैं, या सेट नहीं है। Tokens corner radius रखता है, जब तक आप उसे न बदलें तब तक starter टैग किया हुआ। Files कहता है अभी तक कुछ नहीं जब तक लाइब्रेरी ख़ाली है। हर ब्लॉक उसके कमरे का दरवाज़ा है। यहाँ counts हैं, कभी कोई progress bar नहीं और कभी कोई finish card नहीं - इस स्टूडियो में कुछ भी बकाया नहीं है।

Logos

अपने निशानों के folder को ऊपर दिए drop zone में खाली करके शुरू करें: "Drop marks here, or choose several at once" एक ही बार में जितनी भी फ़ाइलें आपके पास हों, ले लेता है। हर फ़ाइल को उसके shape और ink के लिए पढ़ा जाता है, फिर Waiting for a slot के नीचे एक chip के रूप में क़तार में लगाया जाता है जो बताती है कि उसका क्या अनुमान है - "Looks like the Horizontal primary", साथ में वह measurement जिस पर यह आधारित था, और एक Place बटन (जहाँ वह slot पहले से भरा है, वहाँ Replace)। जहाँ यह निश्चित नहीं है वहाँ chip यह साफ़ बता देती है और इसके बजाय Change slot देती है, जो सभी आठ को सूचीबद्ध करता है। जब तक आप कुछ दबाते नहीं, कुछ भी नहीं रखा जाता।

उस क़तार के आसपास दो चीज़ें होती हैं। जिस निशान में फ़ालतू खाली margin होता है उसे पहले एक trim offer मिलता है - इसका जवाब दें या Escape दबाएँ और मूल फ़ाइल बिना छुए अंदर चली जाती है। और जहाँ कोई निशान किसी खाली sibling slot को पूरा कर सकता है, वहाँ कमरा व्युत्पन्न (derived) mono या reverse version को अपनी खुद की chip के रूप में देता है, जिस पर Generated अंकित होता है, जो उस slot को किसी और तरीक़े से भरने पर फिर ग़ायब हो जाती है।

उसके नीचे वह grid है जिसमें हर निशान जाकर टिकता है - orientation × treatment slots:

• Orientations: Horizontal (wordmark + symbol एक पंक्ति में) और Vertical (स्टैक्ड, square और tall जगहों के लिए)।
• Treatments: Primary, Primary reverse (गहरे backgrounds के लिए), Mono (एक रंग) और Mono reverse।

यह आठ वैकल्पिक slots हैं। PNG, SVG, JPEG या WebP जोड़ने के लिए किसी slot पर क्लिक करें; उसे बदलने के लिए किसी भरे हुए slot पर क्लिक करें। हर slot वैकल्पिक है और सब कुछ इसी डिवाइस पर रहता है।

signed by Lolly2026-10-23vector SVG32 paths~12k nodes69 groups123 KBखुद जाँचेंसाइन की हुई फ़ाइल पाएँ signed by Lolly2026-10-23vector SVG32 paths~12k nodes69 groups123 KBखुद जाँचेंसाइन की हुई फ़ाइल पाएँ

• कस्टम मार्क्स - अपने ब्रांड के अपने नाम से पुकारे जाने वाले मार्क (एक आइकन, एक क्रेस्ट, एक favicon) कस्टम मार्क्स के अंतर्गत जोड़ें; उसे नाम दें और एक फ़ाइल चुनें।
• More identities - किसी सब-ब्रांड, प्रोडक्ट या इवेंट का अपना पूरा लोगो सेट हो सकता है। + एक और लोगो जोड़ें का इस्तेमाल करें और उसे नाम दें; आपका मुख्य सेट बस "Your logo" है।
• कोई SVG अपलोड करें और Lolly उसके रंग पढ़ लेता है। बिल्कुल नई इंस्टॉल पर यह चुपचाप आपका प्राइमरी रंग लोगो से सेट कर देता है और आपको बता देता है। किसी मौजूदा ब्रांड पर यह इसके बजाय रंग को एक सुझाव के रूप में देता है - "Found in the logo: #…" के साथ एक प्राइमरी के रूप में इस्तेमाल करें बटन बगल में - Colours कमरे में, जहाँ आप इसे अपना सकते हैं या ख़ारिज कर सकते हैं।

Colours

यह कमरा डिज़ाइन सिस्टम के साथ बढ़ता है। जिस चीज़ की आपको अभी ज़रूरत नहीं वह पेज पर नहीं है, इसलिए पहली विज़िट सिर्फ़ एक फ़ैसला है और बाक़ी सब पैलेट के साथ-साथ आता है।

पहला रंग

जिस डिज़ाइन सिस्टम के अपने कोई रंग नहीं हैं वह एक बीच वाले कॉलम पर खुलता है: एक रंग से शुरू करें, एक बड़ी लाइव चिप, एक फ़ील्ड, और एक शांत लाइन जो बताती है कि roles, shades और प्रिंट सेटिंग्स सिस्टम के बढ़ने के साथ आती हैं।

• चिप ही पिकर है। उसे दबाएँ और स्टूडियो का अपना OKLCH कार्ड चिप पर खुलता है, फ़ील्ड में जो कुछ भी है उसी से सीड किया हुआ: एक नाम, व्हील, चारों डायल, alpha और इस रूप में संग्रहीत, साथ में नीचे रद्द करें और रंग जोड़ें। किसी डायल को खींचना चिप को रंगता है और साथ-साथ फ़ील्ड को फिर से लिखता है, और जब तक आप रंग जोड़ें नहीं दबाते तब तक कुछ भी डिज़ाइन सिस्टम तक नहीं पहुँचता।
• फ़ील्ड कोई भी नोटेशन लेता है - #e0452b, rgb(224 69 43), oklch(58% .19 32) या एक सादा रंग नाम - और रंगों की एक पूरी सूची चिप्स की एक रो बन जाती है जिसे आप एक-एक करके जोड़ते हैं।
• इसके बगल में दो और दरवाज़े हैं। आईड्रॉपर (जिस ब्राउज़र में हो) स्क्रीन से एक रंग उठाता है, और एक इमेज से इस डिवाइस पर मौजूद किसी स्क्रीनशॉट या फ़ोटो को पढ़ता है और उसमें मिले रंग पेश करता है।
• Add कभी डिसेबल नहीं होता। फ़ील्ड में कुछ भी पढ़ने लायक न होने पर यह पिकर खोल देता है, जिसका मतलब आमतौर पर एक ख़ाली प्रेस होता है; जिस टेक्स्ट को यह पार्स नहीं कर पाता उसके लिए फ़ील्ड के नीचे एक लाइन यह बता देती है, बजाय एक मरे हुए बटन के।

पहला रंग प्राइमरी बन जाता है, और जो चिप उस जोड़ का जवाब देती है वह यह बता देती है - "Primary is now Vivid Violet" - साथ में बगल में फ़ाइन-ट्यून।

signed by Lolly2026-10-21vector SVG167 paths~11k nodes243 groups1 image191 KBखुद जाँचेंसाइन की हुई फ़ाइल पाएँ signed by Lolly2026-10-21vector SVG167 paths~11k nodes243 groups1 image191 KBखुद जाँचेंसाइन की हुई फ़ाइल पाएँ

स्टार्टर

स्टार्टर वह शब्द है हर उस चीज़ के लिए जो चुने जाने के बजाय ऐप के साथ आई। एक नई इंस्टॉल में कोई रंग बिल्कुल नहीं होता: उसके पास बस एक न्यूट्रल रैंप होता है, स्याही से काग़ज़ तक, ताकि किसी के कुछ भी तय करने से पहले सतहें, टेक्स्ट और हेयरलाइन रेंडर हो सकें। वे न्यूट्रल स्कैफ़ोल्डिंग हैं, इसलिए उन्हें रंगों में नहीं गिना जाता और पैलेट पेन में नहीं खींचा जाता। वे Tokens कमरे में न्यूट्रल्स · स्टार्टर · 9 के रूप में रहते हैं, एक खोलें के साथ जो उन्हें Colours पेन में एक फ़ोल्ड की, टैग की गई ग्रुप के रूप में दिखाता है (#/start?area=color&group=neutral)।

वही शब्द हर कमरे में चलता है: किसी starter रंग पर खड़ी कोई role "Starter Paper stands in" पढ़ती है और उसका पिकर चुनें… देता है; कोई starter फेस स्टार्टर टैग पहनता है और कोई टिंट नहीं; कोई starter corner radius Overview पर टैग किया जाता है। इनहेरिटेड मटीरियल कभी डैश्ड बॉर्डर से नहीं खींचा जाता, क्योंकि यहाँ डैश्ड बॉर्डर का मतलब है ड्रॉप टार्गेट।

जैसे-जैसे पैलेट बढ़ता है

आपके रंग एक चौड़ी स्क्रीन पर कॉन्टेक्स्ट में प्रीव्यू के बगल में रहते हैं और छोटी स्क्रीन पर उसके ऊपर स्टैक होते हैं। प्रीव्यू आपके पैलेट का इस्तेमाल करते हुए कोई पोस्टर, चार्ट या इंटरफ़ेस कार्ड दिखा सकता है। Starter रंग अपने ख़ुद के फ़ोल्ड होने वाले ग्रुप में रहते हैं, आपके जोड़े रंगों से अलग।

अलग-अलग रंग या shades का एक सेट जोड़ें, उनकी roles तय करें, और ज़रूरत पड़ने पर एडवांस्ड सेक्शन खोलें। रंग चार्ट, gradients और डाउनलोड कंट्रोल पैलेट के साथ ही रहते हैं।

signed by Lolly2026-10-21vector SVG171 paths~12k nodes245 groups1 image198 KBखुद जाँचेंसाइन की हुई फ़ाइल पाएँ signed by Lolly2026-10-21vector SVG171 paths~12k nodes245 groups1 image198 KBखुद जाँचेंसाइन की हुई फ़ाइल पाएँ

Roles - टूल क्या पढ़ते हैं

Roles स्वैच के ऊपर की परत हैं: हर टूल और एक्सपोर्ट में कौन सा रंग कौन सा हिस्सा निभाता है। Roles वैकल्पिक हैं (तीन आज़ाद रंगों और कोई role न होने वाला डिज़ाइन सिस्टम भी बिल्कुल ठीक है), कोई भी स्वैच एक role ले सकता है और कंट्रास्ट रीडआउट सतह के मुक़ाबले मापा जाता है, पहले APCA से।

कोई रो तीन रजिस्टर में से एक में पढ़ती है, ताकि यह स्ट्रिप कभी ऐसे फ़ैसले का दावा न करे जो किसी ने किया ही नहीं:

• पूरी ताक़त पर उस role को निभाता अपना एक रंग;
• *Starter Paper stands in - म्यूटेड, उसके पिकर पर चुनें…* के साथ;
• ↳ follows Primary - यह role अपने किसी रंग के बजाय प्राइमरी के ज़रिए ही तय होती है।

एक बार पैलेट में shades आ जाने पर, स्ट्रिप बढ़कर उन सभी सात स्लॉट तक पहुँच जाती है जिन्हें कोई टूल पढ़ सकता है: प्राइमरी, सेकेंडरी, सतह, टेक्स्ट, म्यूट, किनारा और प्राइमरी पर। प्राइमरी पर, प्राइमरी से व्युत्पन्न होता है, व्युत्पन्न पढ़ता है और इसका कोई पिकर नहीं होता।

ऐप का अपना accent एक प्राथमिकता है, कोई टोकन नहीं। डिफ़ॉल्ट रूप से इंटरफ़ेस डिज़ाइन सिस्टम को फ़ॉलो करता है और chrome accent प्राइमरी रंग ले लेता है। यह आपकी प्रोफ़ाइल पर एक दिखावट सेटिंग है - इंटरफ़ेस डिज़ाइन सिस्टम का अनुसरण करता है - और इसे बंद करने से chrome न्यूट्रल रह जाता है। टूल, कैनवस और एक्सपोर्ट दोनों ही सूरत में अप्रभावित रहते हैं, और फ़ॉन्ट व corner radius डिज़ाइन सिस्टम को फ़ॉलो करते हैं चाहे यह सेटिंग चालू हो या बंद।

विशेषज्ञ खंड

कंपोज़िशन प्रीव्यू और रंग roles के नीचे चार फ़ोल्ड किए सेक्शन हैं। जो चाहें खोलें; हर एक #/start?area=color&focus=<wing> के रूप में डीप-लिंक किया जा सकता है, जो उसे तब भी खोल देता है चाहे कमरा और कुछ भी दिखा रहा हो:

• Explore shades & harmonies (focus=generate) - एक रंग से shades का पूरा सेट। नीचे बताया गया है।
• शेड कर्व (focus=curves) - रैंप को पॉइंट-दर-पॉइंट फिर से आकार दें। Lightness, chroma और hue में से हर एक की अपनी कर्व होती है, L / C / H से बदली जाती हुई, और नीचे के shades आपके खींचते ही लाइव फिर से बेक होते हैं।
• कंट्रास्ट (focus=contrast) - कॉन्ट्रास्ट-लॉक आपके चुने बैकग्राउंड के मुक़ाबले APCA टार्गेट पाने के लिए एक रैंप को फिर से टोन करता है, हर step अपना hue और chroma बनाए रखते हुए; Hue घुमाएँ पूरे रैंप को व्हील के चारों ओर एक साथ घुमा देता है, हर shade अपनी lightness और chroma बनाए रखते हुए।
• प्रिंट (focus=print) - प्रेस पर प्राइमरी क्या बन जाता है: उसका स्वचालित स्क्रीन वैल्यू, या इसके बजाय एक पिन किया गया CMYK बिल्ड या एक नामित spot ink।

एक रंग, पूरा palette

Explore shades & harmonies के अंदर, एक Starting colour चुनें। Lolly उसी अवधारणात्मक (perceptual) रंग गणित (OKLCH) का इस्तेमाल करते हुए मिलते-जुलते shades सुझाता है जो इंजन बाक़ी जगह इस्तेमाल करता है। सुझावों को ट्यून करें:

• स्कीम - मोनो, कॉम्प्लीमेंट, एनालॉगस या ट्रायड - तय करता है कि सेकेंडरी रंग प्राइमरी से कैसे जुड़ा है।
• शेड्स - 3 से 20 तक का एक स्लाइडर (डिफ़ॉल्ट 5) तय करता है कि हर रैंप कितने step बनाए।
• फ़ाइन-ट्यून (फ़ोल्ड की गई) - UI तीव्रता (म्यूट / गहरा), कंट्रास्ट (आराम / उच्च) और ब्रांड पर टेक्स्ट (ऑटो / लाइट / डार्क)।

Starting colour और कंट्रोल बदलना केवल सुझावों को बदलता है। उस रंग को जोड़ने के लिए किसी shade पर क्लिक करें, या एक ग्रुप जोड़ने के लिए Add 5 shades दबाएँ (गिनती आपकी Shades सेटिंग को फ़ॉलो करती है)। मौजूदा रंग और roles अपनी जगह बने रहते हैं। Undo इस जोड़ को हटा देता है।

प्राइमरी, न्यूट्रल और सेकेंडरी रो सुझाए गए shades दिखाती हैं। लाइट और डार्क उदाहरण और उनकी contrast रीडिंग जाँचने के लिए Theme preview खोलें। वहाँ प्रस्तावित थीम एंकर एडजस्ट करने के लिए कोई Neutral या Secondary step चुनें। पूरे पैलेट को फिर से बनाना नीचे एक अलग, रिव्यू किया गया एक्शन बना रहता है।

signed by Lolly2026-10-21vector SVG22 paths~1.9k nodes49 groups27 KBखुद जाँचेंसाइन की हुई फ़ाइल पाएँ signed by Lolly2026-10-21vector SVG22 paths~1.9k nodes49 groups27 KBखुद जाँचेंसाइन की हुई फ़ाइल पाएँ

पैलेट बनाएँ (harmony generator)

Find matching colours में, harmony generator प्राइमरी से मिलते-जुलते एक्सेंट रंग सुझाता है। एक Harmony चुनें - कॉम्प्लीमेंट्री, एडजेसेंट, ट्रायड, टेट्राड या एनालॉगस (जो अपने साथ 2 से 5 तक का Accents count और 10° से 45° तक का hue कोण लाता है) - और हर कैंडिडेट एक ऑटो-जनरेटेड, पढ़ने लायक नाम और एक + जोड़ें बटन के साथ आता है। किसी एक को जोड़ना उस रंग को तुरंत पैलेट में डाल देता है, एक प्रेस से एक टोकन। कॉन्टेक्स्ट में आपके जोड़े रंगों को सैंपल कंपोज़िशन पर प्रीव्यू करता है।

signed by Lolly2026-10-21vector SVG8 paths936 nodes14 groups15 KBखुद जाँचेंसाइन की हुई फ़ाइल पाएँ signed by Lolly2026-10-21vector SVG8 paths936 nodes14 groups15 KBखुद जाँचेंसाइन की हुई फ़ाइल पाएँ

जनरेट किया गया पैलेट कमिट करना

किसी सुझाए रंग या shade ग्रुप को जोड़ना आपके बाक़ी पैलेट को जस का तस रखता है। पूरी तरह बदलने के लिए, Rebuild the whole palette… खोलें और Preview full rebuild दबाएँ। रिव्यू बदलावों को समझाता है: कितनी roles आपकी दी हुई ही रहती हैं, आपके ख़ुद जोड़े कितने रंग रखे जाते हैं, कितने shade कर्व फिर से एंकर होते हैं, कितने print lock फिर से पिन होते हैं, कितने छिपे shades छिपे रहते हैं, कितने gradient stop अपना रंग बनाए रखते हैं।

उस कार्ड पर Apply rebuilt palette इसे कमिट करता है; रद्द करें पीछे हट जाता है और कुछ नहीं बदलता। एक बार यह चल जाए तो कार्ड पहले से फ़ोकस किए हुए Undo का विकल्प देता है - और अदला-बदली से पहले पूरे डिज़ाइन सिस्टम का एक चेकपॉइंट लिया जाता है, ताकि "इसे वापस वैसा ही कर दो" एक restore बने, न कि खोई हुई दोपहर।

पैलेट, चार्ट और हर स्वैच

पैलेट डिज़ाइन सिस्टम के रंगों को फ़ोल्ड होने वाले ग्रुप में सूचीबद्ध करता है, हर एक का अपना + जोड़ें कंट्रोल। अपने काम को व्यवस्थित करने के लिए ग्रुप बनाएँ और उनका नाम बदलें। कोई role कभी दूसरी टाइल नहीं बनाती: एक टोकन एक टाइल है, और जिस टाइल की तरफ़ कोई role इशारा करती है वह इसके बजाय एक छोटा कॉर्नर मार्क पहनती है (P, S, Su, T)। टाइलों के नीचे, रंग चार्ट उन्हीं स्वैच के दो व्यू पर फ़ोल्ड खुलता है: व्हील (OKLCH व्हील - किसी डॉट को खींचकर उसे फिर से रंगें, किसी डॉट पर क्लिक करके उसे एडिट करें या नया स्वैच डालने के लिए ख़ाली जगह पर क्लिक करें) और गैमट चार्ट, जो दिखाता है कि दिखाई देने वाली रेंज असल में कहाँ ख़त्म होती है। #/start?area=color&focus=chart कार्ड को सीधे खोलता है, जैसा ?wheel हमेशा से करता आया है।

signed by Lolly2026-10-21vector SVG113 paths~9.3k nodes231 groups1 image133 KBखुद जाँचेंसाइन की हुई फ़ाइल पाएँ signed by Lolly2026-10-21vector SVG113 paths~9.3k nodes231 groups1 image133 KBखुद जाँचेंसाइन की हुई फ़ाइल पाएँ

signed by Lolly2026-10-21vector SVG529 paths~4.9k nodes161 groups149 KBखुद जाँचेंसाइन की हुई फ़ाइल पाएँ signed by Lolly2026-10-21vector SVG529 paths~5.4k nodes165 groups174 KBखुद जाँचेंसाइन की हुई फ़ाइल पाएँ

किसी भी स्वैच पर क्लिक करके उसका एडिटर खोलें:

• इसे Rename करें।
• Set the colour - पिकर परसेप्चुअल OKLCH स्लाइडर्स पर खुलता है, Hex, HSL, RGB और CMYK के लिए मोड के साथ; वैल्यू फ़ील्ड जो भी स्पेस एक्टिव है उसमें पढ़ती और लिखती दोनों है, तो आप हेक्स पेस्ट कर सकते हैं या इंक प्रतिशत टाइप कर सकते हैं। ध्यान दें कि CMYK दर्ज करने से कन्वर्ज़न द्वारा स्क्रीन रंग सेट होता है - सटीक इंक पिन करने के लिए, नीचे दिए गए प्रिंट लॉक का उपयोग करें।
• Stored as - चुनें कि स्वैच कैसे स्टोर किया जाए: LCH (डिफ़ॉल्ट - परसेप्चुअल, वाइड-गैमट, संपादन के लिए सबसे अच्छा विकल्प), Hex, RGB या HSL। इसे तब ओवरराइड करें जब आपको कोई सटीक लीगेसी हेक्स पिन करनी हो या sRGB वैल्यू मैच करनी हो।
• Use as - Roles पैनल पर वापस गए बिना, इस स्वैच को सीधे किसी ब्रांड भूमिका के हवाले करें। (किसी भूमिका की अपनी टाइल यह विकल्प नहीं देती - एक भूमिका दूसरी भूमिका नहीं ले सकती।)
• Print substitutes (फोल्डेड) - रंग के प्रिंट व्यवहार को लॉक करें:
• CMYK - स्वचालित sRGB→CMYK कन्वर्ज़न को सटीक इंक वैल्यू (C/M/Y/K, 0–100) से ओवरराइड करने के लिए इसे Auto से Locked पर बदलें।
• Spot colour - स्वैच को किसी स्पॉट कलर पर लॉक करने के लिए इसे None से Set पर बदलें; इसे एक Name दें (जैसे PANTONE 186 C), एक वैकल्पिक Book और एक वैकल्पिक Finish (डिफ़ॉल्ट रूप से Ordinary ink) उन मामलों के लिए जब इंक बिल्कुल इंक ही न हो - एक फ़ॉइल, एक एम्बॉस या डीबॉस, एक स्पॉट वार्निश, एक सॉफ्ट टच या एक डाई कट, क्रीज़ या पर्फोरेशन।
• In other spaces (फोल्डेड) - वही विचार व्यापक रूप में: हर रो एक ऐसा स्पेस है जिसमें यह स्वैच व्यक्त किया जा सकता है, या तो कैनोनिकल वैल्यू से व्युत्पन्न या आपके द्वारा रचा गया, और रचा गया वाला एक्सपोर्ट पर जीतता है।

ये प्रिंट लॉक वही हैं जो प्रेस तब उपयोग करता है जब आप CMYK PDF या TIFF एक्सपोर्ट करते हैं - देखें Exporting।

किसी स्वैच को हटाना सुरक्षित है: व्युत्पन्न रैंप स्टेप और थीम भूमिकाएँ छिपाई जाती हैं (अंतर्निहित टोकन रिज़ॉल्व होता रहता है, तो डाउनस्ट्रीम कुछ नहीं टूटता), जबकि आपके खुद जोड़े गए रंग पूरी तरह हटा दिए जाते हैं।

कई स्वैच के साथ काम करना

हर स्वैच का अपना अलग ड्रैग हैंडल है। किसी ग्रुप के भीतर रंगों को फिर से क्रम में लाने के लिए उसे खींचें, या उसे फ़ोकस करें, Space दबाएँ, ऐरो कीज़ इस्तेमाल करें, और ड्रॉप करने के लिए फिर से Space दबाएँ। Escape रद्द कर देता है। क्रम स्टूडियो को फिर से खोलने पर भी बना रहता है और इसे पूर्ववत किया जा सकता है। रंगों को ग्रुप के बीच ले जाने के लिए, स्वैच एडिटर के समूह कंट्रोल का इस्तेमाल करें या कई रंग चुनकर स्थानांतरित करें का इस्तेमाल करें। टोकन नाम और role रेफ़रेंस बरक़रार रहते हैं।

पैलेट पेन में सिलेक्शन एक जेस्चर है, कोई मोड नहीं। पहले दबाने के लिए कोई बटन नहीं है, और बार पहली चुनी टाइल के साथ आती है और आख़िरी के साथ चली जाती है।

• पेन की ख़ाली जगह पर ड्रैग करें एक rectangle खींचने के लिए: यह जिस भी टाइल को छूता है वह सिलेक्शन में जुड़ जाती है, ग्रुप की सीमाओं के पार भी। कोई फ़ोल्ड किया सेक्शन कुछ नहीं जोड़ता, और जो ड्रैग कभी हिलता नहीं वह सिलेक्शन साफ़ कर देता है।
• Shift-क्लिक रेंज को पढ़ने के क्रम में लेता है; Cmd/Ctrl-क्लिक एक टाइल को टॉगल करता है; एक सादा क्लिक फिर भी उस टाइल का एडिटर खोल देता है।
• हर ग्रुप हेडर में सभी चुनें होता है, और किसी टाइल के फ़ोकस में होने पर Cmd-A डिज़ाइन सिस्टम का हर रंग ले लेता है - कभी कोई starter रंग नहीं।
• ग्रिड में एक ही टैब स्टॉप है। ऐरो इसमें चलते हैं, Shift-ऐरो सिलेक्शन बढ़ाते हैं, Space किसी टाइल को टॉगल करता है, Delete सिलेक्शन हटा देता है और Escape इसे साफ़ कर देता है। (ऐरो सिर्फ़ फ़ोकस हिलाते हैं: किसी चैनल को नज हुक करने के लिए, पहले l, c या h दबाएँ, जैसा रीडआउट बताता है।)
• टच स्क्रीन पर कोई rectangle नहीं होता। सिलेक्शन शुरू करने के लिए किसी टाइल को दबाकर रखें, फिर जोड़ने के लिए टैप करें; प्रति-ग्रुप सभी चुनें बाक़ी काम करता है।

बार ख़ुद {n} चुने गए पढ़ती है, फिर इसमें ले जाएँ (कोई मौजूदा ग्रुप, या मेनू के भीतर आपका नाम दिया कोई नया), एक भूमिका दें (हर चुना रंग बारी-बारी अगली role लेता है, इसलिए चार टाइल एक ही प्रेस में सभी चार roles भर देती हैं), डाउनलोड करें (छह पैलेट फ़ॉर्मैट में से किसी में सिलेक्शन), मान कॉपी करें (हर रंग की एक लाइन उसके संग्रहीत नोटेशन में) और हटाएँ। इसमें ले जाएँ और एक भूमिका दें तभी दिखते हैं जब पैलेट में इधर-उधर करने के लिए shades हों। एक Ctrl/Cmd-Z पूरी bulk कार्रवाई पूर्ववत कर देता है - चालीस का एक move, एक role walk, एक delete - और कोई delete बताता है कि उसने क्या रखा, क्योंकि सिलेक्शन ऐसी टाइल तक भी पहुँचता है जिन्हें यह कमरा नहीं हटाता।

ग्रेडिएंट

एक वैकल्पिक ग्रेडिएंट पैनल बैकग्राउंड और एक्सेंट के लिए पैलेट से ब्लेंड टोकन बनाता है। अगर डिज़ाइन सिस्टम ग्रेडिएंट इस्तेमाल नहीं करता तो इसे पूरी तरह छोड़ दें। हर ग्रेडिएंट में एक प्रीव्यू, नामित stop (2-8) और एक angle होता है। मुख्य व्यवहार: कोई stop किसी स्वैच को रेफ़र करता है, इसलिए उस स्वैच को फिर से रंगें और ग्रेडिएंट उसका पीछा करता है। साफ़ ब्लेंड के लिए इंटरपोलेशन OKLCH में चलता है। रन को छोटा करने के लिए किसी stop को डिलीट करें।

पैलेट को कहीं और ले जाएँ

पैलेट पेन के निचले किनारे पर टिकी हुई फ़्लोटिंग pill पूरे पैलेट को डिज़ाइन टोकन (JSON), CSS वेरिएबल, CSS क्लास, SCSS वेरिएबल, एक GIMP पैलेट (.gpl) या एक Adobe Swatch Exchange (.ase) के रूप में डाउनलोड करती है - ताकि डिज़ाइन सिस्टम सीधे Illustrator, Figma, GIMP या किसी स्टाइलशीट में उतर जाए। यह पेन के scroller के बाहर बैठती है, इसलिए पैलेट चाहे जितना भी स्क्रॉल हो यह अपनी जगह बनाए रखती है, और यह तब दिखती है जब पैलेट में shades हों। (आप पैलेट को एसेट से भी डाउनलोड कर सकते हैं।)

टाइप

यह कमरा उसी तरह बढ़ता है। अपने किसी फेस के बिना यह एक कार्ड और एक फ़ैसला है: प्राइमरी, आज जो फेस इसे सर्व कर रहा है उसी में रीडिंग साइज़ पर सेट, नाम के बगल में एक स्टार्टर टैग, एक भरा हुआ एक फेस चुनें और लाइन "Nothing installs until you choose one." कार्ड के नीचे "Headings, code and italic follow the primary until you choose them" बैठी है, साथ में उन्हें अलग-अलग चुनें बाक़ी विज़िट के लिए बाक़ी तीन कार्ड दिखा देता है।

signed by Lolly2026-10-21vector SVG87 paths~9.9k nodes91 groups151 KBखुद जाँचेंसाइन की हुई फ़ाइल पाएँ signed by Lolly2026-10-21vector SVG87 paths~9.9k nodes91 groups151 KBखुद जाँचेंसाइन की हुई फ़ाइल पाएँ

एक फेस चुनें और कमरा खुलकर चार role कार्ड, Fonts लिस्ट और लाइव specimen दिखा देता है। ये चार फेस वही हैं जिन्हें ऐप, टूल और हर एक्सपोर्ट असल में पढ़ते हैं:

• Primary - बॉडी कॉपी, बटन और हर टूल।
• Headings - h1/h2 के लिए डिस्प्ले फेस।
• Code - कोड और डेटा के लिए एक मोनोस्पेस फेस।
• Italic - इम्फ़ेसिस, कोटेशन और असाइड के लिए एक सच्चा इटैलिक साथी।

Headings, code और italic में से हर एक तब तक प्राइमरी पर वापस गिरता है जब तक आप उन्हें असाइन नहीं करते, इसलिए एक-फेस वाले डिज़ाइन सिस्टम को यहाँ बिल्कुल कोई फ़ैसला नहीं लेना पड़ता।

टिंट का मतलब है आपने इसे चुना। कोई कार्ड सिर्फ़ वहीं टिंटेड होता है जहाँ आपने वह फेस इंस्टॉल किया है। एक starter फेस वही स्टार्टर टैग पहनता है जो पैलेट के इनहेरिटेड ग्रुप पहनते हैं, म्यूटेड रजिस्टर में और बिना किसी टिंट के, और जिस role को किसी ने नहीं चुना वह ↳ follows Primary पढ़ती है, बजाय प्राइमरी का नाम दोहराने के जैसे उसे चुना गया हो। आपके अपने किसी फेस पर बटन बदलें कहता है और बाक़ी हर जगह एक फेस चुनें। किसी कार्ड पर कुछ भी कमिट नहीं होता: बटन उस role तक सीमित compare stage खोलता है।

signed by Lolly2026-10-21vector SVG21 paths~6.1k nodes31 groups73 KBखुद जाँचेंसाइन की हुई फ़ाइल पाएँ signed by Lolly2026-10-21vector SVG21 paths~6.1k nodes31 groups73 KBखुद जाँचेंसाइन की हुई फ़ाइल पाएँ

कंपेयर स्टेज

signed by Lolly2026-10-21vector SVG102 paths~12k nodes117 groups177 KBखुद जाँचेंसाइन की हुई फ़ाइल पाएँ signed by Lolly2026-10-21vector SVG102 paths~12k nodes117 groups177 KBखुद जाँचेंसाइन की हुई फ़ाइल पाएँ

स्टेज कमरे के अंदर ही इनलाइन खुलता है, किसी डायलॉग में नहीं, और ठीक उस कार्ड के नीचे जिसे आपने दबाया। जब तक यह ऊपर है कार्ड role और face की एक-लाइन स्ट्रिप में फ़ोल्ड हो जाते हैं, ताकि स्टेज फ़ोन पर भी पहली स्क्रीन पर हो। Escape रद्द कर देता है और कीबोर्ड उसी कार्ड को वापस सौंप देता है जिससे आपने इसे खोला था।

एक फेस चुनना तीन प्रेस का काम है:

1. कार्ड पर एक फेस चुनें।
2. एक family नाम टाइप करें और प्रीव्यू दबाएँ - या फ़ील्ड के नीचे छह पिन किया गया families में से एक दबाएँ, एक-एक करके। कार्ड पहले से लोड होता दिखता है, specimen की जगह एक skeleton bar के साथ, बजाय उस इंटरफ़ेस फेस के जो अभी तक न देखे गए फेस की जगह खड़ा रहता।
3. यह फेस इस्तेमाल करें।

सहमति एक ही बार माँगी जाती है, आपके किए प्रेस पर। जब पहली बार कोई प्रीव्यू Google Fonts तक पहुँचता है, एक डायलॉग बताता है कि क्या होता है: Google को family का नाम और आपका IP पता पता चलता है। फ़ाइल फिर इस डिवाइस पर रखी जाती है और ऑफ़लाइन इस्तेमाल होती है। स्टूडियो में यह एकमात्र क़दम है जो किसी तीसरे पक्ष तक पहुँचता है। Google से लाएँ आगे बढ़ता है और याद रखा जाता है। रद्द करें कार्ड को यह कहते हुए छोड़ देता है "Not fetched. Nothing was sent to Google." अपने ख़ुद के लाइव Google से लाएँ के साथ, इसलिए मन बदलना ख़ुद कार्ड पर एक ही प्रेस है। कोई कार्ड कभी कोई मरा हुआ बटन नहीं दिखाता: यह चाहे जिस भी स्थिति में हो, इसका एक primary बताता है कि अगला क़दम क्या है।

स्टेज पर एक फ़ॉन्ट फ़ाइल छोड़ें और यह तुरंत प्रीव्यू हो जाती है - आपकी अपनी मशीन से TTF, OTF या WOFF, जो किसी licensed कॉर्पोरेट टाइपफ़ेस के लिए रास्ता है जो आपके पास पहले से है। वह ड्रॉप ज़ोन इस कमरे का इकलौता फ़ाइल दरवाज़ा है।

किसी भी सूरत में फेस इसी डिवाइस पर रहता है, ऐप में, टूल में और हर एक्सपोर्ट में रेंडर होता है, हमेशा के लिए ऑफ़लाइन, और डिज़ाइन सिस्टम फ़ाइल में यात्रा करता है - रेंडर के समय कुछ भी फ़ेच नहीं होता। Google Fonts पर मौजूद हर चीज़ एक ओपन लाइसेंस (OFL/Apache/UFL) के तहत आती है।

इस डिवाइस पर मौजूद फ़ॉन्ट

फ़ॉन्ट पैनल इस डिवाइस के पास मौजूद हर फेस और उसकी role सूचीबद्ध करता है। आपके जोड़े फेस डिज़ाइन सिस्टम में आगे रहते हैं, हर एक अपनी roles और एक delete के साथ, और जो Primary सर्व करता है वह बैज पहनता है। starter फेस एक फ़ोल्ड की गई रो में उनके पीछे आते हैं - Starter · SUSE, SUSE Mono · जब तक आप न चुनें Primary और Code सर्व करते हुए - म्यूटेड, बिना किसी delete के और प्रमोट करने को कुछ नहीं, क्योंकि इनमें से कोई भी किसी का लिया फ़ैसला नहीं है। एक फेस जोड़ें वही compare stage बिना किसी scope के खोलता है।

नीचे मौजूद टाइप रोल पैनल हर role का एक लाइव specimen दिखाता है - primary में body और UI, ऊपरी headings के लिए एक वैकल्पिक display फेस, ज़ोर देने के लिए एक italic, code और data के लिए एक mono - हर एक के बगल में family और उसकी स्थिति के साथ (Inter, SUSE · starter, SUSE · follows Primary), ताकि पूरा सेट एक साथ पढ़ा जा सके।

टोकन

बाकी डिज़ाइन सिस्टम, कोड छुए बिना संपादन योग्य:

signed by Lolly2026-10-21vector SVG336 paths~32k nodes575 groups1 image490 KBखुद जाँचेंसाइन की हुई फ़ाइल पाएँ signed by Lolly2026-10-21vector SVG336 paths~32k nodes575 groups1 image492 KBखुद जाँचेंसाइन की हुई फ़ाइल पाएँ

• गोल कोने - एक अकेला radius स्लाइडर (0–1.5rem) जिसे ऐप भर के कार्ड, बटन और पैनल फ़ॉलो करते हैं।
• न्यूट्रल्स - वह स्याही-से-काग़ज़ रैंप जिसके साथ एक नई इंस्टॉल शिप होती है, न्यूट्रल्स · स्टार्टर · 9 के रूप में सूचीबद्ध, अपने नौ steps और Colours पेन में एक खोलें के साथ। यही वह इकलौती जगह है जहाँ starter न्यूट्रल मैनेज होते हैं, और starter टैग उसी पल हट जाता है जब रैंप इनहेरिट होने के बजाय जनरेट किया जाता है।
• और टोकन - स्पेसिंग, साइज़िंग, स्ट्रोक चौड़ाई, अपारदर्शिता, रोटेशन, सादी संख्याएँ और शैडो जोड़ें और एडिट करें। एक टाइप चुनें, उसे नाम दें (Gutter, Card shadow…) और उसकी वैल्यू सेट करें। ये मानक design tokens (DTCG) के रूप में स्टोर होते हैं और डिज़ाइन सिस्टम के साथ यात्रा करते हैं।

फ़ाइलें

आपका ब्रांड जो फ़ाइलें रखता है - लोगो को छोड़कर - उन्हें यहाँ छोड़ें: vector, image, audio और motion (वीडियो, Lottie, एनिमेटेड) एसेट। ये एसेट में उतरते हैं, सेक्शन में क्रमबद्ध और हर टूल के एसेट पिकर में तैयार। सब कुछ इसी डिवाइस पर रहता है। (रेल इस कमरे को Files लेबल करता है; URL की key catalogue ही रहती है, क्योंकि पैनल की key एक स्थायी अनुबंध है।)

एक ब्रांड लाएँ

रेल के निचले हिस्से में Add from… एक दो-चरण पिकर खोलता है। पहला चरण पूछता है कि आपके पास क्या है, न कि वह किस फ़ॉर्मेट में है:

• डिज़ाइन टोकन या एक डिज़ाइन फ़ाइल - DTCG या Tokens Studio JSON, एक Penpot प्रोजेक्ट, token सेट का zip, एक Lolly design system पैक या एक SVG।
• PDF - एक डेक या एक गाइडलाइंस फ़ाइल, इस डिवाइस पर उसके रंगों, उसके मार्क्स और उसके एम्बेडेड टाइपफ़ेस के लिए पढ़ी गई।
• Logo or screenshot - एक इमेज एक सुझाया पैलेट बन जाती है, इसी डिवाइस पर पढ़ी हुई। कुछ भी अपलोड नहीं होता। यह रंग पढ़ता है, तस्वीर का टाइपफ़ेस या लेआउट नहीं।
• Saved web page - एक HTML फ़ाइल और उसकी CSS फ़ाइलें चुनें, या HTML या CSS पेस्ट करें। कुल मिलाकर 20 फ़ाइलों और 2 MB तक। केवल दिया गया टेक्स्ट ही पढ़ा जाता है; लिंक्ड रिसोर्स फ़ेच नहीं होते और स्क्रिप्ट नहीं चलतीं। यह रास्ता बिना एक्सटेंशन या डेस्कटॉप ऐप के भी काम करता है।
• फ़ॉन्ट फ़ाइल - TTF, OTF या WOFF। Type कमरा खोलता है, जहाँ फेस इंस्टॉल होता है।
• वेबसाइट - एक पेज, उसके रंगों और type के लिए पढ़ा गया। यह टाइल केवल उसी डिवाइस पर दिखती है जो असल में कोई पेज पढ़ सकता है, क्योंकि ऐसी चीज़ का विज्ञापन करने वाली एक डिसेबल्ड टाइल जिसे कोई दबा ही नहीं सकता, किसी टाइल के न होने से भी बुरी है। जहाँ यह दिखती है वहाँ यह साफ़-साफ़ बताती है कि कौन सा reader इस्तेमाल हो रहा है: इस डिवाइस पर ऐप द्वारा फ़ेच किया गया, या बैकग्राउंड टैब में ब्राउज़र एक्सटेंशन के ज़रिए पढ़ा गया, आपके तौर पर साइन इन। कोई URL नाम देना फ़ील्ड को सिर्फ़ prefill करता है - fetch बटन ही सहमति है, इसलिए कोई आपको भेजा लिंक कभी कोई read अपने-आप शुरू नहीं कर सकता।

डिज़ाइन-फ़ाइल स्रोत चुनें और दूसरा चरण नीचे वाला कार्ड है: स्वीकार किए गए फ़ॉर्मेट प्राथमिकता क्रम में आइकन टाइल के रूप में आगे आते हैं, और पूरा कार्ड एक ही ड्रॉप टारगेट है - इस पर कहीं भी क्लिक करें या इस पर कोई फ़ाइल खींच लाएँ। आप स्टूडियो पर सीधे भी कोई फ़ाइल छोड़ सकते हैं।

signed by Lolly2026-10-21vector SVG20 paths~3.1k nodes35 groups2 images173 KBखुद जाँचेंसाइन की हुई फ़ाइल पाएँ signed by Lolly2026-10-21vector SVG20 paths~3.1k nodes35 groups2 images174 KBखुद जाँचेंसाइन की हुई फ़ाइल पाएँ

हर डिज़ाइन फ़ाइल आपको क्या देती है:

• एक Lolly design-system पैक (.lolly; पुराना .zip भी अब भी स्वीकार होता है) - एक ही स्टेप में इंस्टॉल हो जाता है;
• एक Penpot एक्सपोर्ट (.penpot) - अपने डिज़ाइन टोकन अंदर खींच लेता है;
• एक डिज़ाइन टोकन फ़ाइल (.json) - W3C DTCG;
• एक Tokens Studio फ़ाइल (.json) - Tokens Studio;
• एक सादा SVG (.svg) - Lolly इसके रंग स्कैन करता है और आपको चुनने देता है कि कौन से रखने हैं, पहला आपका प्राइमरी बन जाता है।

कोई लोगो/स्क्रीनशॉट, वेबसाइट या सेव किया पेज Your suggested design system खोलता है। प्रस्तावित रंगों का इस्तेमाल करता एक उदाहरण देखें, ज़रूरत पड़ने पर एक अलग Main colour चुनें, और सिस्टम को नाम दें। Use this design system जनरेट किए लाइट और डार्क पैलेट लागू करता है और Overview पर वापस लौट जाता है। मौजूदा फ़ॉन्ट अपनी जगह बने रहते हैं। यह सक्रिय सिस्टम के रंग और बाक़ी टोकन सेटिंग्स बदल देता है। पहले एक चेकपॉइंट सफल होना ज़रूरी है; Restore brand settings पिछली सेटिंग्स वापस ले आता है।

Source details and individual choices यह दिखाता है कि क्या पढ़ा गया, कौन से फ़ॉन्ट नाम पहचाने गए और प्रीव्यू का text/action कंट्रास्ट। यह Choose individual items in the tray और Download design context भी देता है। JSON रिपोर्ट observation, प्रस्तावित टोकन और सोर्स जानकारी रखती है; सेव की HTML/CSS में दिए गए टेक्स्ट का एक SHA-256 शामिल होता है। इसमें कोई raw पेज टेक्स्ट नहीं होता और यह कोई साइन किया Content Credential नहीं है। फ़ॉन्ट नाम सुझाव हैं: फ़ॉन्ट चुनने और इंस्टॉल करने की जगह अब भी Type ही है।

PDF और अन्य डिज़ाइन-फ़ाइल इम्पोर्ट अपने मौजूदा रिव्यू कंट्रोल बनाए रखते हैं। Tray में रखी चीज़ें तब तक कुछ नहीं बदलतीं जब तक उन्हें उस कमरे के ज़रिए न जोड़ा जाए जो उस तरह के मटीरियल का मालिक है।

#/start?source=<kind> किसी दिए गए सोर्स पर पिकर खोलता है (file, pdf, image, font, url, page), और ?import इसे सादी लिस्ट पर खोलता है।

डिवाइस के बीच किसी ब्रांड को ले जाएँ

रेल के निचले हिस्से में Export एक ही LollyBrand-….lolly लिखता है - आपके टोकन, फ़ॉन्ट, लोगो और थीम प्राथमिकता, एक इंटीग्रिटी मेनिफ़ेस्ट के साथ जिसे यह वापस अंदर आने पर जाँचता है। 1.0.7 से पहले के वेब रिलीज़ इसी payload को .zip नाम देते थे; वह पुरानी स्पेलिंग अब भी स्वीकार होती है। इसके बगल में, Tokens (.json) सादा डिज़ाइन-टोकन दस्तावेज़ अकेला लिखता है: न फ़ॉन्ट, न लोगो, सिर्फ़ टोकन, जो असल में कोई रिपॉ, कोई CI स्टेप या कोई और tokens टूल पढ़ता है।

किसी को वापस लाना है Add from… → Design tokens or a design file (ऊपर), या स्टूडियो पर एक ड्रैग-एंड-ड्रॉप। इसी तरह कोई सहकर्मी आपको ब्रांड सौंपता है, या आप इसे किसी दूसरे इंस्टॉल तक ले जाते हैं - न कोई अकाउंट, न कोई क्लाउड। इसके बजाय कमांड लाइन से कोई ब्रांड लाने के लिए, देखें ingest:brand।

पहले की सेटिंग्स वापस लाएँ

रेल के निचले हिस्से में Restore brand settings चुनें, एक तारीख़ वाला चेकपॉइंट चुनें, फिर रीस्टोर करें दबाएँ। यह सक्रिय ब्रांड के लिए रंग, type सेटिंग्स और बाक़ी ब्रांड टोकन वापस ले आता है। फ़ॉन्ट और इमेज फ़ाइलें जैसी हैं वैसी ही रहती हैं।

चेकपॉइंट लागू करने से पहले Lolly आपकी मौजूदा सेटिंग्स को Before restore के रूप में सेव कर लेता है। restore को पलटने के लिए वह चेकपॉइंट चुनें, भले ही आपने ब्राउज़र बंद करके फिर से खोल लिया हो। आख़िरी 20 चेकपॉइंट इसी डिवाइस पर रखे जाते हैं। अगर स्टोरेज पढ़ी न जा सके या मौजूदा सेटिंग्स सेव न हो सकें, तो डायलॉग समस्या बता देता है ताकि आप फिर से कोशिश कर सकें।

संस्करण

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

आपके कुछ भी दबाने से पहले जानने योग्य तीन बातें हैं, और पैनल दबाने से पहले ही ये तीनों बताता है, बाद में नहीं:

• एक वर्ज़न स्थायी होता है। अभी डिलीट का विकल्प नहीं है, इसलिए पैनल यह बताता है कि क्या रखा गया है और यह कि वह रखा ही रहेगा, न कि झूठ बोलने वाला बटन देता है।
• हटाना कम्पैटिबिलिटी कार्ड में सबसे ऊपर आता है। जोड़े और बदले गए टोकन खबर हैं; एक हटाया गया टोकन वह है जो किसी टूल को तोड़ता है, इसलिए उसे पहले नाम दिया जाता है और जो वह है वैसा ही कहा जाता है।
• पब्लिश करना पूर्ववत नहीं हो सकता; रीस्टोर करना हो सकता है। Restore latest from this version हेड पर किया गया एक सामान्य एडिट है, इसलिए यह स्टूडियो के undo स्टैक पर जाता है और पैनल आपको तुरंत Undo का विकल्प देता है।

आप Publish only या Publish and make active चुन सकते हैं - अंतर यह है कि क्या टूल और ऐप अब से उस संस्करण का अनुसरण करेंगे या आपके नवीनतम संपादन का अनुसरण करते रहेंगे। Follow the latest again हर संपादन को होते ही लाइव कर देता है। #/start?area=versions पैनल को सीधे खोलता है।

जब ब्रांड निश्चित हो

कुछ बिल्ड एक लॉक्ड डिज़ाइन सिस्टम के साथ आते हैं, जैसे SUSE Brand। इसे खोलने पर संपादन योग्य प्रतिलिपि बनाएं और स्विच के साथ एक read-only नोट दिखता है। इसके मूल रंग, फ़ॉन्ट और टोकन बरक़रार रहते हैं। आपके अपने लोकल सिस्टम एडिट करने लायक़ बने रहते हैं, तब भी जब लॉक्ड सिस्टम इस डिवाइस पर पहला था। प्रोफ़ाइल में, खोलें कोई सिस्टम चुनता है और उसका स्टूडियो खोलता है; एक नया बनाओ एक लोकल सिस्टम बनाता है और उसे #/start पर उसके नाम फ़ील्ड को फ़ोकस किए हुए खोलता है।

आगे कहाँ जाएँ

• Lolly का इस्तेमाल - कैनवस, सेव करना, प्रोजेक्ट्स और एसेट।
• डिज़ाइन टोकन - वह टोकन मॉडल जिसमें आपका ब्रांड व्यक्त होता है।
• एक्सपोर्टिंग और फ़ॉर्मैट - प्रिंट यूनिट, CMYK और वे फ़ॉर्मैट जिनमें आपका ब्रांड रेंडर होता है।

एक लुक खोजें और compare करें

Overview से या Profile की डिज़ाइन-सिस्टम लिस्ट से Find a look खोलें। इस डिवाइस पर सेव किए सिस्टम और कुछ फिर-इस्तेमाल होने लायक़ Lolly उदाहरण ब्राउज़ करें। नाम, कलर टैग या बताए फ़ॉन्ट से सर्च करें। Closest to my current palette मापे गए रंग-सादृश्य से क्रमबद्ध करता है, बराबरी होने पर मिलती-जुलती फ़ॉन्ट families तय करती हैं; यह कोई क्वालिटी स्कोर नहीं है।

किसी एक लुक को रिव्यू करने के लिए चुनें, या compare करने के लिए दो। रिव्यू बटन छोटी स्क्रीन पर भी उपलब्ध रहता है। कोई लुक चुनना कुछ नहीं बदलता। Use this saved system मौजूदा design-system रजिस्ट्री में से स्विच करता है। ये रंग इस्तेमाल करें सामान्य चेकपॉइंट और इंस्टॉल फ़्लो से कोई उदाहरण लागू करता है, मौजूदा फ़ॉन्ट बनाए रखते हुए। Restore brand settings पिछला लुक वापस ला सकता है।

Details and design context के अंतर्गत, सेव किए सिस्टम में एडिट करने लायक़ Search tags और एक context डाउनलोड होता है। उदाहरण मूल Lolly रंग रेसिपी इस्तेमाल करते हैं; इसमें कोई रिमोटली स्क्रेप की गई inspiration कलेक्शन या ज़रूरी अकाउंट नहीं है।

signed by Lolly2026-10-21vector SVG30 paths~9.3k nodes44 groups106 KBखुद जाँचेंसाइन की हुई फ़ाइल पाएँTry it in the app

यह तुलना दोनों पैलेट को साथ-साथ दिखाई रखती है। किसी लुक को रिव्यू करना तब तक कुछ नहीं बदलता जब तक आप ये रंग इस्तेमाल करें या Use this saved system न चुन लें।

सोर्स एविडेंस पढ़ें

सोर्स रिव्यू की वैकल्पिक डीटेल जहाँ देखे गए हों वहाँ typography, gap, padding और corner वैल्यू दिखाती हैं। सेव की HTML/CSS और नेटिव वेबसाइट रीड declaration रिपोर्ट करते हैं, जो हो सकता है रेंडर हुए पेज पर इस्तेमाल न हो रहे हों। ब्राउज़र एक्सटेंशन दिखने वाले एलिमेंट के एक सीमित सैंपल से मापी गई styles रिपोर्ट कर सकता है, अपने viewport और ब्राउज़र कलर प्रेफ़रेंस के साथ। पुराने एक्सटेंशन अब भी declared styles के साथ काम करते हैं। ग़ायब फ़ील्ड Not observed कहते हैं।

ये observation हैं, कोई automatic style सेटिंग्स नहीं। किसी reference स्कैन से फ़ॉन्ट फ़ाइलें न फ़ेच होती हैं न इंस्टॉल होती हैं, और सोर्स spacing चुपचाप आपकी अपनी जगह नहीं ले लेती। Count सैंपल में मौजूदगी बताते हैं, confidence या क्वालिटी नहीं।

किसी कंपोज़िशन को डिज़ाइन सिस्टम के मुक़ाबले जाँचें

Design में, Export खोलें, फिर एक्सपोर्ट करने से पहले। यह जाँच रेंडर जैसा ही प्रभावी design-system वर्शन इस्तेमाल करती है। यह लिखे गए रंग, टोकन alias, फ़ॉन्ट चुनाव और इमेज एसेट ID की तुलना करती है। Custom वैल्यू जानबूझकर हो सकती हैं; बताए ब्रांड एसेट के बाहर की कोई इमेज एक रिव्यू आइटम है, कोई मना की गई इमेज नहीं।

जहाँ कोई ठोस रंग या फ़ॉन्ट सुझाव मौजूद है, वहाँ उसका बटन सिर्फ़ उस एक लेयर को बदलता है। सामान्य Undo मूल वैल्यू वापस ले आता है। लॉक्ड या बदली लेयर किसी पुराने सुझाव से ओवरराइट नहीं होतीं। ग़ायब सोर्स एविडेंस किसी मैच से अलग बना रहता है। रेंडर किया कंट्रास्ट और टेक्स्ट लेआउट मौजूदा माउंटेड चेक से जाँचे जाते हैं। Gradient, इफ़ेक्ट, नेस्टेड टूल कंटेंट, rights और सब्जेक्टिव क्वालिटी की जाँच ब्रांड तुलना नहीं करती। जाँचें डाउनलोड करें को नहीं रोकतीं।

डिज़ाइन कॉन्टेक्स्ट को लोकली इस्तेमाल करें

Download design context में टोकन दस्तावेज़, resolved रंग, बताई फ़ॉन्ट families, एसेट ID, जहाँ रिकॉर्ड हो वहाँ सोर्स एविडेंस, coverage और स्पष्ट नियम शामिल होते हैं। इसमें फ़ॉन्ट फ़ाइलें या मालिकाना हक़ का सबूत शामिल नहीं होता। reference रिव्यू में इसके प्रस्तावित टोकन और observation भी शामिल होते हैं।

CLI किसी सर्वर के बिना दोनों में से कोई भी डाउनलोड पढ़ सकता है:

lolly system import ./lolly-design-context.json
lolly system context --output=design-context.json
lolly system check ./design-inputs.json --file=design-context.json

system check एक boxes array वाले Design इनपुट या एक कंपाइल्ड Design दस्तावेज़ को स्वीकार करता है। यह कंपोज़िशन में बदलाव किए बिना प्रस्तावित सुधार रिपोर्ट करता है। यह ब्राउज़र लेआउट या रेंडर किया कंट्रास्ट नहीं माप सकता। मौजूदा MCP रिसोर्स lolly://design-context कॉन्फ़िगर किए लोकल MCP प्रोसेस के ज़रिए प्रभावी सिस्टम का कॉन्टेक्स्ट एक्सपोज़ करता है; किसी नई hosted सेवा या API key की ज़रूरत नहीं।