رنگ
سبز برند و جفتش، مقیاس سبز و کار هر پله، خنثی‌ها و رنگ‌های معنایی، نسبت 60/30/10 و رنگ در داده — همه با مقدارهایی که از توکن‌ها محاسبه می‌شوند.
پرتو یک رنگ هویتی دارد: سبز برند. بقیهٔ رنگ‌ها کار دیگری دارند: خنثی‌ها ساختار می‌سازند، رنگ‌های معنایی وضعیت را می‌گویند و رنگ‌های داده نمودار را. همهٔ مقدارهای این صفحه، از HEX تا نسبت کنتراست، هنگام ساخت سایت از توکن‌های سیستم طراحی محاسبه می‌شوند؛ با عوض شدن توکن، این صفحه هم عوض می‌شود.
جفت برند
سبز برند همیشه با تیره جفت می‌شود: متن، نشان یا لوگوی یک‌رنگی که روی سبز برند (--brand-default) می‌نشیند، تیره
است؛ سفید روی آن هرگز. این قاعده دربارهٔ خود سبز برند است: دکمهٔ اصلی محصول در تم تیره روی پلهٔ تیره‌تر 500 است و متن
روشن آن مجاز است (دسترسی‌پذیری برند).
سبز برند، متن تیره
جفت رسمی برند: هر متن، نشان یا لوگوی یک‌رنگی که روی سبز می‌نشیند تیره است.
سبز برند
#3ECF8E--brand-default
متن و نشان روی سبز
#171717--on-brand
کنتراست
تیره روی سبز 8.98:1
سفید روی سبز 1.99:1 — مجاز نیست
سبز برند در هر دو تم یک مقدار دارد، و متن روی آن (--on-brand) هم در هر دو تم تیره می‌ماند.
مقیاس سبز
هر پلهٔ مقیاس کار مشخصی دارد. مهم‌ترین قاعده: سبز برند رنگ متن نیست. متن، پیوند و آیکون معنادار به رنگ برند از
--brand-600 استفاده می‌کنند (--brand-link همان مقدار است)؛ سبز برند (--brand-default) برای پر کردن سطح، نشان و
تزئین است. سبز برند به‌عنوان
متن روی زمینهٔ روشن کنتراست 1.96:1 دارد و خوانده نمی‌شود.
--brand-defaultسبز برند: نشان، سطح سبز و تأکید. هرگز رنگ متن.
#3ECF8E#3ECF8E--brand-600متن، پیوند و آیکون به رنگ برند.
#097C4F#85E0BA--brand-500سطح برند تیره‌تر و حاشیه؛ دکمهٔ اصلی در تم تیره.
#16B674#006239--brand-400دکمهٔ اصلی در تم روشن.
#72E3AD#00311D--brand-300ته‌رنگ روشن برند؛ حالت نشانگر روی سطح برند در تم روشن.
#A9F1CA#002918--brand-200ته‌رنگ روشن برند، زمینهٔ نشانه‌های کوچک. در تم تیره تقریباً سیاه.
#D3F8E4#000A07جزئیات فنی هر توکن و کلاس‌های Tailwind آن در رنگ‌ها در مستندات آمده است.
خنثی‌ها
زمینه، سطح‌ها، خط‌ها و متن. بیشتر هر صفحه از همین‌ها ساخته می‌شود.
زمینه
--background-defaultزمینهٔ صفحه.
تم روشن
#FDFDFDrgb(253 253 253)hsl(0deg 0% 99.2%)تم تیره
#131413rgb(19 20 19)hsl(120deg 2.6% 7.6%)سطح 100
--background-surface-100کارت و پنل.
تم روشن
#FFFFFFrgb(255 255 255)hsl(0deg 0% 100%)تم تیره
#181A19rgb(24 26 25)hsl(150deg 4% 9.8%)سطح 200
--background-surface-200پوشش نیمه‌شفاف: ردیف زیر نشانگر، و سطحی یک پله بالاتر از زمینهٔ خودش.
نیمه‌شفاف؛ مقدارها رنگ دیده‌شده روی زمینهٔ همان تم‌اند.
تم روشن
#F6F6F6rgb(246 246 246)hsl(0deg 0% 96.5%)تم تیره
#1A1B1Argb(26 27 26)hsl(120deg 1.9% 10.4%)خط
--border-defaultحاشیهٔ کارت و جداکننده.
نیمه‌شفاف؛ مقدارها رنگ دیده‌شده روی زمینهٔ همان تم‌اند.
تم روشن
#E9E9E9rgb(233 233 233)hsl(0deg 0% 91.4%)تم تیره
#232423rgb(35 36 35)hsl(120deg 1.4% 13.9%)متن
--foreground-defaultمتن اصلی.
تم روشن
#030303rgb(3 3 3)hsl(0deg 0% 1.2%)تم تیره
#EDEFEErgb(237 239 238)hsl(150deg 5.9% 93.3%)متن ثانویه
--foreground-lightتوضیح و متن کمکی.
تم روشن
#464646rgb(70 70 70)hsl(0deg 0% 27.5%)تم تیره
#BCBEBCrgb(188 190 188)hsl(120deg 1.5% 74.1%)رنگ‌های معنایی
این رنگ‌ها وضعیت را می‌گویند: خطا، هشدار، موفقیت و اطلاع. هیچ‌کدام رنگ برند نیست و جای آن را نمی‌گیرد.
خطا و حذف
--destructive-defaultخطا، حذف و کار برگشت‌ناپذیر.
هر دو تم
#E54D2Ergb(229 77 46)hsl(10.2deg 77.9% 53.9%)هشدار
--warning-defaultاحتیاط و وضعیت نیازمند توجه.
تم روشن
#DC7B18rgb(220 123 24)hsl(30.3deg 80.3% 47.8%)تم تیره
#DB8E00rgb(219 142 0)hsl(38.9deg 100% 42.9%)موفقیت
--success-defaultکار انجام‌شده. رنگ برند نیست.
تم روشن
#1CA64Frgb(28 166 79)hsl(142deg 71% 38%)تم تیره
#21C45Drgb(33 196 93)hsl(142deg 71% 45%)اطلاع
--info-defaultپیام خنثی و راهنما.
تم روشن
#006FE6rgb(0 111 230)hsl(211deg 100% 45%)تم تیره
#459BF7rgb(69 155 247)hsl(211deg 92% 62%)در طرح‌هایی که خودتان می‌سازید، سبز برند «موفق» معنی نمی‌دهد. سبز موفقیت (--success-default) و سبز برند
(--brand-default) دو رنگ جدا هستند. در نمودار، گزارش، اسلاید و پست، سبز برند هیچ‌وقت «موفق» یا «مثبت» معنی نمی‌دهد؛
اگر یک وضعیت یا عدد مثبت است، رنگ معنایی یا رنگ داده‌اش را بگیرد.
در رابط محصول، رنگ بازخورد موفقیت را کامپوننت‌های سیستم طراحی تعیین می‌کنند؛ آن را دستی عوض نکنید. پیام‌ها (Alert
و Callout) رنگ موفقیت را دارند. چند نشانهٔ کوچک (نشان success در Badge، آیکون پیام کوتاه، لبهٔ کارت و تغییر
مثبت کارت شاخص) هنوز از مقیاس سبز برند رنگ می‌گیرند. این استثنای موقت کامپوننت‌هاست، نه قاعدهٔ برند، و در طرح‌های خودتان تکرارش
نکنید.
نسبت 60/30/10
در هر طرح، بیشتر فضا خنثی است و رنگ برند سهم کوچکی دارد: حدود 60 درصد زمینه، 30 درصد سطح‌ها و 10 درصد برند و رنگ‌های معنایی. رنگ برند وقتی معنا دارد که همه‌جا نباشد.
--background-default، --background-surface-200 و --brand-default؛ با تم سایت عوض می‌شود.گرادیان
لوگو و رابط محصول گرادیان ندارند. در صفحه‌های بازاریابی و همین راهنما، فقط یک درخشش محیطی بسیار کم‌رنگ از سبز برند (حداکثر 4 درصد) پشت بخش آغازین مجاز است. گرادیان رنگین‌کمانی، فلزی یا چندرنگ هیچ‌جا به کار نمی‌رود.
رنگ در داده
- سبز برند رنگ داده نیست. در نمودار، سبز برند یک سری را «برند» یا «مثبت» جلوه می‌دهد؛ رنگ‌های نمودار از پالت داده‌نمایی می‌آیند، و سبز آن پالت هم رنگ داده است، نه برند.
- احساسات ترتیب ثابت دارند: مثبت، خنثی، ترکیبی، منفی.
- عواطف (خشم، ترس، شادی، …) مقیاس رنگی خودشان را دارند و با رنگ احساسات درنمی‌آمیزند.
- رنگ به‌تنهایی معنا را نمی‌رساند: برچسب و شکل هم لازم است، چون بخشی از مخاطبان سبز و قرمز را از هم تشخیص نمی‌دهند.
چاپ
فایل‌ها و مقدارهای این صفحه در فضای رنگی sRGB هستند و برای نمایشگر ساخته شده‌اند. مقدار CMYK و Pantone فقط پس از چاپ آزمایشی و تأیید نمونه منتشر می‌شود؛ تا آن زمان، برای چاپ از چاپخانه نمونهٔ رنگ بخواهید و آن را با سبز برند روی نمایشگر کالیبره‌شده مقایسه کنید.
رنگ در کد
در کد همیشه از توکن استفاده کنید، نه از مقدار HEX: bg-brand و text-on-brand برای سطح سبز، text-brand-600 برای
متن و پیوند به رنگ برند. فایل‌های رنگ برای CSS و ابزار طراحی در دریافت فایل‌ها هستند.
آخرین به‌روزرسانی