Design System Architecture

用途：面向需要建立或规范设计系统的团队，提供可扩展的视觉语言框架，覆盖从单个项目到整个组织的设计一致性。\n\n核心原则：设计决策必须编码为令牌（变量），组件中不应硬编码；好的设计系统通过约束加快决策；构建可组合的基础组件，而非限制性的固定布局。\n\n令牌架构：分三层，语义令牌描述用途（如 --color-primary）、别名令牌表达设计决策（如 --color-brand-primary）、原始令牌为无含义的原始值（如 --blue-500、--space-16）。资料给出了灰阶/蓝色阶、间距、字体、字号、字重等原始令牌示例，以及品牌色、尺寸、圆角等别名令牌和背景、文本、边框、状态、组件级语义令牌。\n\n色彩系统：说明中性色、品牌主/辅色、语义色（成功/警告/错误/信息）的色阶结构；暗色模式通过 [data-theme="dark"] 覆盖语义令牌，并支持 prefers-color-scheme 系统偏好。\n\n排版与间距：给出显示级、标题级、正文级、工具级的字号/行高刻度及 CSS 实现；间距以 4px 为基础单位，列出常见场景的取值与组件、页面间距指南。\n\n组件与集成：以按钮为例说明容器、内容、图标、状态（默认/悬停/按下/聚焦/禁用/加载）的解剖结构与变体写法；提供 Tailwind 配置映射令牌的示例。\n\n动画系统：定义时长与缓动令牌，给出淡入、上滑、缩放等常见关键帧模式。\n\n质量清单：要求所有颜色/间距/排版走令牌、组件状态齐全、暗色模式测试、对比度达标（正文 4.5:1、大字号 3:1）、焦点可见、尊重 prefers-reduced-motion、令牌与组件 API 有文档。\n\n限制：资料未提供安装命令、收费方式、平台支持或具体使用步骤，以上暂未提供。