برانڈ اسٹوڈیو

#/start پر Brand Studio وہ واحد جگہ ہے جہاں آپ اپنے برانڈ کو تشکیل دیتے ہیں - اس کے لوگوز، رنگ، ٹائپ، باقی ٹوکنز اور وہ فائلیں جو یہ رکھتا ہے۔ اسے یہاں ایک بار سیٹ کریں اور ہر ٹول، صفحہ اور ایکسپورٹ اس کی تعمیری طور پر پیروی کرتا ہے، جائزے سے نہیں۔

تبدیلیاں جیسے ہی آپ کرتے ہیں پوری ایپ میں لائیو پیش نظارہ ہوتی ہیں، تاکہ آپ کوئی رنگ یا فونٹ کہیں بھی لاگو ہوتا دیکھ سکیں اس سے پہلے کہ آپ اسے حتمی کریں۔ یہ سب کچھ آن-ڈیوائس ہے: آپ کی برانڈ فائلیں اور ٹوکنز کبھی آپ کی مشین سے باہر نہیں جاتے (کوئی Google فونٹ منتخب کرنے پر رضامندی ڈائیلاگ کے بعد وہ ایک فیملی Google سے ایک ہی بار حاصل کی جاتی ہے)، اور برانڈ ایک واحد brand pack فائل میں سفر کرتا ہے۔

