文字
三种字体，各管一件事：衬线体做标题，无衬线体用于所有要读、要点的文字，等宽字体用于代码。每个字族在西文字体后面列了中文字体，中英混排时两边都用对的字。
- 标题用 Noto Serif SC，只用 400 字重，字号越大字距收得越紧。加粗的衬线体不符合品牌。
- 正文、导航、按钮和标签用 Manrope 加 Noto Sans SC：段落用 400，标签和强调用 500。
- 代码用 Maple Mono。
- 数学公式用 Noto Sans Math，不可用时退回系统自带的数学字体。
强调靠字号，不靠字重：先换更大的衬线体，而不是更粗的。大写小标签是唯一不用句首大写的文字。
字体从 Google Fonts 和 jsDelivr 加载，不挡页面渲染；Fonts 组件见概览。
| Token | 值 | 说明 |
|---|---|---|
--font-displayfont.display | "Noto Serif SC", "Noto Serif CJK SC", Georgia, serif | 大标题，只用 400 字重。 |
--font-sansfont.sans | Manrope, "Noto Sans SC", "Source Han Sans SC", system-ui, sans-serif | 正文、小标题、导航、按钮和标签。Manrope 显示拉丁字母，Noto Sans SC 显示中文。 |
--font-monofont.mono | "Maple Mono NL NF CN", ui-monospace, SFMono-Regular, monospace | 代码、终端输出和技术细节。 |
--font-mathfont.math | "Noto Sans Math", "Cambria Math", "STIX Two Math", math | 数学公式。Noto Sans Math 不可用时，用系统自带的数学字体：Windows 的 Cambria Math、macOS 的 STIX Two Math。普通无衬线字体不能拉伸括号、放大运算符。 |
每种样式是一个类，例如 .ds-display-xl，加上一组变量，每个属性一个。屏幕窄于 768px 时，最大的三档标题字号降一级，字距也按新字号重新定，display-sm 不变。这是 token 层面的变化，所有类和组件都会跟着变，不用各自写媒体查询。
| Token | 值 | 说明 |
|---|---|---|
--display-xl-sizedisplay-xl.ds-display-xl · --display-xl-family -lh -ls -weight | 4rem / 1.05 · 400 · -1.5px窄屏 2.75rem / 1.05 · 400 · -1px | 页面大标题。 |
--display-lg-sizedisplay-lg.ds-display-lg · --display-lg-family -lh -ls -weight | 3rem / 1.1 · 400 · -1px窄屏 2.375rem / 1.1 · 400 · -0.8px | 区块标题。 |
--display-md-sizedisplay-md.ds-display-md · --display-md-family -lh -ls -weight | 2.25rem / 1.15 · 400 · -0.5px窄屏 2rem / 1.15 · 400 · -0.4px | 小节标题。 |
--display-sm-sizedisplay-sm.ds-display-sm · --display-sm-family -lh -ls -weight | 1.75rem / 1.2 · 400 · -0.3px | 卡片标题和价格。 |
--title-lg-sizetitle-lg.ds-title-lg · --title-lg-family -lh -ls -weight | 1.375rem / 1.3 · 500 · 0px | 大号无衬线标题。 |
--title-md-sizetitle-md.ds-title-md · --title-md-family -lh -ls -weight | 1.125rem / 1.4 · 500 · 0px | 卡片和列表标题。 |
--title-sm-sizetitle-sm.ds-title-sm · --title-sm-family -lh -ls -weight | 1rem / 1.4 · 500 · 0px | 小标题和标签。 |
--body-md-sizebody-md.ds-body-md · --body-md-family -lh -ls -weight | 1rem / 1.55 · 400 · 0px | 正文。 |
--body-sm-sizebody-sm.ds-body-sm · --body-sm-family -lh -ls -weight | 0.875rem / 1.55 · 400 · 0px | 次要文字。 |
--caption-sizecaption.ds-caption · --caption-family -lh -ls -weight | 0.8125rem / 1.4 · 500 · 0px | 说明文字和元信息。 |
--caption-upper-sizecaption-upper.ds-caption-upper · --caption-upper-family -lh -ls -weight | 0.75rem / 1.4 · 500 · 1.5px | 分类和徽章用的大写小标签，系统里唯一不用句首大写的文字。 |
--code-sizecode.ds-code · --code-family -lh -ls -weight | 0.875rem / 1.6 · 400 · 0px | 代码块和行内代码。 |
--button-sizebutton.ds-button · --button-family -lh -ls -weight | 0.875rem / 1 · 500 · 0px | 按钮文字。 |
--nav-link-sizenav-link.ds-nav-link · --nav-link-family -lh -ls -weight | 0.875rem / 1.4 · 500 · 0px | 导航链接。 |