PDS · ڈیزائن سسٹم

ہر اس چیز کے پیچھے ڈیزائن سسٹم جو ہم پیش کرتے ہیں۔

PDS Protocore کی اپنی ڈیزائن لینگوئج ہے، جو ہماری بنائی ہوئی پروڈکٹس سے نکالی گئی اور پروڈکشن میں پختہ ہوئی۔ ڈارک-فرسٹ، ٹوکن پر مبنی، اور شروع سے آخر تک دستاویزی — وہی کمپوننٹس جو ہماری پروڈکٹس اور کلائنٹ ڈیش بورڈز رینڈر کرتے ہیں، اس طرح پیک کیے گئے کہ ٹیم انہیں ایک دوپہر میں اپنا سکے۔

خصوصیات

وہ سب کچھ جو Protocore Design System کے ساتھ آتا ہے۔

  1. 01101 پروڈکشن کمپوننٹس
  2. 02ڈیزائن ٹوکنز
  3. 03دو تھیمز، پانچ ایکسنٹس
  4. 04پہلے ڈارک
  5. 05فارم کے بنیادی عناصر
  6. 06لے آؤٹ اور کمپوزیشن
  7. 07نیویگیشن
  8. 08اوورلیز
  9. 09ڈیٹا ڈسپلے
  1. 10فیڈبیک اور اسٹیٹس
  2. 11ٹائپوگرافی
  3. 12موشن
  4. 13بنیادی طور پر قابل رسائی
  5. 14زیرو رن ٹائم CSS
  6. 15فریم ورک سے آزاد CSS لیئر
  7. 16ہر اسٹیک کے لیے ٹوکن ایکسپورٹس
  8. 17تھیم پرووائیڈر اور ہکس
  9. 18Whitelabel تھیمنگ
  1. 19llms.txt میپ
  2. 20MCP سرور
  3. 21ابتدا سے انتہا تک دستاویزی
  4. 22ورژنڈ ریلیزز
  5. 23پرائیویٹ رجسٹری
  6. 24آف لائن لائسنس کیز
  7. 25فی ٹیم لائسنس
تمام 25 خصوصیات تفصیل سے پڑھیں

01101 پروڈکشن کمپوننٹس

بنیادی عناصر سے مکمل صفحات کی ترتیب تک — 101 کمپوننٹس، جن میں سے ہر ایک ہماری شپ کی ہوئی پروڈکٹ سے نکالا گیا ہے، الگ تھلگ ڈیزائن نہیں کیا گیا۔ جو کمپوننٹ PDS میں ہے وہ پہلے ہی حقیقی کام کر چکا ہے: یہ سائٹ، پروڈکٹ ڈیمو اور ہمارے کلائنٹ ڈیش بورڈز سب اسی پر بنے ہیں۔

02ڈیزائن ٹوکنز

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

03دو تھیمز، پانچ ایکسنٹس

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

04پہلے ڈارک

کنٹراسٹ، ایلیویشن اور رنگ پہلے ڈارک تھیم پر طے کیے جاتے ہیں؛ لائٹ تھیم انہی ٹوکنز سے اخذ ہوتی ہے۔ نتیجہ ایسا ڈارک موڈ ہے جو فطری لگتا ہے، الٹایا ہوا نہیں۔

05فارم کے بنیادی عناصر

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

06لے آؤٹ اور کمپوزیشن

اسٹیکس، گرڈز، ڈیوائیڈرز اور پیج شیلز اسکرینیں بغیر ad-hoc CSS کے بناتے ہیں۔ سب سے بڑے کمپوننٹس مکمل پیج کمپوزیشنز ہیں — ہیرو، سیکشن اور فوٹر پیٹرنز جو ہمارے شپ کیے ہوئے صفحات سے لیے گئے ہیں۔

07نیویگیشن

ہیڈرز، ٹیبز، بریڈ کرمبس اور مینیوز، جن میں ریسپانسو اور کی بورڈ رویہ پہلے سے شامل ہے۔ اس سائٹ کی نیویگیشن خود وہی کمپوننٹ ہے، اس کی نقل نہیں۔

08اوورلیز

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

09ڈیٹا ڈسپلے

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

10فیڈبیک اور اسٹیٹس

ٹوسٹس، بینرز، خالی حالتیں، پروگریس اور اسکیلیٹنز — وہ غیر دلکش حالتیں جو شروع ہی سے ڈیزائن کی گئی ہیں۔ PDS پر بنی پروڈکٹ کے پاس لوڈنگ، خالی اور ناکام تینوں کا سوچا سمجھا جواب ہوتا ہے۔

11ٹائپوگرافی