یہ ایڈیٹر ہے۔ ڈیش بورڈ آئینہ ہے۔ ڈیش بورڈ (#/d) پر موجود Design system ٹیب آپ کے برانڈ کو صرف پڑھنے کے قابل حالت میں دکھاتا ہے؛ آپ اسے یہاں #/start پر ترمیم کرتے ہیں۔ اگر بعد میں کوئی رنگ بدلنا چاہیں تو Brand Studio پر واپس آئیں۔

کمرے

اسٹوڈیو کمروں کا ایک سیٹ ہے جو سائیڈ میں ایک ریل میں فہرست کیے گئے ہیں - مراحل نہیں۔ کچھ بھی نمبر شدہ نہیں، کچھ بھی کسی اور چیز پر مشروط نہیں اور ان میں سے کسی میں بھی پہنچنا جائز ہے:

• Overview - مرکز۔ ابھی کیا موجود ہے، ایک نظر میں، ہر کمرے میں جانے کا دروازہ ساتھ۔
• Colours - رنگ ایک وقت میں ایک شامل کریں، کردار تفویض کریں یا ایک سے پورا پیلیٹ تیار کریں۔
• Type - وہ چار فیسز جو ایپ، آپ کے ٹولز اور ہر ایکسپورٹ پڑھتے ہیں۔
• Logos - آپ کے نشانات، ہر واقفیت اور ٹریٹمنٹ میں۔
• Tokens - کارنر ریڈیئس، اسپیسنگ، سائے اور باقی نظام۔
• Files - وہ امیج، آڈیو اور موشن فائلیں جو آپ کا برانڈ رکھتا ہے۔

فون پر یہی فہرست ہیڈر کے نیچے پن کی گئی افقی چپ پٹی بن جاتی ہے۔ کمرہ بدلنے سے کچھ بھی دوبارہ لوڈ نہیں ہوتا - ایڈیٹر اپنے تمام پینلز کو مربوط رکھتا ہے اور صرف وہ دکھاتا ہے جو آپ نے مانگا۔

#/start?area=<key> کے ساتھ کسی کمرے کا ڈیپ-لنک بنائیں۔ کیز ہیں overview, color (URL میں امریکی ہجے نوٹ کریں), type, logos, tokens, catalogue (Files کمرہ - پینل کی کلید ایک مستقل معاہدہ ہے، اس لیے URL پرانا نام برقرار رکھتا ہے) اور versions۔ ?tab= اسی چیز کا دیرینہ متبادل نام ہے اور اب بھی کام کرتا ہے، اس لیے پرانے لنکس اور بک مارکس چلتے رہتے ہیں؛ کوئی بھی ناقابلِ شناخت چیز ڈیڈ اینڈ ہونے کے بجائے Overview کھولتی ہے۔

ریل کے دامن میں وہ اقدامات پن کیے گئے ہیں جو کسی ایک کمرے کے بجائے پورے ڈیزائن سسٹم سے تعلق رکھتے ہیں:

• Add from… - سورس پکر، برانڈ کو فائل، PDF، امیج، فونٹ یا ویب سائٹ سے لانے کے لیے۔ نیچے Bring a brand in دیکھیں۔
• Tray - وہ امیدوار جو کسی اسکین نے تلاش کیے ہیں لیکن ابھی حتمی نہیں کیے گئے۔ یہ اُس وقت تک چھپا رہتا ہے جب تک کوئی اسکین واقعی کچھ رکھ نہ لے، اور تب یہ ایک شمار دکھاتا ہے؛ اس میں موجود کچھ بھی آپ کے برانڈ کو نہیں بدلتا جب تک آپ اُس قطار پر Add نہ دبائیں۔
• Export - پورا برانڈ ایک LollyBrand-…zip کے طور پر لکھتا ہے۔
• Tokens (.json) - خالص ڈیزائن-ٹوکنز دستاویز اپنے طور پر، کسی repo، بلڈ اسٹیپ یا کسی دوسرے ٹوکنز ٹول کے لیے۔
• Versions - ڈیزائن سسٹم کی نامزد کاپیاں شائع، فعال اور بحال کریں۔ یہ اُس وقت تک چھپا رہتا ہے جب تک شائع کرنے کے لیے آپ کا اپنا کچھ نہ ہو (یا کوئی ?area=versions لنک اسے نام سے طلب کرے)۔

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 (ڈیزائن ٹوکنز، ایک Penpot پروجیکٹ، ایک ڈیزائن سسٹم پیک یا ایک SVG) اور Start from scratch (ایک رنگ شامل کریں، پھر جب چاہیں آگے بڑھتے رہیں) - اور ان کے نیچے ایک خاموش Explore the tools راستہ، کیونکہ چلے جانا بھی ایک جائز جواب ہے۔

ایک بار ڈیزائن سسٹم موجود ہو جائے تو یہی کمرہ آپ کے پاس کیا ہے دکھاتا ہے: پیلیٹ اور اس کے رنگوں کی تعداد، رائج ٹائپ فیملیز، کتنے لوگو سلاٹس بھرے ہیں، کتنے ٹوکنز ہیں اور Files کمرہ۔ ہر بلاک اپنے کمرے کا دروازہ ہے۔ یہاں صرف شمار ہیں، کبھی پروگریس بار نہیں اور کبھی فنش کارڈ نہیں - اس اسٹوڈیو میں کچھ بھی واجب الادا نہیں۔

Logos

اپنے نشانات کے فولڈر کو اوپر موجود ڈراپ زون میں خالی کرنے سے شروع کریں: "Drop marks here, or choose several at once" ایک ہی بار میں جتنی بھی فائلیں آپ کے پاس ہوں لے لیتا ہے۔ ہر فائل کو اُس کی شکل اور اُس کے رنگ کے لیے پڑھا جاتا ہے، پھر Waiting for a slot کے تحت ایک چپ کے طور پر قطار میں لگایا جاتا ہے جو بتاتی ہے کہ اسے کیا لگتا ہے - "Looks like the Horizontal primary"، اُس پیمائش کے ساتھ جس کی بنیاد پر یہ فیصلہ ہوا، اور ایک Place بٹن (Replace، جہاں وہ سلاٹ پہلے سے بھرا ہو)۔ جہاں یہ یقین نہ ہو وہاں چپ صاف طور پر یہ بتاتی ہے اور اس کے بجائے Change slot پیش کرتی ہے، جو تمام آٹھ کی فہرست دیتی ہے۔ جب تک آپ کچھ نہ دبائیں کچھ بھی رکھا نہیں جاتا۔

اس قطار کے ارد گرد دو چیزیں ہوتی ہیں۔ زائد خالی مارجن والے نشان کو پہلے ایک trim offer ملتا ہے - اس کا جواب دیں یا Escape دبائیں تو اصل فائل بغیر کسی تبدیلی کے شامل ہو جاتی ہے۔ اور جہاں کوئی نشان کسی خالی ہم منصب سلاٹ کو پُر کر سکتا ہو، وہاں کمرہ اخذ کردہ mono یا reverse ورژن کو اپنی الگ چپ کے طور پر پیش کرتا ہے، جو Generated کا نشان رکھتی ہے، اور اگر آپ وہ سلاٹ کسی اور طریقے سے بھر دیں تو یہ دوبارہ غائب ہو جاتی ہے۔

اُس کے نیچے وہ گرِڈ ہے جس میں ہر نشان جا کر ٹھہرتا ہے - orientation × treatment سلاٹس:

• Orientations: Horizontal (ورڈ مارک + علامت ایک قطار میں) اور Vertical (تہہ شدہ، مربع اور اونچی جگہوں کے لیے)۔
• Treatments: Primary، Primary reverse (تاریک پس منظر کے لیے)، Mono (ایک رنگ) اور Mono reverse۔

یہ آٹھ اختیاری سلاٹس ہیں۔ PNG, SVG, JPEG یا WebP شامل کرنے کے لیے کسی سلاٹ پر کلک کریں؛ کسی بھرے ہوئے سلاٹ کو بدلنے کے لیے اس پر کلک کریں۔ ہر سلاٹ اختیاری ہے اور سب کچھ اسی ڈیوائس پر رہتا ہے۔

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 کے تحت؛ اسے نام دیں اور ایک فائل منتخب کریں۔
• More identities - کسی سب-برانڈ، پروڈکٹ یا ایونٹ کا اپنا مکمل لوگو سیٹ ہو سکتا ہے۔ + Add another logo استعمال کریں اور اسے نام دیں؛ آپ کا مرکزی سیٹ محض "Your logo" ہے۔
• ایک SVG اپ لوڈ کریں اور Lolly اس کے رنگ پڑھ لیتا ہے۔ بالکل نئی تنصیب پر یہ خاموشی سے آپ کا بنیادی رنگ لوگو سے مقرر کر دیتا ہے اور یہ بتا بھی دیتا ہے۔ کسی موجودہ برانڈ پر یہ رنگ کو اس کے بجائے تجویز کے طور پر پیش کرتا ہے - "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 ہے۔ دونوں کے درمیان تقسیم کار کو کھینچ کر سائز بدلیں (اس پر Enter دبانے سے پیلیٹ راستے سے ہٹ کر سمٹ جاتا ہے)۔

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 سادہ راستے کا مکمل احاطہ کرتا ہے: کسی بھی نوٹیشن میں رنگ پیسٹ کریں یا چنیں اور وہ عین ایک ٹوکن بن جاتا ہے۔ اس سے کچھ اخذ نہیں ہوتا، اس میں کچھ تجویز نہیں کیا جاتا، اور کچھ اور طلب نہیں کیا جاتا۔ رنگوں کی ایک پوری فہرست پیسٹ کریں اور ہر ایک اپنی الگ چپ بن جاتا ہے جسے آپ اپنے طور پر شامل کر سکتے ہیں۔

Roles اوپر کی تہہ ہے - کون سا رنگ کون سا کردار نبھاتا ہے۔ Roles اختیاری ہیں (تین آزاد رنگوں اور بغیر کسی role کے ڈیزائن سسٹم بھی بالکل درست ہے)، کوئی بھی سواچ ایک role لے سکتا ہے اور کنٹراسٹ ریڈ آؤٹ سطح کے مقابلے میں ماپا جاتا ہے، پہلے APCA کے مطابق۔

ایکسپرٹ ونگز

ان دونوں کے نیچے چار تہہ شدہ سیکشنز موجود ہیں۔ جو چاہیں کھولیں؛ ہر ایک #/start?area=color&focus=<wing> کے طور پر ڈیپ-لنک ایبل ہے:

• Generate a starter palette (focus=generate) - ایک رنگ سے شیڈز کا مکمل سیٹ۔ نیچے بیان کیا گیا ہے۔
• Shade curves (focus=curves) - ریمپ کو نقطہ بہ نقطہ نئی شکل دیں۔ Lightness، chroma اور hue ہر ایک کا اپنا وکر ہے، جو L / C / H سے بدلا جاتا ہے، اور نیچے موجود شیڈز آپ کے کھینچنے کے ساتھ لائیو دوبارہ تیار ہوتے ہیں۔
• Contrast (focus=contrast) - Contrast-lock آپ کے چنے ہوئے پس منظر کے مقابلے میں APCA اہداف حاصل کرنے کے لیے ریمپ کا رنگ دوبارہ متعین کرتا ہے، ہر قدم اپنا hue اور chroma برقرار رکھتے ہوئے؛ Rotate hue پورے ریمپ کو چکر پر جسمانی طور پر گھماتا ہے، ہر شیڈ اپنی lightness اور chroma برقرار رکھتی ہے۔
• Print (focus=print) - پرنٹ پر بنیادی رنگ کیا بنتا ہے: اس کی خودکار اسکرین ویلیو، یا اس کے بجائے ایک مقرر کردہ CMYK بلڈ یا نامزد اسپاٹ سیاہی۔

ایک رنگ، ایک مکمل پیلیٹ

Generate a starter palette کے اندر، ایک Primary colour چنیں اور Lolly ایک مکمل پیلیٹ تیار کرتا ہے - روشن اور تاریک سطحیں، متن، ایکسینٹس اور مکمل tint/shade ریمپس - وہی پرسیپچوئل کلر میتھس (OKLCH) استعمال کرتے ہوئے جو انجن ہر جگہ استعمال کرتا ہے۔ اخذ کاری کو ٹیون کریں:

• Scheme - Mono, Complement, Analogous یا Triad - یہ طے کرتا ہے کہ ثانوی رنگ آپ کے بنیادی رنگ سے کیسے متعلق ہے۔
• Shades - 3 سے 20 تک کا ایک سلائیڈر (ڈیفالٹ 5) کنٹرول کرتا ہے کہ ہر ریمپ کتنے قدم پیدا کرتا ہے۔
• Fine-tune (تہہ شدہ) - UI intensity (Muted / Deep)، Contrast (Comfort / High) اور Text on brand (Auto / Light / Dark)۔

اس ونگ میں کچھ بھی آپ کے برانڈ میں نہیں لکھا جاتا۔ یہ ایک پیش نظارہ ہے، پوری ایپ میں لائیو تاکہ آپ اس کا اندازہ لگا سکیں، جب تک آپ Replace palette (نیچے) نہ دبائیں۔

بنیادی رنگ کے نیچے آپ کو لائیو Primary / Neutral / Secondary / Blend ریمپس اور Light اور Dark نمونہ کارڈز نظر آئیں گے، ہر ایک اپنا کنٹراسٹ ریڈ آؤٹ رکھتا ہے - WCAG تناسب اور اس کے ساتھ APCA Lc عدد۔ اخذ کردہ ڈیفالٹ کے بجائے وہ شیڈ لنگر کرنے کے لیے Neutral یا Secondary ریمپ میں کوئی قدم کلک کریں۔

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۔

Deleting a swatch محفوظ ہے: اخذ کردہ ریمپ اسٹیپس اور تھیم رولز کو چھپا دیا جاتا ہے (بنیادی ٹوکن حل ہوتا رہتا ہے، تو کچھ بھی آگے نہیں ٹوٹتا)، جبکہ آپ کے خود شامل کیے گئے رنگ مکمل طور پر ہٹا دیے جاتے ہیں۔

گریڈینٹس

ایک اختیاری Gradients پینل آپ کے پیلیٹ سے بیک گراؤنڈز اور ایکسنٹس کے لیے بلینڈ ٹوکنز بناتا ہے۔ اگر آپ کا برانڈ گریڈینٹس استعمال نہیں کرتا تو اسے مکمل طور پر چھوڑ دیں۔ ہر گریڈینٹ کا ایک پریویو، نامزد اسٹاپس (2–8) اور ایک زاویہ ہوتا ہے۔ اہم رویہ: ایک اسٹاپ کسی سویچ کا حوالہ دیتا ہے، تو اس سویچ کا رنگ بدلیں اور گریڈینٹ بھی ساتھ بدل جاتا ہے۔ انٹرپولیشن صاف بلینڈز کے لیے OKLCH میں چلتی ہے۔ رن کو مختصر کرنے کے لیے کوئی اسٹاپ حذف کریں۔

پیلیٹ کہیں اور لے جائیں

پیلیٹ پین کے نیچے کنارے پر رکھا ہوا فلوٹنگ پِل پورے پیلیٹ کو Design tokens (JSON)، CSS variables، CSS classes، SCSS variables، ایک GIMP palette (.gpl) یا ایک Adobe Swatch Exchange (.ase) کے طور پر ڈاؤن لوڈ کرتا ہے - تاکہ برانڈ سیدھا Illustrator، Figma، GIMP یا کسی اسٹائل شیٹ میں چلا جائے۔ یہ پین کے اسکرولر سے باہر رہتا ہے، تو پیلیٹ چاہے جتنا بھی اسکرول ہو، یہ اپنی جگہ برقرار رکھتا ہے۔ (آپ پیلیٹ Catalogue ویو سے بھی ڈاؤن لوڈ کر سکتے ہیں۔)

Type

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 میں سے ہر ایک، جب تک آپ انہیں تفویض نہ کریں، Primary پر واپس چلا جاتا ہے، تو ایک-فونٹ برانڈ کو یہاں کوئی فیصلہ کرنے کی ضرورت ہی نہیں۔ کارڈ پر کچھ بھی کمٹ نہیں ہوتا: 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

کمپیئر اسٹیج

اسٹیج روم کے اندر ہی کھلتا ہے، کسی ڈائیلاگ میں نہیں، تو جن کارڈز سے آپ آئے وہ اسکرین پر موجود رہتے ہیں۔ کوئی گوگل فونٹس فیملی سرچ کریں (Inter، Fraunces، Space Grotesk…) یا کوئی فونٹ فائل ڈراپ کریں، Add to the comparison دبائیں اور امیدوار انہی الفاظ میں شانہ بشانہ کھڑے ہو جاتے ہیں اس سے پہلے کہ ان میں سے کوئی انسٹال ہو۔ Escape منسوخ کر دیتا ہے اور کی بورڈ اسی کارڈ کو واپس دے دیتا ہے جہاں سے آپ نے اسے کھولا تھا۔

یہی وہ واحد دروازہ ہے جس سے اندر آیا جاتا ہے، اسی لیے کچھ بھی آپ کے برانڈ میں غیر محسوس طریقے سے داخل نہیں ہوتا۔ اسٹیج کے نیچے دو انتظامی panels بیٹھے ہیں:

• Fonts on this device - ہر انسٹال شدہ فیملی، وہ رولز جن کی یہ خدمت کرتی ہے اور ایک ڈیلیٹ۔ یہاں Add a face وہی کمپیئر اسٹیج بغیر کسی حد کے کھولتا ہے۔
• Your fonts - اپنی مشین سے ایک TTF، OTF یا WOFF اپ لوڈ کریں۔ یہ اس لائسنس یافتہ کارپوریٹ ٹائپ فیس کا راستہ ہے جو آپ کے پاس پہلے سے ہے۔

دونوں صورتوں میں فیس اسی ڈیوائس پر رہتی ہے، ایپ میں، آپ کے ٹولز میں اور ہر ایکسپورٹ میں رینڈر ہوتی ہے، ہمیشہ کے لیے آف لائن اور آپ کے برانڈ پیک کے ساتھ سفر کرتی ہے - رینڈر کے وقت کچھ بھی فیچ نہیں کیا جاتا۔ Google Fonts پر ہر چیز ایک اوپن لائسنس (OFL/Apache/UFL) کے تحت شپ ہوتی ہے۔

نیچے Type roles پینل ہر رول کا ایک لائیو نمونہ دکھاتا ہے - Primary میں باڈی اور 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

Tokens

باقی ڈیزائن سسٹم، کوڈ چھوئے بغیر ایڈٹ کے قابل:

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) کے طور پر محفوظ ہوتے ہیں اور آپ کے برانڈ کے ساتھ سفر کرتے ہیں۔

