هویت بصری
رنگهای برند
در پرتو فقط یک رنگ هویتی داریم — سبز پرتو. باقی رنگها نقش پشتیبان دارند: خاکستریها برای ساختار، رنگهای دامنه برای داده، رنگ هشدار برای اخطار. نه گرادیان، نه طلایی تجملی، نه ترکیبهای اضطرابی.
سبز پرتو
رنگ اصلی برند
سبز پرتو
HEX #1C9C67
HSL hsl(155° 70% 36%)
رنگ اصلی برند. این سبز نه پاستلی است و نه نئونی — یک سبز اشباعشدهی میانه که حس وضوح، حقیقت، و رشد را منتقل میکند. در لوگو، در دکمهی اصلی، در حالت active، و در هر جایی که هویت پرتو باید فریاد بزند، از این رنگ استفاده میشود.
این رنگ، قابلمذاکره نیست. هیچ نسخهی روشنتر یا تیرهتر «جایگزین» وجود ندارد. اگر در طراحی شما رنگ سبز دیگری استفاده شده، یعنی هویت برند رعایت نشده.
قانون ۶۰/۳۰/۱۰
در هر طراحی، نسبت رنگها مهم است. برند پرتو با این نسبت کار میکند: بیشتر فضا خنثی، کمتر فضا ساختاری، و فقط یک سهم کوچک رنگ برند.
۶۰٪ پسزمینهی خنثی، ۳۰٪ سطوح خاکستری روشن، ۱۰٪ رنگ برند و رنگهای معنایی (هشدار، خطا). این تناسب باعث میشود رنگ برند معنا داشته باشد — وقتی همهجا سبز بزنیم، دیگر سبز خاص نیست.
رنگهای پشتیبان
این رنگها هویتی نیستند — ابزار کارند. ساختار، وضعیت، و دامنه را با اینها نشان میدهیم.
خاکستریهای ساختاری
برای پسزمینه، سطوح کارت، خط و متن. دوازده پله از روشن تا تیره.
surface-75
#FCFCFC
surface-100
#FAFAFA
surface-200
#F3F3F3
surface-300
#EBEBEB
surface-400
#E0E0E0
foreground
#171717
رنگهای معنایی
فقط برای پیامهای معنادار. رنگهای معنایی، اگر بدون معنی استفاده شوند، دیگر معنا نمیدهند.
خطا / حذف
#DC2626
هشدار / احتیاط
#EAB308
موفقیت / تأیید
#1C9C67
رنگهای دامنه (Domain Color Scales)
مجموعههای رنگی برای دادههای دامنه — احساسات، عواطف، شدت، تعامل. اینها در صفحهی foundations برای توسعهدهنده مستندند، اما برای طراح هم مهم: هرگز رنگهای یک مجموعه را با مجموعهی دیگر قاطی نکنید.
احساسات (Sentiment)
شدت (Severity)
برای فهرست کامل رنگهای دامنه و توکنهای فنی، به صفحهی foundations در داک سیستم طراحی مراجعه کنید.
رنگهای ممنوع
این رنگها و سبکهای رنگی، برخلاف برند پرتو هستند:
- گرادیان در chrome محصول. تنها گرادیان مجاز، ترکیب سبز برند با نسخهی تیرهترش داخل خود لوگو است. هیچجای دیگر.
- طلایی و رنگهای premium-فروشی. پرتو لوکس نیست، جدی است.
- قرمز خالص بهعنوان رنگ تصمیم. قرمز فقط برای خطا و حذف. اگر میخواهید توجه جلب کنید، از سبز برند استفاده کنید.
- سبزهای دیگر. سبز پرتو ثابت است. سبز فسفری، زیتونی، یا چمنی نه.
- تنهای زیادی پر اشباع کنار هم. اگر بیش از سه رنگ پر اشباع در یک طرح است، چیزی اشتباه است.
رنگ در دو حالت روشن و تیره
همهی رنگها در دو نسخهی روشن (Light) و تیره (Dark) تعریف شدهاند. رنگهای هویتی (سبز پرتو) در هر دو حالت تقریباً یکسان دیده میشوند. رنگهای ساختاری بسته به حالت، تن متفاوت دارند.
برای استفاده در کد، همیشه از CSS variables (مثلاً var(--brand-default)) استفاده کنید، نه مقدار hex هاردکدشده — این کار باعث میشود تم بهدرستی switch کند.