بازنگری رنگ برند — منسوخ/فعلی
این صفحه یک رکورد دائمی از تصمیم رنگ برند است — نه یک صفحهی موقت تست. اینجا نگه داشته میشود تا اگر در آینده کسی پرسید «چرا سبز پرتو دقیقاً همان سبز برند Supabase شد؟»، با یک مقایسهی واقعی side-by-side پاسخ بگیرد. این تصمیم، رتینوی «سبز عمیق» نسخهی ۱.۱.x را منسوخ میکند.
چرا این تغییر؟
- هدف، تطابق کامل با سیستم Supabase است — پرتو باید مثل یک «محصول دوم Supabase» دیده شود. رنگ برند اکنون دقیقاً سبز mint سوپابیس است:
hsl(153° 60% 53%). - این سبز روشن با متن سفید رد میشود (~۲:۱)، ولی جفت درست آن از ابتدا متن سفید نبود: با
--on-brand(متن تیره) نسبت کنتراست ~۹:۱ است (AA pass). این همان الگویی است که خود Supabase روی fill برندش به کار میبرد. - رتینوی قبلی
hsl(155° 70% 36%)(سبز عمیق) برای عبور متن سفید انتخاب شده بود؛ اما با flip کردن--on-brandبه متن تیره، دیگر نیازی به تیرهکردن هویت نیست و میتوانیم سبز اصیل Supabase را نگه داریم. - هویت بصری اکنون pixel-برابر با Supabase Studio است — آخرین تفاوت دیداری باقیمانده برداشته شد. خانوادههای info/success و همهی پالتهای دامنه بدون تغییر ماندند.
تصمیم PM (محسن): ۱۶ تیر ۱۴۰۵ (۲۰۲۶-۰۷-۰۷) · تغییر در: packages/ui/src/globals.css → --brand-default + --on-brand
راهنمای خواندن جدولها: هر ردیف یک کاربرد واقعی است. در هر ردیف ۴ سلول میبینید — منسوخ-روشن / فعلی-روشن / منسوخ-تیره / فعلی-تیره.
منسوخ (سبز عمیق — رتینوی ۱.۱.x)
#1B9D5C
متن سفید: ۴.۹:۱ ✓ · متن مشکی: ۴.۳:۱ ✓ (مرزی)
فعلی (سبز برند Supabase)
#3ECF8E
متن سفید: ۲:۱ ❌ · متن مشکی: ۹:۱ ✓
۱. لوگوی پرتو (icon)
لوگو در ۴ زمینه: روی سفید، روی تیره، روی برند خود رنگ
روی fill برند
روی fill برند
روی fill برند
روی fill برند
۲. صفحهی نام برند
بنر بزرگ که در /brand/naming هست — متن سفید روی سبز
پرتو
Parto
پرتو
Parto
پرتو
Parto
پرتو
Parto
۳. دکمهی Primary (CTA)
با متن سفید — انتخاب پیشفرض در محصول
ratio: ۴.۹:۱ ✓
ratio: ۲:۱ ❌
ratio: ۴.۹:۱ ✓
ratio: ۲:۱ ❌
۴. دکمهی Primary با متن تیره
رویکرد فعلی Button.tsx — متن تیره روی سبز
ratio: ۴.۳:۱ ✓ (مرزی)
ratio: ۹:۱ ✓
ratio: ۴.۳:۱ ✓ (مرزی)
ratio: ۹:۱ ✓
۵. Banner اطلاع/موفقیت
نوار بنر بالای صفحه، متن سفید
۶. Card با fill برند
کارت تبلیغاتی یا feature card با پسزمینهی برند
نسخهی پیشرفته
دسترسی به همهی قابلیتها با پشتیبانی اختصاصی
نسخهی پیشرفته
دسترسی به همهی قابلیتها با پشتیبانی اختصاصی
نسخهی پیشرفته
دسترسی به همهی قابلیتها با پشتیبانی اختصاصی
نسخهی پیشرفته
دسترسی به همهی قابلیتها با پشتیبانی اختصاصی
۷. Card با تینت ۱۰٪
کارت ملایم، استفاده از brand alpha
نکتهی مهم
کارت با پسزمینهی تینت روشن
نکتهی مهم
کارت با پسزمینهی تینت روشن
نکتهی مهم
کارت با پسزمینهی تینت روشن
نکتهی مهم
کارت با پسزمینهی تینت روشن
۸. Badge / Chip
نشانهی وضعیت در لیست یا dropdown
۹. لینک inline در متن
hyperlink داخل پاراگراف
برای ادامه داشبورد اصلی را باز کنید.
برای ادامه داشبورد اصلی را باز کنید.
برای ادامه داشبورد اصلی را باز کنید.
برای ادامه داشبورد اصلی را باز کنید.
۱۰. Pricing / Feature card
کارت بزرگ marketing با CTA
محبوبترین
۲۹۰ ت
محبوبترین
۲۹۰ ت
محبوبترین
۲۹۰ ت
محبوبترین
۲۹۰ ت
۱۱. Form با focus ring
input فعال با حلقهی برند
۱۲. Progress / Loading
نوار پیشرفت و حالت loading
۱۳. تیتر با text-brand
کلمهی برجسته در متن body
پلتفرم افکارسنجی پرتو
پلتفرم افکارسنجی پرتو
پلتفرم افکارسنجی پرتو
پلتفرم افکارسنجی پرتو
۱۴. مقیاس ۷ پلهی رنگ
از روشن تا تیره — حس کلی scale
جمعبندی — تصمیم نهایی
- رنگ فعلی: سبز mint اصیل Supabase
hsl(153° 60% 53%). جفت درست آن متن تیره (توکن--on-brand) است، نه سفید — نسبت کنتراست ~۹:۱ (AA pass). این دقیقاً همان جفتبندیای است که Supabase روی fill برندش دارد. - رتینوی منسوخشده: سبز عمیق
hsl(155° 70% 36%)صرفاً برای عبور «متن سفید روی سبز» انتخاب شده بود. با flip کردن--on-brandبه متن تیره، آن محدودیت از بین رفت و دیگر دلیلی برای تیرهکردن هویت نمانده. - چرا مهم است: این آخرین تفاوت دیداری بین پرتو و Supabase بود. اکنون هویت رنگی pixel-برابر Studio است؛ خانوادههای info/success و همهی پالتهای دامنه (احساسات، شدت، تعامل، …) دستنخورده ماندند.