Files

وہ فائلیں جو آپ کا برانڈ رکھتا ہے - لوگوز کے علاوہ - یہاں ڈراپ کریں: vector، image، audio اور motion (ویڈیو، Lottie، اینیمیٹڈ) اثاثے۔ یہ آپ کے Catalogue میں پہنچتے ہیں، سیکشنز میں ترتیب دیے گئے اور ہر ٹول کے ایسٹ پکر میں تیار۔ سب کچھ اسی ڈیوائس پر رہتا ہے۔ (ریل روم کو Files لیبل کرتی ہے؛ URL کی catalogue ہی رہتی ہے، کیونکہ ایک پینل کی کلید ایک مستقل معاہدہ ہے۔)

ایک برانڈ لائیں

ریل کے نیچے Add from… ایک دو مرحلوں والا پکر کھولتا ہے۔ پہلا مرحلہ پوچھتا ہے کہ آپ کے پاس کیا ہے، نہ کہ اس کا فارمیٹ کیا ہے:

• Design tokens or a design file - DTCG یا Tokens Studio JSON، ایک Penpot پراجیکٹ، ایک zip of token sets، ایک 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 اس کے رنگ اسکین کرتا ہے اور آپ کو منتخب کرنے دیتا ہے کہ کون سے رکھنے ہیں، پہلا آپ کا Primary بن جاتا ہے۔

