用途：这是一份前端设计系统的实现规范，适用于实现 UI 组件、页面或设计系统时使用，要求每个颜色、字体和动效选择都能追溯到这些规则。
主要能力：
- 令牌架构：所有颜色映射到少量原语（前景、背景、边框、品牌、语义），代码中使用 CSS 变量或主题对象，禁止硬编码十六进制色值。
- 字体层级：标题用更重字重与更紧字距，正文保证可读性，标签用中等字重，数据用等宽字体配合 tabular-nums 对齐；等宽字体仅用于真实对齐的数据，不用于装饰性小字。
- 加载顺序：首屏优先加载，仅预加载首屏可见资源；字体自托管 WOFF2 并 preload；LCP 图片/视频用 fetchpriority="high"；首屏以下用 loading="lazy" decoding="async"，并预留空间避免 CLS。
- 防止 FOUT：不使用 font-display: swap 处理用户会看到加载过程的文字；在 head 中同步添加 fonts-pending 类将显示字体文字设为 opacity: 0，在 document.fonts.ready 后切换为 fonts-ready 并淡入，同时设置约 2.5 秒安全超时。
- 慢加载内容：通过压缩、预加载、懒加载加快到达，并用骨架屏、低清海报等占位优雅加载，避免空白、部分绘制、回流等中间状态。
- 界面框架稳定：持久性框架（页头、导航、工具栏、状态区）高度恒定，状态文字单行截断，预留固定高度，避免布局抖动。
- 动效：微交互约 150ms，较大过渡 200–250ms，ease-out；复杂编排参考 motion-choreography.md；尊重 prefers-reduced-motion。
- 滚动叙事：解释性内容优先用滚动驱动图形，使用 IntersectionObserver 配合 rootMargin: '-48% 0px -48% 0px'，图形为活动步骤的纯函数；仪表盘、工具、表单等交互型界面不适用。
- 嵌套圆角：子元素圆角不大于父元素，理想为 child_radius = parent_radius − gap。
- 配色：调色板来自产品领域，颜色承载含义，交互状态应增加对比度；对比度决策用 APCA，合规门槛用 WCAG 2（4.5 / 3:1）。
使用方式：在实现 UI 时应用这些规则，空间构图与布局细节需加载 design-spatial 技能文件。
限制：资料未提供具体安装命令、收费信息或平台支持范围；部分规则为默认起点而非强制法律，需结合具体设计方向调整。