一致的体验，从规范开始。
以工作台为视觉基准，所有内页共享同一份令牌和组件。
主页定基准，组件保一致。
规范直接引用正在使用的CSS变量，示例采用真实业务组件。
视觉基准
保留主页的玻璃层次、暖金主行动、松绿状态和克制的线框图标。
一个来源
design-tokens.css定义值，ui-system.css实现通用规则，共享组件供所有内页使用。
层次优先
页面、区块、卡片、正文与辅助信息分级；每个业务区域只突出一个主要行动。
颜色表达角色，而非装饰。
深色与浅色使用同一组语义名称，点击可复制变量。
主题偏好
从点击位置圆形展开；不支持或减少动态时直接切换。
颜色取自当前主题的真实变量；禁止在业务页面散落硬编码色值。
每一级文字，都有明确职责。
统一系统字体、rem单位和行高；数据采用等宽数字，避免递增时抖动。
--font-page · 500 · 行高1.35主页标题与内页一级标题
--font-section · 500 · 行高1.35规范区块、弹窗标题
--font-card · 500 · 行高1.35项目名称、内容卡片标题
--font-body · 400 · 行高1.6任务名称、表单内容、业务说明
--font-label · 500 · 行高1.4字段标签、筛选、主次行动
--font-caption · 400 · 行高1.4日期、状态标签和辅助信息
--font-micro · 400 · 行高1.4英文眉题、紧凑数据说明
--font-summary-title · 500 · 行高1.4主页项目摘要，桌面12／手机10 CSS px
--font-nav-label · 400 · 行高1.1底部主导航文字，配合大触控区域
--font-decorative · 400 · 行高1.4仅AI徽标和轨道英文，不能用于业务说明
--font-ring · 350 · 行高1.1主页环形指标，随容器高度调整
--font-summary-value · 350 · 行高1.1主页项目数
--font-summary-progress · 350 · 行高1.1紧凑项目卡片进度
--font-metric · 350 · 行高1.1项目数、完成率与数据摘要
--font-hero · 300 · 行高1.1主页焦点项目进度，限数据展示
业务正文0.875rem，标签0.75rem，辅助信息0.625rem；紧凑卡片标题手机0.625rem，底部导航标签0.5625rem。只有轨道英文及AI徽标可用0.5rem装饰标注。手机输入不小于1rem，避免自动放大。
统一网格，按关系留白。
以0.25rem为步长；靠近表示关联，留白区分模块。
间距刻度
--space-10.25rem--space-20.5rem--space-30.75rem--space-41rem--space-51.25rem--space-61.5rem--space-82rem--space-102.5rem--space-123rem使用位置
- 图标与文字：0.5rem；同组紧凑项：0.25–0.5rem。
- 卡片间距：1.25rem；页面模块：1.5rem。
- 标准卡片内边距：桌面1.5rem，手机1.25rem。
- 手机左右安全边距至少1rem；标题不贴边。
- 空间不足时重排列数，不按DPR整体缩放界面。
卡片有类型，表面有层次。
外框、指标、摘要、列表采用固定角色，避免嵌套过多玻璃层。
标准卡片
--radius-card · 主页概览、项目卡片、洞察面板与弹窗
指标卡片
--radius-metric · 两项环形指标与紧凑数字摘要
紧凑卡片
--radius-compact · 主页项目摘要、手机紧凑信息
列表容器
--radius-card · 任务表格；容器无内边距，行统一留白
边框与材质
- 卡片不显示有色边框；保留0.0625rem透明边框以保持布局尺寸。
- 内容表面使用--glass-bg；选中表面使用--glass-strong；工具栏使用--glass-chrome。
- 浅色为32%暖白玻璃配深墨文字；深色为18%深蓝玻璃配浅色文字。浅色晴空留白、深色蓝金暮色，不叠全屏白雾。
- 中央导航圆按钮使用不透明主题底色与1.5rem模糊，遮住下方横条；无边框、无环形高光，仅保留柔和外阴影。
- 玻璃模糊0.5rem；不支持时采用实色--surface-dialog。
- 阴影只分层，避免给每个状态再叠一圈阴影。
品牌与数字人
保留公司原始字标形状，以主题色作遮罩；副标题Work @CHIPWIN与字标对齐。小芯人物独立于卡片，头部可越过上沿，下身柔和渐隐；手机姓名位于人物下方，卡片收紧，手机摘要连续靠右排列，与下方快捷按钮组右侧对齐，仅用圆点分隔，不使用等宽列；数字大、说明小，文字基线对齐。顶部保留1rem安全留白，快捷按钮组整体居中，三个按钮等宽，高2.5rem；图文间距0.375rem，悬浮背景覆盖完整点击区域。桌面保持原来整组居中的摘要与等宽快捷操作。中间宽度为681–1100 CSS px：标题、标签、摘要与用户名不换行，空间不足隐藏副标题或仅保留操作图标；聊天按钮内边距0.75rem，窄卡片隐藏箭头。底部导航桌面统一只显示图标，竖屏统一显示图标与文字。竖屏右上角保留用户头像入口。顶部为全局／团队／个人数据视图，底部为业务页面导航；切换视图不跳转页面。竖屏切换组位于头像下方，右边缘对齐，头部预留6.5rem；日期与Logo左边缘对齐，与右侧Tab共用第二行。相较旧版标题上移1.5rem；桌面日期位于Tab下方，保留约0.75–1rem间距。
同一套图标，同一种语气。
所有业务图标使用@animateicons/react/lucide，经Icon组件统一尺寸和减少动态偏好。
常规1.25rem、辅助1rem；主导航1.5625rem；手机工具图标1.0625rem。工具按钮桌面2.5625rem、手机2.125rem；通知、邮箱、主题、语言、设置保持同尺寸。
动作说明变化，数值保持同步。
统一缓动cubic-bezier(.22,1,.36,1)，尊重系统减少动态设置。
--motion-fast悬停、按压、焦点反馈--motion-normal进度变化、表面状态--motion-route底部导航居中放大、内容左右滑入--motion-theme从鼠标／触点扩散至最远屏角的圆形遮罩--motion-data读取数据后，数字、圆环、声波和进度条共享时间线数字与图形共享同一条数据时间线。
主题从触点展开到最远屏角，键盘从按钮中心展开；底部选中导航滑至中心并放大；工作台每次进入时等待读取数据后从0递增。减少动态时直接显示最终状态。不会通过动画修改或伪造业务数据。
交互控件，直接复用。
标题、卡片、进度、状态与业务表单使用同一份实现。
行动层级
已触发0次；次要行动可归零。每个区域只保留一个主行动，禁用态不触发。
字段与反馈
标签不随输入消失，错误就近说明，提交时保留输入内容。
组件边界
PageHeader页面标题、眉题、说明与主行动Surface / Panel标准、指标、摘要与列表容器StatusBadge状态文字、颜色和底色ProgressBar / ProgressWithValue / Ring进度数值与可访问名称；百分比在横条右侧同一行Icon / ThemeToggle图标尺度、主题与减少动态AppShell固定外壳、导航、品牌、日期与备案Tooltip与玻璃材质
悬浮350ms、键盘聚焦或触屏长按550ms显示；边缘保留0.75rem。Esc、点击、滚动或窗口变化时关闭。卡片和工具栏使用0.5rem背景高斯模糊；中央导航圆按钮使用1.5rem；提示统一黑底白字、无描边，深浅主题一致。
屏幕像素与页面尺寸分开处理。
基准是当前主页在浏览器100%缩放下的CSS逻辑尺寸，不能按设备像素直接排版。
以上为浏览器实际读数。DPR包含设备与缩放的综合影响，不能仅凭它反推独立的系统缩放或浏览器缩放比例。
电脑显示设置与本机基准
本机记录（2026-11-11）：2560×1600，工作区2560×1528，Windows显示缩放150%，有效逻辑DPI为144。当前工作台渲染区762×1238设备像素，在100%浏览器缩放下约508×825 CSS像素；基准截图使用DPR 1.5。实际页面空间以实时读数为准。
- 分别覆盖Windows显示缩放100%／125%／150%／175%／200%／250%，不只验证浏览器缩放。
- 分辨率覆盖1920×1080、2560×1440、2560×1600与3840×2160；系统缩放变化后按新的可用逻辑空间重排。
- 物理PPI与Windows有效逻辑DPI分开记录；150%对应144逻辑DPI，不能当成显示器实际物理密度。
- 多显示器可有不同DPI和缩放。窗口跨屏时根据新视口和像素比重排，图标和图片保持清晰，不缓存旧DPR。
- 系统文字大小、浏览器字号偏好与页面缩放分别考虑，按最终根字号和CSS视口布局。
尺寸和像素比
- 物理分辨率是屏幕硬件像素，例如3840×2160；布局使用innerWidth/innerHeight表示的CSS视口。
- 面板PPI／物理DPI描述硬件密度，Windows逻辑DPI描述系统显示缩放；均不直接作为CSS断点。DPR表示物理像素与CSS像素的比例。
- 同一CSS宽度在DPR 1、1.25、1.5、2、3下应保留相同逻辑尺寸，只提高图像清晰度。
- rem跟随根字号；根字号100%，默认16px，不按屏幕宽度、DPI或DPR反向缩放。
系统与浏览器缩放
- 系统显示缩放会改变可用逻辑空间。浏览器80%／100%／125%／150%／200%缩放按变化后的CSS视口重排。
- 双指缩放影响可视视口，保留用户缩放能力；不设置禁止缩放或最大缩放限制。
- 不使用CSS zoom或整页transform来抵消用户缩放；不承诺不同屏幕的毫米物理大小一致。
- 放大后允许内页内容滚动，按钮与表单保持可读；主页按优先级减少次要信息。
适配和信息优先级
- 支持从320 CSS px起的手机视口；1200／980／680 CSS px为主断点，360为窄屏校正。
- 桌面左指标、中焦点、右小芯；手机上下重排，数字人在左、操作在右，工具和导航保留安全边距。
- 较矮手机优先保留焦点进度、项目名称、详情入口和小芯操作；副说明、项目条及部分次级指标移至对应内页查看。
- 图片保留高分辨率与透明通道；品牌使用原图遮罩，图标使用SVG，避免高DPR下模糊。
- 备案使用独立底部容器，上下居中；字号由容器宽高共同约束并保留安全区。
验证覆盖小手机、常用手机、平板与桌面；DPR与缩放分开记录，真实缩放和等效视口测试不能混称。
适配的是布局，不是随意缩放。
根字号100%，默认1rem=16 CSS px；高DPR只影响清晰度。
主页无滚动条，按可用宽高重排；内页独立滚动。
桌面、平板、手机断点为1200／980／680 CSS px。
键盘可操作，焦点环0.125rem并留出0.25rem间距。
弹窗由HeroUI管理焦点、Esc关闭及关闭后的焦点返回。
状态同时保留文字，图标按钮具备可读名称。
备案在底部可用留白区域上下居中，字体随容器自适应。
系统及浏览器缩放后按视口重排，不用DPR反向缩小控件。
减少动态时停用过渡；空态和错误态沿用标题及按钮规范。