用途:为 AI 代理提供一套有明确立场的约束,用于构建 Mercury 风格的界面,适用于浅色模式界面、Mercury 启发式设计系统,以及采用 Inter 字体和 4px 网格的 UI 实现。
主要能力:给出颜色语义令牌与用色规则,要求主表面使用浅色背景、页面背景 surface-base 为 #000000、主操作与焦点色 accent 为 #8B9CEC,并保持文字对比度至少 4.5:1;排版要求以 Inter 为主字体,主标题 69px / 700,正文 16px / 700,标题用 text-balance、正文用 text-pretty,数字用 tabular-nums,不擅自修改 letter-spacing。间距要求基于 4px 网格,默认元素间距 5px。边框圆角限定在 3px、4px、10px、13px、16px、18px、21px,默认 13px,1px 用于分隔。布局以 1920px 为基准视口,不用 h-screen 而用 h-dvh,固定元素遵守 safe-area-inset,方形元素用 size-*。组件方面规定输入框高度 0px、幽灵按钮样式等。交互上焦点用 2px accent 描边与 2px outline-offset,禁用态 opacity 0.5 且 cursor: not-allowed,破坏性操作使用 AlertDialog,加载用骨架屏,错误就地展示,禁止阻止粘贴,纯图标按钮需 aria-label。动效方面,除非明确要求否则不加动画,只对 transform 与 opacity 做动画,入场用 ease-out,交互反馈不超过 200ms,并尊重 prefers-reduced-motion。性能上避免动画大面积 blur 或 backdrop-filter,不在动画外用 will-change,不用 useEffect 表达可渲染逻辑。
使用方式与限制:资料未提供安装命令、URL 用法或调用步骤,暂未提供。文中同时存在浅色背景建议与黑色页面背景的表述,实际落地时需以具体上下文为准。部分数值(如输入框高度 0px、颜色检测数量)为规范原样记录,未提供调整说明。