ایک سورس انسٹال پہلے ایک چیک پوائنٹ لیتا ہے، تو "امپورٹ سے پہلے پر واپس جائیں" ایک ہی بحالی ہے۔ اور اسکین جو کچھ ڈھونڈتا ہے وہ سیدھا اندر نہیں جاتا: امیدوار Tray میں پہنچتے ہیں، جہاں ہر ایک کو اپنے ہی پریس سے، اس روم کے ذریعے شامل کیا جاتا ہے جو اس قسم کے میٹریل کا مالک ہے۔

#/start?source=<kind> پکر کو دیے گئے سورس (file، pdf، image، font، url) پر کھولتا ہے، اور ?import اسے سادہ فہرست پر کھولتا ہے۔

ایک برانڈ کو ڈیوائسز کے درمیان منتقل کریں

ریل کے نیچے Export ایک واحد LollyBrand-…zip لکھتا ہے - آپ کے ٹوکنز، فونٹس، لوگوز اور تھیم ترجیح، ایک انٹیگریٹی مینی فیسٹ کے ساتھ جسے یہ واپس اندر آنے پر تصدیق کرتا ہے۔ اس کے ساتھ، Tokens (.json) خود اپنے طور پر سادہ ڈیزائن-ٹوکنز دستاویز لکھتا ہے: نہ کوئی فونٹ، نہ کوئی لوگو، صرف ٹوکنز، جو وہی ہے جو ایک repo، ایک CI مرحلہ یا کوئی اور ٹوکنز ٹول اصل میں پڑھتا ہے۔

