用途：这是一套带明确倾向性的界面约束规范，供 AI 智能体在构建 Substack 风格（浅色模式、Inter 字体、4px 网格）界面时参考使用。适用于构建浅色模式界面、创建 Substack 风格设计系统、以及使用 Inter 字体与 4px 网格实现 UI。
颜色：主表面应使用浅色背景，页面背景必须为 #FFFFFF（surface-base）。语义变量包括 surface-raised #FC5013（卡片、模态、抬升表面）、surface-overlay #E9E9E9（覆盖层、提示、下拉）、text-primary #999999、text-2 #515151、text-secondary #717171、border-default #E7E7E7、destructive #E26739。文字对比度至少 4.5:1。
字体：主字体必须为 Inter，建议单一字体族；主标题用 36px/semi_bold，正文用 17px/500；标题使用 text-balance，正文使用 text-pretty；数字数据建议 tabular-nums；除非明确要求，不得修改字距。
间距与边框：必须使用 4px 网格，默认元素间距 4px，不得使用任意间距值；圆角取自 3px、4px、6px、7px、8px、9px、16px、18px，默认 9px；边框宽度统一 1px。
布局：以 1920px 为基准视口设计；全屏高度使用 h-dvh 而非 h-screen；固定元素需考虑 safe-area-inset；方形元素用 size-*。
交互与动画：焦点必须使用 2px 轮廓与 2px outline-offset，不得移除焦点指示。破坏性或不可逆操作必须使用 AlertDialog；错误需显示在操作发生处；不得阻止输入框粘贴；纯图标按钮需 aria-label。非明确要求不得添加动画，仅动画 transform 与 opacity，交互反馈不超过 200ms，并尊重 prefers-reduced-motion。此外不得在活动动画之外使用 will-change，不得用 useEffect 表达可写成渲染逻辑的内容。上述为文档列出的约束，实际落地需结合具体项目，其余细节暂未提供。