SpaceDev

اصلی (Primary):

رنگ اصلی برند یا رابط؛ بیشترین استفاده برای دکمه‌های مهم، لینک‌های اصلی یا المان‌های شاخص. نشونه‌ی هویت برندت محسوب میشه.

رنگ اصلی:

.bg-primary، .bg-primary/75، .bg-primary/50

و..

رنگ متن روی زمینه‌ی اصلی:

.text-primary-foreground

تأکیدی (Accent):

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

رنگ تأکیدی:

.bg-accent، .bg-accent/75، .bg-accent/50

و..

رنگ متن روی زمینه‌ی تأکیدی:

.text-accent-foreground

ثانویه (Secondary):

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

رنگ ثانویه:

.bg-secondary

رنگ متن روی زمینه‌ی ثانویه:

.text-secondary-foreground

خاموش (Muted):

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

رنگ خاموش:

.bg-muted، .bg-muted/75، .bg-muted/50

رنگ متن روی زمینه‌ی خاموش:

.text-muted-foreground

اطلاعاتی (Info):

برای پیام‌های اطلاع‌رسانی، راهنماها یا اعلان‌هایی با بار اطلاعاتی استفاده میشه. رنگی آرام و اعتمادساز.

رنگ اطلاعاتی:

.bg-info

رنگ متن روی زمینه‌ی اطلاعاتی:

.text-info-foreground

موفقیت (Success):

برای پیام‌های موفقیت‌آمیز، تایید عملیات یا حالت‌های مثبت در رابط کاربری.

رنگ موفقیت:

.bg-success

رنگ متن روی زمینه‌ی موفقیت:

.text-success-foreground

هشدار (Warning):

برای نمایش خطرهای احتمالی یا هشدارهای خفیف، مثلاً پیام‌هایی که نیاز به توجه دارن ولی بحرانی نیستن.

رنگ هشدار:

.bg-warning

رنگ متن روی زمینه‌ی هشدار:

.text-warning-foreground

خطرناک (Destructive):

برای عملیات‌های حساس یا خطرناک مثل حذف، لغو یا اکشن‌هایی با پیامدهای جدی.

رنگ خطرناک:

.bg-destructive

رنگ متن روی زمینه‌ی خطرناک:

.text-destructive-foreground

خط مرزی (Border):

رنگ پیش‌فرض برای خطوط دور باکس‌ها، کارت‌ها و فرم‌ها.

ورودی (Input):

رنگ پس‌زمینه‌ی فیلدهای فرم؛ در ترکیب با رنگ متن، باید خوانایی و وضوح داشته باشه.

حلقه تمرکز (Ring):

برای نمایش حالت فوکوس روی عناصر فرم یا دکمه‌ها، معمولاً همراه با outline یا box-shadow.