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

#/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-….lolly کے طور پر لکھتا ہے۔
• Tokens (.json) - خالص ڈیزائن-ٹوکنز دستاویز اپنے طور پر، کسی repo، بلڈ اسٹیپ یا کسی دوسرے ٹوکنز ٹول کے لیے۔
• 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 وہ پہلا کمرہ ہے جہاں آپ پہنچتے ہیں، اور اس کے دو رخ ہیں۔

ابھی کچھ منتخب نہ ہونے کی صورت میں کمرہ کہتا ہے اسے اپنا بنائیں۔ کسی حوالے سے شروع کریں کسی لوگو، اسکرین شاٹ، ویب پیج یا ڈیزائن فائل کے لیے سورس پکر کھولتا ہے۔ ایک رنگ چنیں، ایک فیس چنیں اور ایک لوگو شامل کریں اپنے موجودہ کنٹرولز سیدھا کھولتے ہیں۔ ہر راستہ ایک انتخاب سے شروع ہوتا ہے؛ کسی ایک کو کھولنا کچھ نہیں لکھتا۔ اور Explore the tools فوراً دستیاب ہے۔

ایک بار جب کوئی چیز آپ کی اپنی ہو جائے، تو یہی کمرہ آپ کے پاس کیا ہے دکھاتا ہے، اور آپ کے بنائے ہوئے شمار سب سے آگے ہوتے ہیں۔ Colours ڈیزائن سسٹم کے پاس موجود رنگوں کی تعداد پڑھتا ہے، اور صرف وہاں ایک مدھم · N starter شامل کرتا ہے جہاں ورثے میں ملے رنگ سطح پر دکھائی دیں؛ اس کے ساتھ موجود پٹی پہلے آپ کے چنے ہوئے رنگ رکھتی ہے، پھر ایک باریک لکیر، پھر ماند starter رنگ۔ Type کردار کے حساب سے پڑھتا ہے (Inter ہیڈنگز کے لیے، اس کے نیچے باقی کے لیے Starter · SUSE, SUSE Mono)۔ Logos بتاتا ہے کتنے سلاٹس بھرے ہیں، یا Not set۔ Tokens کارنر ریڈیئس رکھتا ہے، جو آپ کے ہٹانے تک starter نشان زدہ رہتا ہے۔ Files کہتا ہے Nothing yet جب تک لائبریری خالی ہو۔ ہر بلاک اپنے کمرے کا دروازہ ہے۔ یہاں صرف شمار ہیں، کبھی پروگریس بار نہیں اور کبھی فنش کارڈ نہیں - اس اسٹوڈیو میں کچھ بھی واجب الادا نہیں۔

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 Lolly2026-10-23vector SVG32 paths~12k nodes69 groups123 KBخود جانچیںدستخط شدہ فائل حاصل کریں signed by Lolly2026-10-23vector SVG32 paths~12k nodes69 groups123 KBخود جانچیںدستخط شدہ فائل حاصل کریں

• Custom marks - وہ نشانات شامل کریں جنہیں آپ کا برانڈ اپنے انداز میں نام دیتا ہے (ایک آئیکن، ایک کریسٹ، ایک فیوی آئیکن) Custom marks کے تحت؛ اسے نام دیں اور ایک فائل منتخب کریں۔
• More identities - کسی سب-برانڈ، پروڈکٹ یا ایونٹ کا اپنا مکمل لوگو سیٹ ہو سکتا ہے۔ + Add another logo استعمال کریں اور اسے نام دیں؛ آپ کا مرکزی سیٹ محض "Your logo" ہے۔
• ایک SVG اپ لوڈ کریں اور Lolly اس کے رنگ پڑھ لیتا ہے۔ بالکل نئی تنصیب پر یہ خاموشی سے آپ کا بنیادی رنگ لوگو سے مقرر کر دیتا ہے اور یہ بتا بھی دیتا ہے۔ کسی موجودہ برانڈ پر یہ رنگ کو اس کے بجائے تجویز کے طور پر پیش کرتا ہے - "Found in the logo: #…" اس کے ساتھ ایک Use as primary بٹن کے ساتھ - وہاں Colours کمرے میں، جہاں آپ اسے قبول یا رد کر سکتے ہیں۔

Colours

کمرہ ڈیزائن سسٹم کے ساتھ بڑھتا ہے۔ جس چیز کی آپ کو ابھی ضرورت نہیں پڑی وہ صفحے پر نہیں ہوتی، اس لیے پہلی وزٹ ایک فیصلہ ہے اور باقی سب کچھ پیلیٹ کے بڑھنے کے ساتھ آتا ہے۔

پہلا رنگ

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

