Year-end giving ends December 31. Be there for the next diagnosis. Give now →
構成睪丸癌基金會視覺語言的色彩、字體與元件樣式。點擊任何十六進位或 RGB 數值即可複製。
三種用途：主要用於品牌識別，墨色用於字體與底色，色調與邊框則使用「signals」。點擊任何十六進位或 RGB 色碼即可複製。
品牌。行動呼籲、設計亮點、連結、眉毛文字，以及關鍵視覺元素。
為標籤按鈕、內嵌連結文字及懸停狀態設定主要青色。在帶色背景上提升對比度。
任何原本即為深青色的元素、次要按鈕、輔助連結及卡片連結的懸停狀態。
標籤、註解及精選卡片背景。以低調的方式展現品牌存在感，同時不與內容產生衝突。
與「青色色調」搭配的邊框會被填滿。確保在白色頁面上，帶有色調的卡片仍清晰可辨。
標題、主視覺卡片、行動呼籲區塊、頁尾、焦點輪廓。將所有純黑色部分替換為此色。
適用於淺色背景的預設正文文字。對比度低於海軍藍，更適合閱讀長篇內容。
子段落、清單說明、標題下方的輔助文字。
圖說、規格標籤、腳註、插座名稱、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 頁， padding: 1rem 2rem, 半徑 8px，0.18 秒的顏色過渡。Squarespace 的連結樣式會延伸至程式碼區塊中，因此按鈕的錨點始終設定為 顏色 以及 text-decoration 與 !important.
主要動作部分使用主青色；當按鈕位於正文旁且需要形成對比時，則使用深青色；次要元素則使用輪廓線。
青色襯海軍藍，海軍藍襯青色——這條捐款橫幅是頁面中唯一醒目的青色元素，因此其按鈕採用深色設計，而非與背景色相互爭艷。
可重複使用的設計模組。這些模組會出現在部落格文章、計畫頁面以及面向捐款人的內容中。與其另起爐灶，不如先參考現有的設計模式；品牌的統一性源自於重複運用，而非新奇感。
位於 H1 標籤上方的分類標籤。背景帶有色調，文字為深青色。
簡短摘要或重點。青色底色，左側主要邊框寬度為 3 像素。
簡而言之：Candid Platinum 獲「慈善導航員」（Charity Navigator）4 星評級（評分 93%），獲「GreatNonprofits」評為「頂級評級」，並在 Trustpilot 上獲得獨立評價。
深色背景，包含標題、導語、正文段落及可選的引言。
致捐贈者與合作夥伴
我們這個類別中的大多數非營利組織只出現在其中一兩個平台上。TCF 則在所有四個平台上都有評級。
「獨立驗證是最低標準，而非最高標準。」
階梯式清單、評分、節目節點。主色調為青色、帶有襯線的數字，搭配極細分隔線，不使用卡片式鉻色效果。
透過無汙名化的教育，在年輕男性所在之處與他們建立連結。
將新確診的患者與曾有過類似經歷的倖存者連結起來。
長期照護、社區資源及治療結束後的支援。
以第一人稱的襯線字體陳述作為錨點行。將游標懸停於某一行時，該行的同級元素會漸隱，斜體短語會轉為青色，且箭頭會滑動。此設計用於導覽主題及任何「選擇您的情況」清單。
用於新聞稿、資源及下載項目的等高邊框卡片。將游標懸停其上時，會顯示青色邊框及 1 像素的環狀邊框，絕不會產生平移效果。
使用 DM Serif 字體呈現的大數字。上方為微型標籤，下方為通俗易懂的說明文字。數字部分切勿加粗。
每1美元中有...直接用於計畫服務。
全國唯一一個設有全職人員的睪丸癌專科團隊。
獨立的慈善機構評鑑機構，所有評鑑結果均已公開發布。
倖存者與夥伴的聲音。Serif 斜體字、微型標籤來源標示、極細線條卡片。
「沒人告訴我該確認一下。我們就是為了打破這種沉默而來的。」倖存者，24歲時確診
文章末尾的捐款或註冊區塊。深海軍藍為底色，主色調為青色，單欄居中排版，最大寬度約 720 像素。
「運動」是一種暗示，而非表演。萬物皆沿著同一條短曲線運動，而沒有必要移動的事物，絕不會移動。
0.18 秒至 0.2 秒 輕鬆 關於顏色、背景、邊框和透明度。不要太長，也不要太花俏。
邊框採用 TCF Cyan 顏色，並搭配 1px 的同色環（box-shadow: 0 0 0 1px #00B4DB). 否 transY 在新作品中採用卡片式滑塊，隨著頁面重新建構，舊有的滑塊正被移除。
將游標懸停在一行上，會將其同級元素下移至 不透明度：0.55, 將斜體字句轉為青色，並將箭頭向右移動 4px。懸停時的行仍保持完全不透明。
每個互動元素都會獲得 :focus-visible { outline: 2px solid #0F172A; outline-offset: 3px; }. 切勿在未重新安裝的情況下拆下對焦環。
不得出現脈動、發光、彈跳、視差或自動播放的動態效果。頁面閒置時，不得出現重複播放的動畫。
該網站採用 Squarespace 7.1 運作，因此大多數新的設計作品皆以獨立的程式碼區塊形式交付，並置入「流體引擎」區段中。這些規則可避免這些區塊彼此衝突，或與平台產生衝突。
每個新區塊都會使用 tcfx- 前綴。 tcf- 屬於舊版自訂 CSS，將會發生衝突。
.tcfx-block, .tcfx-block * { box-sizing: border-box; margin: 0; padding: 0; } 且寬度不得超過此範圍。一頁寬的 * 先前曾發生過重置導致網站無法運作的情況。
將範圍涵蓋至該區塊根類別下的每條規則。程式碼區塊應可安全地貼至任何頁面，且不會產生任何副作用。
如果一個 <style> 用途 @import 至於字型，它必須是該標籤中的第一行，否則瀏覽器會忽略它。
正式發布的 HTML 和 CSS 檔案中不包含註解。請改在專案備註中記錄該區塊的說明。
文字、數字或內嵌 SVG。表情符號在不同平台上的顯示效果不一致，且給人一種非正式的感覺。
在使用者介面中，深海藍（Deep Navy）將全面取代黑色。純黑色則專用於媒體內容。
以手機版面配置為基礎，並新增 min-width 向上查詢。單欄堆疊， clamp() 字型、在 640px 以下減少內距、適合觸控操作的按壓區域。
target="_blank" 始終隨貨附贈 rel="noopener noreferrer".
重新設計現有頁面時，請精確保留標題、正文、網址及 UTM 參數。若有任何修改，請明確標示，切勿默默進行。
為了搜尋引擎優化（SEO），重建後的英雄頁面會保留一個 H1 標籤，且其文字內容完全維持原樣。請避免使用 Squarespace 的 平方根縮放文字 若使用包裹元素，其內聯大小可能會在執行時消失，並導致標題收縮。
若要將區塊的區段設為深色，請鎖定背景圖層（而非區段框），並進行繪製 .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; }