راهنمای طراحی و سیستم کامپوننتهای ۲رگ
این سند تمام کامپوننتهای قابلاستفاده، پالت رنگ، قوانین تایپوگرافی، افکتهای سایهٔ پیکسلی و الگوهای تعاملی را به صورت عملی و تعاملی معرفی میکند.
پالت رنگ و توکنهای تم
اکسنت اصلی، اکشنها، هایلایتهای بصری
متن اصلی، خطوط کادر و بردرهای پررنگ
پسزمینه اصلی صفحات و شل رابط کاربری
پسزمینه کمرنگ و متنهای ثانویه/توضیحات
خطوط جداکننده و دیوایدرهای شبکهای
کارتها و سکشنهای تاکیددار
تایپوگرافی و ساختار فونتها
مخصوص متنهای بدنه، مقالات، توضیحات، خلاصه یادداشتها و عنوانهای روایی.
عنوان بزرگ با فونت پیدا (Bold 700)
متن عادی برای پاراگرافها و راهنماها (Regular 400)
«در ۲رگ ما یادگیری را از خروجی جدا نمیکنیم. دانش فقط زمانی معنادار است که بتوان با آن سیستمی پایدار خلق کرد.»
مخصوص برچسبهای فنی، دکمهها، آمار، شناسهها، بردرها، تیکر و نشانها.
سایههای پیکسلی و بردرهای بروتالیست
سایه پیشفرض تیره
کادر اصلی با سایه مشکی ۴ پیکسلی در حالت معمولی، ۵ پیکسل در هاور و جابجایی ۲ پیکسلی در کلیک.
سایه پیکسلی قرمز (اکسنت)
برای دکمههای اقدام اصلی (CTA)، کارتهای ویژه و عناصر کلیدی اکشن.
کادر ماتریسی با نشانهها
الگوی نقطهای با نشانگرهای پلاس چهارگوشه برای استایل استودیویی.
کامپوننتهای پایه (Buttons, Badges, Separators)
انواع دکمهها (Button Variants)
سایزها و استایلهای بروتالیست ۲رگ (Pixel-Shadowed)
جداکنندهها و برچسبها (Separators & Labels)
الگوهای فرم، ورودیها و اعتبارسنجی
فیلد ورودی استاندارد
نام خود را برای ثبت در سامانه وارد نمایید.
مجموعه فیلدها با جداکننده (FieldSet)
افکتهای تعاملی و نشانهای برند
کارت با گرادیان پویا
اشارهگر موس را روی این کارت حرکت دهید تا نور قرمز داینامیک پشت متن روشن شود.
ناوبری کارتی بازشونده (CardNav)
ترکیب منوی همبرگری واکنشگرا و پنل ۳ کارتی با انیمیشن روان و سازگار با تم تیره/روشن و RTL.
جذب نرم نشانگر به دکمه با استفاده از ترنسفورم بهینهشده.
نشان ماتریسی 7+1 ماژول همراه با تایپفیس اختصاصی وکتور کالیبرهشده.