用途：帮助建立统一、可访问的视觉设计系统，覆盖排版、色彩、间距与图标四大基础。适用场景包括为新项目建立设计令牌、创建或优化间距与尺寸系统、选择与搭配字体、构建可访问配色、设计图标系统与视觉资产、改善视觉层级与可读性、审计视觉一致性、实现暗色模式或主题化。
主要能力：一、排版。提供基于比率的模块化字号标尺（如 --font-size-base: 1rem 至 --font-size-5xl: 3rem），并给出行高建议：标题 1.1-1.3、正文 1.5-1.7、UI 标签 1.2-1.4。含流体排版示例 clamp(2rem, 5vw + 1rem, 3.5rem)、阅读宽度 max-width: 65ch、字体加载 font-display: swap 防止布局偏移，以及安全字体搭配建议。二、间距。8 点网格系统，从 --space-1: 0.25rem 到 --space-16: 4rem；给出组件间距参考（卡片内边距 16-24px、区块间距 32-64px、表单字段间距 16-24px、按钮内边距、图标与文字间距 8px）和用相邻选择器维持垂直节奏的做法。三、色彩。语义化颜色令牌（品牌色、成功/警告/错误/信息色、灰阶），标注 WCAG 对比度要求：正文 4.5:1（AA）、大字 18px+ 3:1、UI 组件 3:1、增强 7:1（AAA）；提供暗色模式变量切换方案与对比度计算函数 getContrastRatio。四、图标。定义 --icon-xs 至 --icon-xl 尺寸系统与 Icon 组件示例，使用 aria-hidden 处理装饰性图标。
使用方式：以 CSS 自定义属性定义令牌，可在 Tailwind 配置中扩展 fontFamily、fontSize、colors、spacing。文中列出必要命令与代码片段，按原样保留。
限制与最佳实践：需建立约束以保持一致性、记录决策形成样式指南、测试对比度与触控目标、使用语义化令牌而非按外观命名、移动优先设计、限制字重至 2-3 种、避免魔法数字、补齐 hover/focus/disabled 状态、提前规划暗色模式。常见问题包括间距不统一、对比度不足、字体过多、随意数值、缺失状态与暗色模式改造困难。收费、价格与平台信息暂未提供。