رکورد تصمیم طراحی
بازنگری رنگ برند — قبل/بعد
این صفحه یک رکورد دائمی از تصمیم اصلاح رنگ برند است — نه یک صفحهی موقت تست. اینجا نگه داشته میشود تا اگر در آینده کسی پرسید «چرا سبز پرتو از سبز روشن قبلی به این سبز عمیق منتقل شد؟»، با یک مقایسهی واقعی side-by-side پاسخ بگیرد.
چرا این تغییر؟
- رنگ قبلی
hsl(153°, 60%, 53%)روشنتر از حدی بود که متن سفید روی آن خوانا باشد — نسبت کنتراست فقط ۲.۷:۱ (WCAG AA رد). - این constraint طراحی را محدود میکرد: هر جا CTA با متن سفید لازم بود، باید استثنا میگذاشتیم.
- رنگ جدید
hsl(155°, 70%, 36%)— همان هویت «سبز پرتو» با لایتنس کمتر — نسبت کنتراست ۴.۹:۱ با سفید (AA pass). - حس بصری نزدیکتر شده به Linear، Vercel و Stripe — متناسب با persona هدف (تحلیلگر سازمانی، PM، اندیشکده).
تاریخ تصمیم: ۲۹ اردیبهشت ۱۴۰۵ · تغییر در: packages/ui/src/globals.css → --brand-default
راهنمای خواندن جدولها: هر ردیف یک کاربرد واقعی است. در هر ردیف ۴ سلول میبینی — فعلی-روشن / پیشنهادی-روشن / فعلی-تیره / پیشنهادی-تیره.
قبل (سبز روشن)
#3ECF8E
متن سفید: ۲.۷:۱ ❌ · متن مشکی: ۸.۸:۱ ✓
بعد (سبز عمیق — رنگ فعلی)
#1B9D5C
متن سفید: ۴.۹:۱ ✓ · متن مشکی: ۴.۳:۱ ✓ (مرزی)
۱. لوگوی پرتو (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
جمعبندی
- رنگ فعلی: سبز روشن دلپذیر، ولی متن سفید روش fail میکنه (~۲.۷:۱). در عمل یعنی هر جا که نیاز به متن سفید روی سبز داریم، باید shade تیرهتر بگیریم یا متن رو تیره کنیم. این constraint طراحی رو محدود میکنه.
- رنگ پیشنهادی: سبز عمیقتر — هم متن سفید پاس میکنه (~۴.۹:۱) هم متن تیره. این یعنی DS انعطاف کامل داره. هویت بصری همچنان «سبز پرتو» است، فقط بالغتر و رسمیتر — نزدیکتر به Linear/Vercel و دور از حس «marketing فلت ۲۰۲۰».
- برای B2G و enterprise reporting: رنگ پیشنهادی بهتر همخوان با persona است. کاربر هدف (تحلیلگر سازمانی، PM، مدیر) انتظار «جدی-حرفهای» داره، نه «پر-اشتیاق».