ایڈیٹوریل ٹائپ اسکیل، تکنیکی لہجے کے لیے مونو لیبلز کے ساتھ — وہ آواز جو آپ کو Protocore کی ہر سطح پر نظر آتی ہے۔ اسکیل ٹوکنز پر مبنی ہے، اس لیے پروڈکٹس سسٹم چھوڑے بغیر اسے ٹیون کر سکتی ہیں۔

12موشن

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

13بنیادی طور پر قابل رسائی

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

14زیرو رن ٹائم CSS

اسٹائلنگ اسٹیٹک CSS ہے جو بلڈ کے وقت حل ہوتی ہے — نہ CSS-in-JS رن ٹائم، نہ براؤزر میں کوئی حساب۔ اسٹائلنگ لیئر صفحے میں صفر JavaScript شامل کرتی ہے۔

15فریم ورک سے آزاد CSS لیئر

سسٹم سادہ CSS پیکیج کے طور پر بھی دستیاب ہے — ٹوکنز اور یوٹیلیٹی کلاسز، React کی ضرورت کے بغیر۔ سرور رینڈرڈ صفحات، ای میلز اور غیر React اسٹیکس ایک ہی سورس آف ٹرتھ سے لیتے ہیں۔

16ہر اسٹیک کے لیے ٹوکن ایکسپورٹس

ٹوکنز ویب کے لیے CSS ویری ایبلز اور Tailwind پری سیٹ کے طور پر، اور موبائل پلیٹ فارمز کے لیے نیٹو فارمیٹس میں ایکسپورٹ ہوتے ہیں۔ برانڈ کی ایک ہی تعریف، جہاں بھی پروڈکٹ چلے وہاں استعمال ہوتی ہے۔

17تھیم پرووائیڈر اور ہکس

React لیئر ایپس کو پرووائیڈر میں لپیٹتی ہے اور ہکس کے ذریعے ٹوکنز فراہم کرتی ہے — کمپوننٹس قدریں ہارڈ کوڈ کرنے کے بجائے فعال تھیم اور ایکسنٹ پڑھتے ہیں۔ تھیم بدلنا اسٹیٹ ہے، ری بلڈ نہیں۔

18Whitelabel تھیمنگ

جو میکانزم PDS کو پانچ ایکسنٹس دیتا ہے وہی whitelabel پروڈکٹ کو اس کا برانڈ دیتا ہے: ٹوکن کی قدریں بدلیں، کمپوننٹس وہی رکھیں۔ فیملی کی ہر whitelabel ایپ اس کے کام کرنے کا ثبوت ہے۔

19llms.txt میپ

پورے سسٹم کا مشین ریڈایبل میپ — کمپوننٹس، ٹوکنز، پیٹرنز — جو llms.txt کے طور پر شائع ہوتا ہے۔ LLM کو اس کی طرف اشارہ کریں تو جنریٹڈ کوڈ فرضی کمپوننٹس گھڑنے کے بجائے اصل PDS کمپوننٹس استعمال کرتا ہے۔

20MCP سرور

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

21ابتدا سے انتہا تک دستاویزی

ہر کمپوننٹ pds.protocore.io پر لائیو مثالوں، پراپس اور کاپی پیسٹ کوڈ کے ساتھ موجود ہے۔ ڈاکس خود PDS پر رینڈر ہوتی ہیں — جو آپ پڑھتے ہیں وہی آپ شپ کرتے ہیں۔

22ورژنڈ ریلیزز

PDS سیمینٹک ورژنز اور چینج لاگز کے ساتھ ورژنڈ پیکیجز کے طور پر شپ ہوتا ہے۔ اپ گریڈ سوچ سمجھ کر ہوتے ہیں: ٹیم اپنی مرضی سے منتقل ہوتی ہے، اور چینج لاگ بتاتا ہے کہ ٹھیک کیا بدلا۔

23پرائیویٹ رجسٹری

پیکیجز Protocore کی پرائیویٹ npm رجسٹری سے انسٹال ہوتے ہیں، .npmrc میں ہر ٹیم کے ٹوکن کے ساتھ — معیاری npm ورک فلو، جو لائسنس یافتہ ٹیموں تک محدود ہے۔ نہ vendored zip فائلیں، نہ کاپی پیسٹ انسٹال۔

24آف لائن لائسنس کیز

دستخط شدہ لائسنس کی مقامی طور پر تصدیق ہوتی ہے — نہ phone-home، نہ آپ کے بلڈ میں نیٹ ورک چیک۔ لائسنسنگ کے مسائل ڈیولپمنٹ کے وقت وارننگ کے طور پر سامنے آتے ہیں اور پروڈکشن ایپ کو کبھی نہیں توڑتے۔

25فی ٹیم لائسنس

