خانه
سیستم طراحی

پروژه

سیستم طراحی

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

رنگ

هر دو پالت جداگانه در برابر پس‌زمینه خودشان انتخاب شده‌اند. نمونه‌های زیر متغیرهای CSS زنده را می‌خوانند، پس آنچه می‌بینید همان چیزی است که صفحه همین حالا استفاده می‌کند.

--bgPage ground

--surfaceSidebar, panels

--surface-2Hover, inline code

--borderHairline

--border-strongEmphasised border

--textBody text

--text-2Secondary text

--text-3Meta text

--accentInteractive accent

--accent-hoverAccent hover

--accent-softAccent tint

--okSuccess / supported

--warnWarning / planned

--dangerDanger callout

--slabInstall bar, in both themes

--code-bgCode panel

پوسته تیره به صورت مستقل انتخاب می‌شود

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

تایپوگرافی

آرکایوو تیترها را با وزن ۸۰۰ و عرض ۷۵٪ حمل می‌کند — همین سر فشرده امضای این سیستم است. متن اصلی از پشته سیستمی برای خوانایی در متن‌های بلند استفاده می‌کند. مارشن مونو همه خوانش‌ها، بلوک‌های کد و اعداد را با عرض ۸۷٫۵٪ و ارقام جدولی می‌گیرد تا ستون‌های عدد هم‌تراز بمانند. وزیرمتن محدوده فارسی را می‌گیرد: نه آرکایوو گلیف فارسی دارد و نه مارشن مونو، پس تیترها در آن نسخه به عرض ۱۰۰٪ برمی‌گردند و فاصله خطوط را خود وزیرمتن تعیین می‌کند.

h1 hero

64px · 800 · Archivo at 75% width. clamp(2.25rem, 1.3rem + 3.9vw, 4rem), 0.92 leading

h1 page title

44px · 800 · One per page. clamp(1.9rem, 1.3rem + 2.2vw, 2.75rem)

h2 section

27px · 800 · Has a hairline rule above it. clamp(1.35rem, 1.1rem + 0.9vw, 1.7rem)

h3 subsection

18px · 800 · Also the step numbers in the quickstart

lede

18px · 400 · One per page, opens at 68ch

body paragraph

16px · 400 · 1.65 line height, 68ch desktop / 35–60ch mobile

table cell, nav link

14px · 400 · Secondary structural text

label, pill, caption

12px · 600 · Martian Mono at 87.5% width, tabular numerals

inline code, 14px in blocks

14px · 400 · Martian Mono at 87.5% width, 1.6 leading

فاصله‌گذاری، شعاع، حرکت

Spacing base

4px. Gaps default to 8px; section scale 16 / 24 / 32 / 48 / 64. Gutters clamp(1.25rem, 4vw, 2.5rem).

Display type

Archivo at weight 800, 75% width, -0.02em tracking, 0.92 leading. Buttons opt out and reset to 100% width.

Readouts

Martian Mono at 87.5% width with tabular numerals — every label, pill, badge, route, figure and code block.

Radius

2px controls · 3px panels · 4px dialogs · 6px at the largest. Buttons and the install bar are bevelled with clip-path instead of rounded. Status pills stay fully round.

Shadow

None — the system suppresses elevation at every tier, including the search dialog, and separates surfaces with 1px hairlines.

Motion · fast

120ms, ease-out, state feedback: hover, focus, toggles.

Motion · medium

180ms, ease-out entering / ease-in leaving at ~65% of entrance. Drawer, dialogs, TOC highlight.

Motion · slow

240ms, ease-out, route and section entrance. Stagger 30–40ms on list items.

Animated properties

transform and opacity only. Never width, height, top or left.

Reduced motion

prefers-reduced-motion: reduce collapses every duration to 0.01ms and disables smooth scroll.

Breakpoints

375 · 768 · 1024 · 1440. Each reorganises; none scales the whole page.

Shell

76rem container · 264px sidebar · fluid content capped at 48rem · 224px table of contents, inside two hairline rules pinned to the container edges. TOC hides below 1280, the sidebar becomes a drawer below 1024, and the landing route goes full-bleed without either.

Icons

One outlined family, 1.5px stroke, 20px default / 16px inline. Gateway status uses text pills, never emoji.

فهرست کامپوننت‌ها

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

کامپوننت	انتخاب‌گر	حالت‌ها
Register	`.shell::before / ::after`	two hairlines pinned to the container edges; hidden below 1024px
Header	`.masthead`	default · hover · focus-visible · sticky
Language switch	`.lang-switch`	default · hover · selected (aria-pressed) · focus-visible
Theme toggle	`.icon-btn`	default · hover · focus-visible
Search trigger	`.search-trigger`	default · hover · focus-visible · open
Sidebar link	`.nav-link`	default · hover · current (aria-current) · focus-visible
Sidebar drawer	`.sidebar + .scrim`	closed · open · focus-visible
Button	`.btn`	default · hover (the fill drops away and the control inverts) · active · focus-visible · disabled · bevelled, never rounded
Install command	`.install`	default · hover (copy) · copied · bevelled, on the dark slab in both themes
Code block	`.code`	default · hover (copy) · copied · scroll
Panel	`.panel`	default · code variant sits on the code surface
Tab group	`.tabs`	default · hover · selected (aria-selected) · focus-visible
Callout	`.callout`	note · tip · warning · danger
Status pill	`.pill`	supported · planned · specification · yes / no
Stat	`.stat`	numeral over caption; value counted at runtime from assets/data/
Tile	`.tile`	default · carries the same gateway name in the other edition
Hair grid	`.hair-grid`	stats · tiles · two — items separated by hairlines instead of gaps
Announce pill	`.announce`	default · hover (arrow nudges, mirrored in RTL) · focus-visible
Section head	`.section-head`	readout eyebrow · display heading · lede
CTA panel	`.cta`	default · hover on its buttons
API entry	`.api-entry`	collapsed · expanded · focus-visible
Table	`.table-wrap`	default · sortable (aria-sort) · stacked below 768px
Search dialog	`.search`	closed · open · empty state · active result · focus-visible
Sequence diagram	`.seq`	default · responsive stack
Pagination	`.pager__link`	default · hover · focus-visible
Prose link	`.page p a`	default · hover (the highlight replaces the underline) · focus-visible

حرکت

۱۸۰ میلی‌ثانیه برای بازخورد حالت، ۲۶۰ برای گذارهای بزرگ‌تر، ۳۰۰ برای ورود صفحه. ease-out برای ورود، ease-in برای خروج با حدود دوسوم مدت ورود. فقط transform و opacity انیمیت می‌شوند. زیر prefers-reduced-motion: reduce همه مدت‌ها به ۰٫۰۱ میلی‌ثانیه جمع می‌شوند و اسکرول نرم غیرفعال می‌شود.