• چپ ہی پکر ہے۔ اسے دبائیں تو اسٹوڈیو کا اپنا OKLCH کارڈ چپ پر کھلتا ہے، فیلڈ میں جو کچھ بھی موجود ہو اس سے سیڈ کیا گیا: ایک نام، وہیل، چاروں ڈائلز، الفا اور Stored as، ساتھ Cancel اور Add colour نیچے۔ کسی ڈائل کو گھسیٹنا چپ کو رنگ دیتا ہے اور فیلڈ کو ساتھ ساتھ دوبارہ لکھتا ہے، اور جب تک آپ Add colour نہ دبائیں کچھ بھی ڈیزائن سسٹم تک نہیں پہنچتا۔
• فیلڈ کوئی بھی نوٹیشن قبول کرتی ہے - #e0452b، rgb(224 69 43)، oklch(58% .19 32) یا ایک سادہ رنگ کا نام - اور رنگوں کی ایک پوری فہرست چپس کی ایک قطار بن جاتی ہے جسے آپ ایک ایک کر کے شامل کرتے ہیں۔
• اس کے ساتھ دو مزید دروازے ہیں۔ آئی ڈراپر (اُس براؤزر پر جس کے پاس ایک ہو) اسکرین سے رنگ اٹھا لیتا ہے، اور From an image اس ڈیوائس پر کسی اسکرین شاٹ یا تصویر کو پڑھ کر ملنے والے رنگ پیش کرتا ہے۔
• Add کبھی غیر فعال نہیں ہوتا۔ فیلڈ میں کچھ پڑھنے کے قابل نہ ہونے کی صورت میں یہ پکر کھول دیتا ہے، جو عام طور پر خالی پریس کا مطلب ہوتا ہے؛ ایسا متن جو یہ سمجھ نہ سکے فیلڈ کے نیچے ایک لائن دکھاتا ہے، مردہ بٹن کے بجائے۔

پہلا رنگ primary بن جاتا ہے، اور وہ چپ جو اضافے کا جواب دیتی ہے یہ بتاتی ہے - "Primary is now Vivid Violet" - ساتھ Fine-tune ساتھ۔

signed by Lolly2026-10-21vector SVG167 paths~11k nodes243 groups1 image191 KBخود جانچیںدستخط شدہ فائل حاصل کریں signed by Lolly2026-10-21vector SVG167 paths~11k nodes243 groups1 image191 KBخود جانچیںدستخط شدہ فائل حاصل کریں

Starter