کسی ایک کو واپس لانا Add from… → Design tokens or a design file ہے (اوپر)، یا اسٹوڈیو پر ڈریگ اینڈ ڈراپ۔ یہ وہ طریقہ ہے جس سے کوئی ساتھی آپ کو ایک برانڈ تھماتا ہے، یا آپ اسے دوسری انسٹال تک لے جاتے ہیں - نہ کوئی اکاؤنٹ، نہ کوئی کلاؤڈ۔ کمانڈ لائن سے کوئی برانڈ لانے کے لیے، دیکھیں ingest:brand۔

ورژنز

Versions ریل کے نچلے سرے پر وہ جگہ ہے جہاں ایک ڈیزائن سسٹم متحرک ہدف بننا چھوڑ دیتا ہے۔ ایک شائع کریں اور آپ کو اس آلے پر رکھی ایک مستقل، نامزد کاپی ملتی ہے: اس کے بعد یہ کبھی نہیں بدلتی، اس لیے وہ tool جو اسے pin کرتا ہے وہی چیز کھینچتا رہتا ہے۔ Panel اس وقت تک چھپا رہتا ہے جب تک آپ کے پاس شائع کرنے کو اپنی کوئی چیز نہ ہو، اس لیے وہ اسٹوڈیو جو کبھی شائع نہیں کرتا وہ کبھی controls نہیں دیکھتا۔

