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

#/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 - चार faces जिन्हें ऐप, आपके टूल्स और हर export पढ़ते हैं।
• 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… - source picker, किसी फ़ाइल, PDF, image, font या website से brand लाने के लिए। नीचे एक brand लाना देखें।
• Tray - वे candidates जो किसी scan ने खोजे लेकिन अभी तक commit नहीं किए। यह तब तक छिपा रहता है जब तक कोई scan वाक़ई कुछ रखता नहीं है, और तब यह एक count दिखाता है; इसमें कुछ भी आपके brand को नहीं बदलता जब तक आप उस row पर Add नहीं दबाते।
• Export - पूरे brand को एक LollyBrand-…zip के रूप में लिखता है।
• Tokens (.json) - plain design-tokens document अकेला, किसी repo, build step या दूसरे tokens टूल के लिए।
• Versions - design system की नामित प्रतियाँ publish, activate और restore करें। तब तक छिपा रहता है जब तक publish करने के लिए आपका अपना कुछ न हो (या कोई ?area=versions link नाम लेकर इसकी माँग न करे)।

signed by Lollyvector SVG2026-08-24खुद जाँचेंGet the signed file20 paths~1.1k nodes37 groups19 KBsigned by Lollyvector SVG2026-08-24खुद जाँचेंGet the signed file20 paths~1.1k nodes37 groups19 KBTry it in the app

Overview

Overview वह कमरा है जिसमें आप पहुँचते हैं, और इसके दो रूप हैं।

अभी कुछ भी सेट न होने पर यह दो दरवाज़े देता है - Start from a file (design tokens, कोई Penpot project, design system pack या SVG) और Start from scratch (एक रंग जोड़ें, फिर जब चाहें आगे बढ़ते रहें) - और इनके नीचे एक शांत Explore the tools निकास, क्योंकि छोड़ देना भी एक जायज़ जवाब है।

एक बार design system मौजूद होने पर, वही कमरा दिखाता है आपके पास क्या है: palette और उसका रंग count, लागू type families, कितने logo slots भरे हैं, कितने tokens हैं और Files कमरा। हर block उसके कमरे का दरवाज़ा है। यहाँ 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 Lollyvector SVG2026-09-03खुद जाँचेंGet the signed file8 paths~4.8k nodes19 groups54 KBsigned by Lollyvector SVG2026-09-03खुद जाँचेंGet the signed file8 paths~4.8k nodes19 groups54 KB

• Custom marks - Custom marks के नीचे वे निशान जोड़ें जिन्हें आपका brand अपने तरीक़े से नाम देता है (कोई icon, crest, favicon); उसे नाम दें और एक फ़ाइल चुनें।
• More identities - किसी sub-brand, product या event का अपना पूरा logos सेट हो सकता है। + Add another logo इस्तेमाल करें और उसे नाम दें; आपका मुख्य सेट बस "Your logo" है।
• कोई SVG अपलोड करें और Lolly उसके रंग पढ़ लेता है। बिल्कुल नई install पर यह चुपचाप आपका primary रंग logo से सेट कर देता है और आपको बता देता है। किसी मौजूदा brand पर यह इसके बजाय रंग को एक सुझाव के रूप में देता है - "Found in the logo: #…" साथ में एक Use as primary बटन - Colours कमरे में, जहाँ आप इसे अपना सकते हैं या ख़ारिज कर सकते हैं।

Colours

signed by Lollyvector SVG2026-09-03खुद जाँचेंGet the signed file114 paths~26k nodes149 groups4 images523 KBsigned by Lollyvector SVG2026-09-03खुद जाँचेंGet the signed file114 paths~26k nodes149 groups4 images523 KB

यह सबसे समृद्ध कमरा है, दो हिस्सों में। बायाँ हिस्सा वह है जहाँ आप काम करते हैं; दायाँ आपका live palette है। उन्हें अलग करने वाली divider को खींचकर आकार बदलें (उस पर Enter दबाने से palette रास्ते से हट जाता है)।

