设计系统

阅读与节奏 · Reading

留白让句子有呼吸的空间。正文中的 重点内容、轻声强调、强调中的重点 和 删除的文字 各有用途；行内链接与引用式链接保持同样的表达。

Good typography gives words room to breathe. The rhythm of a paragraph comes from its measure, spacing, and contrast — quiet details that keep the meaning in focus.

显式换行保留在同一段落中。
A deliberate line break stays in the same paragraph.

三级标题 · A subsection

段落是阅读的基本单位；标题表达内容之间的关系。

四级标题 · A smaller group

更深的层级复用条目标题的字号，以字重区分。

五级标题 · A detail

以斜体补充区分，保持字号数量克制。

六级标题 · A finer detail

结构仍然保留，字重与斜体共同表达层级。

列表 · Lists

• 无序列表 / Unordered list
  • 嵌套项目 / Nested item
  • 另一项包含 强调 和 inline code
• 第二个顶层项目 / Another item

1. 先阅读 / Read first
   1. 关注内容 / Follow the content
   2. 留意节奏 / Notice the rhythm
2. 再记录 / Then take notes

• 已完成的示例 / Complete
• 待完成的示例 / Pending

引用 · Quotations

少一点干扰，多一点内容。

A quiet page leaves room for the reader.

嵌套引用 / A quotation within a quotation.

代码 · Code

行内代码 const message = 'Hello, world'; 沿用等宽字体。

const page = {
  title: '阅读与节奏 · Reading',
  language: 'zh-Hans',
  canonical: 'https://yangpan.com/design-system',
};
console.log(page.title);

长地址：https://example.com/a-long-path/reading-and-writing/notes-on-typography-and-whitespace?language=zh-Hans&view=complete

表格 · Tables

元素 / Element	用途 / Purpose	对齐 / Alignment	示例 / Sample
标题 Heading	表达内容层级	居中 Center	01
正文 Body	中英文混排与连续阅读	居中 Center	02
代码 Code	const readable = true	居中 Center	03

图片 · Images

图片说明：形状、留白与阅读方向。 / Shapes, whitespace, and reading direction.

---

分隔线之后继续正文。脚注将补充信息放在文章末尾。¹

Footnotes

1. 这是一条脚注示例。A footnote keeps supporting information close, with a link back to the text. ↩