| name | ScopePatch | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| description | 暖白纸面与松绿批注组成的范围对照工作区。 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| colors |
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| typography |
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| rounded |
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| spacing |
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| components |
|
Creative North Star: "设计工作室校样"
像设计工作室的一张清楚校样：暖白纸面承载原文，松绿色标记下一步和已选证据，深色正文保持长文可读性。Newsreader 的衬线标题提供编辑感，系统字体承担输入、说明和操作。视觉表达服务于阅读、对照和本人确认。
保留原文的顺序与上下文，以细线、留白和少量纸面容器分组。界面密度克制但不空泛：说明紧贴需要作决定的控件；重要状态同时用文字、形状或标记表达。当前产品不依靠照片、插画、数据大屏或装饰动效建立识别。
Key Characteristics:
- 暖白背景与近白纸面，以松绿形成动作和批注。
- 衬线标题配系统正文；原文、项目名和回复保持阅读优先。
- 单列工作区、细分隔线、少量真正成组的纸面容器。
- 显式 Sample、AI 建议与人工决定分开、保存与复制状态准确。
本文件记录 2026-09-05 的已实现系统，延续原有方向；视觉决策由用户授权自主完成，没有另行批准的视觉稿。规范来源为 src/theme.ts、src/components/ui.tsx、app/ 与 .impeccable/review/ 的七张浏览器界面截图。代码中的命名是实现来源，以上 frontmatter 是可移植的视觉 token 清单；其中 pale-green、pale-amber、pale-error 分别对应代码的 camelCase 名称。组件边框、最小尺寸和状态扩展见 .impeccable/design.json。
核验截图包括六张手机尺寸浏览器截图（440 × 956）及桌面首页（1440 × 960）。它们覆盖首页、范围输入、请求、证据审阅、估价和清空回复后的编辑状态；不等于原生 iPhone 实机截图，也不证明全部路由、辅助功能或云端状态已经验证。首页 GitHub 反馈与源码链接在这批截图之后加入，已按当前代码记录。
配色如暖纸上的深色正文与松绿批注。颜色原值以 frontmatter 为准，原生实现以 src/theme.ts 为源。Sidecar 的八阶 OKLCH 色带仅供设计面板展示，并非应用可额外使用的色值。
- 松绿（green）：主要动作、链接、当前步骤、引用选中边框及估价数字。
- 批注浅绿（pale-green）：Sample、人工审阅等信息标签，以及已选证据和决定的底色；不单独承担成功含义。
- 赭色与浅暖底（amber / pale-amber）：AI 建议标签、需要留意的说明和一般反馈。当前 Notice 也用这套颜色显示已复制等信息，并非专属风险等级。
- 砖红与浅红底（error / pale-error）：可恢复错误、删除类动作及其确认按钮。
- 暖纸背景（background）：全屏、原生导航栏与空白区域。
- 内容纸面（paper）：输入框、来源容器、样例、回复及未选决定。
- 深绿墨色（ink）：标题与主正文。
- 灰绿文字（secondary）：说明、元数据、字段提示与未激活步骤。
- 浅灰绿线（line）：列表分隔线、默认描边与后续步骤。
- 白色（white）：实心按钮文字及其加载指示器。
The Proof Before Decoration Rule. 先保证来源、当前项目和本人决定可辨认，再增加视觉表达；状态不得只靠颜色。
Display Font: 随应用加载的 Newsreader Medium（内部字体名 Newsreader_500Medium）。
Body Font: 平台系统字体；组件没有另设正文家族。
Label/Mono Font: 标签沿用系统字体，不另引入等宽字体。
Newsreader 只承担品牌、标题、项目名称与显著金额，形成编辑校样感；系统正文承担连续阅读、输入和操作，避免表单过度装饰。大标题、常规标题、导航标题及估价字号见 frontmatter。项目列表的项目名使用衬线字体（25px），请求引文使用系统字体（19px / 28px）。
正文采用 body；元信息、提示与长来源列表可采用 body-small。字段标签和按钮使用对应的半粗角色。Eyebrow 为大写；Badge 保留传入文字的大小写。不要把较小的步骤标签或状态标签扩散到长正文。估价与范围序号启用 tabular-nums，方便数值对齐。
字体加载过程中根布局等待加载；字体错误时导航标题退回系统字体，其余 Heading 仍使用字体别名，因此不能宣称已验证完整的字体失败降级。当前没有自定义字体缩放上限；大号辅助字体下的布局尚需原生验证。
所有主要页面复用滚动的单列工作区。内容宽度为可用宽度的 100%，上限（740px），居中排列；左右页面边距使用 gutter，顶部留白（26px），主要段落之间使用 section。底部留白为 max(safeArea.bottom, 24) + 24，确保长内容与尾部操作可以滚动到达。
桌面沿用同一列宽和流程，没有侧栏或桌面专用多栏断点。仅估时与时薪输入并排等分（间隔 14px）；文字按可用宽度换行。首页页脚的两条外链允许换行（横向间隔 24px）。当前实现没有自定义媒体查询或命名断点。
容器内以短间隔连接标签、正文和说明；Paper 内间隔（14px），普通分组常用（8–16px）。项目和历史列表靠顶部细线分隔，不把每一行独立装进卡片。工作步骤常驻各步骤内容顶部，随页面一起滚动，并非吸顶导航。
原生布局采用 safe area、Expo Router Stack 与返回按钮；iOS 使用 KeyboardAvoidingView 的 padding 行为（keyboardVerticalOffset 为 96）。这些是已实现的结构，键盘、安全区、返回手势和系统字号仍需真机确认。当前浏览器证据不构成 390px 或所有窄屏宽度的完整视觉验收。
没有自定义阴影、渐变、模糊或浮层投影。页面通过暖背景、近白纸面、浅色批注和完整细线建立层次。原生 Stack 隐藏标题栏阴影，使导航与工作纸面连续。
The Flat Paper Rule. 默认通过纸面色差、完整细边框与留白分层，不加入投影。
当前没有自定义动画时长、缓动曲线或 hover 变色 token。按压状态直接降低透明度，路由切换沿用平台与 Expo Router 的默认行为；旧方向文档里的自定义淡入时长不是当前实现。减少动态效果与原生转场表现尚未单独验证。
Badge 使用紧凑的小圆角；按钮、字段、提示与决定选项使用 control 圆角；真正成组的 Paper 使用 paper 圆角。Button 和 Paper 在支持的平台请求 continuous 曲线。具体半径以 frontmatter 为准。
原文证据块保持方角、四边一致的细描边（1px）；选中只换描边与底色，并出现“✓ Referenced”。没有单侧粗色条。普通字段、Paper、次要按钮也使用完整细描边（1px）；选中决定加重到（2px）。单选圆形为外圆（20px）、内点（10px），帮助在不依赖颜色的情况下识别选择。
直接、稳重，文字清楚说明下一步。主要按钮为松绿实底白字；次要按钮透明底、浅线框、松绿字。删除类动作分别复用砖红实底与砖红线框变体。尺寸与填充见 frontmatter，实际最小高度（50px）；按钮文本居中并可换行。
默认透明度为 1，按下为 0.78，不可用或加载为 0.47。加载时显示 ActivityIndicator，同时设置 disabled 与 busy 的辅助状态。控件不新增自定义 hover 色；Web 的焦点表现沿用浏览器/框架，不能据此推广出一套自定义品牌焦点色。
Badge 是说明性标签，不是筛选按钮。默认浅绿底松绿字，warning 变体为浅暖底赭色字。Sample、Manual review、Saved locally 等文案明确说明内容性质；不要把它们误当付费、批准或成果标记。
Paper 只包装有明确共同语义的内容，如原始范围、客户请求、计算估价、样例和已保存回复。使用近白纸面、浅色四边描框与固定内部留白；不加投影。分隔线 Rule 为（1px）。
标签在上，输入在中，提示紧随其后。近白底、完整浅线框、深墨文字，光标选区为松绿；标签与输入之间留白（8px）。最小高度（50px），输入文本（16px / 24px）；多行输入顶端对齐，按用途提高最小高度。
错误由相邻 Notice 解释，当前没有通用的字段红边或内嵌错误图标。不能仅依赖占位符充当标签。输入忙碌时可禁止编辑，但该组件不另外定义不可用底色。清空已生成的回复后编辑框继续存在，保存与复制禁用，使用者仍能重新输入。
Expo Router Stack 使用暖纸栏底、衬线标题和松绿返回控件，标题栏没有阴影。首页 Account 为文本入口，最小高度（44px）。步骤条依次显示 01 Scope、02 Request、03 Review、04 Reply；每段等宽，段间隔（8px），顶线高度（2px）。当前与已完成的线为松绿，只有当前文字加粗；它提供位置说明，不是可点击的进度跳转。
首页下方提供 “Share feedback on GitHub” 与 “Source code” 外链，文字（15px），上下各（14px）点击留白，并允许换行。旁边明确说明反馈公开，应省略客户姓名和私密项目资料。
这是系统的标志性组合：客户请求、原文范围、引用状态与 Your decision 在一个阅读流中，但角色明确分开。手动模式的原文项作为 checkbox，AI 模式的来源引用为只读；选中证据有浅绿底、松绿完整边框与文字勾选标记。原文行号使用 Eyebrow。
决定选项为 radio，含标题、解释与可见圆点。未选时为纸面与浅线框，选中时为浅绿底与加粗松绿边框，按下透明度为 0.8。只有选定本人决定后，Write my reply 才可用。Review 与 Reply 的标题区保留项目名称，防止跨步骤丢失上下文。
Notice 以短正文说明状态及恢复路径：一般反馈为赭色系，错误为砖红系，均使用完整细描边。错误声明 alert；消息区域使用 polite live region。未配置、未登录、失败、缺少输入等状态必须说清楚可继续做什么，且不能伪装成功。
Reply 将人工输入的估时、费率与醒目的计算金额放在同一组；金额只是 estimate。模板生成后的内容可编辑、保存与复制。用户改写模板后，历史将金额标记为未另行记录；新输入导致旧模板过期时，先提示更新并阻止保存/复制。空回复状态保留编辑器并禁用这两个动作。
- Do 优先复用现有 Screen、Body、Heading、Button、Field、Paper、Notice 与 Steps。
- Do 把来源、项目名、Sample 与本地保存信息放在对应内容附近。
- Do 用文字、勾选标记或单选圆点补充颜色，保留原文可选取能力。
- Do 保持证据块四边一致的细边框，让引用原文和人工决定各有位置。
- Do 在回复清空后保留编辑框，禁用空内容的保存与复制。
- Do 如实说明浏览器验证、原生验证与云服务配置的边界。
- Don't 将纸面容器套成多层卡片，或给普通列表行加装饰阴影。
- Don't 把绿色、勾选或保存状态用作客户批准、付款或 AI 正确性的证明。
- Don't 给参考原文加装饰性的单侧彩色粗边，破坏统一边框语言。
- Don't 为桌面另造仪表盘结构；当前工作区在宽屏仍保持居中单列。
- Don't 把尚未实现的动效、断点、深色模式或实机可用性写成已交付规范。