signed by Lollyvector SVG2026-09-03खुद जाँचेंGet the signed file61 paths~9.4k nodes77 groups200 KBsigned by Lollyvector SVG2026-09-03खुद जाँचेंGet the signed file61 paths~9.4k nodes77 groups200 KB

एक रंग जोड़ें, फिर उसे भूमिका दें

Add a colour सरल रास्ते का पूरा सार है: किसी भी notation में एक रंग paste करें या चुनें और वह ठीक एक token बन जाता है। इससे कुछ भी व्युत्पन्न (derive) नहीं होता, इसमें कुछ भी सुझाया नहीं जाता, और कुछ और नहीं माँगा जाता। रंगों की पूरी सूची paste करें और हर एक अपनी खुद की chip बन जाता है जिसे आप अलग से जोड़ सकते हैं।

Roles ऊपर की परत है - कौन सा रंग कौन सी भूमिका निभाता है। Roles वैकल्पिक हैं (तीन ढीले रंगों और बिना किसी role वाला design system भी बिल्कुल ठीक है), कोई भी swatch एक role ले सकता है और contrast readout को surface के मुक़ाबले मापा जाता है, पहले APCA से।

विशेषज्ञ खंड

उन दोनों के नीचे चार मुड़े हुए (folded) sections हैं। जो चाहें वह खोलें; हर एक #/start?area=color&focus=<wing> के रूप में deep-link करने लायक़ है:

• Generate a starter palette (focus=generate) - एक रंग से shades का पूरा सेट। नीचे बताया गया है।
• Shade curves (focus=curves) - किसी ramp को बिंदु-दर-बिंदु फिर से आकार दें। Lightness, chroma और hue में से हर एक की अपनी curve होती है, L / C / H से switch होती है, और जैसे ही आप खींचते हैं नीचे के shades लाइव फिर से bake होते हैं।
• Contrast (focus=contrast) - Contrast-lock किसी चुने हुए background के मुक़ाबले APCA targets हासिल करने के लिए ramp को फिर से tone करता है, हर step अपना hue और chroma बनाए रखते हुए; Rotate hue पूरी ramp को wheel पर एक साथ घुमाता है, हर shade अपनी lightness और chroma बनाए रखते हुए।
• Print (focus=print) - press पर primary क्या बनता है: उसका स्वचालित screen value, या इसके बजाय एक pinned CMYK build या एक named spot ink।

एक रंग, पूरा palette

Generate a starter palette के अंदर, एक Primary colour चुनें और Lolly एक पूरा palette तैयार कर देता है - light और dark surfaces, text, accents और पूरी tint/shade ramps - उसी perceptual colour maths (OKLCH) का इस्तेमाल करके जो engine हर जगह इस्तेमाल करता है। derivation को tune करें:

• Scheme - Mono, Complement, Analogous या Triad - तय करता है कि secondary रंग आपके primary से कैसे जुड़ा है।
• Shades - 3 से 20 तक का एक slider (डिफ़ॉल्ट 5) तय करता है कि हर ramp कितने steps बनाती है।
• Fine-tune (मुड़ा हुआ) - UI intensity (Muted / Deep), Contrast (Comfort / High) और Text on brand (Auto / Light / Dark)।

इस wing में कुछ भी आपके brand में कुछ नहीं लिखता। यह एक preview है, पूरे ऐप में लाइव ताकि आप इसे परख सकें, ठीक तब तक जब तक आप Replace palette (नीचे) न दबाएँ।

primary के नीचे आपको लाइव Primary / Neutral / Secondary / Blend ramps और Light व Dark specimen cards दिखेंगे, हर एक अपना contrast readout लिए हुए - WCAG ratio, साथ में APCA Lc figure। Neutral या Secondary ramp में किसी step पर क्लिक करें ताकि व्युत्पन्न डिफ़ॉल्ट के बजाय उस shade को anchor किया जा सके।

