用途:这是一套面向 AI 智能体的 Stripe 风格界面设计约束,适用于构建浅色模式界面、Stripe 风格设计系统,以及使用 Inter 字体和 4px 网格的 UI。
主要能力与规范:颜色方面,主表面应使用浅色背景,页面背景必须用 #F2F6F9(surface-base),主操作与聚焦状态必须用 #517BDF(accent),文字对比度至少 4.5:1。提供语义令牌,如 surface-raised #071A34 用于卡片、模态等抬升表面,text-primary #9DA1A9 用于标题正文,text-secondary #B1BCC7,text-tertiary #737883,border-default #131E2B,success #75B88A,warning #FAE6C2,destructive #D29E79。
排版:必须以 Inter 为主字体,尽量单一字族;主标题必须 53px / 700,正文必须 28px / semi_bold,标题用 text-balance、正文用 text-pretty,数字用 tabular-nums,不擅自改动字间距。字号参考含 5px 至 53px。
间距与边框:间距必须遵循 4px 网格,默认元素间隙 5px,不使用任意值。圆角须取自 3px、4px、7px、15px、22px、33px、35px,默认 22px,胶囊元素用 22px 以上,边框宽度限 1px、2px、3px。
布局:必须按 1920px 基宽设计,全屏高度用 h-dvh 而非 h-screen,固定元素遵循 safe-area-inset,正方形元素用 size-*。
组件与交互:输入框高度按 0px;焦点必须用 2px accent 轮廓并偏移 2px,不得移除;禁用态 opacity 0.5 且 cursor: not-allowed;破坏性操作必须用 AlertDialog;错误提示就近显示;不得阻止输入框粘贴;纯图标按钮须加 aria-label。动画仅在明确要求时添加,只动画 transform 与 opacity,交互反馈不超过 200ms,并遵循 prefers-reduced-motion。性能上不得为大型模糊表面加动画,不得在非活动动画外使用 will-change,不得用 useEffect 表达可渲染逻辑。
限制:以上为原文列出的规范条目,未提供安装命令、代码示例、价格或平台支持等信息。