Year-end giving ends December 31. Be there for the next diagnosis. Give now →
Testicular Cancer Foundation’ın görsel dilini oluşturan renkler, tipografi ve bileşen şablonları. Herhangi bir hex veya RGB değerine tıklayarak kopyalayabilirsiniz.
Üç rol: marka kimliği için "primary ", yazı tipi ve yüzeyler için "ink ", renk tonları ve kenarlıklar için "signals". Herhangi bir hex veya RGB koduna tıklayarak kopyalayabilirsiniz.
Marka. Eylem çağrıları, vurgu unsurları, bağlantılar, başlık metinleri ve görsel odak noktaları.
Ana camgöbeği rengi için etiket düğmelerine, satır içi bağlantı metinlerine ve fareyle üzerine gelindiğinde ortaya çıkan durumlara etiketleyin. Renkli arka planlarda daha yüksek kontrast sağlayın.
Zaten koyu camgöbeği renginde olan öğeler, ikincil düğmeler, kenar çubuğu bağlantıları ve kart bağlantıları için fareyle üzerine gelindiğinde görülen durum.
Etiket, açıklama ve öne çıkan kart arka planları. İçerikle rekabet etmeden ince bir marka varlığı.
Cyan Tint ile eşleşen kenarlık, kartları doldurur. Renklendirilmiş kartların beyaz bir sayfa üzerinde okunaklı kalmasını sağlar.
Başlıklar, öne çıkan kartlar, CTA blokları, altbilgi, vurgu çerçeveleri. Her yerde saf siyahın yerine geçer.
Açık renkli zeminlerde varsayılan gövde metni. Lacivertten daha düşük kontrastlı olup, uzun metinleri okumayı kolaylaştırır.
Alt paragraflar, liste açıklamaları, başlığın altındaki ikincil metin.
Başlıklar, teknik özellik etiketleri, dipnotlar, satış noktası adları, EIN satırları. Göze batmayan ama okunaklı.
Koyu lacivert arka planların üzerinde yer alan ana metin, öne çıkan içerikler, öne çıkan içerik kartları, eylem çağrıları ve altbilgi.
Varsayılan sayfa arka planı. Kartlar ve içerik alanları.
Değişen bölüm arka planları, etkin olmayan anahtar durumları, satır içi kod parçacıkları.
Kart kenarlıkları, başlıkların altındaki ince çizgiler, defter ve liste satır ayırıcıları.
İkincil düğme konturları ve Slate 100 yüzeyinin üzerinde okunması gereken her türlü kenarlık.
Medya kullanımına ayrılmıştır (logo kompozisyonları, fotoğraf maskeleri). Yazı tipi olarak kullanmayın; Deep Navy rengini kullanın.
Koyu renkli zemin üzerinde ince çizgiler: Koyu lacivert yüzeylerde, ayırıcılar ve kenarlıklar için rgba(255,255,255,0,08) ...ye rgba(255,255,255,0,12) altıgen bir levha yerine.
Tek bir camgöbeği rengi vardır: #00B4DB; koyu ve fareyle üzerine gelindiğinde #0091B0 olarak kullanılır. Bu eski varyantlar, eski sayfalarda ve Özel CSS’de hâlâ görülmektedir. Bunları gördüğünüz anda değiştirin ve yeni çalışmalarda asla tekrar kullanmayın.
Başlıklar için serif, geri kalan her şey için sans serif. DM Serif Display, sıcaklık ve editoryal ağırlık katarken; Inter, uzun metin okumalarını ve kullanıcı arayüzünü dikkat dağınıklığı yaratmadan ele alıyor.
Serif · Yalnızca 400 · Başlıklar, alıntılar, rakamlar
Sans · 400 / 600 / 700 · Metin, kullanıcı arayüzü, düğmeler
DM Serif Display, tek bir kalınlıkta sunulmaktadır. Asla uygulamayın <strong>, <b>, ya da font-weight: 600/700 Serif yazı tiplerinde tarayıcı, kalın ve bulanık görünen bir “sahte kalın” efekt oluşturur; bu durum en belirgin şekilde Safari’de görülür. Bir serif satırının vurgulanması gerekiyorsa, şunu kullanın: <em>: İtalik yazı tipi ile TCF Cyan, kurumun vurgulama şablonudur.
İki ölçek. Makale uzun metinli içerikler, blog yazıları ve program sayfaları içindir. Ekran Bu, yazı tipinin daha fazla işlev görmesi gereken kahraman bölümleri, açılış sayfaları ve pazarlama anları içindir. Aşağıdaki boyutlar masaüstü ekranlar için üst sınırdır; başlıklar şu şekilde sunulur: clamp() bu yüzden telefonlarda boyutları küçültülüyor.
Güven, ölçülebilir hesap verebilirlik ve sürekli şeffaflık sayesinde oluşur ve üçüncü taraf derecelendirmelerimiz tam da bunu yansıtmaktadır.
2009 yılında kurulan Testis Kanseri Vakfı, 501(c)(3) statüsünde bir kar amacı gütmeyen kuruluştur ve ülkedeki tek tam zamanlı çalışan kadrosu bulunan testis kanseri grubudur. Biz, eğitim ve farkındalığı artırma konusunda tutkuyla çalışan, kanseri yenmiş kişiler, bakım verenler ve savunuculardan oluşan bir ekibiz.
Inter 16 / 600, dolgu: 1rem 2rem, 8 piksel yarıçap, 0,18 saniye renk geçişi. Squarespace’teki bağlantı stilleri kod bloklarına da yansıyor, bu nedenle düğme bağlantı adresleri her zaman renk ve metin süslemesi ile !important.
Ana eylem için birincil camgöbeği; düğme metnin yanında yer alıyorsa ve kontrast gerekiyorsa koyu camgöbeği; ikincil öğeler için ise kontur.
Lacivert üzerine camgöbeği. Camgöbeği üzerine lacivert; bağış şeridi, sayfanın tek büyük camgöbeği anına sahip olduğundan, düğmesi arka planla çatışmak yerine koyu renge bürünür.
Yeniden kullanılabilir yapı taşları. Bunlar blog yazılarında, program sayfalarında ve bağışçılara yönelik içeriklerde yer alır. Yeni bir şablon oluşturmadan önce mevcut şablonlardan yararlanın; marka, yenilikçilikle değil, tekrarlama yoluyla tutarlılığını korur.
H1 başlığının üstündeki kategori etiketi. Arka planı hafifçe renklendirin, metni koyu camgöbeği renginde yazın.
Kısa özet veya anahtar nokta. 3 piksel genişliğinde sol kenar çerçeveli camgöbeği renkli.
Kısaca: Candid Platinum, Charity Navigator’da %93 ile 4 yıldız, GreatNonprofits’ta en yüksek puanlı kuruluş, Trustpilot’ta bağımsız yorumlar.
Kaş, başlık, destekleyici paragraf ve isteğe bağlı alıntı içeren koyu renkli arka plan.
Bağışçılar ve ortaklar için
Kategorimizdeki çoğu sivil toplum kuruluşu bu platformlardan bir veya ikisinde yer almaktadır. TCF ise dördünde de değerlendirilmiştir.
"Bağımsız doğrulama bir alt sınırdır, üst sınır değildir."
Kademeli listeler, derecelendirmeler, program bölümleri. Ana renk olarak camgöbeği mavisi serif rakamlar, ince çizgi ayırıcılar, kart krom efekti yok.
Genç erkeklere, bulundukları yerde, damgalama içermeyen bir eğitimle ulaşın.
Yeni teşhis konmuş hastaları, aynı süreci yaşamış olan hayatta kalanlarla bir araya getirin.
Tedavi sona erdikten sonra uzun süreli bakım, toplum desteği ve kaynaklar.
Ankraj satırları olarak birinci şahıs serif ifadeler. Bir satırın üzerine fareyi getirdiğinizde, aynı satırdaki diğer öğeler soluklaşır, italik ifade camgöbeği rengine döner ve ok kayar. Gezinti konuları ve “durumunuzu seçin” türündeki listeler için kullanılır.
Basın haberleri, kaynaklar ve indirmeler için eşit yükseklikteki kenar çizgisine sahip kartlar. Fareyle üzerine gelindiğinde camgöbeği renkli bir kenarlık ve 1 piksel genişliğinde bir halka belirir; hiçbir durumda yatay kayma etkisi oluşmaz.
Bir hayatta kalan kişi, kendi kendine muayenenin önemine değinerek okuyucuları TCF’nin kendi kendine muayene kaynaklarına yönlendiriyor.
Makaleyi okuyun →Mizah odaklı kampanyaların genç erkekleri nasıl etkilediğini inceleyen, hakemli bir çalışma.
Çalışmayı okuyun →Hayatta kalanlar, bakım verenler, savunucular ve klinisyenler, bir hafta sonu boyunca eğitim amacıyla bir araya geliyor.
Makaleyi okuyun →DM Serif yazı tipiyle yazılmış büyük rakamlar. Üstte mikro etiket, altta sade dilde açıklayıcı metin. Rakamları asla kalın yazmayın.
Her bir doların tamamı doğrudan program hizmetlerine aktarılır.
Ülkedeki tek tam zamanlı personel kadrosuna sahip testis kanseri çalışma grubu.
Bağımsız hayır kurumu değerlendirme kuruluşları; tümü kamuya açık olarak yayınlanmıştır.
Hayatta kalanların ve ortakların sesleri. Serif italik yazı tipi, mikro etiketli kaynak gösterimi, ince çizgili kart.
"Kimse bana kontrol etmemi söylemedi. İşte bu sessizliği bozmak için buradayız."24 yaşında teşhis konulan bir hayatta kalan
Makale sonundaki bağış veya kayıt bloğu. Koyu lacivert zemin üzerine ana renk olarak camgöbeği vurgulu, ortalanmış tek sütunlu, maksimum genişlik yaklaşık 720 piksel.
Her bir dolar, bağımsız derecelendirmelerimizde yansıtılan standartlara uygun olarak yönetilmektedir.
TCF'ye bağış yapınHareket bir ipucudur, bir performans değildir. Her şey aynı kısa eğri üzerinde hareket eder ve gerekmedikçe hiçbir şey hareket etmez.
0,18 saniye ile 0,2 saniye arası kolaylık renk, arka plan, kenarlık ve saydamlık ayarları. Daha uzun ya da zıplayan bir şey olmasın.
Kenarlık, 1 piksel genişliğinde uyumlu bir halka ile birlikte TCF Cyan rengine ayarlanır (box-shadow: 0 0 0 1 piksel #00B4DB). Hayır transY Yeni çalışmada kartlı asansör eklenirken, sayfalar yeniden oluşturuldukça eski asansörler kaldırılmaktadır.
Bir satırın üzerine fareyi getirdiğinizde, aynı satırdaki diğer öğeler opasite: 0,55, italik yazılan kısmı camgöbeği rengine çevirir ve oku 4 piksel kaydırır. Fareyle üzerine gelindiğinde satırın opaklığı tam olarak korunur.
Her etkileşimli öğe :focus-visible { outline: 2px solid #0F172A; outline-offset: 3px; }. Odak halkalarını, yerine yenilerini takmadan asla çıkarmayın.
Nabız, parlama, zıplama, paralaks veya otomatik oynatma hareketi olmamalıdır. Sayfa hareketsizken tekrarlanan animasyonlar olmamalıdır.
Site Squarespace 7.1 üzerinde çalışıyor; bu nedenle yeni tasarım çalışmalarının çoğu, Fluid Engine bölümüne yerleştirilen bağımsız bir kod bloğu olarak sunuluyor. Bu kurallar, söz konusu blokların birbirleriyle veya platformla çakışmasını önlüyor.
Her yeni blok, tcfx- ön ek. tcf- eski Custom CSS'ye aittir ve çakışma yaratacaktır.
.tcfx-block, .tcfx-block * { box-sizing: border-box; margin: 0; padding: 0; } ve daha geniş bir şey yok. Sayfa genişliğinde bir * Sıfırlama işlemi daha önce de sitenin bozulmasına neden olmuştu.
Blokun kök sınıfı altındaki tüm kuralları tarayın. Bir kod bloğu, herhangi bir yan etki yaratmadan herhangi bir sayfaya güvenle yapıştırılabilmelidir.
Eğer bir <style> kullanım alanları @import Yazı tipleri için, bu etiket içindeki ilk satırda yer alması gerekir; aksi takdirde tarayıcı bunu yok sayar.
Üretim amaçlı HTML ve CSS dosyaları yorum içermez. Bunun yerine, bloğu proje notlarında belgelendirin.
Metin, rakamlar veya satır içi SVG. Emojiler farklı platformlarda tutarsız bir şekilde görüntülenir ve gayri resmi bir izlenim bırakır.
UI’nin her yerinde siyah yerine koyu lacivert kullanılır. Saf siyah ise medya öğeleri için ayrılmıştır.
Telefon düzenini temel alarak tasarlayın ve şunları ekleyin min-width yukarı doğru sorgular. Tek sütunlu yığınlar, clamp() yazı tipi, 640 pikselin altındaki genişliklerde daraltılmış dolgu, dokunmaya uygun hedefler.
target="_blank" her zaman aşağıdakilerle birlikte gönderilir: rel="noopener noreferrer".
Mevcut bir sayfayı yeniden düzenlerken, başlıkları, ana metni, URL’leri ve UTM parametrelerini aynen koruyun. Herhangi bir değişikliği sessizce yapmak yerine, bunu açıkça belirtin.
Yeniden oluşturulan kahramanlar, SEO amacıyla orijinal metnini aynen koruyan tam olarak bir adet H1 başlığı içerir. Squarespace’in kare kök ölçekli metin sarmalayıcı, çalışma zamanında satır içi boyutu kaybolabilir ve başlığı daraltabilir.
Bir bloğun bölümünü karanlık hale getirmek için, bölüm kutusunu değil arka plan katmanını hedef alın ve şu şekilde boyayın: .page-section herhangi bir clip-path ayırıcısını ortadan kaldırır.
.page-section:has(.tcfx-block) .section-background { background: #0F172A !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; }