三种角色：primary用于品牌标识，ink用于字体和表面，signals用于色调和边框。点击任何十六进制或 RGB 代码即可复制。

主要及品牌

墨与字

信号与表面

标题使用衬线体，其余内容使用无衬线体。DM Serif Display 字体既能传递温暖感，又具备编辑风格的厚重感；Inter 字体则能从容应对长篇阅读和用户界面设计，且不造成视觉干扰。

两个量表。 文章 适用于长篇内容、博客文章和项目页面。 显示 适用于英雄区、着陆页以及需要字体发挥更大作用的营销场景。以下字号为桌面端的上限——标题采用 clamp() 因此，它们在手机上的显示会缩小。

第 16 / 600 页， padding: 1rem 2rem, 半径 8px，颜色过渡 0.18 秒。Squarespace 的链接样式会延伸到代码块中，因此按钮锚点始终设置为 颜色 和 text-decoration 与 !important.

可复用的设计模块。这些模块会出现在博客文章、项目页面以及面向捐赠者的内容中。在创造新模式之前，请先参考现有模式——品牌的统一性源于重复，而非新奇。

运动是一种暗示，而非表演。万物都沿着同一条短曲线运动，没有必要移动的东西绝不会移动。

• 过渡

  0.18秒至0.2秒 轻松 关于颜色、背景、边框和透明度。不要太长，也不要太花哨。

• 鼠标悬停在卡片上

  边框采用 TCF Cyan 颜色，并配以 1px 的同色环（box-shadow: 0 0 0 1px #00B4DB). 否 transY 新版本中的卡片式提升功能——随着页面重建，旧版提升功能正在被移除。

• Ledger 悬停

  将鼠标悬停在一行上，其同级元素会下移至 不透明度：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 参数。如有任何改动，请明确标注，切勿悄无声息地进行修改。

• 保留 H1 标签

  为了优化搜索引擎（SEO），重构后的英雄页面会保留一个H1标签，且其文本内容与原版完全一致。请避免使用Squarespace的 sqsrte-scaled-text wrapper —— 其内联尺寸在运行时可能会消失，从而导致标题折叠。

• 章节接管

  若要强制将某个块的区域设为深色，请选中背景图层，而不是该区域的选区框——绘制 .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;
}