Year-end giving ends December 31. Be there for the next diagnosis. Give now →
الألوان، وأنماط الخطوط، وأنماط المكونات التي تشكل اللغة البصرية لمؤسسة سرطان الخصية. انقر على أي قيمة سداسية عشرية أو RGB لنسخها.
ثلاثة أدوار: "الأساسي " لهوية العلامة التجارية، و "الحبر " للخطوط والأسطح، و "الإشارات " للصبغات والحدود. انقر على أي رمز سداسي عشري أو رمز RGB لنسخه.
العلامة التجارية. عناصر الحث على اتخاذ إجراء، واللمسات التزيينية، والروابط، والنصوص البارزة، واللقطات البصرية الرئيسية.
تحديد الألوان للـ«pills» ونصوص الروابط المضمنة وحالات التمرير بالماوس باللون السماوي الأساسي. تباين أعلى على الخلفيات الملونة.
حالة التمرير فوق أي عنصر يظهر باللون السماوي الغامق بالفعل، والأزرار الثانوية، وروابط السجلات، وروابط البطاقات.
خلفيات العلامات، والتعليقات التوضيحية، والبطاقات المميزة. حضور خفيف للعلامة التجارية دون أن يتنافس مع المحتوى.
يُملأ الحد الذي يقترن بـ«Cyan Tint». ويحافظ على وضوح البطاقات الملونة على خلفية صفحة بيضاء.
العناوين، والبطاقات البارزة، ومجموعات عناصر الدعوة إلى اتخاذ إجراء (CTA)، والتذييل، وخطوط التمييز. تحل محل اللون الأسود الخالص في كل مكان.
نص أساسي مخصص للأسطح الفاتحة. تباين أقل مقارنة باللون الكحلي، مما يجعله أكثر راحة للعين عند قراءة النصوص الطويلة.
الفقرات الفرعية، وأوصاف القوائم، والنصوص الإضافية أسفل العناوين.
التعليقات التوضيحية، وملصقات المواصفات، والحواشي السفلية، وأسماء منافذ البيع، وأسطر رقم التعريف الضريبي (EIN). هادئة لكنها واضحة.
النص الرئيسي فوق خلفيات باللون الأزرق الداكن، والعناصر البارزة، وبطاقات العناصر البارزة، وعناصر الحث على اتخاذ إجراء، والتذييل.
خلفية الصفحة الافتراضية. البطاقات ومساحات المحتوى.
خلفيات الأقسام المتناوبة، وحالات التبديل غير النشطة، ومقتطفات الكود المضمنة.
حدود البطاقات، والخطوط الرفيعة أسفل العناوين، وفواصل صفوف السجلات والقوائم.
خطوط محيط الأزرار الثانوية وأي حدود يجب أن تظهر فوق سطح جهاز Slate 100.
مخصص لوسائل الإعلام (تركيبات الشعار، قوالب الصور). لا تستخدمه مع النصوص، استخدم اللون «ديب نافي» بدلاً منه.
الخطوط الدقيقة على الخلفية الداكنة: على الأسطح ذات اللون الأزرق الداكن، استخدم الفواصل والحدود rgba(255,255,255,0.08) إلى rgba(255,255,255,0.12) بدلاً من خلية سداسية من الحجر.
هناك لون سماوي واحد: #00B4DB، مع #0091B0 للون الداكن ولون التمرير. لا تزال هذه المتغيرات القديمة تظهر في الصفحات القديمة وفي «CSS المخصص». استبدلها فور رؤيتها، ولا تعيد استخدامها أبدًا في الأعمال الجديدة.
خط ذو حواف للعناوين، وخط بدون حواف لكل ما عدا ذلك. يضفي خط «DM Serif Display» دفئًا وثقلًا تحريريًا؛ بينما يتولى خط «Inter» مهام القراءة المطولة وواجهة المستخدم دون تشتيت الانتباه.
خط سيريف · 400 فقط · العناوين، الاقتباسات، الأرقام
Sans · 400 / 600 / 700 · النص الأساسي، واجهة المستخدم، الأزرار
يتم توفير خط «DM Serif Display» بوزن واحد. لا تتقدم أبدًا بطلب <strong>, <b>، أو سمك الخط: 600/700 في حالة الخطوط ذات الحواف، يقوم المتصفح بتوليد تأثير «غامق زائف» يظهر بشكل ثقيل وممتد، ويكون ذلك أكثر وضوحًا في متصفح Safari. إذا احتجت إلى إبراز خط ذي حواف، فاستخدم <em>: يُعد الخط المائل مع لون TCF Cyan نمط التمييز الخاص بالموقع.
ميزانان. مقال وهو مخصص للمحتوى المطول، ومنشورات المدونات، وصفحات البرامج. العرض يُستخدم في أقسام «الأبطال» وصفحات الهبوط والمناسبات التسويقية التي تتطلب من النص أن يؤدي دورًا أكبر. الأحجام الواردة أدناه تمثل الحد الأقصى على أجهزة سطح المكتب، وتُعرض العناوين بحجم clamp() لذلك يتم تصغير حجمها على الهواتف.
تُبنى الثقة من خلال المساءلة القابلة للقياس والشفافية المستمرة، وتُجسِّد تصنيفات الجهات الخارجية التي نحصل عليها ذلك بالضبط.
تأسست مؤسسة سرطان الخصية في عام 2009، وهي منظمة غير ربحية خاضعة للمادة 501(c)(3) من قانون الضرائب الأمريكي، وتعد المنظمة الوحيدة في البلاد التي تعمل بدوام كامل في مجال سرطان الخصية. نحن فريق يضم ناجين ومقدمي رعاية ومدافعين عن القضية، نكرس جهودنا لتعزيز التثقيف والتوعية.
إنتر 16 / 600، التباعد: 1rem 2rem، نصف قطر 8 بكسل، انتقال لوني مدته 0.18 ثانية. تتداخل أنماط الروابط في Squarespace مع كتل الكود، لذا يتم تعيين روابط الأزرار دائمًا اللون و تزيين النص مع !important.
اللون السماوي الأساسي للأجزاء الرئيسية؛ واللون السماوي الغامق عندما يكون الزر بجانب النص الأساسي ويحتاج إلى تباين؛ والخط الخارجي لأي عناصر ثانوية.
اللون السماوي على خلفية كحلي. والكحلي على خلفية سماوية؛ حيث يحتل شريط التبرع اللحظة السماوية الوحيدة البارزة في الصفحة، لذا يتخذ زره لونًا داكنًا بدلاً من التنافس مع لون الخلفية.
عناصر أساسية قابلة لإعادة الاستخدام. تظهر هذه العناصر في منشورات المدونة، وصفحات البرامج، والمحتوى الموجه للمانحين. استخدم نمطًا موجودًا بالفعل قبل ابتكار نمط جديد؛ فالعلامة التجارية تحافظ على اتساقها من خلال التكرار، وليس من خلال التجديد.
تسمية الفئة فوق عنوان H1. خلفية بلون خفيف، ونص باللون السماوي الغامق.
ملخص موجز أو النقطة الأساسية. لون سماوي مع حدود يسرى أساسية بعرض 3 بكسل.
الملخص: حصلت منظمة «كانديد بلاتينوم» على تصنيف 4 نجوم من «تشاريتي نافيجيتور» بنسبة 93٪، وتصنيف «الأفضل» من «جريت نونبروفيتس»، بالإضافة إلى تقييمات مستقلة على موقع «تراستبايلوت».
سطر أسود يتضمن العنوان الفرعي والعنوان الرئيسي والفقرة الداعمة، مع اقتباس بارز اختياري.
للمانحين والشركاء
تظهر معظم المنظمات غير الربحية في فئتنا على منصة أو منصتين من هذه المنصات. أما TCF فهي مُصنَّفة على المنصات الأربع جميعها.
"التحقق المستقل هو الحد الأدنى، وليس الحد الأقصى."
قوائم متدرجة، وتصنيفات، ومقاطع برنامجية. أرقام ذات حواف زخرفية باللون السماوي الأساسي، وفواصل رفيعة جدًا، وبدون لمسات كروم على البطاقات.
التواصل مع الشباب في بيئاتهم من خلال توفير تعليم خالٍ من الوصم.
ربط المرضى الذين تم تشخيصهم مؤخرًا بالناجين الذين مروا بنفس التجربة.
الرعاية طويلة الأمد، والمجتمع المحلي، والموارد المتاحة بعد انتهاء العلاج.
عبارات مكتوبة بخط سيريف من منظور الشخص الأول كصفوف مرجعية. عند تمرير المؤشر فوق أحد الصفوف، تتلاشى العناصر المجاورة له، وتتحول العبارة المكتوبة بخط مائل إلى اللون السماوي، وينزلق السهم. تُستخدم في مواضيع شريط التنقل وأي قائمة من نوع «اختر حالتك».
بطاقات ذات خطوط رأس متساوية الارتفاع للمواد الصحفية والموارد والتنزيلات. عند تمرير المؤشر فوقها، يظهر إطار سماوي اللون مع حلقة بعرض 1 بكسل، دون أي تغيير في موضع البطاقة.
أحد الناجين يتحدث عن أهمية الفحوص الذاتية، ويوجه القراء إلى موارد الفحص الذاتي التي توفرها مؤسسة TCF.
اقرأ المقال →دراسة خضعت للمراجعة العلمية تبحث في كيفية جذب الحملات التي تعتمد على الفكاهة للشباب الذكور.
اقرأ الدراسة →الناجون ومقدمو الرعاية والمدافعون عن حقوقهم والأطباء يجتمعون معًا لقضاء عطلة نهاية أسبوع تعليمية.
اقرأ المقال →أرقام كبيرة مكتوبة بخط DM Serif. تسمية مصغرة في الأعلى، ووصف بلغة بسيطة في الأسفل. لا تُكتب الأرقام أبدًا بخط عريض.
يُخصص كل دولار مباشرةً لخدمات البرامج.
المجموعة الوحيدة في البلاد المتخصصة في سرطان الخصية والتي يعمل بها طاقم متفرغ.
مُقيِّمون مستقلون للمنظمات الخيرية، وجميع تقييماتهم منشورة للجمهور.
أصوات الناجين والشركاء. خط «سيريف» مائل، وتسمية مصغرة للمصدر، وبطاقة رفيعة جدًّا.
"لم يطلب مني أحد أن أتحقق من الأمر. وهذا الصمت هو ما جئنا لكسره."ناجية، تم تشخيص حالتها في سن الـ24
مربع التبرع أو التسجيل في نهاية المقال. لون كحلي داكن مع لمسات باللون السيان الأساسي، عمود واحد مُركز، العرض الأقصى حوالي 720 بكسل.
يتم إدارة كل دولار وفقًا للمعايير نفسها التي تنعكس في تصنيفاتنا المستقلة.
تبرع لصندوق TCFالحركة هي تلميح، وليست أداءً. كل شيء يتحرك على نفس المنحنى القصير، ولا يتحرك أي شيء ما لم يكن ذلك ضروريًا.
من 0.18 ثانية إلى 0.2 ثانية سهولة فيما يتعلق باللون والخلفية والحدود ودرجة الشفافية. لا شيء أطول من ذلك، ولا شيء متأرجح.
يتم تزيين الحافة بلون «TCF Cyan» مع حلقة مطابقة بعرض 1 بكسل (box-shadow: 0 0 0 1px #00B4DB). لا transY يتم استخدام نظام "card lift" في الأعمال الجديدة، بينما يتم إزالة الأنظمة القديمة مع إعادة بناء الصفحات.
عند تمرير المؤشر فوق صف ما، يتم إسقاط العناصر المجاورة له إلى العتامة: 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 كما هي تمامًا. قم بالإشارة إلى أي تعديل يتم إجراؤه بدلاً من إجرائه دون إشعار.
تحتفظ «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; }