۴۰٪ تخفیف · کد OUTLET
راهنمای دیزاینسیستم
توکنها و کامپوننتهای استخراجشده از vertbaudet.com — پیادهسازیشده با
Tailwind CSS روی ASP.NET Core MVC، راستچین و فارسی.
جزئیات کامل در فایل DESIGN.md.
رنگها
- brand #7dbc8e اصلی — دکمهها و وضعیت فعال
- brand-hover #619370 هاور دکمهی اصلی
- brand-dark #3c6954 متن روی سطح سبز روشن
- brand-light #91d5a3 سبز روشن
- brand-tint #e8f3ee کمرنگترین سطح سبز
- ink #2d2a29 متن اصلی و حاشیهها
- ink-muted #656667 متن ثانویه
- ink-faint #999999 غیرفعال و متادیتا
- sale #cd3232 قیمت حراج و خطا
- heart #e65564 علاقهمندی
- teal #005d86 نوار اعلان بالای صفحه
- orange #ff5d24 دکمهی سوم — فوریت
- club #f7d137 باشگاه مشتریان
- surface #f2f1f0 پسزمینهی تصویر کالا
- surface-alt #f6f6f8 نوار جستوجو و پنلها
- line #dddddd خط جداکننده
تایپوگرافی
قلم: وزیرمتن — جایگزین فارسی Muli/Mulish در سایت مرجع. وزن ۷۰۰ در سایت اصلی غالب است (۱۹۲ بار در CSS) و همان نسبت اینجا حفظ شده.
8xl · ۷۵px
لباس کودک و نوزاد
7xl · ۶۴px
لباس کودک و نوزاد
6xl · ۴۸px
لباس کودک و نوزاد
4xl · ۳۲px
لباس کودک و نوزاد
2xl · ۲۲px
لباس کودک و نوزاد
lg · ۱۸px
لباس کودک و نوزاد
base · ۱۶px
لباس کودک و نوزاد
sm · ۱۴px — پیشفرض متن
لباس کودک و نوزاد
xs · ۱۲px
لباس کودک و نوزاد
2xs · ۱۰px
لباس کودک و نوزاد
دکمهها
فرمها
جستوجوی هدر
چیپ و برچسب
فعال
پیراهن (۲۹۳)
دامن (۱۲۴)
۴۰٪ تخفیف · کد OUTLET
دومی با ۴۰٪ تخفیف*
جدید
کارت کالا
۳۵٪ تخفیف · کد OUTLET
گردی گوشه و سایه
radius-vb · 5px
radius-card · 10px
rounded-full
shadow-soft
shadow-focus