فیروزه

turquoiseسیستم طراحی

سطح‌های نیمه‌شفاف و مات روی یک پس‌زمینه‌ی نورانی فیروزه‌ای. کارت‌ها پشتشون را محو نشون میدن و لبه‌هاشون برق می‌زنه.

زبان طراحی
شیشه‌ای
حالت
تیره
توکن‌ها
۴۴
فونت
تیتر با نوتو کوفی و متن با ایران‌سنس
فرم
گوشه‌های ۱۲ تا ۲۲ پیکسلی
عمق
شیشه‌ی مات با blur و سایه‌ی عمیق
حرکت
۲۸۰ میلی‌ثانیه که آرام تموم میشه
تراکم
معمولی

کتاب‌فروشی شهر، سفارش امروز

همین کامپوننت‌ها در زبان «شیشه‌ای». فونت، گوشه، خط، سایه و حس کلیک همه از توکن‌ها می‌آن.

سبد خرید۳ کالا
جمع۲٬۴۸۰٬۰۰۰ تومان
اعلان ایمیلی
هدف ماهانه۷۲٪

ذخیره شد

تنظیمات جدید اعمال شد.

نکته‌ها

  • هر سیستم طراحی یک زبان کامله. کامپوننت‌ها علاوه بر رنگ، فرم گوشه (--shape-*)، ضخامت خط (--line)، سایه (--depth-*)، حس کلیک (--press)، سرعت حرکت (--motion) و فونت تیتر (--type-display) را هم از توکن‌ها می‌خونن.
  • هیچ رنگ، گوشه، سایه یا مدت انیمیشن ثابتی داخل کامپوننت نیست. به جاش از کلاس‌هایی مثل rounded-control، border-line، shadow-surface و duration-(--motion) استفاده میشه.
  • برای تم خودتون همین بلوک را کپی کنید، مقدارها را عوض کنید و روی html با data-theme بگذارید. --spacing تراکم کل صفحه را کم و زیاد می‌کنه.
  • اگه تم فونت تیتر جدا داره (مثل لاله‌زار یا نوتو نسخ)، CLI خودش لینک Google Fonts را اضافه می‌کنه. دستی هم می‌تونید با next/font یا یک @import بارش کنید.
  • تم روشن باید color-scheme: light داشته باشه تا کنترل‌های بومی مرورگر و اسکرول‌بار هم روشن بمونن.