لوگوی آغاز

کیت راهنمای برند

سیستم طراحی آغاز

این صفحه مرجع واحد ظاهر محصول است. رنگ‌ها، تایپوگرافی، شعاع گوشه‌ها و دکمه‌ها همه از توکن‌های معنایی تعریف‌شده در src/styles.css می‌آیند؛ پس هر تغییری در این توکن‌ها همه‌ی صفحات را هم‌زمان و یکپارچه بروز می‌کند.

پالت رنگی

نارنجی برند تنها رنگ تأکیدی است و فقط برای اقدام اصلی، تمرکز و وضعیت فعال به کار می‌رود. بقیه‌ی رابط کاربری روی خنثی‌های سرد و روشن ساخته می‌شود.

bg-primary

Primary — نارنجی برند

oklch(0.685 0.192 45)

bg-foreground

Foreground — متن اصلی

var(--foreground)

bg-background

Background — پس‌زمینه

var(--background)

bg-surface

Surface — سطح ملایم

var(--surface)

bg-surface-2

Surface 2 — سطح دوم

var(--surface-2)

bg-muted

Muted — متن کم‌رنگ

var(--muted)

bg-success

Success — موفق

var(--success)

bg-warning

Warning — هشدار

var(--warning)

bg-destructive

Destructive — خطا

var(--destructive)

bg-hairline

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 سمت چپ متن قرار می‌گیرد و اندازه‌اش ۱۶ پیکسل است.

لوگو و فاصله‌گذاری

لوگو همیشه با حاشیه‌ی امن به اندازه‌ی نصف ارتفاع خودش استفاده می‌شود و روی پس‌زمینه‌ی ساده می‌نشیند. کشیدن، چرخاندن یا تغییر رنگ آن مجاز نیست.

لوگوی آغاز روی پس‌زمینه روشن
لوگوی آغاز روی سطح خاکستری
لوگوی آغاز روی پس‌زمینه تیره