ثلاثة أدوار: "الأساسي " لهوية العلامة التجارية، و "الحبر " للخطوط والأسطح، و "الإشارات " للصبغات والحدود. انقر على أي رمز سداسي عشري أو رمز RGB لنسخه.

المرحلة الابتدائية والعلامة التجارية

الحبر والخط

الإشارات والأسطح

خط ذو حواف للعناوين، وخط بدون حواف لكل ما عدا ذلك. يضفي خط «DM Serif Display» دفئًا وثقلًا تحريريًا؛ بينما يتولى خط «Inter» مهام القراءة المطولة وواجهة المستخدم دون تشتيت الانتباه.

ميزانان. مقال وهو مخصص للمحتوى المطول، ومنشورات المدونات، وصفحات البرامج. العرض وهو مخصص لأقسام «الأبطال» وصفحات الهبوط واللحظات التسويقية التي تتطلب من الخط أن يؤدي دورًا أكبر. الأحجام الواردة أدناه تمثل الحد الأقصى على أجهزة سطح المكتب — حيث يتم عرض العناوين بحجم clamp() لذلك يتم تصغير حجمها على الهواتف.

إنتر 16 / 600، التباعد: 1rem 2rem، نصف قطر 8 بكسل، انتقال لوني مدته 0.18 ثانية. تتداخل أنماط الروابط في Squarespace مع كتل الكود، لذا يتم تعيين روابط الأزرار دائمًا اللون و تزيين النص مع !important.

عناصر أساسية قابلة لإعادة الاستخدام. تظهر هذه العناصر في منشورات المدونة وصفحات البرامج والمحتوى الموجه للمانحين. استخدم نمطًا موجودًا بالفعل قبل ابتكار نمط جديد — فالعلامة التجارية تحافظ على اتساقها من خلال التكرار، وليس من خلال التجديد.

الحركة هي تلميح، وليست أداءً. كل شيء يتحرك على نفس المنحنى القصير، ولا يتحرك أي شيء ما لم يكن ذلك ضروريًا.

• التحولات

  من 0.18 ثانية إلى 0.2 ثانية سهولة فيما يتعلق باللون والخلفية والحدود ودرجة الشفافية. لا شيء أطول من ذلك، ولا شيء متأرجح.

• المرور بالماوس فوق البطاقة

  يتم تزيين الحافة بلون «TCF Cyan» مع حلقة مطابقة بعرض 1 بكسل (box-shadow: 0 0 0 1px #00B4DB). لا transY نقل البطاقات إلى العمل الجديد — يجري إزالة البطاقات القديمة مع إعادة بناء الصفحات.

• تمرير المؤشر فوق دفتر الأستاذ

  عند تمرير المؤشر فوق صف ما، يتم إسقاط العناصر المجاورة له إلى العتامة: 0.55، ويغير لون العبارة المكتوبة بخط مائل إلى السماوي، ويحرك السهم مسافة 4 بكسل. ويبقى الصف الذي يمر عليه المؤشر بشفافية كاملة.

• التركيز

  يحصل كل عنصر تفاعلي على :focus-visible { outline: 2px solid #0F172A; outline-offset: 3px; }. لا تقم أبدًا بإزالة حلقات التركيز دون استبدالها.

• غير مسموح به

  لا توجد نبضات، أو توهج، أو ارتداد، أو اختلاف المنظر، أو حركة التشغيل التلقائي. ولا توجد رسوم متحركة تتكرر أثناء خمول الصفحة.

يعمل الموقع على Squarespace 7.1، لذا يتم تسليم معظم أعمال التصميم الجديدة على شكل كتل برمجية مستقلة يتم إدراجها في قسم يعمل بمحرك «Fluid». وتضمن هذه القواعد عدم تعارض تلك الكتل مع بعضها البعض أو مع المنصة.

• بادئة الفئة

  يستخدم كل كتلة جديدة tcfx- البادئة. tcf- تنتمي إلى CSS المخصص القديم وستحدث تضارباً.

• إعادة الضبط ضمن نطاق محدد فقط

  .tcfx-block, .tcfx-block * { box-sizing: border-box; margin: 0; padding: 0; } ولا شيء أوسع من ذلك. عرض الصفحة * لقد تسببت عملية إعادة الضبط في تعطل الموقع من قبل.

• تعيين مساحة اسم لكل شيء

  تحديد نطاق كل قاعدة ضمن الفئة الجذرية للكتلة. يجب أن تكون كتلة الكود آمنة عند لصقها في أي صفحة دون أي آثار جانبية.

• الاستيراد أولاً

  إذا كان أ <style> الاستخدامات @import بالنسبة للخطوط، يجب أن تكون في السطر الأول من تلك العلامة وإلا فإن المتصفح سيتجاهلها.

• لا توجد تعليقات

  يتم توزيع ملفات HTML وCSS النهائية بدون تعليقات. يرجى توثيق الكتلة في ملاحظات المشروع بدلاً من ذلك.

• لا توجد رموز تعبيرية كأيقونات

  النص أو الأرقام أو ملفات SVG المضمنة. يتم عرض الرموز التعبيرية بشكل غير متسق عبر المنصات المختلفة، وتُعتبر أسلوبًا غير رسمي.

• أزرق داكن، وليس أسود

  يُستخدم اللون الأزرق الداكن بدلاً من اللون الأسود في جميع أجزاء واجهة المستخدم. أما اللون الأسود الخالص فهو مخصص للوسائط.

• الأولوية للجوال

  استخدم تخطيط الهاتف كأساس وأضف العرض الأدنى الاستعلامات الصاعدة. مجموعات أحادية العمود، clamp() النوع، وتقليل المسافات الفاصلة عند عرض أقل من 640 بكسل، ومساحات النقر الملائمة.

• روابط خارجية

  target="_blank" يُشحن دائمًا مع rel="noopener noreferrer".

• النص مقتبس حرفياً

  عند إعادة تصميم صفحة موجودة، حافظ على العناوين الرئيسية والنص الأساسي وعناوين URL ومعلمات UTM كما هي تمامًا. قم بالإشارة إلى أي تعديل يتم إجراؤه بدلاً من إجرائه دون إشعار.

• احتفظ بـ H1

  تحتفظ «Rebuilt Heroes» بفقرة H1 واحدة فقط بنصها الأصلي، وذلك لأغراض تحسين محركات البحث (SEO). تجنب استخدام Squarespace's نص مُقيَّس وفقًا لمربع الجذر التربيعي عنصر «wrapper» — قد يختفي حجمه المضمن أثناء التشغيل، مما يؤدي إلى انكماش العنوان.

• الاستيلاء على القسم

  لجعل جزء من المربع داكنًا، حدد طبقة الخلفية، وليس مربع الجزء — الرسم .page-section يُحاذي أي فاصل من نوع «clip-path».

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