گرافیت

graphiteسیستم طراحی

سیاه خنثی با خط‌های مویی، دکمه‌ی سفید و یک رنگ تأکیدی کهربایی. آرام و دقیقه و تم پیش‌فرض سایته.

زبان طراحی
مینیمال فنی
حالت
تیره
توکن‌ها
۴۳
فونت
ایران‌سنس برای متن و تیتر
فرم
گوشه‌ی ۱۰ پیکسلی و کارت‌های گردتر
عمق
بدون سایه، فقط یک خط روشن بالای کارت
حرکت
۲۰۰ میلی‌ثانیه با شتاب نرم
تراکم
معمولی

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

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

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

ذخیره شد

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

نکته‌ها

  • هر سیستم طراحی یک زبان کامله. کامپوننت‌ها علاوه بر رنگ، فرم گوشه (--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 داشته باشه تا کنترل‌های بومی مرورگر و اسکرول‌بار هم روشن بمونن.