風格指南
本風格指南全面概述了睪丸癌基金會網站的視覺設計系統，重點在於色彩與字體設計。
色彩調色盤
色彩方案是品牌識別的重要組成部分，能營造出一致且易於辨識的視覺風格。該方案包含主色、輔色及點綴色，並在整個網站中經過策略性運用。
《初選之色》
原色是設計中最常使用的顏色，代表著核心的品牌形象。
主色：青色／綠松石色
十六進制
#00B4DB
RGB
rgb(0, 180, 216)
主要品牌色，用於背景、按鈕及關鍵視覺元素。
黑色
十六進制
#000000
RGB
rgb(0, 0, 0)
正文、淺色背景上的標題，以及網站頁尾。
白色
十六進制
#FFFFFF
RGB
rgb(255, 255, 255)
深色背景上的正文，以及各內容區塊的背景。
輔助色與點綴色
輔助色與點綴色用於襯托主色調，並引導使用者目光聚焦於特定元素，例如按鈕、連結及資訊區塊。
深海軍藍
十六進制
#0F172A
RGB
rgb(15, 23, 42)
統計卡及其他突出顯示區塊的背景。
板岩灰
十六進制
#64748B
RGB
rgb(100, 116, 139)
次要按鈕與使用者介面元件。
淺灰色
十六進制
#F1F5F9
RGB
rgb(241, 245, 249)
卡片與內容模組的背景，用於創造視覺上的區隔。
中灰色
十六進制
#C1C1C1
RGB
rgb(193, 193, 193)
邊框與細微的介面元素。
Off-White
十六進制
#EBEEF0
RGB
rgb(235, 238, 240)
背景的細微變化。
排版
該網站採用襯線字體作為標題，並搭配無襯線字體作為內文，從而建立起清晰易讀的排版層級。
DM 襯線展示字體
Aa Bb Cc
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789
abcdefghijklmnopqrstuvwxyz
0123456789
國際
Aa Bb Cc
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789
abcdefghijklmnopqrstuvwxyz
0123456789
字體比例
以下範例概述了網站上各種文字元素的字體大小與粗細。
精簡版頂部連結列
字型
Inter
尺寸
0.74rem
重量
600
標題 1 (H1)
字型
DM Serif Display
尺寸
62px
重量
400
透過早期篩檢對抗睪丸癌
第二級標題 (H2)
字型
DM Serif Display
尺寸
40px - 48px
重量
400 - 800
我們的使命：透過教育拯救生命
第三級標題 (H3)
字型
DM Serif Display
字體大小
28px
重量
400
學習如何進行睪丸自我檢查
正文 (P)
字型
Inter
字體大小
17.5px
重量
400
睪丸癌基金會成立於 2009 年，是一家 501(c)(3) 非營利組織，也是全美唯一擁有全職工作團隊的睪丸癌組織。我們是一支由倖存者、照護者及倡議者組成的團隊，致力於提升公眾對睪丸癌的認知與了解。
按鈕字型
字型
Inter
尺寸
0.9rem
重量
600
字間距
0.07em
轉換
大寫
行高
1.8em