用途：帮助建立协调、可访问的视觉系统，涵盖字体排版、色彩、间距和图标基础。适用场景包括：为新项目建立设计令牌；创建或优化间距与尺寸系统；选择与搭配字体；构建可访问的调色板；设计图标系统与视觉资产；改善视觉层次与可读性；审计设计一致性；实现暗色模式或主题化。
主要能力与内容：
- 字体排版：提供基于比例的字号阶梯（如 --font-size-xs 至 --font-size-5xl），行高建议（标题 1.1–1.3、正文 1.5–1.7、UI 标签 1.2–1.4）；字体搭配建议（如 Inter+Inter、Playfair Display+Source Sans Pro、Space Grotesk+IBM Plex Sans）；响应式排版使用 clamp() 实现流体字号；字体加载通过 @font-face 配合 font-display: swap 防止布局偏移。
- 间距系统：采用 8 点网格，提供 --space-1 等令牌（如 4px 到 64px）；给出组件间距指引（卡片内边距 16–24px、区块间距 32–64px 等）；用相邻选择器维持垂直节奏。
- 色彩系统：定义语义化颜色令牌（品牌色、成功、警告、错误、信息及中性灰阶）；给出 WCAG 对比度要求（正文 4.5:1、大文本 3:1、UI 组件 3:1、增强 7:1）；提供暗色模式变量切换方案与对比度计算函数示例。
- 图标系统：提供图标尺寸令牌与 Icon 组件示例（基于 SVG symbol 引用），建议尺寸映射与无障碍属性。
使用方式：资料给出 Tailwind 配置片段，可将上述令牌扩展到 theme.extend 中的 fontFamily、fontSize、colors、spacing；同时以 CSS 变量形式可直接用于原生 CSS。还提供字体加载、流体排版、垂直节奏等可直接复用的代码片段。
最佳实践与限制：建议限制选择以保持一致性、记录决策形成样式指南、测试可访问性、使用语义化命名、移动优先设计、限制字重数量（每族 2–3 种）。常见问题包括间距不一致、对比度不足、字体过载、魔法数字、缺少状态样式、没有暗色模式规划。资料未提供官方插件安装命令、定价或平台限制信息。