तीन भूमिकाएँ: ब्रांड पहचान के लिए प्राथमिक , टाइप और सतहों के लिए स्याही , और रंग और बॉर्डर के लिए संकेत । किसी भी हेक्स या आरजीबी कोड को कॉपी करने के लिए उस पर क्लिक करें।

प्राथमिक और ब्रांड

स्याही और टाइप

संकेत और सतहें

शीर्षकों के लिए सेरिफ़ फ़ॉन्ट, बाकी सभी के लिए सैन्स फ़ॉन्ट। DM सेरिफ़ डिस्प्ले गर्माहट और संपादकीय गंभीरता प्रदान करता है; इंटर लंबे लेखों को पढ़ने और बिना किसी रुकावट के बेहतर उपयोगकर्ता अनुभव प्रदान करता है।

दो तराजू। लेख यह विस्तृत सामग्री, ब्लॉग पोस्ट और प्रोग्राम पेज के लिए है। प्रदर्शन यह हीरो सेक्शन, लैंडिंग पेज और मार्केटिंग इवेंट्स के लिए है जहाँ टाइप को अधिक काम करने की आवश्यकता होती है। नीचे दिए गए आकार डेस्कटॉप की अधिकतम सीमा हैं — हेडिंग इससे बड़े आकार में शिप होती हैं। क्लैम्प() इसलिए वे फोन पर इसका आकार छोटा कर देते हैं।

इंटर 16 / 600, पैडिंग: 1रेम 2रेम8px त्रिज्या, 0.18s रंग संक्रमण। Squarespace लिंक शैलियाँ कोड ब्लॉक में फैल जाती हैं, इसलिए बटन एंकर हमेशा सेट होते हैं। रंग और text-decoration साथ !महत्वपूर्ण.

पुन: उपयोग योग्य बिल्डिंग ब्लॉक्स। ये ब्लॉग पोस्ट, प्रोग्राम पेज और दानदाताओं के लिए तैयार की गई सामग्री में दिखाई देते हैं। कोई नया पैटर्न बनाने से पहले किसी मौजूदा पैटर्न का उपयोग करें — ब्रांड की स्थिरता पुनरावृत्ति से आती है, नवीनता से नहीं।

गति एक संकेत है, प्रदर्शन नहीं। सब कुछ एक ही छोटे वक्र पर चलता है, और जो आवश्यक न हो वह नहीं चलता।

• बदलाव

  0.18 सेकंड से 0.2 सेकंड तक आसानी रंग, पृष्ठभूमि, बॉर्डर और अपारदर्शिता पर ही निर्भर करता है। इससे ज़्यादा लंबा या लचीला कुछ नहीं।