signed by Lollyvector SVG2026-09-03खुद जाँचेंGet the signed file25 paths~4.6k nodes60 groups57 KBsigned by Lollyvector SVG2026-09-03खुद जाँचेंGet the signed file25 paths~4.6k nodes60 groups57 KB

अपना पैलेट बनाएँ (हार्मनी जेनरेटर)

उसी विंग में, Build your palette आपके प्राइमरी रंग से मेल खाते एक्सेंट रंग जनरेट करता है। एक Harmony चुनें - Complementary, Adjacent, Triad, Tetrad या Analogous (जो अपनी खुद की Accents संख्या, 2 से 5, और 10° से 45° तक की हू Angle लाता है) - और हर उम्मीदवार के साथ ऑटो-जनरेटेड, पढ़ने योग्य नाम और एक + Add बटन आता है। एक को जोड़ने से वह रंग तुरंत आपके पैलेट में आ जाता है, एक टोकन के लिए एक प्रेस। "Your palette, applied" पूरे सेट को असली ग्राफ़िक्स पर प्रीव्यू करता है।

signed by Lollyvector SVG2026-09-03खुद जाँचेंGet the signed file8 paths936 nodes14 groups15 KBsigned by Lollyvector SVG2026-09-03खुद जाँचेंGet the signed file8 paths936 nodes14 groups15 KB

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

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

उस कार्ड पर Replace palette इसे कमिट करता है; Cancel पीछे हट जाता है और कुछ नहीं बदलता। चलने के बाद, कार्ड "Palette replaced." बन जाता है, जिसमें पहले से फोकस किया हुआ एक Undo होता है - और स्वैप से पहले पूरे डिज़ाइन सिस्टम का एक चेकपॉइंट ले लिया जाता है, इसलिए "इसे वैसे ही वापस रखें जैसा था" एक रीस्टोर है, गँवाई हुई दोपहर नहीं।

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

दायाँ पैनल आपके ब्रांड के हर रंग को सूचीबद्ध करता है, समूहों में (Primary, Neutral, Secondary, Spectrum, Custom, Roles), हर समूह अपने + Add के साथ फोल्ड होने योग्य। इसके नीचे, Colour chart उन्हीं स्वैच के दो व्यू पर खुलता है: Wheel (OKLCH व्हील - किसी बिंदु को घसीटकर उसका रंग बदलें, बिंदु पर क्लिक करके उसे संपादित करें, या खाली जगह पर क्लिक करके नया स्वैच जोड़ें) और Gamut चार्ट, जो दिखाता है कि प्रदर्शन योग्य सीमा वास्तव में कहाँ खत्म होती है। #/start?area=color&focus=chart कार्ड को सीधे खोलता है, जैसे ?wheel हमेशा से करता आया है।

signed by Lollyvector SVG2026-09-03खुद जाँचेंGet the signed file155 paths~14k nodes199 groups1 image191 KBsigned by Lollyvector SVG2026-09-03खुद जाँचेंGet the signed file155 paths~14k nodes199 groups1 image191 KB

signed by Lollyvector SVG2026-09-03खुद जाँचेंGet the signed file274 paths~3.7k nodes67 groups83 KBsigned by Lollyvector SVG2026-09-03खुद जाँचेंGet the signed file274 paths~3.7k nodes67 groups83 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।

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

ग्रेडिएंट

एक वैकल्पिक Gradients पैनल बैकग्राउंड और एक्सेंट के लिए आपके पैलेट से ब्लेंड टोकन बनाता है। यदि आपका ब्रांड ग्रेडिएंट का उपयोग नहीं करता तो इसे पूरी तरह छोड़ दें। हर ग्रेडिएंट में एक प्रीव्यू, नामित स्टॉप (2–8) और एक कोण होता है। मुख्य व्यवहार यह है: एक स्टॉप किसी स्वैच का संदर्भ लेता है, इसलिए उस स्वैच का रंग बदलें और ग्रेडिएंट उसका अनुसरण करता है। इंटरपोलेशन साफ़ ब्लेंड के लिए OKLCH में चलता है। रन को छोटा करने के लिए किसी स्टॉप को हटाएँ।

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

