الوثائقالتصميمنظام التصميم

نظام التصميم

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

كيف يتم إنشاء التصميم

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

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

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

حالات السمات

الحالةالألوانالطباعةمناسب لـ
سينمائي داكنكحلي عميق، أسود، فيروزيWide-track sansالتقنية، SaaS، الترفيه
ريفي دافئكهرماني، بني، أبيض مائل للصفرةLoose serifالطعام، الضيافة، الحرف اليدوية
نظيف وبسيطأبيض، رمادي فاتح، أسودGeometric sansحافظة أعمال، خدمات احترافية
حيوي وجريءألوان أساسية عالية التشبعHeavy displayالموضة، العلامات التجارية الاستهلاكية
فاخر داكنأسود، ذهبي، كريميThin serifالسلع والخدمات الراقية
طبيعي عضويأخضر غابوي، درجات ترابيةHumanist 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;
}

لتغيير الألوان، قم بتحريرها في علامة تبويب الكود أو استخدم الدردشة: "غيّر --accent إلى #FF6B35".

الطباعة

ينشئ Draftly طباعة مرنة ومتجاوبة باستخدام clamp() في CSS لتوسيع نطاق سلس:

•عنوان البطل — clamp(2.5rem, 6vw, 5rem) — يتدرج من الجوال إلى سطح المكتب الكبير
•عناوين الأقسام — clamp(1.75rem, 3.5vw, 2.5rem)
•نص الجسم — 1rem (16 بكسل) مع ارتفاع سطر 1.6
•تسمية توضيحية — 0.875rem (14 بكسل)

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

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