• कार्ड पर होवर करें

  बॉर्डर टीसीएफ सियान रंग का है जिसमें 1px का मैचिंग रिंग है (बॉक्स-शैडो: 0 0 0 1px #00B4DB)। नहीं translateY नए कार्य में कार्ड लिफ्ट - पृष्ठों के पुनर्निर्माण के दौरान पुरानी लिफ्टों को हटाया जा रहा है।

• लेजर पर होवर करें

  किसी पंक्ति पर माउस ले जाने से उसकी संबंधित पंक्तियाँ नीचे आ जाती हैं। अपारदर्शिता: .55यह इटैलिक वाक्यांश को सियान रंग में बदल देता है और तीर को 4px खिसका देता है। माउस ले जाने वाली पंक्ति पूरी अपारदर्शिता के साथ बनी रहती है।

• केंद्र

  प्रत्येक इंटरैक्टिव तत्व को मिलता है :focus-visible { outline: 2px solid #0F172A; outline-offset: 3px; }फोकस रिंग को बिना वापस लगाए कभी न निकालें।

• अनुमति नहीं

  इसमें कोई पल्स, ग्लो, बाउंस, पैरेलेक्स या ऑटो-प्लेइंग मोशन नहीं है। पेज के निष्क्रिय रहने पर कोई एनीमेशन नहीं दोहराया जाता है।

यह साइट Squarespace 7.1 पर चलती है, इसलिए अधिकांश नए डिज़ाइन कार्य एक स्व-निहित कोड ब्लॉक के रूप में भेजे जाते हैं जिन्हें फ़्लूइड-इंजन सेक्शन में डाला जाता है। ये नियम उन ब्लॉकों को आपस में या प्लेटफ़ॉर्म के साथ टकराव से बचाते हैं।

• क्लास उपसर्ग

  प्रत्येक नया ब्लॉक इसका उपयोग करता है टीसीएफएक्स- उपसर्ग। टीसीएफ- यह पुराने कस्टम सीएसएस से संबंधित है और इसमें टकराव होगा।

• केवल स्कोप रीसेट

  .tcfx-block, .tcfx-block * { box-sizing: border-box; margin: 0; padding: 0; } और इससे चौड़ा कुछ नहीं। एक पृष्ठ जितना चौड़ा। * रीसेट करने से पहले भी साइट क्रैश हो चुकी है।

• हर चीज़ को नेमस्पेस करें

  प्रत्येक नियम को ब्लॉक के मूल वर्ग के अंतर्गत रखें। कोड ब्लॉक को बिना किसी दुष्प्रभाव के किसी भी पृष्ठ पर पेस्ट करना सुरक्षित होना चाहिए।

• पहले आयात करें

  यदि एक <style> उपयोग @आयात फ़ॉन्ट के लिए, यह उस टैग की पहली पंक्ति होनी चाहिए अन्यथा ब्राउज़र इसे हटा देगा।

• कोई टिप्पणी नहीं

  प्रोडक्शन HTML और CSS में कमेंट्स नहीं होते हैं। कृपया प्रोजेक्ट नोट्स में इस ब्लॉक का उल्लेख करें।

• आइकन के रूप में इमोजी का उपयोग न करें

  टेक्स्ट, अंक या इनलाइन एसवीजी। इमोजी विभिन्न प्लेटफॉर्म पर असंगत रूप से प्रदर्शित होते हैं और अनौपचारिक लगते हैं।

• नेवी, काला नहीं

  यूजर इंटरफेस में हर जगह गहरे नीले रंग को काले रंग के स्थान पर इस्तेमाल किया गया है। शुद्ध काला रंग केवल मीडिया के लिए आरक्षित है।

• मोबाइल प्रथम

  फ़ोन लेआउट को आधार बनाकर उसमें जोड़ें न्यूनतम-चौड़ाई क्वेरी ऊपर की ओर। एकल-स्तंभ स्टैक, क्लैम्प() टाइप, 640px से कम आकार में कम पैडिंग, टैप-फ्रेंडली टारगेट।

• बाहरी संबंध

  लक्ष्य="_खाली" हमेशा साथ भेजता है rel="noopener noreferrer".

• यह प्रतिलिपि शब्दशः है।

  किसी मौजूदा पेज को रीस्टाइल करते समय, हेडलाइन, बॉडी टेक्स्ट, यूआरएल और यूटीएम पैरामीटर को हूबहू वैसे ही रखें। किसी भी बदलाव को चुपचाप करने के बजाय उसे चिह्नित करें।

• H1 को रखें

  SEO के लिए, पुनर्निर्मित हीरो टेक्स्ट में मूल शब्दों के साथ केवल एक H1 भाग रखा जाता है। Squarespace के विकल्पों से बचें। sqsrte-scaled-text रैपर — रनटाइम पर इसका इनलाइन आकार गायब हो सकता है और हेडिंग सिकुड़ सकती है।

• अनुभाग अधिग्रहण

  किसी ब्लॉक के सेक्शन को गहरा रंग देने के लिए, सेक्शन बॉक्स के बजाय बैकग्राउंड लेयर को टारगेट करें — पेंटिंग ।पृष्ठ भाग किसी भी क्लिप-पाथ डिवाइडर को वर्गाकार कर देता है।

.page-section:has(.tcfx-block) .section-background {
  background: #0F172A !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}