风格指南
本风格指南全面概述了睾丸癌基金会网站的视觉设计体系，重点关注色彩和字体设计。
颜色调色板
配色方案是品牌形象的关键组成部分，它能营造出统一且易于辨识的视觉风格。该配色方案由主色、辅色和点缀色组成，这些颜色在整个网站中经过精心布局加以运用。
《初选色彩》
原色是设计中使用最频繁的颜色，代表着品牌的核心身份。
主色调：青色/绿松石色
十六进制
#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
HEX
#EBEEF0
RGB
rgb(235, 238, 240)
背景的细微变化。
排版
该网站在标题中采用衬线字体，正文中采用无衬线字体，从而形成清晰易读的排版层次结构。
DM 衬线展示体
Aa Bb Cc
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789
abcdefghijklmnopqrstuvwxyz
0123456789
国际
Aa Bb Cc
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789
abcdefghijklmnopqrstuvwxyz
0123456789
字体比例
以下示例概述了网站上各种文本元素的字号和字重。
一级标题 (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