هویت
#BR-01آیکون اصلی — وسط /chat
آیکون مرشد — همان نشانهای که در حالت empty صفحهی /chat نمایش داده میشود. بدنه و سایر عناصر با currentColor رنگ متن را میگیرند. تنها آبجکت سمت چپ رنگ accent را بهخود میگیرد.
#BR-02لوگوتایپ
لوگوتایپ افقی با دو نسخه light/dark. حداقل ۲۴px فضای آزاد در اطراف.
#BR-03شعار اصلی
مرشد، همراه باهوشت
Tagline اصلی برند — همیشه با ویرگول. در هیرو، meta tags، و معرفیهای رسمی استفاده میشود.
#BR-04شعارهای فرعی
۶ شعار فرعی برای وب، تبلیغات، و موقعیتهای مختلف. هرکدام یک وجه از شخصیت مرشد را نشان میدهد.
از تو به یک اشاره، از من به سر دویدن.
خدمترسانی سریع
مرشد آن باشد که گیرد دست دوست.
همراهی صمیمانه
مرشد، کاربلد در تبدیل کوه به کاه.
سادهسازی پیچیدگی
مرشد، هر چه فرمایی همان.
اطاعت در خدمت
مرشد، یارِ غارِت.
همراه دائمی
کارا با من، زندگی با تو.
کاربر در مرکز
#BR-05مأموریت — Mission
- در دسترس همهی ایرانیها باشیم.
- وصل باشیم به آخرین کاربردهای هوش مصنوعی و انتقاممون رو ازش بگیریم :))
- سفرهای پهن کنیم.
- آبادی باشه...
#BR-06چشمانداز — Vision
کارا کم شه، زندگی بیشتر. زیاد!
#BR-07اصول و ارزشها
اصول کارمان. هر تصمیمی باید با لااقل یکی از اصول همجهت باشد.
صدا و زبان
اوراکل برند
تمرکز آرام
رابط از سر راه گفتوگو کنار میرود. هیچوقت با پیام رقابت نمیکند.
گرمای محاوره
رنگبندی و تایپوگرافی برای متنی که فارسی خوانده میشود کالیبره شدهاند.
دقت فنی
یک accent عمدی، grid قابل پیشبینی، WCAG AA بدون استثنا.
رنگ
پالت بر یک accent عمدی (مرشد بنفش) و یک رمپ خاکستری فشرده استوار است. رنگ کارکردی است، نه تزئینی.
primaryاکشن اصلی، CTA، لحظههای برند
primary-hoverحالت hover روی Primary
primary-deepمتن برند روی پسزمینه روشن
primary-softمعادل Primary در dark mode
primary-bgبج، چیپ، بلاک اطلاعاتی
section-deepهیرو/سکشن برند (بهندرت)
inkمتن اصلی
ink-secondaryمتن کمکی، caption
ink-tertiaryplaceholder، disabled
surfaceپسزمینه پیشفرض
surface-mutedکانتینر داخل صفحه
borderخط، divider، input outline
successوضعیت موفق
warningوضعیت هشدار
errorوضعیت خطا
#CL-02انتخاب رنگ accent — زنده روی صفحه
روی هر رنگ کلیک کن — تمام توکنهای accent این صفحه (دکمهها، آیکونها، بجها، فوکوس، sidebar فعال، LogoIcon) زنده تغییر میکنند. از این صفحه که خارج شوی، رنگها به پیشفرض برمیگردند.
پیشنمایش زنده
روی pattern برند
تایپوگرافی
یک قلم — Vazirmatn. فارسی و لاتین را با اعتبار یکسان حمل میکند.
display-lgdisplay-mdh1h2h3body-lgbody-mdbody-smcaptionمدلهای نوشتاری
الگوهای متنی که در سطح /chat رندر میشوند: خوشآمد بر اساس ساعت، markdown، code، و نشانههای زندهی پاسخ.
#WR-01خوشآمد بر اساس ساعت — ۵ حالت
صبح بخیر مسیح 👋
امروز چطور بهت کمک کنم؟
ظهر بخیر مسیح 👋
امروز چطور بهت کمک کنم؟
عصر بخیر مسیح 👋
امروز چطور بهت کمک کنم؟
شب بخیر مسیح 👋
امروز چطور بهت کمک کنم؟
آخر شبت بخیر مسیح 👋
امروز چطور بهت کمک کنم؟
#WR-02markdown داخل پیام
این یک پاراگراف پررنگ با ایتالیک و یک لینک نمونه است.
- آیتم اول لیست
- آیتم دوم لیست
- آیتم سوم
یک نقلقول کوتاه از مدل
یک متغیر inline: const message
#WR-03بلوک کد
// مرشد میخواهد سلام کند 🌱
const morshed = await chat({
model: "claude-3-5-sonnet",
vibe: "آرام، دقیق، مهربان",
font: "Vazirmatn",
brand: { primary: "#7F56D9", soul: "بنفش" },
phrases: ["هوم...", "عجب!", "جالب شد..."],
});
for await (const word of morshed.stream("سلام مسیح 👋")) {
process.stdout.write(word); // ⌫ typewriter
}
// → سلام مسیح 👋
// چطور میتونم کمکت کنم؟#WR-04نشانهی فکرکردن — کامپوننت واقعی
Spinner چرخان (¼ کمان رنگ برند، ¾ خاکستری) + متن typewriter که بین ۶ عبارت فارسی چرخش میکند. هر کاراکتر ۵۰ms، بین عبارتها ۵s مکث.
1هوم...2رفتم تو فکر...3اندکی صبر...4دنبالشم...5عجب!6جالب شد...#WR-05مکاننمای streaming
پاسخ مدل بهصورت زنده تایپ میشود
#WR-06پیام کاربر و پیام مرشد
دقیقاً مثل صفحهی /chat: پیام کاربر در چپترین حد با پسزمینهی bg-bg-secondary، پاسخ مرشد بدون پسزمینه و بدون آواتار، تمامعرض با typography اصلی.
یه ایمیل کوتاه به تیم بنویس بگو جلسهی فردا ساعت ۱۰ هست.
سلام تیم،
یادآوری میکنم جلسهی فردا ساعت ۱۰ برگزار میشود. لطفاً سر وقت حاضر باشید.
ممنون،
مسیح
- • پیام کاربر:
bg-bg-secondary+rounded-[8px]+max-w-[85%] lg:max-w-[70%] - • پیام مرشد: بدون پسزمینه، تمامعرض،
text-text-primary - • هیچ آواتار/آیکونی کنار پیام مرشد نیست
فاصله و شکل
#LY-01Spacing
xxs2pxxs4pxsm8pxmd12pxlg16pxxl24px2xl32px3xl48px4xl64px#LY-02Rounded
xs4pxsm6pxmd8pxlg12pxxl16px2xl20px3xl24pxبج
#BD-01variant × size
آواتار
#AV-01size — Unsplash photos
عکس واقعی از Unsplash. در صورت نبود تصویر، fallback با حروف اول نام نمایش داده میشود.
#AV-02گروه
فرم
#FM-01Input
#FM-02Textarea
#FM-03Divider
#FM-04ThemeToggle
کارت
#CD-01عنوان کارت
توضیح کوتاه که زیر عنوان مینشیند و زمینه را برای محتوای پایین فراهم میکند.
محتوای اصلی کارت اینجاست. میتواند پاراگراف، لیست یا هر کامپوننت دیگری باشد.
#CD-02کارت با آیکون
ترکیب آزاد header
مودال
استاندارد واقعی مرشد — همان الگوی CustomInstructionModal، ConfirmDeleteModal و ModelPickerModal. سه بلوک عمودی با padding یکدست px-6 و cascade pt-6 / pb-5 / pb-6، بدون border-b.
#MD-01آناتومی استاندارد — سه بلوک
عنوان مودال
توضیح کوتاه که زمینهی عملیات را روشن میکند. وزن سبک، رنگ tertiary.
#MD-02نمایش زنده — سه واریانت
هر کدوم رو کلیک کن — مودال واقعی @morshed/ui با pattern مرشد باز میشه.
ConfirmActionModalتأیید عمومی — Confirm با bg-brand-solid
ConfirmDeleteModalحذف — Confirm با border-error + متن error
CustomInstructionModalورودی متنی — بلوک سوم با textarea
#MD-03واریانت ModelPicker — هدر با help و X
تنها مودالی که X اختصاصی میگذاریم: انتخاب مدل هوش. هدر در یک ردیف، عنوان + آیکون help راست، X گرد ۴۴×۴۴ چپ.
انتخاب مدل
- • هدر:
px-6 pt-6 pb-3(نه pb-5) - • X غیرگرد:
h-9 w-9 rounded-lg hover:bg-bg-secondary - • هیچ shadow روی مودال نمیگذاریم — فقط
border + backdrop
#MD-04باتام شیت موبایل
روی موبایل همهی مودالها بهصورت bottom sheet در میآیند: position="bottom" (default در Modal). درگهندل بالا، swipe-to-dismiss، چسبیده به پایین صفحه.
حذف فایل
این فایل برای همیشه حذف میشود.
روی دسکتاپ بهصورت center dialog و روی موبایل بهصورت bottom sheet ظاهر میشود (responsive default).
- •
rounded-t-2xlفقط بالای sheet - • Drag handle:
w-10 h-1 rounded-full bg-fg-quaternary - • swipe-to-dismiss فعال (آستانه ۸۰px یا velocity > 0.5)
- •
max-h-[90vh]با body scroll lock
آلرت
نوار اطلاعرسانی inline بالای صفحه/کارت. ۴ سطح: error / warning / info / success. هر کدام رنگ accent اختصاصی، آیکون دایرهای دو-حلقه، و دکمهی action اختیاری.
#AL-01error · URGENT/HIGH priority
#AL-02warning · MEDIUM priority
#AL-03info · LOW priority
#AL-04success — non-dismissable نمونه
تایپهای خاص (CREDIT_DEPLETED، SUBSCRIPTION_EXPIRED) قابل dismiss نیستند — X نمایش داده نمیشود.
توست
پیامهای گذرا بالای صفحه با progress دایرهای. ۴ واریانت، duration پیشفرض ۴s، auto-dismiss با animation slide+fade.
#TO-01trigger همهی واریانتها
successعملیات موفق — رنگ سبز #12B76A
errorخطا — رنگ قرمز #F04438
warningهشدار — رنگ نارنجی #F79009
defaultاطلاع — رنگ آبی #2E90FA
- • موقعیت:
top-4، روی موبایل تمام عرض، روی دسکتاپw-96 - • Progress دایرهای ضدساعتگرد روی X (نشان زمان باقیمانده)
- • animation:
scale-95 opacity-0 -translate-y-4← in/out
تولتیپ
hover با delay ۴۰۰ms، portal روی body، پسزمینه #0C111D با نوک triangle.
#TT-01position: top
#TT-02position: bottom
اسکلتون
#SK-01حالتهای loading
آیکون
#IC-0127 آیکون
MailPhoneChevronDownChevronLeftCheckSearchGoogleGlobeSendPlusMenuSparklesStopArrowLeftDotsVerticalEditFolderFolderMinusTrashFilmClockStopwatchPlayBrainStarPinCoinEmkanatآیکون پروژه
مجموعه آیکونهای انتخابی برای پروژهها — همان لیستی که در NewProjectModal دیده میشود. با رنگ accent فعلی صفحه نمایش داده میشوند تا تغییر رنگ زنده باشد.
#PI-01انتخاب آیکون — کلیک کن انتخاب کن
activity-heartآیکون فایل
آیکونهای نوع فایل که در FileGallery و attachments استفاده میشوند. در /public/icons/file-types/*.svg ذخیره شدهاند.
#FI-01همهی نوعهای فایل
pdf
doc
docx
txt
md
csv
xls
xlsx
ppt
pptx
html
css
js
ts
tsx
jsx
json
xml
sql
java
py
c
cpp
go
rs
swift
sh
yaml
yml
jpg
jpeg
png
webp
tiff
gif
svg
eps
bmp
fig
ai
psd
indd
aep
mp3
ogg
wav
m4a
flac
aac
mp4
webm
avi
mkv
mpeg
zip
rar
exe
dmg
rssآیکون اپ و فاوآیکون
نشانههای مرشد در هر سطح: زبانهی مرورگر، Apple Touch، PWA Android/iOS. همه مشتق از LogoIcon.
#FV-01فاوآیکون
icon.svgvectorزبانه مرورگر، favicon اصلی
apple-icon.png180×180Apple Touch Icon
icon-180x180.png180×180iOS home screen
#FV-02آیکون PWA — اندروید و iOS
از manifest.json رفرنس میشود؛ دو سایز اصلی + دو نسخهی maskable برای آیکونهای adaptive اندروید.
icon-192192×192purpose: any
icon-512512×512purpose: any
maskable-192192×192purpose: maskable
maskable-512512×512purpose: maskable#FV-03آیکون نصب اپ اندروید (APK)
Capacitor، آیکونهای native را در android/app/src/main/res/mipmap-* نگه میدارد. Foreground + Background جدا (adaptive icon اندروید ۸+).
mipmap-mdpi/ ic_launcher.png + foreground + background + round
mipmap-hdpi/ …
mipmap-xhdpi/ …
mipmap-xxhdpi/ …
mipmap-xxxhdpi/ …هربار که LogoIcon یا برند تغییر میکند، باید این پنج پوشه با capacitor-assets generate دوباره ساخته شوند.
بکن، نکن
بکن
- یک اکشن اصلی در هر viewport
- تفکیک سکشن با spacing و typography، نه با تغییر پسزمینه
- Section Deep فقط برای لحظههای برند
- اعداد فارسی در متن فارسی
- border بهجای shadow برای گروهبندی استاتیک
- WCAG AA روی همهی جفت متن/پسزمینه
نکن
- تناوب Surface و Surface Muted در یک صفحه
- Primary بهعنوان پسزمینهی بزرگ
- اضافهکردن رنگ accent دوم برای تنوع
- stack کردن elevation روی elevation
- اعداد لاتین در جملهی فارسی
- placeholder بهجای label