Mosbius Design
MOSBIUS @UI

دقة جذرية:
تناغم بكسل تلو الآخر.

لكل بكسل غرض. نصمم واجهات تتمحور حول المستخدم بوضوح Apple ونزاهة Airbnb.

الوضوح

واجهات واضحة ومباشرة ومفهومة تقضي على الغموض.

النزاهة

كل جزء يخدم غرضًا فريدًا، لا شيء بالصدفة.

الاحترام

المحتوى هو الملك. الواجهة تتراجع بأناقة لتسليط الضوء على المحتوى.

التفاعل

الحركة علامة على الحياة. استجابات ذات مغزى وطبيعية لكل لمسة.

حمض نووي للتصميم

النظام الذري

جدول تصميمنا الدوري. جسيمات ذرية غنية بتسلسل الألوان الدلالي لـ Apple وطباعة Airbnb الشمولية.

تجربة المطور

أنت تملك الكود.
لا صناديق سوداء.

نعمل بفلسفة "الكود المفتوح". بدلاً من إخفاء المكونات في حزمة npm، ندمجها مباشرة في مشروعك. تحكم كامل، تخصيص كامل.

~npx mosbius-ui init
// Proje şematiklerini ve temelini kurar
~npx mosbius-ui add magnetic-button
// 'MagneticButton' bileşenini /components klasörüne kopyalar
✔ Başarıyla eklendi! (0.42s)

100/100 PSI

صفر عبء وقت التشغيل. محسن مع مجموعة فرعية من الخطوط و tree-shaking.

جاهز لـ RSC

متوافق تمامًا مع مكونات خادم Next.js 16. يرسل جافا سكريبت للعميل فقط عند الضرورة.

مستقل

لا يعتمد على أي مكتبة أنماط. Tailwind CSS 4 نقي و React.

مفتوح المصدر

الكود ملكك. غيره، وسعه، وخصصه كما يحلو لك.

كائنات حية

ملعب المكونات

مكونات حية تتنفس. اختبر المتغيرات، وتفحص درجات إمكانية الوصول وانسخ الكود الخاص بك.

Framer Motion Enter
Hover: Lift
Tap: Scale 0.98
import { Button } from '@mosbius/ui'
المنطق المكاني

التخطيط والإيقاع

تناغم رياضي وتوازن بصري. قواعد تخطيط خالية من CLS، تتمحور حول الإنسان، مبنية على نظام شبكة 8pt.

12-Column Fluid Grid

4 Col
8 Col
12 Col
Padding: 24px (Mobile) / 48px (Desktop)

شبكة صارمة 8pt

يجب أن تكون جميع التباعدات من مضاعفات 8 (8، 16، 24، 32...). يجب الحفاظ على الإيقاع العمودي.

8
16
24
32

أقصى عرض 70ch

يجب أن تظل أسطر النص ضمن حد 60-75 حرفًا (حوالي 600-800 بكسل) للقراءة.

المحاذاة البصرية

المركز الهندسي ليس دائمًا صحيحًا. ثق بالعين البشرية وقم بإجراء تصحيحات بصرية +/- 1 بكسل.

ما وراء الامتثال

شامل ومتاح للجميع

إمكانية الوصول ليست فكرة لاحقة، إنها ركيزة معمارية. التصميم لكل ثقافة، وكل قدرة، وكل جهاز.

بطاقة درجات a11y

فحص الامتثال المباشر

تنقل لوحة المفاتيح
TABENTER
فحص التباين
4.5:1 (AA)
VoiceOver
"Button, Submit, Group"
<button aria-label="Submit" />

احترام التفضيل

عندما يقول المستخدم "تقليل الحركة"، تفسح الانتقالات المعقدة المجال لتغييرات بسيطة في التعتيم.

رسوم متحركة قياسية

طباعة ديناميكية

دعم تكبير النص حتى 200%.

AAA
حمض نووي للتواصل

الصوت والنبرة

الكلمات جزء من التصميم. نبني رابطة ثقة مع المستخدم باستخدام لغة واضحة، إنسانية وشاملة.

لغتنا

مهني لكن ودود

نحن بعيدون عن اللغة الروبوتية. نحن بشر بما يكفي لقول "لا يمكننا فعل ذلك الآن" بدلاً من عبارات باردة مثل "فشلت العملية".

واضح ومباشر

نتجنب المبني للمجهول. بدلاً من "يتم تنزيل الملف"، نقول "تنزيل الملف" أو "تحميل".

استخدام حالة الجملة إلزامي.

قواعد الكتابة

غامض

Buraya Tıkla

موجّه للإجراء

جرب الآن

Title Case

أرسل طلبك

Sentence Case

أرسل (طلبك)

تنسيق

10MB / ثلاثة أخطاء

دقة

10 MB / 3 أخطاء

خطأ تقني

خطأ النظام 404

حل

الصفحة غير موجودة

بنية التصميم
@mosbius/ui