فاصله‌گذاری

قاعدهٔ اعداد: پایه ۴ با ریتم ۸

هر مقدارِ ۱۶ به بالا مضرب ۸ است. زیر ۱۶، نیم‌پله‌های ۴ و ۱۲ هم مجازند.

دلیلش این است که در رابط‌های فشرده (جدول فشرده، فرم چندستونی) پرش ۸ به ۱۶ درشت است و «آیکون تا متن» با «دکمه تا دکمه» یکی می‌شود. شبکهٔ ۸ ریتمِ روی پایهٔ ۴ است، نه جایگزینش؛ همان کاری که Tailwind و Material و HIG هم می‌کنند.

پررنگ‌ها مضرب ۸‌اند. کم‌رنگ‌ها نیم‌پله‌های عمدی زیر ۱۶.

واحد پایه

--spacing برابر 0.25rem است و همهٔ پله‌های عددی p-4، gap-2، از آن ضرب می‌شوند.

محور اول: inset

پدینگِ درونِ یک کانتینر، از کوچک‌ترین کانتینر (دکمه) تا لبهٔ صفحه.

محور دوم: stack

فاصلهٔ عمودیِ چیزهایی که روی هم می‌نشینند. با flex-col و gap به کار می‌رود، نه با margin، تا margin collapse و دوبرابرشدن پیش نیاید.

محور سوم: inline

فاصلهٔ افقیِ چیزهایی که کنار هم می‌آیند. در راست‌به‌چپ خودشان می‌چرخند، چون gap جهت ندارد.

هدف لمسی روی موبایل

اندازهٔ دیداریِ یک آیکون ربطی به ناحیهٔ قابل‌لمسش ندارد. آیکون ۱۶ پیکسلی می‌تواند و باید داخل دکمه‌ای بنشیند که ۴۴ پیکسل است. دو عدد لازم است، نه یکی: اندازهٔ هدف، و فاصلهٔ بین دو هدف.

روی دسکتاپ که ورودی موس است، همین دکمه می‌تواند فشرده‌تر باشد. اندازهٔ فشرده را برای اشاره‌گر دقیق نگه دارید و با pointer: coarse به هدف لمسی برسانید، نه با عرض صفحه.

عرض‌های نام‌دار

اینها را هر پروژه دستی اختراع می‌کند و بعد در دو صفحه دو عدد متفاوت می‌شود.

گردی گوشه

پله‌ها از --radius مشتق می‌شوند، پس یک متغیر کل سیستم را نرم‌تر یا تیزتر می‌کند.

فاصلهٔ دید در موبایل، دسکتاپ و تلویزیون

همهٔ مقادیر بالا در --font-scale ضرب می‌شوند. یعنی روی تلویزیون چیدمان با متن هماهنگ بزرگ می‌شود، نه اینکه متن بزرگ شود و پدینگ‌ها خفه بمانند.

این با عرض صفحه فعال نمی‌شود. ۱۹۲۰ رایج‌ترین مانیتور دسکتاپ است و عرض چیزی دربارهٔ فاصلهٔ دید نمی‌گوید. پس یک پیچ صریح است که اپلیکیشن خودش می‌چرخاند، همان نقطهٔ اتصالِ آمادهٔ حالت «متن بزرگ» برای کاربر کم‌بیناست.

:root { --font-scale: 1.35 }   /* تلویزیون، فاصلهٔ سه متری */