पैलेट पैनल के निचले किनारे पर टिकी फ़्लोटिंग पिल पूरे पैलेट को Design tokens (JSON), CSS variables, CSS classes, SCSS variables, एक GIMP palette (.gpl) या एक Adobe Swatch Exchange (.ase) के रूप में डाउनलोड करती है - ताकि ब्रांड सीधे Illustrator, Figma, GIMP या किसी स्टाइलशीट में जा सके। यह पैनल के स्क्रोलर के बाहर बैठती है, तो पैलेट चाहे कितना भी स्क्रोल हो, यह अपनी जगह बनाए रखती है। (आप पैलेट को Catalogue व्यू से भी डाउनलोड कर सकते हैं।)

टाइप

signed by Lollyvector SVG2026-09-03खुद जाँचेंGet the signed file74 paths~11k nodes99 groups234 KBsigned by Lollyvector SVG2026-09-03खुद जाँचेंGet the signed file74 paths~11k nodes99 groups234 KB

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

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

Headings, code और italic - इन तीनों में से हर एक तब तक प्राइमरी पर वापस गिरता है जब तक आप उन्हें असाइन नहीं करते, तो एक-फ़ॉन्ट वाले ब्रांड को यहाँ कोई निर्णय लेने की ज़रूरत ही नहीं है। किसी कार्ड पर कुछ भी कमिट नहीं होता: Change (या किसी खाली भूमिका पर Choose a face) उस भूमिका पर सीमित compare stage खोलता है।

signed by Lollyvector SVG2026-09-03खुद जाँचेंGet the signed file59 paths~9.3k nodes73 groups196 KBsigned by Lollyvector SVG2026-09-03खुद जाँचेंGet the signed file59 paths~9.3k nodes73 groups196 KB

कंपेयर स्टेज

यह स्टेज किसी डायलॉग में नहीं, बल्कि रूम के भीतर ही खुलता है, ताकि जिन कार्ड से आप आए थे वे स्क्रीन पर बने रहें। कोई Google Fonts फ़ैमिली खोजें (Inter, Fraunces, Space Grotesk…) या कोई फ़ॉन्ट फ़ाइल छोड़ें, Add to the comparison दबाएँ और उम्मीदवार, इंस्टॉल होने से पहले ही, एक ही शब्दों में साथ-साथ खड़े हो जाते हैं। Escape रद्द करता है और कीबोर्ड उसी कार्ड को वापस सौंप देता है जिससे इसे खोला गया था।

यही एकमात्र प्रवेश द्वार है, इसीलिए आपके ब्रांड में कुछ भी बिना देखे नहीं घुसता। स्टेज के नीचे दो प्रबंधन पैनल हैं:

• Fonts on this device - हर इंस्टॉल की गई फ़ैमिली, वह जिन भूमिकाओं की सेवा करती है और एक डिलीट। यहाँ Add a face वही कंपेयर स्टेज बिना किसी दायरे के खोलता है।
• Your fonts - अपनी खुद की मशीन से एक TTF, OTF या WOFF अपलोड करें। पहले से लाइसेंस प्राप्त कॉर्पोरेट टाइपफेस के लिए यही रास्ता है जो आप पहले से रखते हैं।

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

नीचे स्थित Type roles पैनल हर भूमिका का एक लाइव नमूना दिखाता है - प्राइमरी में बॉडी और UI, ऊपर के हेडिंग के लिए एक वैकल्पिक डिस्प्ले फेस, इम्फ़ेसिस के लिए एक इटैलिक, कोड और डेटा के लिए एक मोनो - ताकि आप पूरे सेट को साथ काम करते देख सकें।

