色彩Color
界面里的每个颜色都是一个语义令牌，深浅两套主题各有一组取值。本页的色块和色值都是从当前页面的 CSS 变量实时读出来的：用右上角切换深浅色或强调色，它们会跟着变。点击色块复制色值。
品牌色
墨、强调色、纸三个品牌色本身不随主题变化，变的是它们担任的角色。
浅色主题下，墨色是正文和主按钮的底色，纸色是主按钮上的文字。
色阶
每个色块是一个令牌在当前主题下的取值，取值相同的令牌并成一块，悬停可以看到令牌名。浅色主题的中性色是带一点冷调、向墨色收敛的灰：浮起的控件、卡片、浮层用纯白，面板和页面底色依次略灰一点，再往下是凹槽和轨道。强调色往纯白里混出柔和底、柔色和填充，往墨色里压出悬停色。
中性色
强调色
语义表面
界面由几层表面叠出来：画布 → 面板 → 卡片，再往里凹（凹槽）或往外浮（浮起的控件、浮层）。浅色下越往上越白；深色下越往上越亮，凹槽比画布更深。
--ok-bg --ok-surface --ok-card --ok-well--ok-raised--ok-pop- 6 : 3 : 1。中性表面占六成，墨色（文字、主按钮）三成，强调色至多一成。
- 强调色不写字。当前强调色压在卡片上只有 …:1，达不到正文需要的 4.5:1，只做填充和图形；文字用
--ok-accent-text（浅色取每种强调色单独定的一档深色，现在是 …，对比度 …:1）。 - 强调色上用墨。强调色填充之上的文字和图标用
--ok-on-accent，当前对比度 …:1。按强调色的感知亮度自动选：比较暗的颜色上用白字（预设里只有蓝色），其余用墨色；自定义颜色也一样。 - 柔和底不透明。
--ok-*-soft是用color-mix()混出来的固有色：浅色主题把强调色或状态色按比例混进纯白（强调色 16%）。压在凹槽、灰底上时用更浓的--ok-accent-tint。 - 不用阴影。层级靠表面色阶和发丝线区分，见 形状 · 间距 · 层级。
强调色与状态色
五种预设强调色，默认是粉色（pink），也可以用任意颜色。柔和底、填充、悬停色、文字色都由 color-mix() 从一个颜色派生，深浅两套主题各有一组配比。这里切换强调色会改整站的设置。
pink · …状态色
成功、警告、危险、信息四种。主色两套主题共用，文字色在深色下提亮，柔和底按主题混白或混卡片色。
切换主题和强调色的接口（setTheme、setAccent），以及只给页面某一块换强调色的 data-accent，见 主题。
半透明只用在四处
除了下面四样，所有颜色都是不透明的固有色。浮层（菜单、下拉、通知）用不透明的 --ok-pop，不加背景模糊。
--ok-hover …：列表行、菜单项、表格行悬停时叠一层。--ok-line …、--ok-line-2 …，顶部高光 --ok-hi …。--ok-scrim …：对话框背后压暗页面，并把页面模糊 8px。全部色彩令牌
按用途列出每个颜色令牌和它在当前主题下的值。写自己的样式时引用令牌，不要抄色值。
品牌
三个品牌色，两套主题共用。
表面
从凹到凸：深凹槽 → 凹槽 → 画布 → 面板 → 卡片 → 浮起；浮层和滑块圆钮单列。
半透明
只有这五个令牌带透明度。
文字与反色
三级文字色对比度不足 4.5:1，只用于装饰性文字；反色是主按钮的底色和它上面的文字。
强调色
除了 --ok-accent、--ok-accent-deep 和 --ok-on-accent，其余都是用 color-mix() 派生的。
状态色
主色两套主题共用；-text 是能当文字用的一档，深色下提亮；-soft 是不透明的柔和底。