کچھ بھی دبانے سے پہلے جاننے کی تین باتیں، اور پینل یہ تینوں باتیں دبانے سے پہلے بتاتا ہے، بعد میں نہیں:

• ایک ورژن مستقل ہے۔ ابھی delete نہیں ہے، اس لیے panel صرف یہ بیان کرتا ہے کہ کیا رکھا گیا ہے اور یہ کہ وہ رکھا ہی رہتا ہے، بجائے ایسا بٹن پیش کرنے کے جو جھوٹ بولے۔
• ہٹائی گئی چیزیں compatibility کارڈ میں سب سے آگے آتی ہیں۔ شامل کیے اور بدلے گئے ٹوکنز خبر ہیں؛ ایک ہٹایا گیا ٹوکن وہ چیز ہے جو tool کو توڑتی ہے، اس لیے اسے سب سے پہلے نام دیا جاتا ہے اور اسے وہی کہا جاتا ہے جو وہ ہے۔
• شائع کرنا واپس نہیں ہو سکتا؛ بحال کرنا ہو سکتا ہے۔ اس ورژن سے تازہ ترین بحال کریں head پر ایک عام ترمیم ہے، اس لیے یہ اسٹوڈیو کے undo stack پر چلی جاتی ہے اور panel فوراً آپ کو Undo پیش کرتا ہے۔

