راهنمای کامل برند، رنگ، تایپوگرافی، اجزای رابط کاربری، الگوها و قواعد بومیسازی برای آدمایکس — دستیار هوش مصنوعی سازمانی که در دیتاسنتر داخلی مستقر میشود. این سیستم طراحیشده تا در کاتالوگ چاپی، کاتالوگ دیجیتال، لندینگها، و کل اپلیکیشن سازمانی با کیفیت یکسان عمل کند. مخاطب اولیه فارسیزبان، با پشتیبانی کامل از انگلیسی.
فصل یکم · بنیانهای برند
آدمایکس، یک پلتفرم با شخصیت روشن.
پیش از رنگ و تایپ، باید بدانیم آدمایکس چیست و چه میگوید. شخصیت برند، چهار اصل پایه، و قواعد لوگو در این فصل تعریف میشوند تا بقیهی سیستم بر روی پایهای محکم بنا شود.
I
CH. 01
i.چهار اصل بنیادینFOUR PRINCIPLES
۰۱
وزن، نه هیاهو
کنتراست از طریق وزن تایپ و فضای منفی — نه رنگهای پرسروصدا. آدمایکس مثل بانک مرکزی صحبت میکند، نه مثل استارتاپ.
۰۲
سند، نه شعار
هر ادعا با منبع، هر عدد با تاریخ، هر بند با ارجاع. زبان بصری از سند حقوقی الهام میگیرد.
۰۳
تحت کنترل سازمان
هر تصویر، هر کلمه، حس «این، مال ماست» را منتقل میکند. آدمایکس مهمان است، نه میزبان.
۰۴
دو زبان، یک سیستم
فارسی و انگلیسی، دو لهجهی همسطح — نه ترجمهای از یکدیگر. هر کدام در زبان خود کامل و حرفهای.
ii.نشان و حروفنگاره — سیستم کاملLOGO SYSTEM · v2
نشان آدمایکس برایوس یک شبکهی ساخت دقیق بنا شده — تراز کامل بین گلیف، کلمهنشان و descriptor، با واحد پایه H = ارتفاع گلیف. در پنج واریانت، پنج مقیاس، و ۹ اسست صادراتی — برای هر سطح، رفتار قابل پیشبینی.
a.لوگو اصلیPRIMARY · LIGHT & DARK
PRIMARY · LIGHT
آ
آدمایکس
ADAMX · ENTERPRISE AI ASSISTANT
PRIMARY · DARK
آ
آدمایکس
ADAMX · ENTERPRISE AI ASSISTANT
b.شبکهی ساختCONSTRUCTION GRID
top · y=0
bottom · y=H
آ
آدمایکس
ADAMX · ENTERPRISE AI ASSISTANT
H = 100%
glyph = H × H
گلیف مربع کامل، ارتفاع H واحد پایه.
gap = H / 4
فاصلهی گلیف و کلمهنشان ربع ارتفاع.
name = H × 0.50
سایز کلمهنشان نصف H.
desc = H × 0.115
descriptor + tracking 0.24em، تکخط.
c.فضای محافظCLEARSPACE · H/2
حداقل فضای آزاد در هر طرف لوگو = H/2. هیچ متن، تصویر، یا خطی نباید داخل این محدوده قرار گیرد.
D · کلمهنشان تنها — بدون گلیف. کاربرد: مهر، حکاکی، چاپ تکرنگ.
آ
E1 · مربع تیزSquare · pixel grid
آ
E2 · SquircleiOS · 22% radius
آ
E3 · دایرهایAndroid · social
E · تکنشانه — فقط گلیف. کاربرد: app icon، favicon، آواتار. در سه فرم: مربع تیز، squircle (iOS)، دایره (Android/social).
e.جدول مقیاسهاSCALE MATRIX
XL · کاور
PRINT / HERO
H = 120px
آ
آدمایکس
ADAMX · ENTERPRISE AI ASSISTANT
LG · هدر
NAVIGATION
H = 88px
آ
آدمایکس
ADAMX · ENTERPRISE AI ASSISTANT
MD · امضا
EMAIL · FOOTER
H = 64px
آ
آدمایکس
ADAMX · ENTERPRISE AI
SM · فشرده
SIDEBAR · CHIP
H = 48px
آ
آدمایکس
ADAMX
XS · تکنشانه
DENSE · MOBILE
H = 32px · no desc
آ
آدمایکس
f.Assetهای صادراتیEXPORT ASSETS
نام asset
ابعاد
فرمت
کاربرد
background
favicon-16
16 × 16
ICO / PNG
tab مرورگر
— (پر کامل)
favicon-32
32 × 32
ICO / PNG
bookmark
— (پر کامل)
apple-touch-icon
180 × 180
PNG
iOS home screen
squircle خودکار توسط iOS
android-icon
192 × 192
PNG (maskable)
Android · PWA
safe-zone 80٪ مرکزی
android-icon-xl
512 × 512
PNG (maskable)
splash · store
safe-zone 80٪ مرکزی
og-image
1200 × 630
PNG / JPG
Open Graph · Facebook
navy-800
twitter-card
1200 × 600
PNG / JPG
Twitter summary large
navy-800
linkedin-banner
1584 × 396
PNG
cover صفحه شرکتی
navy-800 + pattern
svg-mark
vector
SVG
پایهی هر export
transparent
آ
آ
آ
favicon · مربع16 / 32 / 64 px
آ
apple-touch · squircle180 × 180 · iOS
آ
avatar · شبکه اجتماعی512 × 512 · circular
g.رفتار بر روی پسزمینهBACKGROUND BEHAVIOR
آ
ivory-50 · ✓
آ
ivory-100 · ✓
آ
white · ✓
آ
navy-800 · ✓
آ
navy-950 · ✓
آ
burg-700 · navy mark
آ
gold-600 · navy mark
آ
photo · solid navy
قاعدهی پشتیبان: روی پسزمینهی طلایی، برگاندی، یا عکسهای پررنگ، از واریانت solid-navy استفاده کنید تا کنتراست AA حفظ شود. هرگز نسخهی گرادیان طلایی را روی پسزمینهی طلایی نگذارید.
آ
solid navyon light
آ
solid ivoryon dark
آ
outlinestamp · engrave
h.ممنوعیتهاDON'TS
آ
آدمایکس
دورانچرخش ممنوع.
آ
آدمایکس
کشیدگیتغییر تناسب.
آ
تغییر رنگفقط طلایی/navy.
آ
سایهglow پررنگ ممنوع.
آدمایکس
آ
ترتیب غلطگلیف راست.
آ
آدمایکس
فاصلهی کمکمتر از H/4.
آ
آدمایکس
تغییر تایپفقط YekanX 900.
آ
پسزمینهpattern پرسروصدا.
قاعدهی طلایی: اگر مطمئن نیستید، از primary · light یا primary · dark در سایز LG (H=88px) استفاده کنید — در ۹۵٪ کاربردها درست است. حداقل فضای محافظ: H/2. حداقل اندازهی چاپ: گلیف 8mm، لوگوی کامل 12mm.
iii.لحن و صداVOICE & TONE
آدمایکس با لحن استادکار حرفهای صحبت میکند — مطمئن اما متواضع، دقیق اما خوانا. نه اغراق استارتاپی، نه خشکی بوروکراتیک.
معیار
میگوییم
نمیگوییم
دقت
«پاسخها مستند به دانش داخلی سازمان، با ارجاع قابل پیگیری در هر بند.»
«هوش مصنوعی پیشرفته با دقت بالا.»
اعتماد
«دادهها از دیتاسنتر شما خارج نمیشوند.»
«امنیت در سطح بانکی.»
ارزش
«کاهش زمان بازیابی دانش سازمانی از ساعت به ثانیه — در هر واحد، از منابع انسانی تا مالی.»
«انقلابی در صنعت حقوق.»
دعوت
«برای بررسی فنی، با تیم سازمانی تماس بگیرید.»
«همین حالا ثبتنام کنید!»
فصل دوم · سیستم رنگ
سرمهای حاکمیتی، با لهجههای طلایی و برگاندی.
پنج خانوادهی رنگ، هر کدام در ۹–۱۱ گام، با توکنهای معنایی برای استفاده در محصول. ساخته شده برای دسترسپذیری AA در ترکیبهای اصلی.
II
CH. 02
i.پالت پایهCORE PALETTE
Navyرنگ اصلی — سرمه
50#F0F3F8
100#DDE3EC
200#B8C2D2
300#8B9AB0
400#5A6E8E
500#2A4670
600#1A3253
700#11243E
800#0A1A2E
900#08152A
950#050E1A
Ivoryسطح کاغذی
50#FBF8F1
100#F4EFE6
200#E8E0CE
300#D9CFB8
400#C2B796
500#A99E7C
—
—
—
—
—
—
Burgundyلهجهی اول
100#F6E0E5
200#EBBAC4
300#DD8B9A
400#C95D6F
500#B33A4D
600#A22B3D
700#8B2231
800#7A1C2A
900#5C1421
—
—
Gold Leafلهجهی دوم
100#F6E9D7
200#EFDEC2
300#E8D2A9
400#E0C58D
500#D6B673
600#C8A55B
700#A28342
800#846632
900#6B5224
—
—
Slateخنثی · UI
100#EDF0F3
200#D9DEE4
300#BDC4CD
400#9CA5B0
500#7A8593
600#5A6675
700#3D4757
800#2A3340
900#1B2330
—
—
ii.توکنهای معناییSEMANTIC TOKENS
بهجای ارجاع مستقیم به --navy-800، در محصول از این توکنهای نقشمحور استفاده کنید. این لایهی انتزاع، تغییر تم آینده (مثل افزودن حالت تیره) را ممکن میکند.
#FBF8F1
surface/base
پسزمینهی اصلی
صفحهی پیشفرض، canvas اصلی، body
#F4EFE6
surface/alt
پسزمینهی فرعی
section متناوب، جدول head، note box
#FFFFFF
surface/card
سطح کارت
کارتها، فرمها، dialog، menu
#0A1A2E
surface/inverse
سطح معکوس
hero، footer، CTA dark، header app
#0A1A2E
text/primary
متن اصلی
headline، body
#5A6675
text/secondary
متن ثانویه
caption، help، meta
#7A8593
text/tertiary
متن کماهمیت
placeholder، disabled
#F4EFE6
text/inverse
متن روی تیره
headline روی navy، link روی hero
#8B2231
accent/primary
لهجهی اول
CTA دوم، link، tag مهم
#C8A55B
accent/gold
لهجهی طلایی
premium، نشان، tag سازمانی
#D9CFB8
border/default
خط مرز
card، table، divider
#E8E0CE
border/muted
خط مرز ملایم
dashed divider, hover state
قاعدهی ۶۰-۳۰-۸-۲: ۶۰٪ سطح ایوری/سفید، ۳۰٪ متن نیوی، ۸٪ مرز/خاکستری، و حداکثر ۲٪ لهجهی برگاندی یا طلایی. این نسبت، حس سند ادیتوریال را تضمین میکند.
iii.سیگنالهاSIGNAL COLORS
SUCCESS
آپلود موفق بود.
#1F5C4A / #E6F0EC · AA 7.8
WARNING
۳ سند نیاز به بازبینی دارد.
#6B5224 / #F6E9D7 · AA 7.2
DANGER
امکان ادامه نیست.
#7A1C2A / #F6E0E5 · AA 8.1
iv.دسترسپذیریACCESSIBILITY
متن ضروری · AAAمتن اصلی (نیوی-۸۰۰ روی ایوری-۵۰) نسبت ۱۵.۲:۱ دارد — بالاتر از حد AAA (۷:۱). متن کوچک هم بدون مشکل خواناست.
متن ثانویه · AAمتن خاکستری (Slate-600) روی ایوری نسبت ۵.۸:۱ — کافی برای AA در اندازهی ۱۴pt+. برای متن کوچکتر، از Slate-700 استفاده کنید.
لهجه روی تیرهطلایی-۶۰۰ روی نیوی-۸۰۰ نسبت ۶.۹:۱ — مناسب برای تیتر و لینک. برگاندی-۳۰۰ روی نیوی برای حالات هاور.
state-های UIfocus ring همیشه با Navy-700 و باکسسایهی ۳pt رنگ شفاف. hover با تغییر ۱ گام (مثل navy-800 → navy-700).
v.پالت در دو تم — مقایسه مستقیمDUAL-MODE PALETTE · LIGHT vs DARK
هر توکن معنایی در کنار همنظیر خود در Dark Mode. رنگ پایه تغییر نمیکند — فقط روشنایی تنظیم میشود تا سیستم در هر دو تم یک هویت واحد داشته باشد.
L
D
--bg
ivory-50 / navy-900
پسزمینه اصلی صفحه
L
D
--bg-2
ivory-100 / navy-900+
section متناوب، sidebar
L
D
--surface
white / navy-700
کارت، فرم، dialog
L
D
--rule
ivory-300 / #243A62
مرز کارت، جداکننده
L
D
--ink
navy-800 / ivory-100
متن اصلی، تیتر
L
D
--muted
slate-600 / #A8B8CC
متن ثانویه، caption
L
D
--accent
burg-700 · Light / gold-500 · Dark
kicker، شماره فصل، لینک
L
D
--accent-soft
gold-600 — هر دو تم
border-right note، logo trim
L
D
signal-success
#1F5C4A / #6ECBA8
تایید، موفقیت، آپلود
L
D
signal-warn
#B07515 / #E8C86A
هشدار، بازبینی لازم
L
D
signal-danger
burg-700 / burg-300
خطا — فقط signal، نه accent
L
D
signal-info
navy-500 / navy-300
اطلاعات، راهنما، note
اصل طراحی: در Light Mode، بُرگاندی accent است و طلایی trim. در Dark Mode این نقشها عوض میشوند — طلایی accent میشود (کنتراست 6.9:1 روی navy) و بُرگاندی فقط برای signal-danger. رنگهای پایه تغییر نمیکنند — فقط نقشها در تم تیره جابجا میشوند.
فصل سوم · تایپوگرافی
یک خانواده، چهار فرم، یک زبان.
سیستم تایپوگرافی آدمایکس بر IRANYekanX بنا شده — فونتی که از ترکیب «یکان» و «ایرانسنس» ساخته شده. چهار زیرخانواده با ۱۱ وزن هر کدام، بهعلاوه یک فایل Variable Font. برای انگلیسی: Manrope + Spectral + IBM Plex Mono.
III
CH. 03
i.خانواده YekanX — چهار زیرخانوادهYEKANX · FOUR SUB-FAMILIES
هر زیرخانواده برای یک context طراحی شده. انتخاب درست زیرخانواده، انسجام بصری متن را بهبود میدهد — فارسی + لاتین، اعداد فارسی، فارسی خالص، یا فونت متغیر برای انیمیشن.
PRIMARY · MIXED
YekanX
✕ NO ITALIC — use weight contrast
آدمایکس · AdamX
آدمایکس · AdamX
فارسی + لاتین + اعداد غربی. پیشفرض کل سیستم برای محتوای مختلط. ۱۱ وزن.
FA NUMERALS
YekanXFaNum
✕ NO ITALIC — use weight contrast
۴۱۹٬۰۰۰ سند
۱۴۰۵/۰۲/۱۳
اعداد فارسی (۰–۹) بهجای ASCII. برای متن روایی با اعداد یکپارچه. ۱۱ وزن.
PERSIAN ONLY
YekanXNoEn
✕ NO ITALIC — use weight contrast
دانش سازمان
تحت کنترل شما
فارسی خالص — بدون گلیف لاتین. برای صفحات تکزبانه فارسی. ۹ وزن.
VARIABLE FONT
YekanXVF
✕ NO ITALIC — weight axis only
آدمایکس
wght · 200 → animating
یک فایل — کل محور وزنی ۱۰۰–۱۰۰۰. برای انیمیشن و تنوع داینامیک.
قاعده: در هر پروژه یک سبک انتخاب کنید — اعداد فارسی در روایت، اعداد لاتین در داده. ترکیب هر دو در یک پاراگراف، حس ناهماهنگ ایجاد میکند.
iv.YekanXVF — فونت متغیرVARIABLE FONT · INTERACTIVE DEMO
یک فایل woff2 که کل محور وزنی ۱۰۰ تا ۱۰۰۰ را پوشش میدهد. با font-variation-settings: 'wght' N وزن بهصورت پیوسته کنترل میشود — ایدهآل برای انیمیشن تایپ و تنوع context-محور.
font-variation-settings: 'wght' 200
دانش سازمان شما، تحت کنترل شما.
100 · Thin500 · Medium1000 · Heavy
v.پشته انگلیسیENGLISH STACK
Manrope برای display و body انگلیسی — x-height بالا، همتراز با YekanX. Spectral برای لحن ادیتوریال و italic واقعی. IBM Plex Mono برای کد، داده، badge.
قاعده: italic واقعی از V7 بارگذاری شده — وزنهای 300i–700i. برای تأکید editorial از Spectral italic استفاده کنید. Manrope italic برای تأکید ملایم در running text.
ii.Body · Manrope
Paragraph · UI · Caption
Manrope
AdamX deploys inside your data center. Every answer is cited to your corpus — air-gapped, audited, fully under your control.
Caption at weight 300 on Slate-600. Line-height 1.65–1.75.
قاعده: Body 400، emphasis 600. اندازه: 15px محصول، 17px marketing.
iii.Editorial · Spectral
Quote · Pull-quote · Chapter number
Spectral ✓ ITALIC SINCE V4
Pacta sunt servanda.
A platform built on primary sources.
Sovereign. Cited. Audited.
قاعده: تنها منبع italic ادیتوریال در سیستم. وزنهای 300i · 400i · 500i بارگذاری شده. فقط تأکید editorial، حداقل 24px. هرگز برای body.
iv.Mono · IBM Plex
Code · Data · Badge · API
IBM Plex Mono ✓ ITALIC V7
v2.0 / 419K
EDITION · 2026
/* deployed inside your data center */
curl -X POST https://api.adamx.ir/v2/query
قاعده: italic واقعی از V7 بارگذاری شده — وزنهای 300i · 400i · 500i. italic فقط برای کامنت کد و placeholder. تگ uppercase، شناسه، نسخه — همیشه LTR.
vi.مقیاس تایپTYPE SCALE
token
size
line-h
weight
کاربرد · نمونه زنده
display-2xl
88/96px
1.02
200/900
یک سیستم طراحی، یک زبان
display-xl
64/72px
1.05
200/900
تیتر صفحه اصلی
display-lg
48/56px
1.1
200/900
تیتر فصل کاتالوگ
heading-xl
36/44px
1.2
600
تیتر بخش بزرگ
heading-lg
28/38px
1.25
600
تیتر کارت بزرگ
heading-md
22/30px
1.35
700
تیتر کارت متوسط
body-lg
17/30px
1.85
300/600
پاراگراف marketing
body
15/28px
1.85
300/600
پاراگراف اصلی محصول
body-sm
13/22px
1.7
400/600
توضیح، لیبل ثانویه
caption
11/18px
1.6
300/500
caption، footnote، meta
label
10/14px
1.4
600+0.28em
LABEL · KICKER · TAG
چرا line-height بالا برای فارسی؟ حروف فارسی نقطهگذاری بالا و پایین خط دارند. فاصلهی خط 1.85+ تنفس کافی به نقاط میدهد. در انگلیسی میتوان تا 1.65 پایین آورد.
vii.استایلهای ایتالیک — صحیح در مقابل مصنوعیITALIC STYLES · REAL vs SYNTHETIC · V7
ایتالیک مصنوعی (synthetic italic) که مرورگر با کجکردن گلیف ایجاد میکند، در فونتهای فارسی کاملاً ممنوع است — حروف شکسته میشوند. در سیستم طراحی آدمایکس فقط سه فونت italic واقعی دارند؛ هر کدام نقش مشخصی دارد. در V7 بارگذاری italic برای Manrope و IBM Plex Mono اضافه شد.
✕ italic
YekanX · YekanXFaNum · YekanXNoEn · YekanXVF: هیچکدام فایل italic ندارند (IRANYekanX-*-Italic.woff2 وجود ندارد). هرگز font-style: italic را با این فونتها بهکار نبرید. مرورگر بهجای italic واقعی، گلیف را مصنوعاً کج میکند و حروف متصل فارسی از هم میشکنند. برای تأکید در متن فارسی از کنتراست وزن (مثلاً 900 vs 300) استفاده کنید.
✓ REAL ITALIC
Since V4
Spectral
300i
Pacta sunt servanda.
400i
A platform built on primary sources.
500i
Enterprise. Sovereign. Cited.
نقش: تنها منبع لحن ادیتوریال در سیستم. برای pull-quote، تیتر فصل، و تأکید بصری انگلیسی در hero section. حداقل سایز: 24px. هرگز برای body text بهکار نرود. وزنهای بارگذاریشده: 300i · 400i · 500i.
✓ REAL ITALIC
NEW · V7
Manrope
300i
Knowledge, under your control.
400i
Air-gapped. Audited. Cited.
600i
Deploy inside your data center — version 2.0
نقش: تأکید ملایم در متن انگلیسی running text. برای تفاوت context از regular. جهت LTR اجباری. وزنهای بارگذاریشده در V7: 300i · 400i · 500i · 600i · 700i. هیچگاه در کنار Spectral italic برای یک phrase مشابه استفاده نکنید — از یکی از دو انتخاب کنید.
✓ REAL ITALIC
NEW · V7
IBM Plex Mono
300i
/* air-gapped by design */
400i
// v2.4 · indexed: 419,000 docs
500i
status: active · latency: 182ms
نقش: کامنتهای کد، مقادیر متغیر در context توضیحی، placeholder در code block. در badge و label هرگز از italic استفاده نکنید. وزنهای بارگذاریشده در V7: 300i · 400i · 500i. جهت LTR اجباری.
✕ NO ITALIC
USE WEIGHT INSTEAD
YekanX · All Variants
900
دانش سازمانی
← تأکید با وزن
300
تحت کنترل شما
← متن عادی
italic
آدمایکس مصنوعی
← ممنوع · synthetic
جایگزین italic در فارسی: ترکیب وزنهای ۹۰۰ (تأکید) با ۳۰۰ (متن) — این «کنتراست وزنی» همان نقشی را در فارسی ایفا میکند که italic در انگلیسی. برای تأکید editorial از Spectral italic در کنار متن فارسی استفاده کنید.
فونت · Font
Italic واقعی
بارگذاری
وزنهای italic
Spectral
Yes · V4
V4+
300i · 400i · 500i
Manrope
Yes · V7
V7+
300i · 400i · 500i · 600i · 700i
IBM Plex Mono
Yes · V7
V7+
300i · 400i · 500i
YekanX (all)
✕ None
—
جایگزین: کنتراست وزن ۹۰۰ / ۳۰۰
قاعدهی V7: اگر italic نیاز است، ابتدا بپرسید «کدام زبان؟» — فارسی: هرگز italic، فقط وزن. انگلیسی editorial: Spectral italic. انگلیسی running text: Manrope italic. کد: IBM Plex Mono italic. هرگز دو استایل italic مختلف را در یک جمله ترکیب نکنید.
فصل چهارم · فاصله و چیدمان
یک مقیاس ۴-pt، یک grid ۱۲ ستونه.
فاصلهها بر پایهی ضرایب ۴ پیکسل، grid اصلی ۱۲ ستونه با gutter ۱۶px، و breakpointهای متعارف وب.
IV
CH. 04
i.مقیاس فاصلهSPACING SCALE
space-1
4px
space-2
8px
space-3
12px
space-4
16px
space-6
24px
space-8
32px
space-12
48px
space-16
64px
space-24
96px
space-32
128px
قواعد: داخل یک کامپوننت از space-2–space-4، بین کامپوننتهای مرتبط space-6–space-8، بین section در صفحه space-16–space-24، حاشیهی صفحه روی دسکتاپ space-12–space-24.
آدمایکس عمدا گوشههای تیز یا با شعاع بسیار کم استفاده میکند تا حس سند رسمی حفظ شود. سایهها ملایم، با offset عمودی، نه گرد و دور.
radius-0
radius-0
0px · پیشفرض
کارت، دکمه، input، badge
radius-1
radius-1
2px · ظریف
tag، chip کوچک
radius-2
radius-2
4px · حداکثر
avatar، تصویر گرد
elev-1
elevation-1
1pt
card raised
elev-2
elevation-2
8pt
dialog، popover
iv.توکنهای سایه — ۵ سطح ارتفاعSHADOW TOKENS · 5-LEVEL ELEVATION
پنج توکن سایه بر اساس ارتفاع تعریف شدهاند. در Light Mode از rgba navy، در Dark Mode از rgba black با شدت بالاتر. هرگز از سایههای رنگی استفاده نکنید.
--shadow-1
کارت معمولی، chip
--shadow-2
dropdown، tooltip
--shadow-3
popover، panel شناور
--shadow-4
dialog، modal
--shadow-5
notification، toast مهم
Dark Mode: در dark mode تفاوت بصری elevation باید از border روشنتر هم بیاید — نه فقط سایه. هر کارت در dark mode border 1px با var(--rule) داشته باشد.
v.Z-Index و اندازههای ContainerZ-INDEX SCALE · CONTAINERS
token
مقدار
کاربرد
--z-base
0
عناصر عادی، کارت، متن
--z-raised
10
کارت hover-lifted، sticky header داخلی
--z-sticky
100
navbar، sidebar sticky
--z-dropdown
500
dropdown، select menu، datepicker
--z-modal
1000
modal، dialog، scrim
--z-toast
2000
toast، notification — همیشه بالاترین
--container-md
860px
صفحه مستندات، document view
--container-lg
1100px
dashboard، اپلیکیشن
--container-xl
1320px
landing marketing
vi.نقاط شکست — ۶ breakpointBREAKPOINTS · 6 NAMED
سیستم بر اساس mobile-first طراحی شده. ۶ breakpoint نامگذاری شده — هر کدام با container، gutter و sidebar behavior مشخص.
نام
حداقل
Container
Gutter
رفتار
xs
0
100%
16px
تکستون، drawer ناوبری
sm
480px
100%
20px
تکستون، card stack
md
768px
720px
24px
دو ستون، sidebar رویهمرفته
lg
1024px
960px
32px
sidebar ثابت، grid کامل
xl
1280px
1100px
40px
layout کامل با sidebar + content
2xl
1600px
1320px
48px
صفحههای ultra-wide، max container
قاعده: از --container-sm/md/lg/xl بهجای عرض hardcode شده استفاده کنید. بین breakpointها از width:100% بدون محدودیت.
vii.مشخصات focus ringFOCUS RING SPEC · KEYBOARD A11Y
Focus ring مشترک برای تمام المانهای تعاملی — هرگز حذف نشود. در Light Mode از navy، در Dark Mode از gold استفاده میشود تا کنتراست در هر دو تم حفظ شود.
LIGHT MODE
box-shadow: 0 0 0 3px rgba(10,26,46,.14)
DARK MODE
box-shadow: 0 0 0 3px rgba(214,182,115,.22)
INPUT FIELD
border-color + box-shadow: --ring
الزام WCAG 2.2: Focus indicator باید حداقل perimeter ۲px با کنتراست ۳:۱ نسبت به پسزمینه داشته باشد. توکن --ring این الزام را برآورده میکند — هرگز outline:none بدون جایگزین.
فصل پنجم · آیکونوگرافی
خطوط یک پیکسلی، نه pictogramهای پر.
آیکونها از کتابخانهی Lucide یا Phosphor (light/regular) با stroke ۱.۵ پیکسل. هرگز آیکونهای پر یا رنگی استفاده نکنید — بهجز موارد خاص (مثل warning).
V
CH. 05
i.نمونههاSAMPLE SET
grid
shield
clock
stack
document
refresh
user
mail
bookmark
search
menu
info
warning
check
close
arrow-rtl
14px
inline
16px
button
20px
nav
24px
card
32px
feature
فصل ششم · اجزای رابط
قطعات ساده، با ترکیب قدرتمند.
هر کامپوننت با variantها، state-ها (default, hover, focus, disabled)، و قواعد ترکیب. توکنهای CSS قابل کپی در هر کارت.
VI
CH. 06
i.BUTTON · دکمه
پنج variant، سه اندازه. Primary برای CTA اصلی هر صفحه فقط یک عدد. Accent (burgundy) برای CTAهای پرخطر یا destructive. Gold برای پلنهای premium یا badge برتر.
PRIMARY
SECONDARY
ACCENT
GHOST
BLOCK
ii.BADGE · نشان
برای متادیتا، وضعیت، تگ. همیشه uppercase با letter-spacing بالا.
On-PremiseEnterpriseBetaActiveSuspendedDraft
iii.FIELD · ورودی
label بالای فیلد، uppercase. focus ring با Navy-700.
نام رسمی سازمان شما — همانطور که در اسناد ثبتی ذکر میشود.
— ایمیل وارد شده معتبر نیست.
iv.CARD · کارت روشن
پسزمینهی سفید، مرز Ivory-300، padding ۲۴px.
EVIDENCE PACK
۴۱۹٬۰۰۰ سند سازمانی
از همهی واحدهای سازمان — منابع انسانی، مالی، عملیات، فنی — ایندکسشده و در دسترس بدون اتصال به اینترنت.
v.CARD · کارت تیره
برای hero card، CTA، نقلقول.
ENGINEERING NOTE
Air-Gapped by design
هیچ بایتی دیتاسنتر شما را ترک نمیکند — حتی برای بهروزرسانی. پچها بهصورت بستهی آفلاین تحویل میشوند.
vi.TABLE · جدول
برای دادهی متراکم. اعداد در Plex Mono، تراز چپ.
سند
واحد
تاریخ
اعتبار
آییننامهی منابع انسانی — نسخه ۴.۲
منابع انسانی
1403/02/13
Active
سیاست خرید سرمایهای — ابلاغ ۸۲۰
مالی و خزانه
1404/09/12
Active
بخشنامه ۱۲/۳۹۲ — ساختار جدید
برنامهریزی
1402/05/04
Repealed
vii.NAVIGATION · ناوبری
Navigation bar تیره برای marketing، روشن برای داخل اپ. RTL پیشفرض.
xi.Loading states — چهار نوعLOADING · SKELETON · SPINNER · PULSE · STREAM
هر loading state یک کاربرد دقیق دارد. Skeleton وقتی شکل محتوا مشخص است، spinner وقتی مدت زمان نامشخص، pulse برای AI thinking، stream برای پاسخ real-time.
Spinner · مدت نامشخص
Pulse · AI thinking
پاسخ از منبع داخلی بازیابی شدStream · real-time
xii.Empty state و ToastEMPTY STATE · TOAST
هنوز سندی پیدا نشد
ایندکس سازمانی در حال پردازش است. پس از اتمام، پاسخها از منابع داخلی ارجاع داده میشوند.
ایندکس جدید با موفقیت ساخته شد — ۴۱۹٬۰۰۰ سند فعال.
۳ سند نیاز به بازبینی دارند — قبل از ارجاع بررسی کنید.
اتصال به منبع دادهی داخلی برقرار نشد — تیم فنی مطلع شد.
xiii.Checkbox · Radio · SwitchFORM CONTROLS · V8
کنترلهای فرم: checkbox برای چند انتخاب، radio برای تکانتخاب، switch برای toggle. همه با focus ring، hover و disabled state.
xiii.aCHECKBOX
xiii.bRADIO
xiii.cSWITCH
ایندکس خودکارحالت dark خودکاراشتراک فعال
xiv.Input Group · ورودی غنیشدهINPUT GROUP · ICON + SUFFIX · V8
Input group برای ورودیهایی که نیاز به آیکون یا پسوند دارند — جستجو، مقادیر واحددار، ورودی با کد کشور.
جستجو با آیکون
@adamx.ir
مقدار با واحد
سند
ms
xv.Avatar · آواتارAVATAR · USER + AI VARIANTS · V8
آواتار برای نمایش کاربر انسانی، دستیار هوش مصنوعی، و سازمان. چهار واریانت رنگی، چهار اندازه.
م ن
XL · 64px Default
م ن
LG · 48px
م ن
MD · 36px
م
SM · 28px
AI
AI Assistant navy + gold
ر م
Accent burgundy
م
Gold premium
م
AI
ر
Avatar group overlap −10px
xvi.TooltipTOOLTIP · HOVER LABEL · V8
Tooltip برای توضیح کوتاه روی hover — حداکثر ۸۰ کاراکتر. روی عناصر آیکون-تنها اجباری. هرگز اطلاعات ضروری داخل tooltip نگذارید.
⌘S — ذخیرهی خودکار فعال است
راهنمای ایندکسگذاری
دسترسی لازم است: Admin یا Data Manager
xvii.Progress BarPROGRESS · DETERMINATE · V8
Progress bar برای عملیاتهایی با درصد مشخص — آپلود، ایندکس، پردازش. برای عملیاتهای نامعلوم از spinner استفاده کنید.
Segmented control برای ۲–۳ گزینهی متقابلالحصول. برای بیش از ۳ گزینه از tabs یا dropdown استفاده کنید.
دو گزینه
سه گزینه
xix.Modal · DialogMODAL DIALOG · ANATOMY · V8
Dialog برای تایید عملیات مهم یا فرمهای کوتاه. حداکثر عرض: 440px. ساختار: head (title + close) · body · foot (actions).
حذف پایگاه دانش
آیا مطمئنید؟ این عملیات برگشتپذیر نیست. تمام ۴۱۹٬۰۰۰ سند ایندکسشده و تنظیمات مربوط به آنها حذف خواهد شد.
قاعدههای dialog: تنها یک dialog در هر زمان. با Escape قابل بستن. focus به اولین عنصر تعاملی. backdrop کلیک قابل تنظیم. اگر destructive است، دکمهی تایید همیشه btn-accent.
xx.Command PaletteCOMMAND PALETTE · ⌘K · V8
Command palette با ⌘K (یا Ctrl+K) باز میشود. برای سیستمهای پیچیده با action-های زیاد. گروهبندی شده، keyboard-first، با shortcut نمایش.
رابط گفتوگوی ENAIA — دو حالت: پیام کاربر (navy) و پاسخ هوش مصنوعی (سفید). Citation chip برای ارجاع به منابع داخلی — اساسیترین ویژگی یک دستیار سند-محور.
م ن
سیاستهای مرخصی استحقاقی در سازمان چگونه است؟
AI
براساس آییننامهی منابع انسانی (نسخه ۴.۲)، هر کارمند رسمی در سال اول ۳۰ روز مرخصی استحقاقی دارد. از سال دوم به بعد، ۵ روز اضافه میشود تا سقف ۴۵ روز.
مرخصی_سالانه = ۳۰ + (سنوات - ۱) × ۵; max = ۴۵
آییننامه منابع انسانی · ص ۱۸دستورالعمل ۳۴/۱۴۰۳ · بند ۷
Citation chip: هر chip یک منبع مستقل را ارجاع میدهد. با کلیک، preview یا لینک به سند مرتبط. رنگ: navy-50 (Light) · navy-900 (Dark). در یک پیام حداکثر ۵ citation chip.
xxii.Illustration PlaceholderILLUS FRAME · SLOT SYSTEM · V8
Frameهای placeholder برای نشان دادن جایگاه تصویر در طراحی — با stripe pattern و برچسب data-slot. در تحویل نهایی با تصویر واقعی جایگزین میشوند.
ترکیب کامپوننتها در قالب الگوی صفحه: hero، شبکهی قابلیت، آمار، فوتر. هر الگو ساخته شده تا بدون تغییر روی landing، کاتالوگ HTML، و داخل اپ کار کند.
VII
CH. 07
i.HERO · صفحهی اصلی
pattern/hero-dark
دستیار هوش مصنوعی سازمانی
دانش سازمان شما، تحت کنترل شما.
یک دستیار هوش مصنوعی برای کل سازمان — از منابع انسانی تا مالی، عملیات و سیاستگذاری. مستقر در دیتاسنتر داخلی شما؛ هر پاسخ، با ارجاع به منابع سازمانی. هیچ بایتی به اینترنت نمیرود.
ii.FEATURE GRID · شبکهی قابلیت
pattern/features-3col
i.
مدیریت دانش سازمانی
پاسخگویی مستند به منابع داخلی همهی واحدها با Evidence Pack. دسترسی به ۴۱۹٬۰۰۰ سند از ۱۱ مرجع رسمی.
ii.
دستیاران چندعاملی
عامل تحلیلگر برای بررسی اسناد، عامل تنظیمگر برای پیشنویس گزارشها، عامل پژوهشگر برای استخراج بینش از دادهی سازمان.تولید پیشنویس، عامل پژوهشگر برای استخراج رویه.
iii.
سفارشیسازی سازمانی
تیم مهندسی آدمایکس پلتفرم را برای ساختار، فرایندها و حاکمیت دادهی سازمان شما تطبیق میدهد. حاکمیت دادهی سازمان شما تطبیق میدهد.
iii.STATS BAND · نوار آمار
pattern/stats-dark
419K
سند سازمانی
از همهی واحدها
182ms
میانگین پاسخ
local-only inference
100٪
Air-Gapped
بدون اتصال به اینترنت
12×
سازمان فعال
از وزارت تا هلدینگ خصوصی
iv.FOOTER · پاورقی
pattern/footer-dark
فصل هشتم · حرکت و تعامل
حرکت کم، با معنا.
چهار اصل: حرکت داستان میگوید، زیر ۵۴۰ms، فقط opacity و transform، reduced-motion اجباری. پنج easing، پنج مدت زمان، چهار recipe اصلی.
VIII
CH. 08
i.اصول — چهار قاعدهFOUR PRINCIPLES
M.01 · حرکت داستان میگویداگر نمیتوانید بگویید این انیمیشن چه چیزی را توضیح میدهد، حذفش کنید. هیچ حرکت تزئینی در سیستم مجاز نیست.
M.02 · زیر ۵۴۰ms بمانیدهر چیز طولانیتر کُند احساس میشود، حتی اگر زیبا باشد. درخواست کاربر را سریع تایید کنید.
M.03 · فقط opacity و transformهرگز width، height، top، left را animate نکنید — layout thrash ایجاد میکند. GPU-only: translateX/Y/Z، scale، rotate، opacity.
M.04 · reduced-motion اجباریوقتی OS میخواهد، animation به opacity-only یا صفر کاهش مییابد. این یک الزام دسترسپذیری است، نه انتخاب.
ii.پنج easing — منحنیهای کاملFIVE EASING CURVES
EASE-ENTER · ورود
cubic-bezier(0.16, 1, 0.3, 1)
--ease-enter
ورود عناصر، باز شدن dialog، toast. شروع سریع، پایان نرم — حس «جا گرفتن».
EASE-EXIT · خروج
cubic-bezier(0.4, 0, 1, 1)
--ease-exit
خروج عناصر، بستن منو. شروع نرم، پایان سریع — حس «حذف قطعی».
EASE-INOUT · بین حالت
cubic-bezier(0.65, 0, 0.35, 1)
--ease-inout
tab switch، carousel، انتقال بین view. متعادل — هم ورود، هم خروج نرم.
EASE-DECEL · فرود
cubic-bezier(0, 0, 0.2, 1)
standard enter
ورود از پایین یا بیرون — شروع سریع، فرود نرم. برای sheet، drawer، modal enter.
SPRING · لحظه خاص
cubic-bezier(0.34, 1.56, 0.64, 1)
spring only
فقط برای confirm/save/copied. یک overshoot کوچک — حس فیزیکی رضایتبخش.
LINEAR · ممنوع
linear
NEVER
فقط برای progress bar و skeleton shimmer مجاز است. در هیچ interaction دیگری استفاده نشود.
iii.مقیاس مدت زمانDURATION SCALE
token
مقدار
کاربرد
--dur-fast
80ms
hover state، focus ring، micro-interaction. باید آنی حس شود.
--dur-normal
180ms
ورود/خروج کامپوننت، tooltip، tab switch.
--dur-slow
300ms
انتقال صفحه، slide panel، sheet باز شدن.
--dur-instant
80ms
tap response، ripple، رنگ hover.
--dur-slower
540ms
page transition، onboarding. حد بالا — هرگز بیشتر.
iv.Recipeهای اصلی — زندهMOTION RECIPES · LIVE DEMOS
HOVER LIFT · Button
translateY(-2px) + shadow · 180ms ease-enter
hover روی دکمه — 180ms ease-enter. فشار active — 80ms ease-exit.
SPRING POP · Confirm
scale 0.85→1 + overshoot · 540ms spring
کلیک برای اجرا — فقط spring برای confirm/save/copied. هیچ جای دیگری.
STAGGER LIST · Results
80ms delay per item · 220ms each
سند ۱ — آییننامه منابع انسانی
سند ۲ — سیاست خرید سرمایهای
سند ۳ — بخشنامه ساختار جدید
کلیک برای stagger — حداکثر ۵ آیتم. بالاتر از ۵ بدون stagger.
FADE IN · Content
opacity 0→1 + translateY 8→0 · 300ms
پاسخ از منبع داخلی بازیابی شد.
کلیک برای toggle — کاربرد: ورود محتوا، نتیجه جستوجو، message.
وقتی شکل محتوا مشخص است و بارگذاری بیش از ۳۰۰ms. بدون spinner در این موارد.
v.کارئوگرافی — ترتیب زمانیCHOREOGRAPHY · TIMING SEQUENCES
وقتی چند چیز با هم حرکت میکنند، ترتیب اهمیت دارد. تغییری که کاربر درخواست کرده اول، عناصر ثانویه بعد.
sequence
step 1 · 0ms
step 2 · +80ms
step 3 · +160ms
Dialog باز شدن
scrim fade in · 220ms
modal scale 0.96→1 + fade · 300ms
focus به اولین field
پاسخ AI
avatar scale 0.8→1 · 220ms
bubble fade up 8px · 300ms
token stream شروع
Citationها
bubble settle · 180ms
chipها stagger 80ms
status row fade last
تغییر تم
CSS tokens cross-fade · 220ms
icon swap · 80ms rotate
layout تغییر نمیکند
قواعد reduced-motion: اگر کاربر prefers-reduced-motion: reduce دارد، همهی transitionها به 0ms تبدیل میشوند — بهجز fade سادهی opacity که اطلاعات جابجایی میدهد. قاعدهی @media در CSS سیستم از پیش تنظیم شده است.
فصل نهم · بومیسازی
فارسی، انگلیسی، هر دو در خانه.
بومیسازی فقط ترجمه نیست — جهت متن، نوع اعداد، تاریخ، فاصله، و آرایهی کلید/مقدار همگی باید درست باشند. این فصل قواعد عملی برای هر تیم است.
IX
CH. 09
i. جهت و آینهسازی
پیشفرض RTL: متن از راست، آیکون فلش رو به چپ (←)، نمودار پیشرفت از راست به چپ.
Default LTR for English: text from left, arrow →, progress L→R.
آینهسازی نشود: ساعت، نمودارهای زمانی (همیشه چپ به راست)، لوگو، اعداد، video controls.
آیکونها: Lucide در RTL خودکار آینه نمیشوند — برای فلش، از نسخهی mirror دار استفاده کنید.
ii. اعداد و واحدها
در متن روایی فارسی: «۴۱۹٬۰۰۰ سند» — اعداد فارسی، با جداکنندهٔ ۳ رقمی فارسی (U+066C).
In English narrative: "419,000 documents" — Western digits, comma separator.
در داده، API، شناسه، badge، metadata: همیشه 419000 در IBM Plex Mono — مستقل از زبان.
تاریخ: فارسی → ۱۴۰۵/۰۲/۱۳، انگلیسی → 2026-05-04 (ISO).
پول: فارسی → ۱۲٬۳۴۰٬۰۰۰ تومان، انگلیسی → IRR 12,340,000.
درصد: ٪۹۸ یا ۹۸٪ (هر دو قابل قبول، اما در سیستم یک سبک ثابت).
iii. کشیده و علائم فارسی
از نیمفاصله (U+200C) برای «میتوان»، «بهرهبرداری»، «دستنوشته» استفاده کنید — نه فاصلهی کامل.
«ی» و «ک»: همیشه فارسی، نه عربی. اعداد همیشه فارسی در روایت.
گیومه: «جمله» — با گیومهی فارسی، نه " ".
خط تیره: — em-dash برای جداسازی جمله، - hyphen برای ترکیب.
کشیده (ـ) برای زیبایی ممنوع — فقط در طراحی گرافیکی، نه متن قابل کپی.
iv. تعادل دو زبان روی یک صفحه
«پلتفرم AdamX برای سازمان شما.» — کلمهٔ لاتین در دل فارسی، با فونت Manrope و کمی سیلی نسبت به متن فارسی.
اندازهی متعادل: متن لاتین در دل فارسی، باید ۹۵٪ سایز اطراف باشد (نه ۱۰۰٪، که بزرگتر دیده میشود).
اعداد لاتین در فارسی: فقط برای دادهی فنی (نسخه، شناسه، API). در روایت همیشه فارسی.
تگهای uppercase: همیشه لاتین در Plex Mono — مثل «ON-PREMISE» — حتی در نسخهی فارسی صفحه.
v.همتراز دو خط پایهBILINGUAL X-HEIGHT PAIRING
YekanX در اندازهی مشابه x-height حدود ۸٪ بزرگتر از Manrope دارد. در متن مختلط، متن فارسی داخل جمله لاتین را ۱px کوچکتر ست کنید تا دو خط پایه بصری تراز بمانند.
لاتین 16px · YekanX 15px
Black-Scholes (بلک-شولز) prices European options assuming continuous trading and log-normally distributed returns — widely used in بازارهای مالی globally.
16px Latin · 15px YekanX via bdi rule
YekanX 16px · Manrope 15px
مدل Black-Scholes برای قیمتگذاری اختیار اروپایی بهکار میرود و فرض میکند بازدهها توزیع log-normal دارند.
16px YekanX · 15px Manrope via bdi rule
قاعده کد: از selector bdi[dir=rtl] و p:lang(fa) برای اعمال خودکار استفاده کنید. هرگز font-size را روی هر عنصر inline ست نکنید — یک CSS rule واحد سراسری کافی است.
فصل دهم · کاربرد
یک سیستم، چهار سطح اجرا.
سیستم طراحی برای چهار سطح ساخته شده: کاتالوگ چاپی، کاتالوگ دیجیتال، لندینگ marketing، و اپلیکیشن محصول. هر سطح، قواعد مشترک را بهسبک خودش پیاده میکند.
X
CH. 10
i.
کاتالوگ چاپی
A4 · 210×297mm · ۴-۸ صفحه
حاشیهی صفحه: ۱۴mm از هر طرف. خط chrome در ۱۴mm.
تایپ: YekanX 200/900 برای تیتر display، YekanXFaNum برای متن اعداد فارسی.
اندازهی متن: حداقل ۱۲pt — هرگز پایینتر.
رنگ: عمدتا مشکی روی ایوری (بدون atomization). Navy-800 فقط برای صفحهی جلد و فوتر CTA.
عددها: فارسی در روایت، لاتین در footer و metadata.
هر صفحه: شمارهی صفحه (02 / 04)، عنوان فصل بالا، wordmark پایین.
ii.
کاتالوگ دیجیتال
HTML · interactive · embed-able
همان ساختار چاپی، اما با اسکرول پیوسته یا flipbook.
تعامل ظریف: fade برای پاراگرافها در ورود، hover روی کارتها (Navy-50 background).
CTAها فعال و قابل کلیک — لینک به فرم تماس، دانلود PDF.
دو نسخه: اسکرول بلند (lead-friendly) و صفحهبهصفحه (مدیریتی).
پرینت: همان لایهی @media print — هر صفحه روی A4.
iii.
لندینگ marketing
adamx.ir · public site
Hero با pattern hero-dark + CTA طلایی (Gold).
سکشنها از Pattern Library: feature grid، stats band، testimonial، footer.
ناوبری: navy تیره، sticky از scroll. logo + ۵ منوی اصلی + CTA.
کانورژن: حداکثر ۲ CTA در hero، ۱ در هر سکشن، ۱ در footer.
تم: روشن پیشفرض، تم تیره بهعنوان آیندهی نقشه راه (با همان توکنها).
UI تعاملی: focus ring حتمی، keyboard nav کامل، ARIA labels.
عملکرد: virtual list برای جدولهای بزرگ، debounce جستوجو، optimistic update.
state-های empty / loading / error با همان voice و illustration ساده.
یک سیستم، یک نقطهی حقیقت. توکنهای CSS این فایل (--navy-800، --ivory-100، …) باید مستقیما در Figma library و در tailwind config محصول استفاده شوند. هر زمان توکن جدیدی نیاز شد، اول اینجا اضافه میشود، سپس در ابزارها.
فصل یازدهم · بررسی حرفهای تم
رنگ در دو تم — تحلیل کامل سیستم.
این فصل یک بررسی حرفهای و صادقانه از رفتار پالت در Dark Mode و Light Mode است — نه توصیف، بلکه تحلیل. کدام ترکیبها کار میکنند، کجا کنتراست آسیب میبیند، چه چیزی اجباری است و چه چیزی اختیاری.
XI
CH. 11
i.جدول بررسی — یافتههای اصلیAUDIT FINDINGS
بخش / توکن
تحلیل
وضعیت
ink on bg · Lightnavy-800 / ivory-50
کار میکند — عالی. نسبت کنتراست ~15:1، بالاتر از AAA. گرمای ivory پسزمینه خستگی چشم را کاهش میدهد نسبت به سفید خالص. این ترکیب را تغییر ندهید.
AAA · 15:1
ink on bg · Darkivory-100 / navy-900
کار میکند — خوب. نسبت ~13:1. ivory-100 روی navy-900 گرم و خوانا است. اما ivory-50 (سفیدتر) روی dark ممکن است خیلی درخشنده باشد — از ivory-100 یا ivory-200 استفاده کنید.
AA+ · 13:1
muted text · Dark--muted در dark mode
نیاز به توجه — اصلاح شد. نسخه قبلی (V4) از #9CAAC0 استفاده میکرد که فقط ~4.2:1 داشت — زیر AA. V5 آن را به #A8B8CC (5.1:1) ارتقا داده. برای caption و footnote که زیر 14px هستند، از مقدار روشنتر #B8C8D8 استفاده کنید.
اصلاح شدAA · 5:1
accent kickers · Dark--accent در dark mode
مشکل اصلی — اصلاح شد. V4 از #E8A1AE (صورتی روشن) استفاده میکرد که از concept Burgundy-Primary اشتباه به dark mode نشت کرده بود. V5 آن را به gold-500 (#D6B673) تغییر داده. طلایی روی navy کنتراست 6.9:1 دارد و با هویت برند هماهنگ است.
اصلاح شد6.9:1
border / rule · Dark--rule در dark mode
مرز بسیار کمرنگ — بهبود یافت. V4 از #1F345A استفاده میکرد که روی navy-900 تقریبا نامرئی بود. V5 آن را به #243A62 ارتقا داده. در dark mode مرزها باید کمی روشنتر از light mode باشند تا سلسلهمراتب سطح مشخص بماند.
بهبود یافت
surface hierarchy · Darkbg / bg-2 / surface
تفکیک کافی است — پایش کنید. bg=#08152A، bg-2=#0F2236، surface=#11243E. تفاوت بین bg و surface تقریبا 3 گام navy است. این برای اکثر screen اما در محیطهای خیلی تاریک (OLED) ممکن است کافی نباشد. گزینه: surface را به #152C4A ارتقا دهید اگر کارتها مبهم دیده شدند.
قابل قبول
gold on navy · اصلیaccent-soft / logo glyph
بهترین ترکیب سیستم. gold-600 (#C8A55B) روی navy-800 کنتراست 6.9:1 دارد — مناسب برای تیتر و لینک در dark. gold-500 روی navy-700 (سطح surface) کنتراست 5.8:1 — AA برای ۱۴pt+. این ترکیب را در dark mode بهعنوان accent اصلی حفظ کنید.
OPTIMAL
burgundy on darkbtn-accent / signal
مشکلساز — استفاده محدود. burg-700 (#8B2231) روی navy-800 کنتراست تنها ~2.8:1 دارد — زیر AA. در dark mode از burgundy فقط برای signal-danger و never برای متن استفاده کنید. دکمهی accent در dark mode باید به gold-primary تبدیل شود.
مشکل · 2.8:1
glass / blur effectstheme-toggle, panel
در light mode احتیاط، در dark mode مجاز. backdrop-filter: blur روی light mode ممکن است روی سطح ivory-50 ناخوانا باشد. در dark mode با پسزمینهی navy تیره خوب کار میکند. اگر glass effect به کار میرود، یک border solid نازک (1px rgba(255,255,255,.12)) حتما اضافه کنید.
احتیاط در light
patterns (hero/stats/footer)بخشهای navy hardcoded
در هر دو تم یکسان — اشکالی ندارد. این patternها رنگ hardcoded navy دارند و در dark/light یکسان رندر میشوند. چون خودشان navy هستند، با dark mode تناقضی ندارند. فقط border بین doc و pattern در dark mode ممکن است نامرئی شود — یک border-top 1px اضافه کنید.
مجاز
shadow / elevation · Darkbox-shadow در dark
سایههای light mode در dark بیمعنا هستند. سایههای روشن (rgba(8,21,42,.35)) در dark mode دیده نمیشوند. در dark mode برای elevation از border روشنتر (surface border) بهجای shadow استفاده کنید، یا از background highlight (کارت 1 گام روشنتر از body). doc box-shadow را در dark mode باید به سایهی تیرهتر تبدیل کنید.
نیاز به بازنگری
ii.جفتهای کنتراست — مقایسه مستقیمCONTRAST PAIRS · SIDE BY SIDE
متن اصلی روی ایوری
15.2 : 1 · AAA
navy-800 / ivory-50 · Light primary
متن اصلی روی نیوی
13.1 : 1 · AAA
ivory-100 / navy-800 · Dark primary
لهجه طلایی روی نیوی
6.9 : 1 · AA
gold-600 / navy-800 · Dark accent
بُرگاندی روی نیوی
2.8 : 1 · FAIL
burg-700 / navy-800 · NOT for text
متن فرعی روی ایوری
5.8 : 1 · AA
slate-600 / ivory-50 · Light muted
متن فرعی در dark
5.1 : 1 · AA
#A8B8CC / navy-900 · Dark muted (V5)
لهجه روی ایوری
7.1 : 1 · AA
burg-700 / ivory-50 · Light accent OK
لهجه در dark (اصلاح شده)
7.8 : 1 · AA
gold-500 / navy-900 · Dark accent V5
iii.اجباری در مقابل اختیاریMANDATORY vs OPTIONAL
اجباری — کنتراست AAهر متن قابل خواندن (body، caption، label) باید حداقل 4.5:1 در هر دو تم داشته باشد. این یک الزام قانونی WCAG است، نه ترجیح طراحی. هرگز متن مهم را فقط بر اساس ظاهر رنگ تعیین نکنید.
اجباری — focus ringدر هر دو تم، focus ring باید قابل مشاهده باشد. در light mode: navy-700 + box-shadow. در dark mode: gold-500 + box-shadow. هرگز outline:none بدون جایگزین.
اجباری — تفکیک surfaceدر dark mode حداقل ۱ گام تفاوت رنگی بین bg و surface باید وجود داشته باشد تا کارتها از پسزمینه متمایز بمانند. بدون این، اطلاعات بصری سلسلهمراتب از بین میرود.
اختیاری — glass / backdrop-blurglass morphism در dark mode میتواند ظرافت اضافه کند اما اجباری نیست. در light mode باید با احتیاط استفاده شود. اگر استفاده میشود، یک fallback رنگ solid داشته باشید.
اختیاری — سایههاbox-shadow در dark mode میتواند حذف شود و بهجای آن از border روشنتر برای elevation استفاده کرد. انتخاب میان این دو سبک visual است، نه الزام.
اختیاری — تم خودکارتشخیص prefers-color-scheme و اعمال خودکار تم توصیه میشود اما کنترل دستی کاربر باید همیشه ممکن باشد و در localStorage ذخیره شود.
فصل دوازدهم · Stateهای رابط کاربری
هر رابط، چهار لحظه دارد.
Empty، Loading، Error، Success — چهار state اساسی که هر screen و هر component باید برای آنها طراحی شود. این فصل راهنمای layout و محتوا برای هر state است.
XII
CH. 12
Stateها4
سطح Empty3 variant
LoadingSkeleton · Spinner · Pulse · Stream
اتصال به Ch VIComponents
i.Empty State — سه سطحEMPTY STATE · THREE TIERS
State خالی سه سطح دارد: اولیه (هنوز دادهای وارد نشده)، بدون نتیجه (جستجو نتیجه نداد)، و دسترسی ندارید (محدودیت اجازه). هر کدام پیام، آیکون و CTA متفاوتی دارد.
TIER 1 · ONBOARDINGاولیه
اولین پایگاه دانش خود را بسازید
اسناد سازمانی خود را آپلود کنید تا ENAIA بتواند پاسخ دقیق بدهد.
قاعده: CTA مستقیم و مثبت. هدف: کمک به شروع، نه اطلاع از خالی بودن.
TIER 2 · NO RESULTSبدون نتیجه
نتیجهای یافت نشد
جستجو برای «بخشنامه ۱۴۰۲» نتیجهای در اسناد شما نداشت.
قاعده: عبارت جستجو را تکرار کنید. پیشنهاد اقدام جایگزین بدهید.
TIER 3 · NO ACCESSدسترسی محدود
دسترسی به این بخش محدود است
برای مشاهده اسناد محرمانه، با ادمین سازمان تماس بگیرید.
قاعده: دلیل محدودیت را توضیح دهید. راه حل یا مسیر بعدی مشخص کنید.
ERROR STATEخطا
خطا در بارگذاری
اتصال به سرور قطع شد. شبکهی داخلی را بررسی کنید.
قاعده: مقصر خطا را مشخص کنید. «تلاش دوباره» همیشه اول. کد خطا در footer جزئیات فنی.
ii.Loading States — انتخاب درستLOADING · DECISION GUIDE
چهار loading pattern — هر کدام برای یک موقعیت دقیق. انتخاب اشتباه تجربه را آسیب میرساند.
Skeleton — وقتی شکل محتوا مشخص استبرای فهرست، کارت، جدول — جایی که layout را میدانید. Skeleton را با ابعاد واقعی محتوا بسازید. کاربر باید آنچه میآید را حدس بزند.
Spinner — وقتی مدت زمان نامشخص استبرای عملیاتهای پسزمینه، ثبت فرم، دریافت API. اگر بیش از ۲ ثانیه طول کشید، متن «در حال پردازش…» اضافه کنید.
Pulse — وقتی هوش مصنوعی «فکر میکند»مخصوص ENAIA: وقتی مدل در حال تحلیل سوال است. ۳ نقطهی pulse که ریتم «تفکر» را نشان میدهد. حداکثر نمایش: ۱۵ ثانیه.
Stream cursor — وقتی پاسخ real-time میآیدمخصوص ENAIA: cursor چشمکزن در آخر متن در حال نوشتن. بدون هیچ چیز دیگری — cursor خودش کافی است.
بعد از هر عملیات موفق، کاربر باید بداند چه اتفاقی افتاد. سه سطح تایید بر اساس اهمیت عملیات.
TOAST — عملیات کماهمیت
ذخیره شد
تغییرات در ۱۴۰۵/۰۲/۱۳ — ۱۴:۳۲ ذخیره شدند.
مدت: ۴ ثانیه auto-dismiss. قابل بستن دستی.
INLINE — عملیات فرم
— ثبت موفق. درخواست دمو شما دریافت شد. تیم ما ظرف ۲۴ ساعت تماس میگیرد.
مدت: دائمی تا رفرش یا رفتن به صفحهی دیگر.
فصل سیزدهم · دسترسپذیری و بینالمللیسازی
WCAG 2.2 AA از روز اول.
دسترسپذیری و پشتیبانی RTL الزام انتشار هستند — نه کار تکمیلی. سیستم آدمایکس با ۶ اصل طراحی شده که در هر المان رعایت میشود.
XIII
CH. 13
هدفWCAG 2.2 AA
Keyboard100% قابل دسترس
Touch target44px حداقل
زبانهاfa · en · قابل توسعه
i.شش اصلSIX PRINCIPLES
A.01
رنگ تنها سیگنال نیست
هر state رنگی، همزمان با آیکون، label یا pattern همراه است. کاربر کوررنگ نباید اطلاعات از دست بدهد.
A.02
keyboard قبل از mouse
هر المان تعاملی با Tab قابل دسترس، با ترتیب منطقی، با focus ring قابل مشاهده. هیچ mouse-only رفتاری.
A.03
screen reader قصد میخواند
هر دکمه name دارد، هر آیکون aria-label، هر حالت aria-live یا role مناسب. هرگز icon-only بدون label.
A.04
touch target حداقل ۴۴px
روی موبایل، فضای قابل لمس همیشه ۴۴×۴۴px — حتی اگر ظاهر کوچکتر باشد. از padding برای بزرگ کردن target استفاده کنید.
A.05
متن تا ۲۰۰٪ zoom مقیاس میگیرد
بدون overflow افقی، بدون محتوای پنهانشده. Layout جریان دارد، نه قفلشده به pixel.
A.06
RTL همان محصول است — آینه شده
هر component در RTL آینهی کامل LTR است. آیکونهای جهتدار (مثل فلشها) flip میشوند. آیکونهای جهانی (مثل play) ثابت میمانند.
ii.Checklist · الزامات و اختیاریهاA11Y CHECKLIST
الزام
سطح
کنتراست متن body — حداقل ۴.۵:۱ روی هر پسزمینه در هر دو تم
الزامی
Focus ring قابل مشاهده — هرگز outline:none بدون جایگزین
الزامی
Touch target ≥ 44px — روی mobile/tablet
الزامی
Alt text — برای هر تصویر اطلاعاتی
الزامی
کنتراست متن کوچک ≥ ۴.۵:۱ (زیر ۱۸pt regular یا ۱۴pt bold) — WCAG AA
AA
کنتراست متن بزرگ ≥ ۳:۱ (۱۸pt+ regular یا ۱۴pt+ bold) — WCAG AA large
AA
کنتراست سیگنالها ≥ ۴.۵:۱ — رنگهای error/warning/success روی پسزمینه
AA
کنتراست متن ≥ ۷:۱ — AAA برای متن اصلی body. سیستم در حالت پیشفرض ۱۵.۲:۱ دارد.
AAA
prefers-reduced-motion — غیرفعال کردن انیمیشنهای جابجایی برای کاربران حساس
AA
language attribute — lang="fa" روی html، lang="en" روی محتوای انگلیسی داخل صفحه
AA
iii.جفتهای کنتراست — بررسی جامعCONTRAST AUDIT
تمام ترکیبهای متن-سطح که در محصول استفاده میشوند. همه باید حداقل AA (۴.۵:۱ برای متن عادی) را بگذرانند.
متن اصلی روی Ivory
15.2 : 1 ✓ AAA
ink on ivory-50
متن ثانویه
5.8 : 1 ✓ AA
slate-600 on ivory-50
متن روی navy
14.8 : 1 ✓ AAA
ivory-100 on navy-800
طلایی روی navy
6.9 : 1 ✓ AA
gold-600 on navy-800
فصل چهاردهم · پلتفرمها
یک سیستم، پنج سطح ارائه.
یک design token بر همه حاکم است — اما هر پلتفرم رفتار خاص خود را دارد. این فصل تفاوتها را مستند میکند: Web، iOS، Android، Tablet، و Print.
XIV
CH. 14
پلتفرمها5
Touch target Web32px
Touch target Mobile44px
Print body11pt
i.مشخصات هر پلتفرمPLATFORM SPECIFICATIONS
WEB
وب
body: 15px
hit target: 32px+
ناوبری: Sidebar
dark: toggle + system
hover: فعال، supplemental
font: YekanX + Manrope
citation: pill کلیکپذیر
iOS
iOS
body: 17pt
hit target: 44pt (HIG)
ناوبری: Tab bar
dark: System only
hover: ندارد
font: YekanX + SF
citation: tap to expand
ANDROID
Android
body: 16dp
hit target: 48dp (M3)
ناوبری: Bottom nav
dark: System only
hover: ندارد
font: YekanX + Roboto
citation: chip tap
TABLET
تبلت
body: 15px
hit target: 44px
ناوبری: Sidebar (landscape)
dark: toggle + system
hover: mixed
font: YekanX + Manrope
citation: pill کلیکپذیر
PRINT
چاپ
body: 11pt
hit target: ندارد
ناوبری: TOC + footnote
dark: Light only
hover: ندارد
font: YekanX + Spectral
citation: عدد footnote
ii.جدول مقایسهCOMPARISON MATRIX
ویژگی
وب
iOS
Android
تبلت
چاپ
اندازه body
15px
17pt
16dp
15px
11pt
حداقل hit target
32px
44pt
48dp
44px
ندارد
ناوبری اصلی
Sidebar
Tab bar
Bottom nav
Sidebar
TOC
Dark mode
toggle + system
system only
system only
toggle + system
Light only
Hover state
فعال
ندارد
ندارد
mixed
ندارد
Citation
pill · click
pill · tap
chip · tap
pill · click
footnote عدد
فونت system
YekanX + Manrope
+ SF Pro
+ Roboto
YekanX + Manrope
+ Spectral
iii.راهنمای چاپPRINT GUIDELINES
کاتالوگ چاپی ADAMX از همان سیستم توکن استفاده میکند اما رفتار متفاوتی دارد. از @media print برای اعمال استایلهای چاپی استفاده کنید.
فونت body: ۱۱pt / line-height: 1.6در چاپ، YekanX ۱۱pt با Spectral برای تیتر ترکیب میشود. هرگز زیر ۸pt برای footnote و caption.
رنگ: Light mode اجباریچاپ همیشه light — حتی اگر user تم تیره داشته باشد. @media print باید color-scheme: light اعمال کند.
Citation: footnote عددیcitation chip تبدیل به [عدد] inline و footnote در انتهای صفحه میشود. هر سند citation جدید شماره میگیرد.
ناوبری: TOC و page numbersidebar و topbar در چاپ مخفی میشوند. یک TOC در ابتدا و page number در footer هر صفحه.
فصل پانزدهم · Handoff و Tokens
از canvas تا commit.
یک فایل token منبع حقیقت است. به CSS، Tailwind، JSON، iOS، Android و Figma variables خروجی میدهد — همه تولید شده، نه دستنگاری. این فصل قرارداد Design و Engineering را مستند میکند.
XV
CH. 15
منبع Tokentokens/adamx.json
GeneratorStyle Dictionary
خروجیها6 پلتفرم
VersioningSemVer · weekly minor
i.آناتومی TokenTOKEN ANATOMY · JSON STRUCTURE
توکنها در سه لایه سازماندهی شدهاند: primitive (مقادیر خام رنگ)، semantic (نقشها)، و component (توکنهای خاص کامپوننت).
Major (X.0.0)تغییر breaking در نام token یا ساختار JSON — نیاز به migration guide. حداکثر سالی یک بار.
Minor (0.X.0) — هفتگیافزودن token جدید، component جدید، یا chapter جدید. Backward compatible.
Patch (0.0.X)تصحیح مقادیر، رفع اشکال، بهبود داکیومنتیشن. هر زمان لازم بود.
مالکیتDesign + Platform Engineering مشترکاً مالک system هستند. تغییر token باید Review دو تیم را داشته باشد.
iv.راهنمای مشارکتCONTRIBUTION GUIDE
چگونه به سیستم اضافه کنید بدون اینکه آن را fork کنید. هر مشارکت باید یکی از پنج مسیر زیر را طی کند.
۱
Token جدید — از طریق PR در tokens/adamx.json
اگر ارزش جدیدی نیاز است: ابتدا بررسی کنید آیا composite از tokenهای موجود ممکن است. اگر نه، در primitive → semantic → component به ترتیب اضافه کنید. PR نیاز به approve دو Reviewer دارد.
۲
Component جدید — از فصل VI پیروی کنید
Component جدید باید: فقط از tokenهای موجود استفاده کند، سه اندازه داشته باشد (sm/md/lg)، stateهای default/hover/focus/disabled را پوشش دهد، و در این design system مستند شود.
۳
Pattern جدید — composite از componentهای موجود
Pattern ترکیب componentهای موجود است — نه component جدید. اگر برای ساخت pattern نیاز به component جدید دارید، ابتدا component را عبور دهید.
۴
تغییر موجود — Migration note اجباری
هر تغییر در token موجود باید Migration Note داشته باشد: کد قدیمی → کد جدید، تاریخ deprecation، و اگر breaking است، major bump.
۵
Exception — با approval طراح اصلی
اگر هیچکدام از مسیرهای بالا جواب نمیدهند، با Lead Designer تماس بگیرید. هیچ تغییری بدون review در production نمیرود — این یک design system است، نه یک sandbox.