یک اپلیکیشن در حال گسترش است و تیم محصول میخواهد دو قابلیت اضافه کند: دارکمود و امکان تم برند برای مشتریهای مختلف. مشکل اینجاست که UI فعلی با رنگهای ثابت ساخته شده است. اگر فقط رنگها را دستی عوض کنید، با هر تغییر محصول دوبارهکاری زیاد میشود. در این کیس استادی، شما باید نشان دهید چطور با منطق دیزاین سیستم، تمینگ را اصولی حل میکنید.
ابتدا ساختار توکنها را سه لایه کنید: Global (رنگهای خام)، Semantic (مثل surface/primary، text/secondary، border/default) و Component tokens (مثل button/primary/bg). سپس برای Light و Dark مقداردهی انجام دهید و یک Mapping table ارائه کنید. در دارکمود، از Pure black برای سطح اصلی استفاده نکنید و مفهوم Elevation را با روشنتر شدن لایههای بالایی نشان دهید. کنتراست متن و عناصر را با حداقل استاندارد خوانایی کنترل کنید.
در مرحله اجرا، در Figma از Variables/Modes استفاده کنید تا سوییچ تم واقعی شود. سپس ۳ صفحه پیچیده (مثل داشبورد، صفحه لیست، و صفحه فرم) را در هر دو تم پیاده کنید. توجه کنید نمودارها، وضعیتهای خطا/موفقیت، و نوتیفیکیشنها در دارکمود باید همچنان قابل خواندن باشند. در گزارش خود توضیح دهید چرا برخی رنگها را در حالت تاریک Desaturate کردید و چه قانونی برای رنگ برند گذاشتهاید.
در پایان، خروجی شما باید ثابت کند تمینگ یک «ترفند رنگی» نیست، بلکه نتیجه توکنگذاری درست و تصمیمهای قابل تکرار است. این کیس استادی برای پورتفولیو، نقطه قوت طراح در تفکر سیستمی را نشان میدهد.