signed by Lollyvector SVG2026-09-03खुद जाँचेंGet the signed file17 paths~5.6k nodes29 groups68 KBsigned by Lollyvector SVG2026-09-03खुद जाँचेंGet the signed file17 paths~5.6k nodes29 groups68 KB

टोकन

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

signed by Lollyvector SVG2026-09-03खुद जाँचेंGet the signed file73 paths~14k nodes95 groups1 image292 KBsigned by Lollyvector SVG2026-09-03खुद जाँचेंGet the signed file73 paths~14k nodes95 groups1 image292 KB

• Rounded corners - एक ही रेडियस स्लाइडर (0–1.5rem) जिसका अनुसरण पूरे ऐप में कार्ड, बटन और पैनल करते हैं।
• More tokens - spacing, sizing, stroke width, opacity, rotation, सादे numbers और shadows जोड़ें और संपादित करें। एक टाइप चुनें, उसे नाम दें (Gutter, Card shadow…) और उसकी वैल्यू सेट करें। ये मानक design tokens (DTCG) के रूप में स्टोर होते हैं और आपके ब्रांड के साथ यात्रा करते हैं।

फ़ाइलें

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

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

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

• Design tokens or a design file - DTCG या Tokens Studio JSON, एक Penpot प्रोजेक्ट, टोकन सेट का zip, एक Lolly डिज़ाइन सिस्टम पैक या एक SVG।
• PDF - एक डेक या एक गाइडलाइन फ़ाइल, इसके रंग, इसके मार्क और इसमें एम्बेडेड टाइपफेस के लिए इसी डिवाइस पर पढ़ी जाती है।
• Image - एक स्क्रीनशॉट या एक फ़ोटो; इसके रंग इसी डिवाइस पर पढ़े जाते हैं और कुछ भी अपलोड नहीं होता।
• Font file - TTF, OTF या WOFF। Type रूम खोलता है, जहाँ फेस इंस्टॉल होता है।
• Website - एक पेज, इसके रंग और टाइप के लिए पढ़ा गया। यह टाइल सिर्फ़ उस डिवाइस पर दिखाई देती है जो वाकई कोई पेज पढ़ सकता है, क्योंकि किसी ऐसी चीज़ का विज्ञापन करने वाली एक अक्षम टाइल जिसे कोई दबा ही नहीं सकता, टाइल न होने से भी बदतर है। जहाँ यह दिखाई देती है वहाँ यह अपने रीडर का साफ़ नाम बताती है: इसी डिवाइस पर ऐप द्वारा फ़ेच किया गया, या आपके रूप में साइन-इन ब्राउज़र एक्सटेंशन के ज़रिए बैकग्राउंड टैब में पढ़ा गया। किसी URL का नाम लेना सिर्फ़ फ़ील्ड को पहले से भर देता है - फ़ेच बटन ही सहमति है, तो कोई भी आपको भेजा गया लिंक कभी अपने-आप कोई पठन शुरू नहीं कर सकता।

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

signed by Lollyvector SVG2026-08-24खुद जाँचेंGet the signed file19 paths~3.2k nodes35 groups2 images175 KBsigned by Lollyvector SVG2026-08-24खुद जाँचेंGet the signed file19 paths~3.2k nodes35 groups2 images175 KB

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

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

किसी स्रोत को इंस्टॉल करने से पहले एक चेकपॉइंट लिया जाता है, तो "इम्पोर्ट से पहले की स्थिति में लौटें" एक ही रीस्टोर है। और स्कैन जो पाता है वह सीधे अंदर नहीं जाता: उम्मीदवार Tray में उतरते हैं, जहाँ हर एक को अपने प्रेस से जोड़ा जाता है, उसी रूम के ज़रिए जो उस तरह की सामग्री का मालिक है।

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

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

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

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

संस्करण

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

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

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

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

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

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

आगे कहाँ जाएँ

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