दस्तावेज़डिज़ाइनडिज़ाइन सिस्टम

डिज़ाइन सिस्टम

ड्राफ्टली अद्वितीय डिज़ाइन सिस्टम कैसे उत्पन्न करता है — थीम, सीएसएस वैरिएबल और टाइपोग्राफी।

डिज़ाइन कैसे जनरेट होता है

ड्राफ्टली एक निश्चित टेम्पलेट लागू नहीं करता है — यह आपके प्रॉम्प्ट से एक अद्वितीय डिज़ाइन सिस्टम उत्पन्न करता है। नियोजन चरण दो प्रमुख संकेतों को निकालता है:

•रंग मूड — आपके विवरण से अनुमानित ("गर्म देहाती" → एम्बर/भूरा; "गहरा सिनेमाई" → टील एक्सेंट के साथ गहरा नेवी)
•फ़ॉन्ट मूड — ब्रांड की आवाज़ से मेल खाता है ("संपादकीय" → सेरिफ़; "टेक स्टार्टअप" → ज्यामितीय सैन्स)

ये पूरे साइट पर लागू होने वाले सीएसएस कस्टम गुण बन जाते हैं। परिणाम एक सुसंगत दृश्य पहचान है, न कि एक सामान्य थीम।

थीम मूड

मूडरंगटाइपोग्राफीकिसके लिए उपयुक्त
डार्क सिनेमैटिकगहरा नेवी, काला, टीलवाइड-ट्रैक सैन्सटेक, सास, मनोरंजन
वार्म रस्टिकएम्बर, भूरा, ऑफ-व्हाइटलूज़ सेरिफ़भोजन, आतिथ्य, शिल्प
क्लीन मिनिमलसफेद, हल्का ग्रे, कालाज्यामितीय सैन्सपोर्टफोलियो, पेशेवर सेवाएं
वाइब्रेंट बोल्डउच्च-संतृप्ति प्राथमिक रंगहैवी डिस्प्लेफैशन, उपभोक्ता ब्रांड
लक्ज़री डार्ककाला, सोना, क्रीमथिन सेरिफ़उच्च-स्तरीय सामान और सेवाएं
नेचर ऑर्गेनिकफ़ॉरेस्ट ग्रीन, अर्थ टोनह्यूमनिस्ट सैन्सवेलनेस, स्थिरता

सीएसएस कस्टम गुण

सभी जनरेट की गई साइटें सीएसएस वैरिएबल के एक मानक सेट का उपयोग करती हैं:

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 में बदलें"।

टाइपोग्राफी

ड्राफ्टली सहज स्केलिंग के लिए सीएसएस clamp() का उपयोग करके तरल, प्रतिक्रियाशील टाइपोग्राफी उत्पन्न करता है:

•हीरो हेडलाइन — clamp(2.5rem, 6vw, 5rem) — मोबाइल से बड़े डेस्कटॉप तक स्केल करता है
•सेक्शन हेडलाइन — clamp(1.75rem, 3.5vw, 2.5rem)
•बॉडी टेक्स्ट — 1rem (16px) 1.6 लाइन हाइट के साथ
•कैप्शन — 0.875rem (14px)

फ़ॉन्ट Google फ़ॉन्ट्स के माध्यम से लोड होते हैं। मूड के अनुसार उत्पन्न सामान्य जोड़े: - इंटर + इंटर — स्वच्छ, सार्वभौमिक, अधिकांश सास - प्लेफेयर डिस्प्ले + लाटो — संपादकीय, लक्जरी, रेस्तरां - स्पेस ग्रोटेस्क + डीएम सैन्स — टेक, ज्यामितीय, स्टार्टअप - कॉरमोरेंट गारामोंड + कार्ला — परिष्कृत, उच्च-स्तरीय सेवाएं