Year-end giving ends December 31. Be there for the next diagnosis. Give now →
构成睾丸癌基金会视觉语言的颜色、字体和组件样式。点击任何十六进制或RGB值即可复制。
三种角色：primary用于品牌标识，ink用于字体和表面，signals用于色调和边框。点击任何十六进制或 RGB 代码即可复制。
品牌。行动号召、视觉亮点、链接、眉线文字以及关键视觉元素。
为主色调青色设置标签按钮、内联链接文本和悬停状态。在带色背景上提高对比度。
已呈深青色元素、次要按钮、辅助链接和卡片链接的悬停状态。
标签、注释和特色卡片背景。以不与内容产生冲突的方式，低调地展现品牌存在感。
与“青色渐变”搭配的边框为实线。确保渐变卡片在白色页面上仍清晰可辨。
标题、主图卡、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>，或 font-weight: 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 运行，因此大多数新设计作品都是以自包含代码块的形式交付，直接嵌入到 Fluid Engine 模块中。这些规则可确保这些代码块之间以及与平台之间不会发生冲突。
每个新区块都使用 tcfx- 前缀。 tcf- 属于旧版自定义 CSS，会发生冲突。
.tcfx-block, .tcfx-block * { box-sizing: border-box; margin: 0; padding: 0; } 且宽度不能超过此值。一页宽的 * 重置功能以前曾导致网站无法正常运行。
将范围限定在该代码块根类下的所有规则。代码块应可安全地粘贴到任何页面上，且不会产生副作用。
如果一个 <style> 用途 @import 对于字体，它必须是该标签中的第一行，否则浏览器会忽略它。
正式发布的 HTML 和 CSS 代码中不包含注释。请在项目备注中对该代码块进行说明。
文本、数字或内联 SVG。表情符号在不同平台上的显示效果不一致，且读起来显得不够正式。
在整个用户界面中，深海军蓝代替了所有黑色。纯黑色仅用于媒体内容。
以手机布局为基础进行设计，并添加 min-width 向上查询。单列堆栈， clamp() 字体样式、640px以下缩减内边距、适合点击的目标区域。
target="_blank" 始终随附 rel="noopener noreferrer".
在重新设计现有页面时，请完全保留标题、正文、URL 和 UTM 参数。如有任何改动，请明确标注，切勿悄无声息地进行修改。
为了优化搜索引擎（SEO），重构后的英雄页面会保留一个H1标签，且其文本内容与原版完全一致。请避免使用Squarespace的 sqsrte-scaled-text 如果使用包裹元素，其内联尺寸可能会在运行时消失，从而导致标题折行。
要强制将块的区域设为深色，请将画笔指向背景图层，而不是区域框，然后进行涂色 .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; }