Skip to content
Apothem
品牌指南

品牌调板

Apothem 核心品牌色与十五种工具品牌色,后者定义在“工具颜色”页面上。核心颜色的单一事实来源是位于 assets/design-tokens.css 的规范设计令牌;网站镜像这些值。

核心调板

规范调板——板岩中性色阶、翡翠强调色阶和语义色相——由位于 assets/design-tokens.css 的设计令牌(及其 assets/design-tokens.json 镜像)拥有。位于 site/app/global.css 的网站主题在 Fumadocs 主题所使用的 CSS 变量中以 OKLCH 形式重述语义令牌值:页面背景、文本、主色、边框和焦点环变量解析为精确的令牌级别(lib/theme-tokens.test.mjs 检查要求背景、前景、主色和焦点环变量与之一致)。同一文件中声明的 apothem-*、polygon-* 和 field-* 色阶是令牌色阶的派生近似值,而非副本,且不属于规范的一部分。下方的每个值都是设计令牌中板岩色阶或翡翠色阶的一个级别;诸如 slate-600 之类的级别名称指向该色阶中对应的值。

角色令牌(CSS)浅色模式深色模式用途
主色--apothem-textslate-900 #0f172aslate-50 #f8fafc标题、导航文本和主要阅读界面。
强调色--apothem-accent-textemerald-700 #047857emerald-400 #34d399活动链接、焦点环和选中的导航。
正文文本--apothem-text-mutedslate-600 #475066slate-300 #c2ccda默认正文文本。
正文底色--apothem-surfaceslate-50 #f8fafcslate-900 #0f172a默认背景。
导航底色--apothem-surface-sunkenslate-100 #eef2f7slate-950 #080c15页眉和导航条带。

工具调板

工具颜色位于工具颜色。Apothem 标识不带任何工具颜色;其六边形、中心节点和终端节点在 assets/DESIGN-SYSTEM.md 的标识部分中有所描述。工具颜色定义在该页面中,而不在设计令牌或 site/app/global.css 中;这二者只承载核心调板。

在文档中的用法

调板通过全局样式表 site/app/global.css 接入,由根布局导入。浅色和深色模式变体随主题的 .dark 类状态切换。

更新

仅当某个核心颜色(板岩/翡翠)发生变化,或某个工具在上游正式确认了品牌色变更时,调板才会更新。逐工具的变更会在工具颜色以及 assets/src/ 下每个受影响的 SVG 母版之间原子性地传播。

On this page