المستنداتالتصميمنظام التصميم

نظام التصميم

كيف يولّد Draftly أنظمة تصميم فريدة — السمات ومتغيرات CSS والطباعة.

كيف يُولَّد التصميم

لا يطبق Draftly قالبًا ثابتًا — بل يولّد نظام تصميم فريدًا من موجهك. تستخرج مرحلة التخطيط إشارتين رئيسيتين:

•المزاج اللوني — يُستنتج من وصفك ("دافئ ريفي" → كهرماني/بني؛ "داكن سينمائي" → كحلي عميق بلمسات فيروزية)

•مزاج الخط — يُطابق مع صوت العلامة ("تحريري" → serif؛ "شركة تقنية ناشئة" → sans هندسي)

تصبح هذه خصائص CSS مخصصة مطبقة عبر الموقع بأكمله. النتيجة هوية بصرية متماسكة، وليست سمة عامة.

أمزجة السمات

المزاج	الألوان	الطباعة	يناسب
Dark Cinematic	كحلي عميق، أسود، فيروزي	sans واسع التباعد	التقنية، SaaS، الترفيه
Warm Rustic	كهرماني، بني، أبيض مائل	serif مريح	الطعام، الضيافة، الحِرف
Clean Minimal	أبيض، رمادي فاتح، أسود	sans هندسي	معارض الأعمال، الخدمات المهنية
Vibrant Bold	ألوان أساسية عالية التشبع	display ثقيل	الموضة، العلامات الاستهلاكية
Luxury Dark	أسود، ذهبي، كريمي	serif رفيع	السلع والخدمات الراقية
Nature Organic	أخضر غابات، ألوان ترابية	sans إنساني	العافية، الاستدامة

خصائص CSS المخصصة

كل المواقع المولَّدة تستخدم مجموعة قياسية من متغيرات CSS:

css

:root {
  --bg: #0a0a0f;            /* Page background */
  --surface: #111118;       /* Card / surface background */
  --accent: #3B82F6;        /* Primary accent / CTA color */
  --accent-2: #6366F1;      /* Secondary accent */
  --text: #E5E7EB;          /* Body text */
  --text-muted: #6B7280;    /* Secondary / muted text */
  --heading: #FFFFFF;       /* Headings */
  --border: rgba(255,255,255,0.08); /* Borders */
  --font-display: 'Inter', sans-serif;
  --font-body: 'Inter', sans-serif;
}

لتغيير الألوان، عدّلها في تبويب Code أو استخدم الدردشة: "Change --accent to #FF6B35".

الطباعة

يولّد Draftly طباعة سلسة ومتجاوبة باستخدام CSS ‏clamp() للتحجيم الانسيابي:

•العنوان الرئيسي — clamp(2.5rem, 6vw, 5rem) — يتدرج من الجوال إلى سطح المكتب الكبير

•عناوين الأقسام — clamp(1.75rem, 3.5vw, 2.5rem)

•نص المحتوى — 1rem ‏(16px) بارتفاع سطر 1.6

•التسمية التوضيحية — 0.875rem ‏(14px)

تُحمَّل الخطوط عبر Google Fonts. أزواج شائعة تُولَّد حسب المزاج: - Inter + Inter — نظيف، عالمي، معظم SaaS - Playfair Display + Lato — تحريري، فاخر، مطاعم - Space Grotesk + DM Sans — تقني، هندسي، شركات ناشئة - Cormorant Garamond + Karla — مصقول، خدمات راقية

السابقالنشر التاليالإعدادات المسبقة والقوالب