Starter اُس ہر چیز کا نام ہے جو منتخب کرنے کے بجائے ایپ کے ساتھ آئی۔ ایک بالکل نئی تنصیب میں کوئی رنگ سرے سے نہیں ہوتا: اس کے پاس صرف ایک نیوٹرل ریمپ ہوتا ہے، کاغذ پر سیاہی، تاکہ سطحیں، متن اور باریک لکیریں کسی کے کچھ طے کرنے سے پہلے ہی رینڈر ہوں۔ یہ نیوٹرلز اسکیفولڈنگ ہیں، اس لیے انہیں رنگ نہیں گنا جاتا اور پیلیٹ پین میں نہیں کھینچا جاتا۔ یہ Tokens کمرے میں Neutrals · starter · 9 کے طور پر رہتے ہیں، ساتھ ایک Open جو انہیں Colours پین میں ایک تہہ شدہ، ٹیگ شدہ گروپ کے طور پر دکھاتا ہے (#/start?area=color&group=neutral)۔

یہی لفظ ہر کمرے میں چلتا ہے: ایک رول جو starter رنگ پر کھڑا ہو "Starter Paper stands in" پڑھتا ہے اور اس کا پکر Choose… پیش کرتا ہے؛ ایک starter فیس Starter ٹیگ رکھتی ہے اور کوئی ٹنٹ نہیں؛ ایک starter کارنر ریڈیئس Overview پر ٹیگ ہوتا ہے۔ ورثے میں ملی مواد کبھی ڈیشڈ بارڈر کے ساتھ نہیں کھینچی جاتی، کیونکہ یہاں ڈیشڈ بارڈر کا مطلب ڈراپ ٹارگٹ ہے۔

جیسے جیسے پیلیٹ بڑھتا ہے

آپ کے رنگ ایک وسیع اسکرین پر ایک In context پیش نظارے کے ساتھ رہتے ہیں اور چھوٹی اسکرینز پر اس کے اوپر اسٹیک ہو جاتے ہیں۔ پیش نظارہ آپ کے پیلیٹ کو استعمال کرتے ہوئے ایک پوسٹر، چارٹ یا انٹرفیس کارڈ دکھا سکتا ہے۔ Starter رنگ اپنے الگ فولڈ ایبل گروپ میں رہتے ہیں، آپ کے شامل کردہ رنگوں سے الگ۔

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

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 کے مطابق۔

ایک قطار تین رجسٹرز میں سے کسی ایک میں پڑھی جاتی ہے، تاکہ پٹی کبھی ایسا فیصلہ نہ جتائے جو کسی نے کیا ہی نہ ہو:

• ایک اپنا رنگ جو رول ادا کر رہا ہو، پوری قوت سے؛
• *Starter Paper stands in - مدھم، اپنے پکر پر Choose…* کے ساتھ؛
• ↳ follows Primary - رول اپنے کسی رنگ کے بجائے primary کے ذریعے حل ہوتا ہے۔

ایک بار جب پیلیٹ کے پاس شیڈز آ جائیں، تو پٹی بڑھ کر ان ساتوں سلاٹس تک پہنچ جاتی ہے جو کوئی ٹول پڑھ سکتا ہے: Primary، Secondary، Surface، Text، Muted، Edge اور On primary۔ On primary، primary سے اخذ ہوتا ہے، Derived پڑھا جاتا ہے اور اس کا کوئی پکر نہیں ہوتا۔

ایپ کا اپنا accent ایک ترجیح ہے، ٹوکن نہیں۔ ڈیفالٹ کے طور پر انٹرفیس ڈیزائن سسٹم کی پیروی کرتا ہے اور کروم accent بنیادی رنگ لیتا ہے۔ یہ آپ کی پروفائل پر ایک Appearance سیٹنگ ہے - Interface follows the design system - اور اسے آف کرنا کروم کو نیوٹرل چھوڑ دیتا ہے۔ ٹولز، کینوسز اور ایکسپورٹس دونوں صورتوں میں غیر متاثر رہتے ہیں، اور فونٹس اور کارنر ریڈیئس ڈیزائن سسٹم کی پیروی کرتے ہیں چاہے سیٹنگ آن ہو یا آف۔

ایکسپرٹ ونگز

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

• Explore shades & harmonies (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 بلڈ یا نامزد اسپاٹ سیاہی۔

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

Explore shades & harmonies کے اندر، ایک Starting colour چنیں۔ Lolly وہی پرسیپچوئل کلر میتھس (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)۔

شروعاتی رنگ اور کنٹرولز بدلنے سے صرف تجاویز بدلتی ہیں۔ کسی شیڈ پر کلک کر کے وہ رنگ شامل کریں، یا Add 5 shades سے ایک گروپ شامل کریں (تعداد آپ کی Shades سیٹنگ کی پیروی کرتی ہے)۔ موجودہ رنگ اور رولز اپنی جگہ رہتے ہیں۔ Undo اضافہ ہٹا دیتا ہے۔

Primary، Neutral اور Secondary قطاریں تجویز کردہ شیڈز دکھاتی ہیں۔ لائٹ اور ڈارک مثالیں اور ان کی کنٹراسٹ ریڈنگز دیکھنے کے لیے Theme preview کھولیں۔ تجویز کردہ تھیم اینکرز کو ایڈجسٹ کرنے کے لیے وہاں ایک Neutral یا Secondary قدم چنیں۔ پورے پیلیٹ کو دوبارہ بنانا نیچے ایک الگ، جائزہ شدہ عمل ہی رہتا ہے۔

signed by Lolly2026-10-21vector SVG22 paths~1.9k nodes49 groups27 KBخود جانچیںدستخط شدہ فائل حاصل کریں signed by Lolly2026-10-21vector SVG22 paths~1.9k nodes49 groups27 KBخود جانچیںدستخط شدہ فائل حاصل کریں

پیلیٹ بنائیں (ہارمنی جنریٹر)

Find matching colours میں، ہارمنی جنریٹر بنیادی رنگ سے ملتے جلتے ایکسنٹ رنگ تجویز کرتا ہے۔ ایک Harmony منتخب کریں - Complementary، Adjacent، Triad، Tetrad یا Analogous (جو اپنا Accents شمار لاتا ہے، 2 سے 5 تک، اور 10° سے 45° تک کا ہیو Angle) - اور ہر امیدوار کے ساتھ ایک خودکار طور پر تیار کردہ انسانی پڑھنے کے قابل نام اور ایک + Add بٹن آتا ہے۔ کسی کو شامل کرنے سے وہ رنگ فوراً پیلیٹ میں شامل ہو جاتا ہے، ایک پریس ایک ٹوکن کے برابر۔ In context آپ کے شامل کردہ رنگوں کو نمونہ کمپوزیشنز پر پیش نظارہ دکھاتا ہے۔

signed by Lolly2026-10-21vector SVG8 paths936 nodes14 groups15 KBخود جانچیںدستخط شدہ فائل حاصل کریں signed by Lolly2026-10-21vector SVG8 paths936 nodes14 groups15 KBخود جانچیںدستخط شدہ فائل حاصل کریں

تیار شدہ پیلیٹ کو کمٹ کرنا

کوئی تجویز کردہ رنگ یا شیڈ گروپ شامل کرنا آپ کے باقی پیلیٹ کو برقرار رکھتا ہے۔ مکمل تبدیلی کے لیے، Rebuild the whole palette… کھولیں اور Preview full rebuild دبائیں۔ جائزہ تبدیلیاں بیان کرتا ہے: کتنے رولز آپ کی تفویض کردہ حالت میں رہیں گے، آپ نے خود شامل کیے گئے کتنے رنگ برقرار رہیں گے، کتنے شیڈ کروز دوبارہ اینکر ہوں گے، کتنے پرنٹ لاکس دوبارہ پن ہوں گے، کتنے چھپے ہوئے شیڈز چھپے رہیں گے، کتنے گریڈینٹ اسٹاپس اپنا رنگ برقرار رکھیں گے۔

اس کارڈ پر Apply rebuilt palette اسے کمٹ کر دیتا ہے؛ Cancel واپس چلا جاتا ہے اور کچھ تبدیل نہیں کرتا۔ چلنے کے بعد، کارڈ ایک Undo پیش کرتا ہے جس پر پہلے سے فوکس ہوتا ہے - اور تبدیلی سے پہلے پورے ڈیزائن سسٹم کا ایک چیک پوائنٹ لیا جاتا ہے، تاکہ "اسے پہلے جیسا کر دیں" ایک بحالی ہو، نہ کہ ایک ضائع شدہ دوپہر۔

پیلیٹ، چارٹ اور ہر سویچ

پیلیٹ ڈیزائن سسٹم کے رنگوں کو فولڈ ایبل گروپس میں درج کرتا ہے، ہر ایک اپنے + Add کنٹرول کے ساتھ۔ اپنے کام کو ترتیب دینے کے لیے گروپس بنائیں اور ان کا نام بدلیں۔ کوئی رول کبھی دوسری ٹائل نہیں بناتا: ایک ٹوکن ایک ٹائل ہے، اور جس ٹائل کی طرف کوئی رول اشارہ کرے وہ اس کے بجائے ایک چھوٹا کارنر نشان پہنتی ہے (P، S، Su، T)۔ ٹائلز کے نیچے، Colour chart انہی سویچز کے دو ویوز پر فولڈ کھلتا ہے: Wheel (OKLCH وہیل - کسی ڈاٹ کو گھسیٹ کر اس کا رنگ بدلیں، کسی ڈاٹ پر کلک کر کے اسے ایڈٹ کریں یا خالی جگہ پر کلک کر کے نیا سویچ ڈراپ کریں) اور Gamut چارٹ، جو دکھاتا ہے کہ ڈسپلے کے قابل رینج اصل میں کہاں ختم ہوتی ہے۔ #/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۔

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

بہت سے سویچز کے ساتھ کام کرنا

ہر سویچ کا ایک الگ ڈریگ ہینڈل ہوتا ہے۔ اسے اپنے گروپ کے اندر رنگوں کو دوبارہ ترتیب دینے کے لیے گھسیٹیں، یا اس پر فوکس کریں، Space دبائیں، ایرو کیز استعمال کریں، اور چھوڑنے کے لیے دوبارہ Space دبائیں۔ Escape منسوخ کر دیتا ہے۔ ترتیب اسٹوڈیو دوبارہ کھولنے کے بعد بھی رہتی ہے اور اسے کالعدم کیا جا سکتا ہے۔ رنگوں کو گروپس کے درمیان منتقل کرنے کے لیے، سویچ ایڈیٹر کا Group کنٹرول استعمال کریں یا کئی رنگ منتخب کر کے Move استعمال کریں۔ ٹوکن کے نام اور رول ریفرنسز برقرار رہتے ہیں۔

پیلیٹ پین میں سلیکشن ایک اشارہ ہے، کوئی موڈ نہیں۔ پہلے دبانے کے لیے کوئی بٹن نہیں، اور بار پہلی منتخب ٹائل کے ساتھ آتا ہے اور آخری کے ساتھ چلا جاتا ہے۔

• پین کی خالی جگہ پر گھسیٹیں تاکہ ایک مستطیل کھینچا جائے: جس بھی ٹائل کو یہ چھوئے وہ سلیکشن میں شامل ہو جاتی ہے، گروپ کی حدود کے آر پار۔ ایک تہہ شدہ سیکشن کچھ شامل نہیں کرتا، اور ایسا گھسیٹنا جو کبھی حرکت نہ کرے سلیکشن صاف کر دیتا ہے۔
• Shift-click پڑھنے کی ترتیب میں رینج لیتا ہے؛ Cmd/Ctrl-click ایک ٹائل ٹوگل کرتا ہے؛ ایک سادہ کلک اب بھی اس ٹائل کا ایڈیٹر کھولتا ہے۔
• ہر گروپ ہیڈر Select all رکھتا ہے، اور کسی ٹائل پر فوکس کے ساتھ Cmd-A ڈیزائن سسٹم کے ہر رنگ کو لے لیتا ہے - کبھی کوئی starter رنگ نہیں۔
• گرِڈ کا ایک ہی ٹیب اسٹاپ ہے۔ تیر اسے چلاتے ہیں، Shift-تیر سلیکشن بڑھاتے ہیں، Space ٹائل ٹوگل کرتا ہے، Delete سلیکشن ہٹاتا ہے اور Escape اسے صاف کرتا ہے۔ (تیر صرف فوکس کو حرکت دیتے ہیں: کسی چینل کو نجز کرنے کے لیے، پہلے l، c یا h دبائیں، جیسا کہ ریڈ آؤٹ کہتا ہے۔)
• ٹچ اسکرین پر کوئی مستطیل نہیں ہوتا۔ سلیکشن شروع کرنے کے لیے کسی ٹائل کو دبائے رکھیں، پھر شامل کرنے کے لیے ٹیپ کریں؛ ہر گروپ کا Select all باقی کام کر دیتا ہے۔

بار خود {n} selected پڑھتا ہے، پھر Move to (ایک موجودہ گروپ، یا مینو کے اندر آپ کا نام دیا ہوا نیا گروپ)، Give a role (ہر منتخب رنگ باری باری اگلا رول لیتا ہے، تو چار ٹائلز ایک ہی پریس میں چاروں رولز بھر دیتی ہیں)، Download (چھ پیلیٹ فارمیٹس میں سے کسی میں بھی سلیکشن)، Copy values (اس کے محفوظ شدہ نوٹیشن میں ہر رنگ کے لیے ایک لائن) اور Delete۔ Move to اور Give a role تب ظاہر ہوتے ہیں جب پیلیٹ کے پاس منتقل کرنے کو شیڈز ہوں۔ ایک Ctrl/Cmd-Z ایک پورے بلک عمل کو کالعدم کر دیتا ہے - چالیس کی منتقلی، ایک رول واک، ایک ڈیلیٹ - اور ایک ڈیلیٹ بتاتا ہے کہ اس نے کیا رکھا، کیونکہ ایک سلیکشن ایسی ٹائلز تک پہنچ سکتی ہے جنہیں یہ کمرہ نہیں ہٹاتا۔

گریڈینٹس

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

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

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

Type

یہ کمرہ اسی طرح بڑھتا ہے۔ اپنی کوئی فیس نہ ہونے کی صورت میں یہ ایک کارڈ اور ایک فیصلہ ہے: Primary، آج جو فیس اس کی خدمت کر رہی ہے اس میں reading سائز پر سیٹ، نام کے ساتھ ایک Starter ٹیگ، ایک بھری ہوئی Choose a face اور لائن "Nothing installs until you choose one." کارڈ کے نیچے "Headings, code and italic follow the primary until you choose them" بیٹھی ہے، ساتھ Choose them separately جو باقی وزٹ کے لیے دوسرے تین کارڈز کھول دیتی ہے۔

signed by Lolly2026-10-21vector SVG87 paths~9.9k nodes91 groups151 KBخود جانچیںدستخط شدہ فائل حاصل کریں signed by Lolly2026-10-21vector SVG87 paths~9.9k nodes91 groups151 KBخود جانچیںدستخط شدہ فائل حاصل کریں

ایک فیس چنیں اور روم چار رول کارڈز، Fonts فہرست اور لائیو نمونے پر کھل جاتا ہے۔ چاروں فیسز وہی ہیں جنہیں ایپ، آپ کے ٹولز اور ہر ایکسپورٹ اصل میں پڑھتے ہیں:

• Primary - باڈی کاپی، بٹنز اور ہر ٹول۔
• Headings - h1/h2 کے لیے ڈسپلے فیس۔
• Code - کوڈ اور ڈیٹا کے لیے ایک مونو اسپیس فیس۔
• Italic - زور، اقتباسات اور ضمنی جملوں کے لیے ایک حقیقی اٹالک ساتھی۔

Headings، Code اور Italic میں سے ہر ایک، جب تک آپ انہیں تفویض نہ کریں، Primary پر واپس چلا جاتا ہے، تو ایک-فونٹ برانڈ کو یہاں کوئی فیصلہ کرنے کی ضرورت ہی نہیں۔

ٹنٹ کا مطلب ہے کہ آپ نے اسے چنا۔ کوئی کارڈ صرف وہیں ٹنٹڈ ہوتا ہے جہاں آپ نے وہ فیس انسٹال کی ہو۔ ایک starter فیس وہی Starter ٹیگ پہنتی ہے جو پیلیٹ کے ورثے میں ملے گروپس پہنتے ہیں، مدھم رجسٹر میں اور بغیر کسی ٹنٹ کے، اور جس رول کو کسی نے نہیں چنا وہ primary کا نام دہرانے کے بجائے ↳ follows Primary پڑھتا ہے جیسے وہ چنا گیا ہو۔ بٹن آپ کی اپنی فیس پر Change کہتا ہے اور باقی ہر جگہ Choose a face۔ کارڈ پر کچھ بھی کمٹ نہیں ہوتا: بٹن اسی رول تک محدود 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خود جانچیںدستخط شدہ فائل حاصل کریں

اسٹیج روم کے اندر ہی کھلتا ہے، کسی ڈائیلاگ میں نہیں، اور سیدھا اُس کارڈ کے نیچے جسے آپ نے دبایا۔ جب یہ کھلا ہو تو کارڈز رول اور فیس کی ایک لائن کی پٹی میں تہہ ہو جاتے ہیں، تاکہ اسٹیج فون پر بھی پہلی اسکرین پر ہو۔ Escape منسوخ کر دیتا ہے اور کی بورڈ اسی کارڈ کو واپس دے دیتا ہے جہاں سے آپ نے اسے کھولا تھا۔

ایک فیس چننا تین پریسز ہیں:

1. کارڈ پر Choose a face دبائیں۔
2. ایک فیملی کا نام ٹائپ کریں اور Preview دبائیں - یا فیلڈ کے نیچے موجود چھ Pinned فیملیز میں سے کسی ایک کو دبائیں، ہر ایک ایک پریس۔ کارڈ پہلے سے لوڈ ہوتا دکھائی دیتا ہے، ایک اسکیلیٹن بار کے ساتھ جہاں نمونہ ہوگا، اس انٹرفیس فیس کے بجائے جو ابھی تک نہ دیکھی گئی فیس کی جگہ کھڑی ہے۔
3. Use this face۔

رضامندی صرف ایک بار مانگی جاتی ہے، اُس پریس پر جو آپ نے کیا۔ پہلی بار جب کوئی پیش نظارہ Google Fonts تک پہنچتا ہے، ایک ڈائیلاگ بتاتا ہے کہ کیا ہوگا: Google فیملی کا نام اور آپ کا IP ایڈریس جان لیتا ہے۔ پھر فائل اسی ڈیوائس پر رہتی ہے اور آف لائن استعمال ہوتی ہے۔ یہ اسٹوڈیو کا واحد قدم ہے جو کسی تیسرے فریق تک پہنچتا ہے۔ Fetch from Google آگے بڑھتا ہے اور یاد رکھا جاتا ہے۔ Cancel کارڈ کو یہ کہتے چھوڑ دیتا ہے "Not fetched. Nothing was sent to Google." ساتھ اپنا لائیو Fetch from Google، تاکہ اپنا ارادہ بدلنا خود کارڈ پر ایک پریس ہو۔ کوئی کارڈ کبھی مردہ بٹن نہیں دکھاتا: وہ جس بھی حالت میں ہو، اس کا ایک بنیادی بٹن بتاتا ہے کہ اگلا قدم کیا ہے۔

اسٹیج پر ایک فونٹ فائل ڈراپ کریں اور یہ فوراً پیش نظارہ کر لیتی ہے - آپ کی اپنی مشین سے TTF، OTF یا WOFF، جو اس لائسنس یافتہ کارپوریٹ ٹائپ فیس کا راستہ ہے جو آپ کے پاس پہلے سے ہے۔ وہ ڈراپ زون روم کا واحد فائل دروازہ ہے۔

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

اس ڈیوائس پر فونٹس

Fonts پینل ہر وہ فیس درج کرتا ہے جو یہ ڈیوائس رکھتی ہے اور وہ رول جس کی یہ خدمت کرتی ہے۔ آپ کی شامل کردہ فیسز In the design system کے تحت آگے رہتی ہیں، ہر ایک اپنے رولز اور ایک ڈیلیٹ کے ساتھ، اور جو Primary کی خدمت کرتی ہے وہ بیج رکھتی ہے۔ starter فیسز ایک تہہ شدہ قطار میں ان کے پیچھے آتی ہیں - Starter · SUSE, SUSE Mono · serving Primary and Code until you choose - مدھم، بغیر کسی ڈیلیٹ کے اور پروموٹ کرنے کو کچھ نہیں، کیونکہ ان میں سے کوئی بھی کسی کا کیا فیصلہ نہیں۔ Add a face وہی compare stage بغیر کسی حد کے کھولتا ہے۔

نیچے Type roles پینل ہر رول کا ایک لائیو نمونہ دکھاتا ہے - Primary میں باڈی اور UI، اوپر کی ہیڈنگز کے لیے ایک اختیاری ڈسپلے فیس، زور کے لیے ایک اٹالک، کوڈ اور ڈیٹا کے لیے ایک مونو - ساتھ ہر ایک کے پاس فیملی اور اس کی حالت (Inter، SUSE · starter، SUSE · follows Primary)، تاکہ پورا سیٹ ایک ساتھ پڑھا جا سکے۔

Tokens

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

signed by Lolly2026-10-21vector SVG336 paths~32k nodes575 groups1 image490 KBخود جانچیںدستخط شدہ فائل حاصل کریں signed by Lolly2026-10-21vector SVG336 paths~32k nodes575 groups1 image492 KBخود جانچیںدستخط شدہ فائل حاصل کریں

• Rounded corners - ایک واحد ریڈیس سلائیڈر (0–1.5rem) جسے ایپ بھر میں کارڈز، بٹنز اور پینلز فالو کرتے ہیں۔
• Neutrals - وہ ink-through-paper ریمپ جس کے ساتھ ایک نئی تنصیب آتی ہے، جسے Neutrals · starter · 9 کے طور پر اس کے نو قدموں اور Colours پین میں ایک Open کے ساتھ درج کیا گیا ہے۔ یہ واحد جگہ ہے جہاں starter نیوٹرلز کو منظم کیا جاتا ہے، اور starter ٹیگ اُسی لمحے ختم ہو جاتا ہے جب ریمپ تیار کیا جاتا ہے نہ کہ ورثے میں ملتا ہے۔
• More tokens - spacing، sizing، stroke width، opacity، rotation، سادہ numbers اور shadows شامل اور ایڈٹ کریں۔ ایک ٹائپ چنیں، اسے نام دیں (Gutter، Card shadow…) اور اس کی ویلیو سیٹ کریں۔ یہ معیاری design tokens (DTCG) کے طور پر محفوظ ہوتے ہیں اور ڈیزائن سسٹم کے ساتھ سفر کرتے ہیں۔

Files

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

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

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

• Design tokens or a design file - DTCG یا Tokens Studio JSON، ایک Penpot پراجیکٹ، ایک zip of token sets، ایک Lolly ڈیزائن سسٹم پیک یا ایک SVG۔
• PDF - ایک ڈیک یا ایک گائیڈ لائنز فائل، اس ڈیوائس پر اس کے رنگوں، اس کے مارکس اور اس کے ایمبیڈڈ ٹائپ فیسز کے لیے پڑھی جاتی ہے۔
• Logo or screenshot - ایک تصویر ایک تجویز کردہ پیلیٹ بن جاتی ہے، اس ڈیوائس پر پڑھی جاتی ہے۔ کچھ بھی اپ لوڈ نہیں ہوتا۔ یہ رنگ پڑھتا ہے، تصویر میں موجود ٹائپ فیس یا لے آؤٹ نہیں۔
• Saved web page - ایک HTML فائل اور اس کی CSS فائلیں منتخب کریں، یا HTML یا CSS پیسٹ کریں۔ کل ملا کر 20 فائلوں اور 2 MB تک۔ صرف فراہم کردہ متن پڑھا جاتا ہے؛ منسلک وسائل حاصل نہیں کیے جاتے اور اسکرپٹس نہیں چلتیں۔ یہ راستہ ایکسٹینشن یا ڈیسک ٹاپ ایپ کے بغیر بھی کام کرتا ہے۔
• Font file - TTF، OTF یا WOFF۔ Type روم کھولتا ہے، جہاں فیس انسٹال ہوتی ہے۔
• Website - ایک صفحہ، اس کے رنگوں اور ٹائپ کے لیے پڑھا جاتا ہے۔ یہ ٹائل صرف اس ڈیوائس پر ظاہر ہوتی ہے جو واقعی کوئی صفحہ پڑھ سکے، کیونکہ ایک ایسی غیر فعال ٹائل جو کسی ایسی چیز کا اشتہار دے جسے کوئی دبا ہی نہیں سکتا، کسی ٹائل کے نہ ہونے سے بھی بدتر ہے۔ جہاں یہ ظاہر ہوتی ہے وہاں یہ صاف صاف اپنا ریڈر بتاتی ہے: اسی ڈیوائس پر ایپ کے ذریعے فیچ کیا گیا، یا بیک گراؤنڈ ٹیب میں براؤزر ایکسٹینشن کے ذریعے، آپ کے بطور سائن اِن ہو کر پڑھا گیا۔ کوئی URL نام کرنا صرف فیلڈ کو پری فل کرتا ہے - فیچ بٹن ہی رضامندی ہے، تو کوئی آپ کو بھیجا ہوا لنک کبھی خود کوئی ریڈ شروع نہیں کر سکتا۔

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

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 ڈیزائن سسٹم پیک (.lolly؛ پرانی .zip بھی اب تک قبول کی جاتی ہے) - ایک ہی قدم میں انسٹال ہوتا ہے؛
• ایک Penpot ایکسپورٹ (.penpot) - اس کے ڈیزائن ٹوکنز کھینچ لاتا ہے؛
• ایک Design Tokens فائل (.json) - W3C DTCG؛
• ایک Tokens Studio فائل (.json) - Tokens Studio؛
• ایک plain SVG (.svg) - Lolly اس کے رنگ اسکین کرتا ہے اور آپ کو منتخب کرنے دیتا ہے کہ کون سے رکھنے ہیں، پہلا آپ کا Primary بن جاتا ہے۔

کوئی لوگو/اسکرین شاٹ، ویب سائٹ یا محفوظ شدہ صفحہ 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 رپورٹ مشاہدات، تجویز کردہ ٹوکنز اور سورس معلومات رکھتی ہے؛ محفوظ شدہ HTML/CSS میں فراہم کردہ متن کا ایک SHA-256 شامل ہوتا ہے۔ اس میں خام صفحہ متن شامل نہیں ہوتا اور یہ دستخط شدہ Content Credential نہیں ہے۔ فونٹ کے نام تجاویز ہیں: Type اب بھی وہ جگہ ہے جہاں فونٹس چنے اور انسٹال کیے جاتے ہیں۔

PDF اور دوسری ڈیزائن فائل امپورٹس اپنے موجودہ ریویو کنٹرولز رکھتی ہیں۔ Tray میں رکھی گئی چیزیں اُس روم کے ذریعے شامل کیے جانے تک کچھ نہیں بدلتیں جو اُس قسم کے مواد کی مالک ہے۔

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

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

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

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

پرانی سیٹنگز بحال کریں

ریل کے نچلے سرے پر Restore brand settings چنیں، ایک تاریخ والا چیک پوائنٹ منتخب کریں، پھر Restore دبائیں۔ یہ فعال برانڈ کے لیے رنگ، ٹائپ سیٹنگز اور دیگر برانڈ ٹوکنز بحال کر دیتا ہے۔ فونٹ اور امیج فائلیں جیسی ہیں ویسی ہی رہتی ہیں۔

چیک پوائنٹ لاگو کرنے سے پہلے Lolly آپ کی موجودہ سیٹنگز کو Before restore کے طور پر محفوظ کرتا ہے۔ اُس چیک پوائنٹ کو منتخب کر کے بحالی کو الٹا جا سکتا ہے، براؤزر بند اور دوبارہ کھولنے کے بعد بھی۔ اس ڈیوائس پر آخری 20 چیک پوائنٹس رکھے جاتے ہیں۔ اگر اسٹوریج پڑھا نہ جا سکے یا موجودہ سیٹنگز محفوظ نہ ہو سکیں، تو ڈائیلاگ مسئلہ بتاتا ہے تاکہ آپ دوبارہ کوشش کر سکیں۔

ورژنز

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 پینل کو براہِ راست کھولتا ہے۔

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

کچھ بلڈز ایک لاک شدہ ڈیزائن سسٹم کے ساتھ آتی ہیں، جیسے SUSE Brand۔ اسے کھولنے پر ایک صرف پڑھنے کے قابل نوٹ نظر آتا ہے، ساتھ Make an editable copy اور Switch۔ اس کے اصل رنگ، فونٹس اور ٹوکنز سلامت رہتے ہیں۔ آپ کے اپنے مقامی سسٹمز قابلِ ترمیم رہتے ہیں، چاہے لاک شدہ سسٹم اس ڈیوائس پر پہلا ہی کیوں نہ رہا ہو۔ Profile میں، Open کوئی سسٹم منتخب کر کے اس کا اسٹوڈیو کھولتا ہے؛ Make a new one ایک مقامی سسٹم بناتا ہے اور اسے #/start پر اس کے نام والے فیلڈ پر فوکس کے ساتھ کھولتا ہے۔

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

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

ایک لُک تلاش کریں اور موازنہ کریں

Overview یا Profile پر ڈیزائن سسٹم کی فہرست سے Find a look کھولیں۔ اس ڈیوائس پر محفوظ سسٹمز اور Lolly کی چند دوبارہ استعمال کے قابل مثالیں دیکھیں۔ نام، رنگ ٹیگ یا بیان کردہ فونٹ سے تلاش کریں۔ Closest to my current palette ماپے گئے رنگ کی مماثلت کے حساب سے ترتیب دیتا ہے، برابری کی صورت میں ملتی جلتی فونٹ فیملیز فیصلہ کرتی ہیں؛ یہ کوئی کوالٹی اسکور نہیں۔

کسی ایک لُک کو جائزے کے لیے، یا دو کو موازنے کے لیے منتخب کریں۔ ریویو بٹن چھوٹی اسکرین پر بھی دستیاب رہتا ہے۔ کوئی لُک منتخب کرنا کچھ نہیں بدلتا۔ Use this saved system موجودہ ڈیزائن سسٹم رجسٹری میں سے بدلتا ہے۔ Use these colours ایک مثال کو معمول کے چیک پوائنٹ اور انسٹال فلو کے ذریعے لاگو کرتا ہے، موجودہ فونٹس برقرار رکھتے ہوئے۔ 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 these colours یا Use this saved system نہ چنیں۔

سورس ایویڈنس پڑھیں

سورس ریویو کی اختیاری تفصیلات جہاں مشاہدہ کی گئی ہوں وہاں ٹائپوگرافی، گیپس، پیڈنگ اور کارنر ویلیوز دکھاتی ہیں۔ محفوظ شدہ HTML/CSS اور نیٹو ویب سائٹ ریڈز declarations رپورٹ کرتے ہیں، جو رینڈر کیے گئے صفحے میں استعمال نہ ہو رہے ہوں۔ براؤزر ایکسٹینشن نظر آنے والے عناصر کے ایک محدود نمونے سے ماپے گئے styles رپورٹ کر سکتی ہے، اپنے ویو پورٹ اور براؤزر کلر ترجیح کے ساتھ۔ پرانی ایکسٹینشنز اب بھی declared styles کے ساتھ کام کرتی ہیں۔ غائب فیلڈز Not observed کہتی ہیں۔

یہ مشاہدات ہیں، خودکار اسٹائل سیٹنگز نہیں۔ ایک reference اسکین فونٹ فائلیں نہ حاصل کرتا ہے نہ انسٹال کرتا ہے، اور سورس اسپیسنگ خاموشی سے آپ کی اپنی اسپیسنگ کی جگہ نہیں لیتی۔ شمار نمونے میں occurrences بیان کرتے ہیں، اعتماد یا کوالٹی نہیں۔

کسی کمپوزیشن کو ڈیزائن سسٹم کے مقابلے میں چیک کریں

Design میں، Export کھولیں، پھر Before you export۔ چیک وہی مؤثر ڈیزائن سسٹم ورژن استعمال کرتا ہے جو رینڈر استعمال کرتا ہے۔ یہ authored رنگوں، ٹوکن ایلیسز، فونٹ انتخاب اور امیج ایسٹ IDs کا موازنہ کرتا ہے۔ حسبِ ضرورت ویلیوز جان بوجھ کر ہو سکتی ہیں؛ بیان کردہ برانڈ اثاثوں سے باہر کوئی تصویر ایک ریویو آئٹم ہے، ممنوعہ تصویر نہیں۔

جہاں کوئی ٹھوس رنگ یا فونٹ تجویز دستیاب ہو، اس کا بٹن صرف وہی ایک لیئر بدلتا ہے۔ عام Undo اصل ویلیو بحال کر دیتا ہے۔ لاک شدہ یا بدلی گئی لیئرز کسی پرانی تجویز سے اوور رائٹ نہیں ہوتیں۔ غائب سورس ایویڈنس کسی میچ سے الگ رہتا ہے۔ رینڈر شدہ کنٹراسٹ اور ٹیکسٹ لے آؤٹ موجودہ نصب شدہ چیکس سے چیک ہوتے ہیں۔ گریڈیئنٹس، ایفیکٹس، نیسٹڈ ٹول کنٹینٹ، رائٹس اور موضوعی کوالٹی کا اندازہ برانڈ موازنہ نہیں لگاتا۔ چیکس Download کو نہیں روکتیں۔

ڈیزائن کانٹیکسٹ مقامی طور پر استعمال کریں

Download design context میں ٹوکن دستاویز، حل شدہ رنگ، بیان کردہ فونٹ فیملیز، ایسٹ IDs، جہاں ریکارڈ ہو وہاں سورس ایویڈنس، کوریج اور واضح قواعد شامل ہوتے ہیں۔ اس میں فونٹ فائلیں یا ملکیت کا ثبوت شامل نہیں ہوتا۔ reference ریویو میں اس کے تجویز کردہ ٹوکنز اور مشاہدات بھی شامل ہوتے ہیں۔

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 اری یا ایک compiled Design دستاویز کے ساتھ Design ان پٹس قبول کرتا ہے۔ یہ کمپوزیشن میں ترمیم کیے بغیر تجویز کردہ اصلاحات رپورٹ کرتا ہے۔ یہ براؤزر لے آؤٹ یا رینڈر شدہ کنٹراسٹ نہیں ماپ سکتا۔ موجودہ MCP resource lolly://design-context مقامی طور پر configure کیے گئے MCP process کے ذریعے مؤثر سسٹم کا context ظاہر کرتا ہے؛ کسی نئی ہوسٹڈ سروس یا API key کی ضرورت نہیں۔