
کیت راهنمای برند
سیستم طراحی آغاز
این صفحه مرجع واحد ظاهر محصول است. رنگها، تایپوگرافی، شعاع گوشهها و دکمهها همه از توکنهای معنایی تعریفشده در src/styles.css میآیند؛ پس هر تغییری در این توکنها همهی صفحات را همزمان و یکپارچه بروز میکند.
پالت رنگی
نارنجی برند تنها رنگ تأکیدی است و فقط برای اقدام اصلی، تمرکز و وضعیت فعال به کار میرود. بقیهی رابط کاربری روی خنثیهای سرد و روشن ساخته میشود.
Primary — نارنجی برند
oklch(0.685 0.192 45)
Foreground — متن اصلی
var(--foreground)
Background — پسزمینه
var(--background)
Surface — سطح ملایم
var(--surface)
Surface 2 — سطح دوم
var(--surface-2)
Muted — متن کمرنگ
var(--muted)
Success — موفق
var(--success)
Warning — هشدار
var(--warning)
Destructive — خطا
var(--destructive)
Hairline — خط جداکننده
var(--hairline)
قاعده: هرگز رنگ ثابت مثل text-white یا کد هگز داخل کامپوننت نوشته نمیشود؛ همیشه از همین توکنها استفاده کنید تا حالت تاریک هم درست بماند.
تایپوگرافی
فونت وزیرمتن برای کل محصول. تیترها با وزن ۶۰۰ و فاصلهی حروف فشرده، و متنها با ارتفاع خط باز برای خوانایی فارسی.
هر اتفاق بزرگی، یک آغاز دارد
Display / تیتر اصلی
text-5xl md:text-7xl · font-semibold
هر اتفاق بزرگی، یک آغاز دارد
H2 / تیتر بخش
text-3xl md:text-4xl · font-semibold
هر اتفاق بزرگی، یک آغاز دارد
H3 / تیتر کارت
text-xl · font-semibold
هر اتفاق بزرگی، یک آغاز دارد
Body / متن اصلی
text-[15px] · leading-relaxed
هر اتفاق بزرگی، یک آغاز دارد
Small / متن فرعی
text-[13.5px] · text-muted-foreground
هر اتفاق بزرگی، یک آغاز دارد
Caption / برچسب
text-xs · text-muted-foreground
شعاع گوشهها
مقیاس شعاع از توکن پایه ۰٫۸۷۵rem ساخته میشود. کارتها ۲xl، ورودیها md تا lg و دکمهها و برچسبها کاملاً گرد.
rounded-sm
0.375rem
rounded-md
0.5rem
rounded-lg
0.875rem — پیشفرض
rounded-xl
1.125rem
rounded-2xl
1.375rem — کارتها
rounded-full
دکمهها و برچسبها
دکمهها
اقدام اصلی هر صفحه یک دکمهی پرشدهی نارنجی و گرد است. بقیهی اقدامها به ترتیب اهمیت از outline، secondary، ghost و link استفاده میکنند.
- • در هر بخش فقط یک دکمهی اصلی نارنجی؛ باقی اقدامها کمتأکید.
- • همهی دکمههای اصلی سایت گرد کامل با ارتفاع ۴۴ تا ۴۸ پیکسل هستند.
- • آیکون در RTL سمت چپ متن قرار میگیرد و اندازهاش ۱۶ پیکسل است.
لوگو و فاصلهگذاری
لوگو همیشه با حاشیهی امن به اندازهی نصف ارتفاع خودش استفاده میشود و روی پسزمینهی ساده مینشیند. کشیدن، چرخاندن یا تغییر رنگ آن مجاز نیست.


