用途:为 AI 智能体提供一套有明确取舍的约束,用于构建 Robinhood 风格的深色界面与设计系统。
主要能力:定义颜色、语义令牌、排版、间距、边框、布局、组件与交互规则。颜色要求主表面使用深色背景(亮度<20),页面背景 #000000,主操作与焦点态使用 #B7DF2F,调色板建议不超过 10 种颜色,文本对比度至少 4.5:1。语义令牌包括 surface-base #000000、surface-raised #C3FE09、text-primary #A0A0A0、text-2 #ECECEC、text-secondary #497009、border-default 与 accent 均为 #B7DF2F。排版要求主字体 Inter,主标题 85px/700,正文 14px/400,标题用 text-balance、正文用 text-pretty,数字用 tabular-nums,不擅自修改字距。间距使用 4px 网格,默认元素间距 4px,禁止任意值。圆角取自 19px、21px,默认 21px,边框宽度限 1px、2px。布局以 1920px 为基准视口,全屏高度用 h-dvh 而非 h-screen,固定元素需尊重 safe-area-inset。交互方面:焦点用 2px 强调色轮廓并带 2px offset,禁用态 opacity 0.5 与 cursor: not-allowed,破坏性操作使用 AlertDialog,加载用骨架屏,错误就近显示,图标按钮加 aria-label,禁止阻止粘贴。动画仅在明确要求时添加,只动 transform 与 opacity,入场用 ease-out,交互反馈不超过 200ms,尊重 prefers-reduced-motion。
使用方式:在构建深色模式界面、Robinhood 风格设计系统或使用 Inter 字体与 4px 网格的 UI 时引用这些指南。
适用场景:深色主题产品界面、设计系统搭建、AI 生成前端代码时的样式约束。
限制:资料未提供安装命令、代码示例、收费与平台信息;部分规则为建议性(SHOULD),并非全部强制。