Ravandروند
RAVAND UI · VERSION 1.0 · 2026

سیستم طراحی

مرجع واحد رابط کاربری روند: توکن‌ها، مقیاس‌ها، اجزا و قواعدی که آن‌ها را اداره می‌کند. هر مقداری که اینجا می‌بینید همان چیزی است که منتشر می‌شود.

6 COLOR TOKENS4 TYPEFACES5 BREAKPOINTSRTL / LTR
01 — PRINCIPLES

اصول

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

01

پیش‌فرض، آرام

خط مویی و فضا، پیش از کادر و پرکردگی.

02

یک رنگ تأکید

سبز فقط چیزی را نشان می‌دهد که مهم است.

03

دوزبانه از پایه

هر چیدمان باید چرخش راست‌چین به چپ‌چین را تاب بیاورد.

04

داده روی صفحه

عدد بیشترین وزن تایپوگرافیک صفحه را می‌گیرد.

02 — COLOR

رنگ

شش توکن، دو تم. رنگ هفتمی وجود ندارد؛ هر چه بیشتر لازم دارید ترکیب سبز تأکید با پس‌زمینه است.

TOKENLIGHTDARKUSAGE
--bg#F6F5F1#0A0B09سطح صفحه و کارت
--fg#14160F#EDEDE7تیتر و متن اصلی
--fg-2#5B6058#8B918Aمتن ثانویه و برچسب مونو
--linefg 13%fg 14%خط مویی، حاشیه، جداکننده
--accent#3B6045#4F7A5Bلینک، کنش اصلی، دادهٔ زنده
--btn-fg#F6F5F1#0A0B09متن و آیکون روی سبز
ACCENT MIXES

فقط همین پنج ترکیب: ۷، ۱۶، ۳۴، ۶۲ و ۱۰۰ درصد سبز روی پس‌زمینه.

CONTRAST — LIGHT / DARK
fg / bg14.9 · 15.8 — AAA
fg-2 / bg5.9 · 6.4 — AA
btn-fg / accent6.8 · 5.1 — AA
03 — TYPOGRAPHY

تایپوگرافی

چهار قلم با وظایف کاملاً جدا. اگر متنی در هیچ‌کدام از نقش‌های زیر نمی‌گنجد، جای آن در صفحه نیست.

HEADINGSپینار

پینار — تمام تیترها، وزن لایت و رگولار.

TEXTیکان‌بخ

یکان‌بخ — متن، برچسب رابط، فرم.

LATIN DISPLAYRavand

اینستروومنت سریف — فقط واژه‌نشان و اعداد شاخص.

LABELS01 — LABEL

جت‌برینز مونو — متادیتا، همیشه چپ‌چین، فاصلهٔ ‎.2em.

TOKENSAMPLESIZELEADING
display/xlمسیر رشد34 → 681.16
heading/lgعنوان بخش22 → 341.35
heading/smعنوان کارت16 → 191.5
bodyمتن اصلی با ارتفاع خط دو برابر برای خوانایی فارسی.14.5 → 172.0
captionتوضیح تکمیلی و زیرنویس تصویر.131.9
label/mono02 — COLOR9 → 10.51.0
04 — SPACE & RADIUS

فاصله و گردی

PXSCALEUSE
4آیکون تا برچسب
8درون تراشه
14پشتهٔ درون کارت
24حاشیهٔ داخلی کارت
40میان بلوک‌ها
72میان بخش‌ها
RADIUS
8 · chip
12 · input
16 · card
full · button

گردی تودرتو با گام ۴ کم می‌شود: کارت ۱۶، فیلد داخلش ۱۲.

05 — LAYOUT

شبکه و شکست‌ها

شبکهٔ ۱۲ ستونی درون ظرف ۱۳۶۰ پیکسلی با فاصلهٔ برگرفته از مقیاس. زیر هر شکست، چیدمان ساده می‌شود، نه کوچک.

BREAKPOINTCOLUMNSBEHAVIOUR
≥ 118112full layout, sticky scenes, side nav
≤ 11808charts shrink, cards scroll-snap
≤ 10808side nav drops, single content column
≤ 9006burger nav, stacked sections
≤ 640416px inputs, tables become lists
06 — SURFACES

سطح و عمق

در این سیستم سایه نداریم. عمق یعنی خط مویی، تینت ۶٪، یا بلور پشت نوار چسبان — و نه چیز دیگر.

LEVEL 0 · HAIRLINE
LEVEL 1 · TINT 6%
LEVEL 2 · ACCENT PANEL
STICKY · BLUR 14
07 — ICONS

آیکون‌ها

SET
SPEC
GRID24 × 24
STROKE1.5 · round
FILLnone
COLORcurrentColor

آیکون به‌تنهایی سبز نمی‌شود؛ رنگ متنِ کنارش را می‌گیرد.

08 — COMPONENTS

اجزا

هر جزء زیر به‌صورت زنده نمایش داده شده و پس از آن وضعیت‌ها و قواعدش آمده است. روی نمونه‌ها هاور و فوکوس کنید؛ دقیقاً مثل محیط واقعی رفتار می‌کنند.

لینک متنی
BUTTONDEFAULTHOVERFOCUS
primaryaccent / btn-fgbrightness 1.12outline accent 2px
secondary1px line borderborder + text accentoutline accent 2px
height46pxhit area 44 minradius full
FORM

برچسب بالای فیلد، خطا زیر آن و با رنگ تأکید — نه قرمز.

CHIPS · BADGES · TOGGLE
SEOپرفورمنسفعال
خاموش / روشن
METRIC
3.4%نرخ تبدیل
DAY 0DAY 90

عدد لاتین و با اینستروومنت سریف؛ برچسبش با مونو.

09 — MOTION

حرکت

حرکت مثل رشد گیاه است: آرام شروع، نرم تمام. هیچ چیز در میدان دید خواننده تکرار نمی‌شود، جز یک نقطهٔ دانه.

TOKENVALUEUSE
ease/out.16,1,.3,1entrances, panels, overlays
dur/fast300mshover, focus, color change
dur/panel450msdrawer, dialog, theme swap
dur/scene700msscroll scenes, reveals
reduced0msprefers-reduced-motion: all decoration off
10 — ACCESSIBILITY

دسترس‌پذیری

این‌ها الزام‌اند، نه توصیه. جزئی که یکی از این‌ها را رد کند منتشر نمی‌شود.

4.5 : 1 MIN

کنتراست متن در هر دو تم؛ بالای ۲۴ پیکسل ۳ به ۱.

44 × 44 PX

حداقل ناحیهٔ لمس، حتی برای کنترل‌های کوچک.

FOCUS VISIBLE

حلقهٔ ۲ پیکسلی سبز با فاصلهٔ ۳. هرگز حذف نمی‌شود.

16PX INPUTS

فیلد در موبایل زیر ۱۶ پیکسل نمی‌رود تا زوم iOS رخ ندهد.

LOGICAL CSS

فقط inset-inline و margin-inline، بدون چپ و راست.

NOT COLOR ALONE

وضعیت هرگز فقط با سبز اعلام نمی‌شود؛ متن یا آیکون همراهش باشد.

11 — CHANGELOG

نسخه‌ها

1.0 · 2026نخستین نسخهٔ عمومی: شش توکن رنگ، پینار و یکان‌بخ، تم روشن پیش‌فرض با تم تیره، قواعد چیدمان دوزبانه.
NEXTدر دست بررسی: توکن‌های داده‌نمایی، قالب ایمیل، پیش‌تنظیم‌های حرکت برای صحنه‌های اسکرول.