PDS پروپرائٹری ہے اور فی ٹیم لائسنس کیا جاتا ہے۔ رسائی کی درخواست کریں اور ہم آپ کو سیٹ اپ کر دیں گے — پیکیجز، ڈاکس اور ٹوکن سورسز — تاکہ ٹیم ایک دوپہر میں اسے اپنا سکے۔

FAQ

ڈیزائن سسٹم، سوالوں کے جواب۔

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

  • npm.protocore.io پر موجود پرائیویٹ رجسٹری سے۔ رسائی کے کریڈینشلز آپ کی بلڈ کو @protocore پیکجز حاصل کرنے دیتے ہیں، اس کے بعد ٹوکنز اور کمپوننٹس کسی بھی ڈیپنڈنسی کی طرح انسٹال ہوتے ہیں۔

  • ٹوکنز ویب، .NET اور نیٹو کے لیے تیار کیے جاتے ہیں، اس لیے ایک رنگ یا ریڈیس کا مطلب ہر اس پلیٹ فارم پر ایک ہی رہتا ہے جس پر آپ ریلیز کرتے ہیں۔ کمپوننٹس React کے لیے آتے ہیں، اور فریم ورک سے آزاد CSS لیئر انہی ٹوکنز اور کلاسز کے ساتھ ان ٹیموں کے لیے ہے جو React استعمال نہیں کرتیں۔

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

  • یہ اسی مقصد کے لیے بنایا گیا ہے: llms.txt میپ اور MCP سرور ایجنٹس کو سسٹم پڑھنے اور اس کے ساتھ درست بلڈ کرنے دیتے ہیں، اور pds.protocore.io پر ہر کمپوننٹ اور ٹوکن کی لائیو مثالیں، props اور کاپی پیسٹ کوڈ موجود ہیں۔

قیمتیں

PDS کا لائسنس کیسے ہوتا ہے۔

01

فی ٹیم لائسنس

PDS کا لائسنس فی ٹیم ہے، فی سیٹ یا فی پروجیکٹ نہیں۔ ایک لائسنس اس ٹیم کے ہر اس فرد کو کور کرتا ہے جو اس پر کام کرتا ہے: ٹوکنز، کمپوننٹس اور دستاویزات۔

02

آپ کے ادارے کے ساتھ بڑھے

ایک ٹیم سے شروع کریں اور اپنانے کے ساتھ مزید ٹیموں تک پھیلائیں۔ لاگت صرف اس بات سے طے ہوتی ہے کہ کتنی ٹیمیں PDS پر کام کر رہی ہیں، کسی اور چیز سے نہیں۔

03

Protocore کی بلڈ کے اندر

جو whitelabel پروڈکٹس ہم آپ کے لیے بناتے ہیں وہ پہلے ہی PDS پر چلتے ہیں۔ اسٹینڈ اَلون لائسنس ان ٹیموں کے لیے ہے جو اسے اپنے پروڈکٹس پر اپنانا چاہتی ہیں۔

لائسنس ٹیموں کے حساب سے ہوتا ہے، ملازمین کی تعداد یا استعمال کے حساب سے نہیں۔ رسائی کی درخواست کریں، ہم اسے ان ٹیموں تک محدود رکھ کر طے کریں گے جو اس پر کام کریں گی۔

جائزہ

PDS سے اسکرین بنائیں۔

01

لائیو دستاویزات

pds.protocore.io پر پورا سسٹم دیکھیں: ہر کمپوننٹ اور ٹوکن کی لائیو مثالیں، props اور کاپی پیسٹ کوڈ۔

02

ٹوکن پیکجز

ویب، .NET اور نیٹو کے لیے تیار کردہ ڈیزائن ٹوکنز، تاکہ ایک رنگ یا ریڈیس کا مطلب ہر اس پلیٹ فارم پر ایک ہی رہے جس پر آپ ریلیز کرتے ہیں۔

03

فی ٹیم لائسنس

PDS کا لائسنس فی ٹیم ہے۔ ایک لائسنس اس پر کام کرنے والے ہر فرد کو کور کرتا ہے، اور ٹوکنز، کمپوننٹس اور دستاویزات سب اس میں شامل ہیں۔

04

رجسٹری تک رسائی

npm.protocore.io پر پرائیویٹ رجسٹری کے کریڈینشلز، تاکہ آپ کی بلڈ @protocore پیکجز انسٹال کر سکے۔

دستیابی

PDS ملکیتی ہے اور فی ٹیم لائسنس کیا جاتا ہے۔ رسائی کی درخواست کریں، ہم آپ کو سیٹ اپ کر دیں گے۔

ایک پروڈکٹ چنیں۔ یا پورا کور لیں۔

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