زعفران

saffronسیستم طراحی

زمینه‌ی کرم و دکمه‌ی زعفرانی با خط‌های مشکی ضخیم، گوشه‌های تیز و سایه‌ی سخت. دکمه‌ها موقع کلیک واقعاً پایین می‌رن.

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

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

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

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

ذخیره شد

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

نکته‌ها

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