旧 F4 结构来源
133 张 TARGET 已有合同与结构画布；新 B 轴审计为 B2 partial、B3 verified 0
K00 / UI OPERATING SYSTEM
UI 操作系统
先统一完成度、页面 Shell、状态与证据，再允许多团队扩展组件。产品视觉可以不同，但 Screen Contract、权限语义和 QA 门禁必须一致。
DELIVERY TRUTH
页面数量和旧 F4 都不再冒充完成度
85 个 CURRENT 与 133 个 TARGET 分轨统计；旧 F4 只保留为结构来源。新蓝图必须达到 B3 Interaction Complete，B4 有 evidence 后才是 verified handoff。
产品化主状态
有独立主画面，仍需补完整状态族
结构骨架
字段真实，但交互仍依赖共用壳
碎片与错配
主任务与当前预览不完全一致
契约待设计
开放平台旧路由的 UI 契约已经清零；产品实现仍需独立证据
SHELL CONTRACTS
六类使用环境，统一骨架但不统一皮肤
每个页面必须选择一个 Shell；跨产品复用导航和布局规则，页面内部仍按真实任务设计。
Public Editorial
Portal · Booking official
Global nav / story / proof / relatedCommunity
BBS
Primary nav / feed / context / composerTransaction
Booking consumer
Context / steps / summary / fixed CTAControl Plane
Data · Trading · Merchant · Open
Sidebar / toolbar / work area / drawerNative
Matrix X · Quant
System nav / task / sheet / tabEmbedded Runtime
Mini App · Matrix Sim
Host bar / trust state / canvas / recoverySTATE FAMILY
每张 B3 页面必须交付九个真实状态
业务可以追加审核、冲突、过期等状态；每一态都必须改变真实页面区域，不能只在 READY 画布上覆盖一张通用状态卡。
READY
主任务可完成，真实字段和权限同屏
LOADING
保留骨架、结构与返回上下文
EMPTY
解释合法空集合并给出下一步
PARTIAL ERROR
保留可用数据，只重试失败区域
ERROR
稳定错误码、request_id 与恢复动作
OFFLINE
展示快照时间，暂停不安全写入
FORBIDDEN
服务端拒绝、缺失 scope 与申请入口
CONFIRM
对象、影响、不可逆性与审计
SUCCESS
receipt、下一步与可用撤销
Content first
首屏直接回答用户任务，导航和仪表盘 chrome 只占必要空间。
One source of truth
颜色、间距、字体和状态语义来自版本化 token，不在页面散落常量。
Density by context
公共内容舒展、运营表格紧凑、移动端单手可达；不强求所有端像素一致。
Accessible by default
键盘、VoiceOver、对比度、动态字体和减少动效是组件默认能力。
Evidence visible
金融内容展示来源、更新时间、风险与审核状态；系统操作展示执行证据。
Calm technology
参考 Vercel/Stripe/GitHub 的清晰层级，使用克制蓝绿信号，不堆装饰性 Web3 元素。
CURRENT VISUAL FAMILIES
保留六套现有产品气质，统一语义而不是强行同皮肤
全局设计系统先统一状态、间距、可访问性和组件契约；品牌色与内容密度继续由现有产品证据决定。
Public Trust线上实屏
reits.tech · BBS
建筑影像、可信青绿、来源卡与网格背景
Local Marketplace线上实屏
Matrix Order
黄色发现头、搜索、Chips、店铺与服务卡
Developer Dark线上实屏 + React + K08–K09E target
Open Platform
沿用现有深海军蓝底与亮蓝主操作；公共开发者页使用文档/代码密度，组织治理用紫色、自动化用青绿、商业与数据用克制金色，个人安全中心使用高密度白色工作区
OperationsVue 源码
data-sources · trading-data-source
Element Plus 侧栏、表格、筛选、抽屉与状态条
Matrix X仓库截图 + SwiftUI
matrix-x-chat-ios
大留白、蓝色主操作、原生 iOS 列表与五 Tab
Quant PaperSwiftUI 主题源码
matrix-quant-im-ios
暖纸背景、量化信号色、策略证据与原生 Tab
TOKENS
跨端语义 token
这些值定义角色，不抹平产品主题。每个现有视觉家族把自己的 palette 映射到相同语义，再生成 Web CSS、Vue theme 与 Swift 常量。
TokenValueUseSample
color.canvas#F7F8FA全局背景color.surface#FFFFFF卡片/面板color.ink#171A1F正文与标题color.muted#667085次级信息color.line#E4E7EC分隔与边框color.brand#0B63E5主操作与链接color.signal#0E9384可信/完成状态radius.control8px输入与按钮Aaradius.panel12px内容面板Aaspace.unit4px所有间距的基数Aalayout.content1200px正文最大宽度AaCOMPONENT CONTRACT
组件必须交付完整状态，而不只是静态截图
ComponentVariantsRequired states
Button
primary / secondary / quiet / dangerdefault · hover · focus · loading · disabledField
text / search / select / number / textareaempty · filled · focus · error · disabledStatus
neutral / info / success / warning / critical必须同时有文字，不只依赖颜色Table
comfortable / compactloading · empty · filtered · error · partialDialog
info / confirm / destructive焦点锁定 · Esc · 返回焦点 · 二次确认ContentCard
article / source / asset / thread来源 · 时间 · 状态 · 主操作固定RESPONSIVE
三档布局，不按设备品牌写页面
Compact · 320–767
单列；主操作拇指可达；表格转卡片或横向受控滚动；不隐藏关键状态。
Medium · 768–1199
两列或侧栏折叠；导航可横向滚动；详情和列表允许主从切换。
Wide · 1200+
内容最大宽 1200px；数据台可放宽；文本行长保持可读，不用空白装饰。
UI CI
UI 变更的六道门
- 01Token
无新增硬编码颜色/间距/字体
- 02Static
typecheck、lint、构建与本地化键
- 03Contract
组件、路由和 API schema 无意外漂移
- 04A11y
键盘、标签、对比度、动态字体
- 05Visual
关键 viewport 截图 diff 有 owner 审批
- 06Journey
核心用户任务 E2E 与失败态通过