نظام التصميم لدينا
الأسس البصرية التي تمنح مشاريعنا كلها تماسكها. رموز، لوحات ألوان، طباعة، مسافات — مفتوحة وموثّقة.
لوحة الألوان
--primary: 16 71% 42%لون الإجراء الوحيد: أزرار الدعوة، الروابط. 5.3:1 على الأبيض
--accent: 214 52% 25%العناوين، البنية. 11.3:1 على الأبيض
--navy-deep: 213 56% 17%خلفيات الشرائط وتذييل الصفحة
--gold-bright: 41 88% 62%الأرقام على الخلفيات الكحلية فقط
--foreground: 215 28% 17%متن النص. 14.7:1 على الأبيض
--muted-foreground: 215 14% 40%الملاحظات، التعليقات. 6.0:1 على الأبيض
--rose: 14 62% 40%لوحة موسّعة، مُعادة إلى نطاق الألوان
--violet: 214 52% 32%لوحة موسّعة، مُعادة إلى نطاق الألوان
--cyan: 205 48% 33%لوحة موسّعة، مُعادة إلى نطاق الألوان
--gold: 40 90% 30%التقييمات، الجوائز. ≥ 4.5:1 على الأبيض
--indigo: 213 56% 25%لوحة موسّعة، مُعادة إلى نطاق الألوان
--destructive: 0 72% 42%الأخطاء، الحذف
الطباعة
أناقة طباعية على الطريقة الليونية
العناوين، أزرار الدعوة، اللمسات البارزة. 100–900.
قراءة مريحة للفقرات الطويلة، بإيقاع تحريري متقن.
المتن، التنقّل، التسميات. 200–800.
| العنصر | الحجم (مرن) | تباعد الأسطر | الاستخدام |
|---|---|---|---|
h1 | clamp(2.125rem, 1.35rem + 3.3vw, 4.25rem) | 1.06 | عنوان الصفحة، الشاشة الأولى |
h2 | clamp(1.625rem, 1.2rem + 1.8vw, 2.75rem) | 1.14 | عنوان القسم |
h3 | clamp(1.1875rem, 1.05rem + 0.7vw, 1.5rem) | 1.25 | عنوان فرعي، بطاقة |
h4 | 1.125rem | 1.35 | عنوان داخلي |
h5, h6 | 1rem | 1.4 | عناوين ثانوية |
body | 1rem | 1.65 | متن النص (Plus Jakarta Sans) |
text-sm | 0.875rem | 1.25rem | متن ثانوي، ملاحظات |
text-xs | 0.75rem | 1rem | بيانات وصفية، شارات، تعليقات |
المسافات (مقياس Tailwind)
0.52px14px28px312px416px624px832px1248px1664px2496pxالظلال
shadow-e1خط رفيع بالكاد يُرى — الحقول، الشرائح
shadow-e2البطاقات في وضع السكون
shadow-e3البطاقات عند التمرير، الأزرار العائمة
shadow-e4النوافذ الحوارية، اللوحات
أدوات CSS مخصّصة
.glassبطاقة بيضاء، إطار رفيع، ظل ناعم — البطاقات، الحقول
.glass-strongالسطح نفسه، ظل أوضح — النوافذ الحوارية، الترويسات
.glass-premiumسطح بارز — الشاشة الأولى، معرض الأعمال
.surface-sunkenقسم متناوب بالرمادي البارد، حواف متلاشية على 40 px
.section-yالإيقاع العمودي للأقسام (--section-y)
.measureطول السطر محدود بـ 68 حرفًا
.text-gradient-warmخلفية تيراكوتا على كلمة في العنوان
.text-gradient-coolخلفية كحلية على كلمة في العنوان
.cta-gradientخلفية تيراكوتا + نص --primary-foreground
.section-dividerخط 1 px متلاشٍ عند الطرفين
.card-img-frameإطار صورة 16/10، صفر CLS، تكبير عند التمرير
.spot-cardتوهّج وإطار يتبعان المؤشّر
.btn-glow-fillزر ممتلئ: انعكاس + هالة تيراكوتا عند التمرير
.btn-glow-ringزر محدَّد: إطار مضيء عند التمرير
.link-growتسطير يمتدّ من اليسار
.skip-linkرابط التخطّي، يظهر عند التركيز
لمحة عن المكوّنات
الأزرار
الشارات
التدرّجات
KAYZEN Premium
هندسة حديثة
Glass Strong
مثال على بطاقة تستخدم الصنف .glass-strong.
نظام تصميم قابل لإعادة الاستخدام
تستفيد مشاريعك من نظام التصميم هذا المُجرَّب. التماسك البصري وإمكانية الوصول والأداء مضمونة من الأساس.