پروژه ۰۳۷ — فاز ۲
راهنمای سیستمِ طراحی
هرچه اینجا میبینی از اندازهگیریِ واقعیِ ۱۱۶ برداشت آمده، نه از حدس. این صفحه با همان چهار لایهٔ CSS رندر میشود که لندینگ استفاده میکند — پس اگر اینجا درست است، آنجا هم درست است.
مقیاسِ خاکستریِ گرم
روشنترین پله سفید نیست، #faf9f5 است. همین یک تصمیم حسِ «کاغذی» را میسازد.
اکسنت و رنگهای ثانویه
چهار سطح (Surface)
هر بخشِ صفحه یک سطح میپوشد و ۴۰ توکنِ معناییاش عوض میشود. تمِ تاریک هم از همینجا میآید.
surface-main
زمینهٔ پیشفرضِ صفحه
surface-white
کارت و پنل روی زمینهٔ کِرِم
surface-accent
پیکتوگرامها جو (oat) میشوند
نشانsurface-dark
بخشِ شبانه وسطِ صفحهٔ روشن
تایپوگرافیِ سیال
پنجره را تغییرِ اندازه بده — هیچ بریکپوینتی در کار نیست، فقط clamp().
دوزبانگی
تیترِ نمونهٔ فارسی
وزنِ ۵۰۰، ارتفاعِ خطِ بازتر، بدونِ letter-spacing. حروفِ چسبانِ فارسی با فاصلهٔ حرفی از هم میپاشند.
Sample English heading
Weight 330 on a variable serif, tighter leading. The same tokens, a different script — and no second stylesheet.
دکمهها
ظرافتی که از مرجع برداشتیم: رنگِ متن در ۰.۱ ثانیه عوض میشود ولی زمینه در ۰.۲ — دکمه «زنده» حس میشود نه کند.
فرم
فاصله · شعاع · سایه
موشن
| توکن | منحنی | کاربرد |
|---|---|---|
| --ease-out-quart | cubic-bezier(.165,.84,.44,1) | ورودِ عناصر |
| --ease-in-out-power2 | cubic-bezier(.455,.03,.515,.955) | حالتِ دکمه |
| --ease-out-expo | cubic-bezier(.19,1,.22,1) | حرکتِ بلند |
| --dur-fast / base / slow | .1s / .2s / .4s | — |