طراحی حالت تاریک: چطور تم دوم را بدون خراب کردن تم اول منتشر کنیم
راهنمای یک طراح شاغل برای حالت تاریک. ریاضی رنگ که واقعاً کار میکند، تله‌های کامپوننتی که باید از آن‌ها دوری کرد، و چطور تمی تاریک منتشر کنیم که طراحی‌شده به نظر برسد، نه وارونه‌شده.
بیشتر حالت‌های تاریک طراحی نشده‌اند، وارونه شدهاند. طراح پسزمینه را به مشکیِ نزدیک به سیاه تغییر میدهد، متن را سفیدِ نزدیک به سفید میکند و می‌گوید تمام. نتیجه تمی است که خشن به نظر می‌رسد، از نسخه روشن بدتر خوانده میشود و برند را مثل محصولی متفاوت در نورپردازی اشتباه نشان میدهد.
این مقاله نسخه کاربردی ماجراست. ریاضی رنگی که حالت تاریک را عمدی و حساب‌شده نشان میدهد، تله‌های کامپوننتی که در تاریکی میشکنند، و ساختار توکنی که با رشد محصول هر دو تم را هماهنگ نگه می‌دارد. بدون گرادیان‌های Dribbble، فقط یک تم تاریک که جایگاهش را در سیستم طراحی به دست می‌آورد.
حالت تاریک واقعاً چیست
حالت تاریک یک تم دوم کامل است، نه وارونگی رنگ. منطق سطح خودش را دارد، قوانین کنتراست خودش را دارد و تنظیمات وزن تایپوگرافی خودش را. حالت تاریک واقعی از صفر روی همان مجموعه کامپوننتها طراحی میشود و سپس از طریق توکنهای مشترک با تم روشن هماهنگ میشود.
میان‌بر وارونگی به دلیلی مشخص شکست می‌خورد. حالت روشن به سطوح سفیدی تکیه دارد که عمق را به سمت بالا بازتاب می‌دهند. حالت تاریک نمی‌تواند این را وارونه کند، چون سطوح مشکیِ مطلق عمق را جذب میکنند به جای آنکه بسازند. کل سیستم ارتفاع (elevation) باید از نو ساخته شود. بخش راهنمای سیستم‌های طراحی توضیح میدهد چرا این کار باید درون توکنها انجام شود، نه درون کامپوننت‌های تک‌به‌تک.
چرا حالت تاریک در ۲۰۲۶ مهم است
سه دلیل. هیچ‌کدام زیبایی‌شناختی نیست.
عمر باتری در نمایشگرهای OLED. هر پیکسل مشکی در پنل OLED صفر انرژی مصرف میکند. رابط تاریک روی گوشی می‌تواند مصرف انرژی نمایشگر را در روشنایی بالا بین ۳۰ تا ۶۰ درصد کاهش دهد. برای کاربران موبایل، تم تاریک قبل از آنکه ویژگی بصری باشد، ویژگی باتری است.
دسترس‌پذیری برای حساسیت به نور. کاربرانی که میگرن، آستیگماتیسم یا فتوفوبیا دارند نمی‌توانند مدت طولانی با رابط روشن راحت کار کنند. انتشار حالت تاریک یک تعهد دسترس‌پذیری است، نه یک سلیقه. چک‌لیست دسترس‌پذیری وب نشان میدهد تم‌بندی در یک ممیزی کامل کجا قرار می‌گیرد.
انتظار کاربر. سیستم‌عامل‌ها کلید حالت تاریکی دارند که روی کل سیستم اعمال میشود. محصولی که تنظیم سیستم را نادیده بگیرد کهنه به نظر می‌رسد. کاربران فروشگاه اپ و فهرست افزونه‌ها را بر اساس پشتیبانی از حالت تاریک فیلتر میکنند. نبودن تم تاریک یک مشکل بازاریابی است، نه فقط یک حفره در رابط.
قانون اول: هرگز از مشکی مطلق استفاده نکن
مشکی مطلق (#000000) رایجترین اشتباه در یک حالت تاریک تازه است. درست به نظر می‌رسد چون تاریک‌ترین سطح ممکن به نظر میآید. اما غلط خوانده میشود چون چشم انسان نمی‌تواند عمق را در برابر مشکیِ کامل بسنجد.
راه‌حل: از یک خاکستریِ تیره با رنگمایه ظریف برند به عنوان سطح پایه استفاده کن. چیزی در محدوده #0B0B10 تا #121218 برای بیشتر محصولات، گاهی تا #1A1A1F. مقدار دقیق به دمای رنگ برند بستگی دارد. برند گرم کمی به سمت تاریکِ گرم می‌رود. برند سرد کمی به سمت تاریکِ سرد. خنثیِ محض بی‌جان خوانده میشود.
همین قانون برای متنِ با بیشترین کنتراست هم صدق میکند. سفید مطلق (#FFFFFF) روی سطح تاریک halation ایجاد میکند، یعنی افکت محو شدن لبه‌های درخشان که خواندن متن کوچک را خسته‌کننده میکند. متن را به حدود #E8E8EA پایین بیاور یا از سفید با ۸۵ تا ۹۲ درصد opacity استفاده کن. این افت برای چشم نامرئی است اما برای خوانایی عظیم.
ارتفاع سطح در حالت تاریک
حالت روشن از سایهها استفاده میکند تا نشان دهد کارت بالاتر از پسزمینه است. حالت تاریک نمی‌تواند، چون سایهها توسط سطوح تاریک بلعیده می‌شوند. راه‌حل، ارتفاع از طریق روشنی است.
هر پله ارتفاع، سطح را روشنتر میکند، نه تیره‌تر. کارتی که بالای سطح پایه نشسته کمی روشنتر از پایه است. مودالی که بالای کارت نشسته باز هم روشنتر است. عمق در رابط تاریک مثل گرادیانی از سطوح خوانده میشود که به سمت کاربر بالا میآیند، نه سایه‌هایی که زیرشان دور می‌شوند.
Material Design این را با مقیاس ارتفاع پنج‌پله‌ای رسمی کرد و ایده کلی در هر سیستم طراحی صادق است. یک مقیاس کاربردی برای بیشتر محصولات:
| ارتفاع | نمونه | مقدار سطح |
|---|---|---|
| 0 | پسزمینه پایه | #0E0E12 |
| 1 | کارت، فیلد ورودی | #17171C |
| 2 | کارت برجسته، منو | #1F1F25 |
| 3 | مودال، دیالوگ | #28282F |
| 4 | پاپ‌اور، تولتیپ | #31313A |
عددهای مشخص از برندی به برند دیگر فرق میکنند، اما منطق ثابت است. هر سطح برجسته روشنتر از سطح زیرش است، هر سایه ظریف است و سلسله‌مراتب مثل سطوحی خوانده میشود که در فضا روی هم چیده شدهاند، نه جعبه‌هایی که روی صفحه کشیده شدهاند.
ریاضی کنتراست برای تم‌های تاریک
واژه‌نامه نسبت کنتراست خط پایه WCAG را پوشش میدهد: ۴.۵ به ۱ برای متن عادی و ۳ به ۱ برای متن بزرگ. حالت تاریک این قوانین را سهل‌تر نمی‌کند، اما نحوه رسیدن به آن‌ها را تغییر میدهد.
در حالت روشن، متن بدنه با رنگ حدود #222 روی پسزمینه سفید تقریباً به ۱۶ به ۱ می‌رسد. طراحان به حاشیه امن عظیم بالای حداقل عادت دارند. حالت تاریک تنگ‌تر است. متن بدنه #E0E0E0 روی #0E0E12 حدود ۱۳ به ۱ می‌گیرد که هنوز قوی است، اما حاشیه خطا کوچک‌تر است. پایین آوردن متن به #B0B0B0 برای نرم‌تر کردن ظاهر می‌تواند بی‌صدا یک بخش را زیر ۴.۵ به ۱ ببرد.
انضباط لازم: هر تصمیم رنگی در حالت تاریک از چکر کنتراست رد میشود. نه یک بار برای هر تم، یک بار برای هر جفت توکن. متن روی سطح پایه، متن روی کارت، متن روی مودال، متن placeholder، متن غیرفعال، متن لینک. هر جفت یک بررسی جداست.
یک تله رایج، توکن متن کمرنگ است. در حالت روشن، متن کمرنگ #666 روی سفید با ۵.۷ به ۱ واضح خوانده میشود. وقتی وارونه شود و #999 روی #0E0E12 بنشیند، نسبت به حدود ۴.۲ به ۱ می‌افتد که از WCAG AA رد میشود. میان‌بر وارونگی بی‌صدا انطباق دسترس‌پذیری را میشکند و بیشتر تیم‌ها تا وقتی ممیزی آن را پیدا کند متوجه نمی‌شوند.
رنگ در حالت تاریک: اشباع، نه فقط روشنایی
رنگهای برندی که روی پسزمینه سفید می‌درخشند، روی پسزمینه تاریک اغلب گل‌آلود یا برقی به نظر می‌رسند. دلیلش این است که سطوح تاریک اشباع ادراک‌شده را تقویت میکنند. اکسنت با اشباع ۱۰۰ درصد روی سطح روشن مطمئن به نظر می‌رسد. همان اکسنت روی سطح تاریک رادیواکتیو است.
قانون این است که رنگهای اکسنت را برای تم تاریک کم‌اشباع کنی، معمولاً ۱۰ تا ۲۰ درصد، و کمی روشن‌شان کنی. دکمه اصلی که روی سفید #3455FF است ممکن است روی تاریک #5C78FF شود. همان خانواده رنگی، تنظیم‌شده برای محیط کنتراست جدید. برند هنوز همان برند خوانده میشود. فقط دیگر چشم را اذیت نمی‌کند.
واژه‌نامه پالت رنگ ساختار پایه‌ای را پوشش میدهد که این تنظیم درونش جا دارد. حالت تاریک خوب رنگ جدید اختراع نمی‌کند، مجموعه‌ای موازی از همان رنگهای برند را منتشر میکند که برای بافت سطح جدید تنظیم شدهاند.
تله‌های کامپوننتی که در تاریکی میشکنند
بیشتر کامپوننتها برای حالت تاریک دست‌کم یک تنظیم لازم دارند. چند تا بدون آن کاملاً میشکنند. این‌ها متخلفان همیشگی‌اند.
بوردرها جداکننده اصلی می‌شوند
در حالت روشن، سایه ظریف یا بوردری کم‌دید کامپوننتها را جدا میکند. در حالت تاریک، سایهها ناپدید می‌شوند و بیشتر بوردرها محو می‌شوند. بوردر ابزار اصلی تعریف لبه کامپوننت میشود و اغلب باید از چیزی مثل #EEE در حالت روشن به حدود #2A2A30 در حالت تاریک ارتقا یابد تا دیده شود.
تست این است که رابط را روی لپ‌تاپ با ۸۰ درصد روشنایی ببینی. اگر لبه کامپوننتها شروع به ناپدید شدن کنند، توکن بوردر در تم تاریک به مقدار روشن‌تری نیاز دارد.
سایهها هدفشان را وارونه میکنند
سایهها در حالت روشن سطوح را پایین و دور می‌برند. سایهها در حالت تاریک باید القا کنند که سطوح بالا و جلو میآیند. معمولاً این با ترکیب سطحی ظریفاً روشنتر (ارتفاع) به‌علاوه سایه تیره تقریباً نامرئی زیرش حاصل میشود که وزن اضافه میکند بی‌آنکه دیده شود.
یک جفت سایه کاربردی برای حالت تاریک:
- بیرونی:
0 4px 12px rgba(0, 0, 0, 0.5)برای زمین‌گیر کردن عنصر - هایلایت داخلی بالا:
inset 0 1px 0 rgba(255, 255, 255, 0.05)برای القای لبه بالا آمده
وقتی با هم استفاده شوند، کامپوننت برجسته خوانده میشود نه بریده‌شده. وقتی تنها استفاده شوند، هیچ‌کدام از افکت‌ها دیده نمی‌شود.
حالت‌های غیرفعال ناپدید می‌شوند
دکمه غیرفعال در حالت روشن معمولاً خاکستری کم‌اشباع روی سفید است. همین برخورد در حالت تاریک دکمه را کاملاً در سطح حل میکند. راه‌حل این است که opacity حالت غیرفعال را بالا ببری، نه پایین. چیزی مثل ۴۰ درصد opacity روی رنگ سطح برجسته، به جای افتادن به خاکستری رنگ‌پریده. حالت غیرفعال باید هنوز مثل دکمه خوانده شود، فقط بی‌فعالیت.
تصاویر و ایلاستریشنها برخورد جداگانه می‌خواهند
عکس محصولی که روی پسزمینه سفید گرفته شده روی سطح تاریک خراب به نظر می‌رسد. ایلاستریشن برندی که با خط سفید کشیده شده کاملاً ناپدید میشود. تصاویر به یک گذر حالت تاریک جداگانه نیاز دارند، چه از طریق دارایی جداگانه، چه تعویض پسزمینه، چه فیلتر دقیق تنظیم‌شده. این گرانترین بخش انتشار درست حالت تاریک است و بخشی است که بیشتر تیم‌ها حذفش میکنند.
راه‌حل عملی برای تیم‌هایی که نمی‌توانند داراییهای تصویری موازی منتشر کنند: در حالت تاریک به هر کانتینر تصویر پس‌زمینه‌ای ملایم اضافه کن، چیزی حدود #F5F5F7 با گوشه‌های گرد. تصاویری که روی سفید گرفته شدهاند حالا روی کانتینر روشن مینشینند و بقیه رابط تاریک می‌ماند.
حالت‌های فوکوس ورودی کنتراست بیشتری می‌خواهند
focus ring آبی که روی پسزمینه سفید کار میکند، در برابر سطوح تاریک اثرش را از دست میدهد. واژه‌نامه حالت فوکوس نشانگر focus-visible مورد نیاز WCAG را پوشش میدهد. در حالت تاریک، focus ring اغلب باید ۱۰ تا ۲۰ درصد روشنتر یا ضخیم‌تر از همتای حالت روشنش باشد. الزام دسترس‌پذیری تغییر نکرده، اما برخورد بصری باید تنظیم شود تا هنوز به آن برسد.
ساختار توکن برای دو تم
حالت تاریکی که در CSS override زندگی میکند، حالت تاریکی است که منحرف میشود. هر کامپوننت جدید تم‌بندی را متفاوت اداره میکند و ظرف شش ماه محصول سه الگوی تم‌بندی خواهد داشت که با هم دعوا میکنند.
ساختار درست توکنهای معنایی است. واژه‌نامه توکن طراحی مفهوم پایه را پوشش میدهد. حالت تاریک موردی است که ثابت میکند توکنها اختیاری نیستند.
سه لایه توکن:
لایه اول: پریمیتیوها. مقادیر خام رنگ. color.neutral.900، color.brand.500. بدون نظر، بدون زمینه.
لایه دوم: معنایی. نامهای مبتنی بر نقش. color.surface.base، color.surface.raised، color.text.primary، color.text.muted، color.border.default. هر توکن معنایی به یک پریمیتیو اشاره میکند.
لایه سوم: تم. دو نقشه کامل، یکی برای هر تم، که تصمیم می‌گیرند هر توکن معنایی به کدام پریمیتیو حل شود. تم روشن color.surface.base را به color.neutral.50 نگاشت میکند. تم تاریک color.surface.base را به color.neutral.900 نگاشت میکند.
کامپوننتها فقط توکنهای معنایی مصرف میکنند. هرگز مستقیم به پریمیتیو ارجاع نمی‌دهند و هرگز تم را هاردکد نمی‌کنند. سوئیچر تم نقشه را عوض میکند، کامپوننتها دوباره رسم می‌شوند و هیچ چیز نمیشکند. این تنها الگویی است که از تیم دو طراحه فراتر مقیاس می‌گیرد.
احترام به ترجیحات سیستم
مرورگر prefers-color-scheme را از طریق media queryهای CSS در اختیار می‌گذارد. محصول باید به آن احترام بگذارد. تجربه پیش‌فرض برای کاربری که حالت تاریک را در سطح سیستم‌عامل فعال کرده، تم تاریک است، نقطه. کلید داخل اپ یک پالایش است، نه جایگزین.
سه قانون برای پیاده‌سازی درست:
در اولین بارگذاری به ترجیح سیستم پیش‌فرض بده. هرگز انتخاب سیستم‌عامل کاربر را فقط چون طراح ماک‌آپ‌های روشن را بیشتر دوست دارد با تم روشن بازنویسی نکن.
انتخاب درون‌اپی کاربر را ذخیره کن. اگر کاربر داخل اپ به تاریک تغییر دهد، آن انتخاب از رفرش‌ها جان سالم به در میبرد و تا وقتی کاربر ریستش کند بر ترجیح سیستم غلبه دارد.
گزینه «مطابق سیستم» بده. کاربرانی که می‌خواهند تنظیم سیستم‌عامل تعیین‌کننده باشد به راه بازگشت به آن رفتار نیاز دارند. کلید سه‌حالته (روشن، تاریک، سیستم) الگوی مورد انتظار است و باید به‌صورت پیش‌فرض منتشر شود.
تست حالت تاریک
باگ‌های حالت تاریک پنهان می‌شوند. کامپوننتی در فایل طراحی خوب به نظر می‌رسد، در تم روشن از code review رد میشود و با شکست کنتراستی منتشر میشود که فقط وقتی کاربر شب بازش میکند پیدا میشود. انضباط تست باید تهاجمی باشد.
تست روشنایی. محصول را روی لپ‌تاپ با ۳۰ درصد روشنایی در اتاق تاریک باز کن. هر چیزی که ناپدید شود، لکه شود یا به‌طرز ناراحت‌کننده‌ای بدرخشد به عنوان باگ ثبت میشود. این بوردرهای بیش از حد ظریف، متن بیش از حد روشن و رنگهای اکسنتی که هنوز بیش از حد اشباع‌اند را می‌گیرد.
ممیزی کنتراست. هر تغییر تم یک بررسی کامل کنتراست روی همه جفت‌های معنایی را فعال میکند. ابزارهایی مثل axe، WAVE یا چکر کنتراست داخلی Figma پسرفت‌هایی را می‌گیرند که بازبینی بصری از دست میدهد.
diff اسکرین‌شات. اسکرین‌شات‌های حالت روشن و تاریک برای هر صفحه کلیدی در هر ریلیز گرفته میشود. diffهای بصری انحراف ناخواسته تم را پیش از کاربر نشان می‌دهند.
تست دستگاه واقعی. گوشی‌های OLED سطوح تاریک را متفاوت از لپ‌تاپ‌های LCD رندر میکنند. حالت تاریکی که روی MacBook عالی به نظر می‌رسد اغلب روی iPhone باندینگ یا گذارهای خشن نشان میدهد. روی گوشی‌های واقعی تست کن، نه فقط شبیه‌ساز دستگاه مرورگر.
شکست‌های رایج حالت تاریک
سه الگو باعث بیشتر مشکلات کیفیت انتشار حالت تاریک می‌شوند. هر سه با ساختار توکن بالا قابل اجتناب‌اند.
رابط نیمه‌وارونه. سطوح اصلی به تاریک برگشته‌اند، اما کامپوننت‌های مدفون (مودال‌ها، تولتیپ‌ها، صفحات بازاریابی، صفحات ادمین قدیمی) هنوز در حالت روشن منتشر می‌شوند. کاربر تاریک را روشن میکند و نیمی از محصول با یک کلیک به سفید می‌پرد. راه‌حل ممیزی هر سطح محصول است، با چک‌لیستی که پوشش تم را برای هر صفحه دنبال میکند.
لحظه برند شکسته. صفحات فرود بازاریابی روشن می‌مانند در حالی که محصول تاریک میشود، یا برعکس. هویت برند در مسیر کاربر تکه‌تکه میشود و محصول مثل دو شرکت به نظر می‌رسد. راه‌حل این است که از اول توافق کنید سایت بازاریابی حالت تاریک دارد یا نه. هر دو انتخاب معتبرند، اما دو سطح باید با هم بخوانند.
پسرفت دسترس‌پذیری. حالت روشن مطابق WCAG AA منتشر میشود، حالت تاریک در سه جا از آن جا می‌ماند و تا ممیزی انطباق کسی چک نمی‌کند. راه‌حل لایه توکن معنایی به‌علاوه بررسی خودکار کنتراست در CI است. هر PR یک بررسی کنتراست اجرا میکند. شکست‌ها merge را مسدود میکنند.
اگر تیمی می‌خواهی که حالت تاریک را به عنوان تصمیم سیستمی درجه یک منتشر کند، از توکنها تا تست، Brainy را استخدام کن. حالت تاریک به‌ندرت مشکل سخت است. مشکل سخت انتشار جفت‌تم بدون انحراف است.
سوالات متداول
آیا مشکی مطلق بهترین پسزمینه برای حالت تاریک است؟
نه. مشکی مطلق (#000000) با متن سفید کنتراست خشنی میسازد و نشانههای عمق بصری را که چشم برای خواندن ارتفاع لازم دارد حذف میکند. از خاکستری تیره با رنگمایه ظریف برند استفاده کن، معمولاً در محدوده #0B0B10 تا #121218. عمق در رابط تاریک مثل سطوحی خوانده میشود که به سمت کاربر بالا میآیند، که سطح شروعی میخواهد که مشکی مطلق نباشد.
بدون سایه چطور ارتفاع را در حالت تاریک پیاده کنیم؟
ارتفاع در حالت تاریک از روشنی میآید، نه سایه. هر سطح برجسته کمی روشنتر از سطح زیرش است و گرادیانی از سطوح میسازد که به سمت کاربر روی هم مینشینند. یک سایه تیره ظریف و یک هایلایت بالای بسیار کمرنگ میتوانند افکت را تقویت کنند، اما نشانه اصلی خود رنگ سطح است.
آیا حالت تاریک باید فقط رنگهای تم روشن را وارونه کند؟
نه. وارونگی رنگهای اکسنت را تا سطح ناراحتکننده اشباع میکند، متن کمرنگ را زیر آستانههای کنتراست WCAG میبرد و مدل ارتفاعی را که به سایهها وابسته است میشکند. حالت تاریک تم دومی است که از صفر روی همان مجموعه کامپوننتها طراحی میشود و سپس از طریق توکنهای معنایی مشترک هماهنگ میشود.
تصاویر و عکسها را در حالت تاریک چطور اداره کنم؟
تصاویری که روی پسزمینه سفید گرفته شدهاند پیوستگی تم را میشکنند. گزینهها: داراییهای موازی برای حالت تاریک منتشر کن، وقتی حالت تاریک فعال است دور هر تصویر کانتینر روشن ظریفی بگذار، یا فیلترها را با دقت اعمال کن. ایلاستریشنها اغلب به نسخه جداگانه حالت تاریک نیاز دارند. این گرانترین بخش حالت تاریک است و رایجترین بخشی که رد میشود.
توکنها را برای پشتیبانی از دو تم چطور ساختاردهی کنم؟
سه لایه. پریمیتیوها (مقادیر خام رنگ)، توکنهای معنایی (نامهای مبتنی بر نقش مثل color.surface.base) و نقشههای تم (یکی برای هر تم، که هر توکن معنایی را به یک پریمیتیو حل میکند). کامپوننتها فقط توکنهای معنایی مصرف میکنند، پس سوئیچر تم نقشه را عوض میکند و هیچ چیز نمیشکند. این الگو همان چیزی است که حالت تاریک را از تیم کوچک فراتر مقیاس میدهد.
آیا حالت تاریک دسترس‌پذیری را بهتر میکند؟
برای کاربران با حساسیت به نور، میگرن یا فتوفوبیا، بله. برای کاربرانی که به متن با کنتراست بالا یا ادراک رنگی خاص نیاز دارند، لزوماً نه. حالت تاریک یک گزینه دسترس‌پذیری است، نه برد خودکار دسترس‌پذیری. تم تاریک درست پیاده‌شده با همان سخت‌گیری تم روشن قوانین کنتراست WCAG را رعایت میکند و تم بد پیاده‌شده از آن‌ها رد میشود.
حالت تاریک یک تصمیم سیستمی است، نه یک کلید
محصولی با یک تم و تم دوم خراب، بدتر از محصولی با یک تم تمیز است. حالت تاریک یا به‌صورت موازیِ کاملاً طراحی‌شده، کاملاً تست‌شده و کاملاً توکنیزه‌شده با تم روشن منتشر میشود، یا اصلاً منتشر نمی‌شود.
اول لایه توکن را بساز. دوم ریاضی کنتراست را اجرا کن. تم تاریک را در برابر هر ارتفاع، هر کامپوننت و هر کانتینر تصویر طراحی کن. در روشنایی پایین روی دستگاه‌های واقعی تست کن. هر دو تم را با هم منتشر کن یا هیچ‌کدام را.
اگر کار برند، وب و رابط کاربری می‌خواهی که حالت تاریک را تعهد سطح سیستم می‌بیند نه کلید ترجیحات، Brainy را استخدام کن. دو تم، یک محصول، یک تصمیم طراحی منسجم.
مطالعه مرتبط
- راهنمای سیستم‌های طراحی
- کنتراست رنگ دسترس‌پذیر
- چک‌لیست دسترس‌پذیری وب
- نظریه رنگ برای طراحان
- طراحی سلسله‌مراتب بصری
Want a product that ships dark mode as a system decision instead of a last-minute toggle? Brainy builds brand, web, and UI with both themes wired into the tokens from day one.
Get Started