آپ Publish only کر سکتے ہیں، یا Publish and make active - فرق یہ ہے کہ آیا ٹولز اور ایپ اب سے اُس ورژن کی پیروی کریں گے یا آپ کی تازہ ترین ترمیم کی پیروی جاری رکھیں گے۔ Follow the latest again ہر ترمیم کو بنتے ہی لائیو کر دیتا ہے۔ #/start?area=versions پینل کو براہِ راست کھولتا ہے۔

جب برانڈ مقرر ہو

کچھ بلڈز ایک لاک شدہ برانڈ کے ساتھ آتی ہیں - اس کے رنگ، فونٹس اور ٹوکنز وہی ہیں جو ہر ٹول اور ایکسپورٹ استعمال کرتا ہے، اور تبدیل کرنے کو کچھ نہیں ہوتا۔ ایسی صورت میں اسٹوڈیو کی جگہ ایک مختصر نوٹ آ جاتا ہے جو بتاتا ہے کہ یہ بلڈ ایک مقررہ برانڈ کے ساتھ آتی ہے اور ترمیم بند کر دی گئی ہے۔ یہ جان بوجھ کر کیا گیا ہے: یہی وہ طریقہ ہے جس سے کوئی تنظیم یقینی بناتی ہے کہ ہر چیز برانڈ کے مطابق رہے۔

آگے کہاں جائیں

• Lolly کا استعمال - کینوس، محفوظ کرنا، پراجیکٹس اور کیٹلاگ۔
• ڈیزائن ٹوکنز - ٹوکن ماڈل جس میں آپ کا برانڈ ظاہر ہوتا ہے۔
• ایکسپورٹ اور فارمیٹس - پرنٹ یونٹس، CMYK اور وہ فارمیٹس جن میں آپ کا برانڈ رینڈر ہوتا ہے۔