用途:为构建 Mem 风格界面提供一套强约束的设计规范,供 AI 代理在生成浅色模式、Inter 字体与 4px 网格的 UI 时参考。适用场景包括浅色模式界面、Mem 风格设计系统、基于 Inter 与 4px 网格的 UI 实现。
颜色:主表面使用浅色背景,页面背景必须为 #F9F5ED(surface-base),主要操作与焦点态使用 #95A3DC(accent);建议调色板不超过 9 种颜色;文本对比度至少保持 4.5:1。语义令牌还包括 surface-raised #EADCC3、text-primary #474449、text-2 #665E53、text-tertiary #2F2C3D、border-default #534F59 与 warning #F9F5ED。
排版:主字体必须为 Inter,建议统一使用单一字族;主标题为 86px/700,正文为 20px/400;字重仅限 regular、bold、semi_bold;标题使用 text-balance,正文使用 text-pretty,数字建议 tabular-nums;除明确要求外不得改动字距。
间距与边框:间距必须遵循 4px 网格,建议取自 1px、2px、4px、5px、6px、8px、13px、28px,默认元素间距 5px;圆角取自 16px、29px、32px、33px、37px、39px,默认 37px,胶囊元素建议 29px 以上;边框宽度限 1px、2px、3px,默认用 1px 细边框分隔。
布局:以 1920px 为基准视口,常宽 302px、304px、74px;全屏高度用 h-dvh 而非 h-screen;固定元素需考虑 safe-area-inset;方形元素建议 size-*。
组件与交互:Ghost 按钮透明背景、文字 #474449;焦点必须用 2px 描边加 2px 偏移的 accent 色,不可移除焦点指示;禁用态 opacity 0.5 且 cursor: not-allowed;破坏性操作使用 AlertDialog;加载用结构性骨架;错误显示在操作附近;不得阻止粘贴;仅图标按钮加 aria-label。动画:未明确要求不得添加;只用 transform、opacity;入场用 ease-out;反馈不超过 200ms;尊重 prefers-reduced-motion。性能:不得动画大面积 blur 或 backdrop-filter;不在活动动画外使用 will-change;不用 useEffect 表达可用渲染逻辑完成的事。
限制:资料未提供安装命令、依赖、平台支持、许可证与版本信息,暂未提供。