docs(v16): 调研落盘（dr6/dr1 量像素 + neuform 设计体系 + linear/attio computed style），先于改码

docs/v16-research.md

@@ -0,0 +1,243 @@
+# v16 调研：dr6 / dr1 的真实实现参数
+
+> 任务书：`TASK-v16-research.md`。本文件**先于任何 src 代码改动**写成。
+> 每条结论后面都带来源；来源分三类：
+> - **【CSS】**：真实产品线上页面 `getComputedStyle` 或 CSS 文件里读到的值（一手）
+> - **【量图】**：在 `refs/dr6.png`（3200×2400）/ `refs/dr1.png`（2400×1800）原图像素上量的值（工具见 §0）
+> - **【文档】**：产品方自己的文档 / 设计系统页
+> 拿不到的东西写「**未拿到**」，不编。
+
+---
+
+## 0. 工具与限制（先说清楚哪些数据可信）
+
+| 项 | 情况 |
+|---|---|
+| 看图 | 本轮环境**没有 `vision_analyze`**，用 Read 看图 + 在 Chromium 画布里逐像素取样（`/tmp/v16r/img.mjs`：原生分辨率截图、行/列色带扫描、裁剪放大、单点取色） |
+| dr6 / dr1 原图 | 都是 **2× 倍图**（下文所有「px」已折算成 1× CSS px，并在括号里给原图像素） |
+| dribbble | 可访问到 `https://dribbble.com/shots/27713660`，但返回 **HTTP 202 空壳**（bot 保护），DOM 里没有内容、拿不到图床。**Donezo 的一手 CSS 未拿到**，只有 dr1 原图可量 |
+| neuform Crextio 模板 | 页面可渲染，但**只有作品预览 + 设计系统摘要**；「HTML」按钮要登录（弹 LoginRequiredModal），Remix 模板源码**未拿到** |
+| Crextio 设计系统摘要 | ✅ 拿到了（neuform 作品页 Design System 区块，见 §2.3）——这是 Crextio 的**作者级**参数 |
+| linear.app / attio.com | ✅ 真实产品线上页，`getComputedStyle` 读到网格、卡内 padding、圆角、字号/字重/行高 |
+| SugarCRM | `support.sugarcrm.com` 301 → `support.sugarai.com`；`/documentation/` 返回 200 但正文是 gzip 二进制/登录壳，**没读到 Dashboards / Customer Journeys 的界面参数**。dr7 不在 `refs/` 里（只有 dr1、dr6 两张），所以 SugarCRM **本轮没有可量的一手数据** |
+| behance / pinterest / awwwards | 未尝试（任务书已确认网络层不通） |
+
+**所以：dr6/dr1 的比例、留白、字号全部来自「量图」；色彩/字重/圆角这类体系值优先用 neuform + linear/attio 的【CSS】交叉验证。**
+
+---
+
+## 1. 问题一：Crextio（dr6）的 Bento 栅格怎么切 —— 是不对称 3 列，不是 12 列
+
+### 1.1 实测
+
+【量图】dr6 内层面板 x = 180–3019（原图 px），面板内边距 28（14 CSS px）。
+
+**第 2 行（主 Bento 行）**：
+
+| 列 | x 起 | x 止 | 宽（1× px） | 占面板 | 高（1×） | 内容数量 |
+|---|---|---|---|---|---|---|
+| 头像卡 Lora | 180 | 678 | **249** | 26.1% | 465 | 1 个模块（照片 + 姓名 + 价格胶囊） |
+| Progress | 680 | 1 133 | **227** | 23.8% | 156 | **3**（标题+↗ / 主数字+副文 / 柱状图） |
+| Time tracker | 1 134 | 1 593 | **230** | 24.1% | 133 | **3**（标题+↗ / 圆环计时 / 3 个控制钮） |
+| Onboarding | 1 594 | 2 444 | **425** | 44.6% | 234 | **4**（标题+% / 三段进度条 / 深色任务卡 / 列表） |
+
+**第 3 行**：Pension 249（26%）| 日历 617（64.7%）| （右侧为空）——和上面 2 张卡同列对齐。
+**第 1 行（页头 KPI）**：口径/进度胶囊占 ~58%，右侧 3 个 KPI（78 / 56 / 203）是无边框的大数字组，不占卡。
+
+**结论（可执行）**：
+- 栅格是 **三等分（≈ 26% / 24% / 24%）+ 一张 44.6% 的宽卡**，即「4 列不等宽」的自定义模板，不是 12 列等分；卡与卡 gap = **14px**（原图 28），行 gap 也 = 14。
+- **尺寸规则是「卡宽由内容决定」，不是「卡宽统一、内容去填」**：宽卡（Onboarding 425px、日历 617px）都是**内容多**的；窄卡只放 3 个模块。
+- **面积比**：窄卡 (227~249 × 133~156) ≈ **0.13–0.14 × 宽卡 (425 × 234)**。我们在 v15 里把三张短卡做成了 360×194 的近正方形——**形状就从一开始就错了**：dr6 的小卡是「约 230×140 的横条」。
+
+### 1.2 小卡里放什么才不空（每题数主数字 / 辅助标签的个数【量图】）
+
+| 卡 | 主数字 | 辅助标签/刻度 | 图形 | 文字块 |
+|---|---|---|---|---|
+| Progress | 1 个（6.1 h） | 1 个副标签（Work Time / this week 两行）+ 7 个刻度（S M T W T F S）+ 1 个悬浮值（5h 23m） | 7 根柱 | **5 块** |
+| Time tracker | 1 个（02:35） | 1 个副标签（Work Time）+ 刻度环 | 圆环 + 3 个按钮 | **4 块** |
+| 深色任务卡 | 1 个（2/8） | 每个任务行 **2 行**（任务名 + 时间） | 5 个图标圆 + 2 个勾选 | **6 行**（标题 + 5 任务） |
+
+- **不空的原因不是「字多」，是「块多」**：dr6 最窄的卡也有 3 块 + 1 个图形，图形占了卡面积的 **35–50%**（Progress 柱状图 1 720×1 090 原图 ≈ 卡面积的 36%）。
+- 对照我们 v15 的短卡：**3 块纯文字、0 图形**（「卡池 / 9 张 / 8 人提交」）——这就是「空」的根因。
+
+### 1.3 对我们的可执行落法（见 §6.4）
+
+- 三张短卡：**宽度缩到 ≤ 全部宽度的 27%**（1440 下 ≈ 360px 以内），**用 2 块 + 1 个小型图形**（如 5 段迷你条、环形、数字打头的大小号对照），不做近正方形空卡。
+- 或者（更贴 dr1）**改回 4 张窄卡**，每张 1 标题 + 1 大数字 + 1 趋势行（见 §5）。
+
+---
+
+## 2. 问题二：深色卡放几样东西、用几个色
+
+### 2.1 dr6 深色卡（Onboarding Task）实测
+
+【量图】深色块（`#303030`，原图 2319–2944 × 1254–2107 → **313 × 427 CSS px**）：
+
+| 项 | 值（1× px） | 说明 |
+|---|---|---|
+| 卡内 padding 左 | **39.5**（左图 2319 → 图标圆心/文字起点 2398） | 与卡宽 313 比 = **12.6%** |
+| 卡内 padding 上 | **35**（顶 1254 → 标题带 1304 起） | |
+| 一行任务的高度 | **124**（图标圆 78 + 上下空 46） | 图标圆 **39px**，行高远大于图标 |
+| 相邻任务图标圆心距离 | **62** | |
+| 行内文字阶梯 | 任务名 20px（基线距图标圆心 −4.7px）→ 时间 12.6px（+9px） | |
+| 不透明体总数 | **6 行**（1 标题行 + 5 个任务行） | |
+| **彩色像素** | 全卡 208 个取样彩色像素，**全部是 `#FFD85F`**（两枚完成勾，2865–2898 × 1487–1646） | |
+| 灰度层 | 底 `#303030` / 图标底 `#EDEDED` / 已完成标题 `#878787` / 副文 `#B0B0B0` 左右 | |
+
+**结论（可执行）**：
+- 深色卡上**色相数 = 1**（只有强调黄），其余**全是灰阶**：底（深灰）— 图标底/主文字（近白）— 副文字（中灰）— 已完成（更暗的灰 + **删除线**）。
+- **状态表达不靠颜色，靠形态**：已完成 = 删除线 + 勾选；未完成 = 实心文字 + 灰点。
+- 信息密度：**一块深卡 6 行、1 个大数字、1 个标题、1 个强调色**。深色卡不是「信息仓库」，是「今日清单」。
+
+### 2.2 全页深色块数量
+
+【量图】dr6 只有 **1 块**深色内容卡（Onboarding Task）。页面自身的深色只有：顶栏当前页胶囊（Dashboard）与几个深色图标按钮。**dr1 同样是 1 块**（右侧 Time Tracker 深绿卡）。
+
+### 2.3 Crextio 设计体系（neuform 作品页 Design System 摘要）【文档】
+
+> 来源：`https://neuform.ai/template/crextio-hr-dashboard`（页面渲染后 Design System 区块文本）
+
+- 色板：Primary `#F5C518`（黄）、Secondary/Tertiary `#FFF8D6`（奶油浅黄）、**Neutral `#303032`**（深色卡底就是它，量图 `#303030` 与之一致）—— 体系里**只有 1 个强调色相**。
+- 间距：BASE RHYTHM **4px**，SECTION PADDING **32px**，GAP **8px**；**CARD PADDING: 20px / 10px**；GAPS 8 / 12。
+- 圆角：**8 / 12 / 24 / 40 / 9999**（以 8 为锚）。
+- 阴影：卡片 `0 1px 2px rgba(0,0,0,.05)`（极浅），另一档 `0 4px 6px -1px rgba(0,0,0,.1)`；描边 1px 黑 / 白。
+- 字体：Heading **Medium**，Body **Regular/Medium**，System Font。
+
+### 2.4 一手交叉验证（linear.app / attio.com）【CSS】
+
+- linear.app/features 卡：圆角 **16**、padding **32 24**、卡底 `rgb(15,16,17)`、**无描边、无阴影**。
+- attio.com：圆角 **12**（内层 6–7）、描边 **1px rgba(0,0,0,.05)**。
+- 两者**正文/元信息一律同一字重 500**，色阶只靠颜色深浅（attio：`rgb(36,38,41)` 主 / `rgba(0,0,0,.55)` 次 / `rgba(0,0,0,.4)` 弱）。
+
+---
+
+## 3. 问题三：卡内 padding 与 gap 的真实值
+
+| 场景 | 值 | 来源 |
+|---|---|---|
+| Crextio 设计体系：卡 padding | **20 / 10** | 【文档】neuform |
+| Crextio 设计体系：卡内 gap | **8 / 12**；卡与卡 gap **8**；区块 **32**；节奏 4 | 【文档】neuform |
+| dr6 Progress/Time tracker/Onboarding 卡：内容离卡边 | **10**（卡起 x=340/567/797 CSS → 标题 x=350/577/807） | 【量图】行 636 |
+| dr6 宽卡 Onboarding：标题→大数字 | **0**（同一基线行，标题 20 左，数字 32 右） | 【量图】 |
+| dr6 窄卡 Progress：标题行→主数字 | **14**；主数字→柱状图 **18** | 【量图】 |
+| dr6 日历卡：月标题→星期行 **~24** | | 【量图】 |
+| dr6 深色卡 padding | **39.5**（≈12.6% 卡宽）、行距 62、行高 124 | 【量图】§2.1 |
+| dr1 KPI 卡 padding | **18–20**（卡 x=486 ↔ 标题 x≈505；卡宽 249） | 【量图】 |
+| dr1 KPI 卡内部 | 标题→数字 **33**，数字→结论行 **31**，结论行→卡底 **30** | 【量图】§5 |
+| dr1 卡与卡 gap | **8**（973→1021→1052 之间） | 【量图】 |
+| dr1 区块间距 | **50**（KPI 行底 755 → 下一行卡顶 826 之外还有 40 的结构；取 28+）——按 20–32 档 | 【量图】 |
+| linear 卡 padding | **32 24**（卡 976×336） | 【CSS】 |
+| attio 卡 padding | 面板 24（`relative flex h-24 … padding 0 24px`） | 【CSS】 |
+
+**结论**：
+- **密度高的产品卡内 padding 在 10–20**；linear 那种「一张卡就是一个大图」的展示卡才用 32。我们的工作台是**信息卡**，用 dr6/dr1 的 **20 上下（我们现为 20，OK）+ 卡内块间距 12–14（dr6 标题→数字 14）**；**gap 卡与卡 dr1 = 8、dr6 = 14，我们现在 24 偏松**。
+- 卡内「同一组」元素（标题 + 大数字）gap 要小（0–14）；「不同组」之间（数字 → 说明，说明 → 下一组）gap ≥ 30（dr1 31/33）。
+
+---
+
+## 4. 问题四：字重与层级
+
+### 4.1 dr1（Donezo）量图
+
+| 角色 | 字号（cap 高 ×1.43） | 字重（视觉） |
+|---|---|---|
+| 卡片标题 End Projects | **~16px**（cap 22 原图） | SemiBold / 600 |
+| 大数字 10 / 12 / 24 | **~28px**（cap 39–40 原图） | **Regular–Medium（笔画很细）** |
+| 结论行 Increased from last month | **~12px**（cap 16） | Regular，绿 `#3C7A40` |
+| 页面标题 Dashboard | ~32px | 600 |
+
+### 4.2 dr6（Crextio）量图
+
+| 角色 | 字号 | 字重 |
+|---|---|---|
+| 欢迎语 | **32** | Medium（neuform：Heading = Medium） |
+| 页头 KPI 78/56/203 | **36** | **Light–Regular**（极细数字） |
+| 卡标题 Progress / 18% | **16**（宽卡数字 32 与标题同一基线） | Medium–SemiBold |
+| 主数字 6.1 h / 02:35 | **24** | Light，单位 `h` 12px 副色 |
+| 副标签 Work Time / this week | **12**，行高 1.5 | Regular |
+
+### 4.3 一手交叉验证【CSS】
+
+- **linear.app**：nav 13/400，卡片 kicker 13/**510**，卡片标题 20/**510**，正文 17/400，大标题 64/510。→ **字重几乎只有 400 和 510（=Medium）两档**，层级靠**字号跨度**（13 → 20 → 64）和颜色，不靠 600/700。
+- **attio.com**：12–15px 全部 **500**，只有卡标题 16/**600**。→ 两档。
+
+**结论（可执行）**：
+- 全页**只用 2 档字重：400（正文/元信息）+ 600（标题/标签）**；大数字用 **500**，不要 600（dr1/dr6 的大数字都比标题细）。
+- 层级靠字号的**大跨度**：元信息 12 → 标题 16 → 大数字 28/32 → 页面标题 32。我们现为 12/14/16/20/32，缺 **28** 这一档（大数字都挤在 32，和页面标题同大）。
+- 「小卡只有 3 行却不显空」：dr1 卡是 **标题 16/600 + 数字 28/400 + 结论 12/400**——**三种字号、两种字重、三块、跨 16px 的卡**；它不空是因为**字号差 12→28 把卡面撑出节奏**，而不是多了内容。
+
+---
+
+## 5. 问题五：Donezo 数据卡为什么短而不空
+
+dr1 四个数字卡（y 486–755 原图 → **高 135 CSS px**，宽 249 / 249 / 232 / 225）每个都是**同一种三行结构**：
+
+```
+Ended Projects            (16/600，左)          [↗ 圆形图标按钮 36px，右]
+10                        (28/400，左)
+[⌃6] Increased from last month   (12/400，绿)   ← 第 3 行：趋势徽章 + 一句话结论
+```
+
+- **每个卡第 3 行都有一句「和上期比发生了什么」**，不是静态说明：25% of cards 是 `Increased from last month`（绿），第 4 张是 `On Discuss`（中性灰）——**结论行本身随状态换写法**。
+- 迷你趋势徽章（绿色小方块 + 上箭头 + 数字）是把「趋势」压缩成**徽章**而不是折线图：**卡小、信息不小、图形只占 20×14px**。
+- 「Total Projects」那张**只有一张卡是深绿实底**，作为一行里的锚点；其余三张纯白。
+- 结构层数：**3 行（标题 / 数字 / 结论）× 1 个角标图标** = 4 块，卡高 135。**面积利用率 = 卡内内容 97×200 / 卡 135×249 ≈ 58%，留白全部竖向均匀分布（33 / 31 / 30）。**
+
+**结论**：能做短卡，**前提是第 3 行是「有信息量的动态结论」**（和上期比、和谁比、卡在谁身上），并且**留白三边均匀**（不是上下堆挤、中间一大坨）。
+
+---
+
+## 6. 本轮要执行的设计参数（汇总，全部在上面有出处）
+
+### 6.1 栅格
+
+| 项 | 值 |
+|---|---|
+| 列 | 12 列，gap 16（dr6 14 / dr1 8 的中间；现为 24） |
+| 第一行 | A 8 列 / B 4 列（保持）——**B 卡宽 4 列是合适的深色卡尺寸**（dr6 深卡 313px、dr1 深卡 ~225px，我们的 ~360 偏宽但可接受） |
+| 短卡行 | **4 列（dr1 式）：12 栅格里每张 3 列**（1440 下 ≈ 268px，接近 dr1 的 232–249）；同时满足 v15 的「三张」下限（≥3 张）——第 4 张用现有 core 数据（已决策张数），不造新指标 |
+| 卡 padding | 20（不变）；卡内组间距 12；卡内「组与组」≥ 30 |
+
+### 6.2 深色卡（B）
+
+- **色相 ≤ 2，且只允许 1 个「暖强调」**：状态点允许 1 色（dr6 = 黄；我们用 `--kf-s4` 琥珀作唯一状态色），**删掉 S1–S5 五色点**——改成一列纯灰阶的进度条（`rgba(255,255,255,.28)` 轨道 + 白 `.9` 填充），像 dr6 的勾选与灰点那样「靠形态表达状态」。
+- 底色保留 `#18181B`（亮度达标），辅助文字提到 `#B4B4BC`、主文字 `#F4F4F5`。
+- **结构 6 行以内**：标题行（现场 · 1 个状态点）+ 大数字行 + 卡住的人（≤3 行）+ 阶段进度（5 行细条）。**「我的环节」删除**（个人视角，不属于「现场」——dr6 的深卡只放「今天要做的」，不放个人统计）。
+
+### 6.3 A 卡
+
+- 「待评分」行改成 **左右两段式**：左侧卡名（可省略号）+ 右侧数字/「去评」胶囊，**同一行两端对齐，中间放弹性空白 `flex:1` 的引导线**（dr1/attio 的列表行都是「左标题 + 右值」）。去掉中间大空白。
+- A 卡下部「卡池进度 / 待评分」**竖排成一张通栏列表**（dr6 的 Onboarding 列表、dr1 的 Project 列表都是单列多行），不再左右两栏——两栏 32px 间距是 v15「中间一大块空」的来源之一。
+
+### 6.4 底部按钮
+
+- 去掉 C 卡上的**紫底实心按钮**（dr6/dr1 里强调色实心按钮只出现在**深色/彩色卡**里，例如 dr1 的 Start Meeting 在白色 Reminders 卡上——但那是一张「行动卡」），C 卡是数据卡 → 改成 **`16/600` 文本 + 箭头** 的 `.go` 链接（我们已有 `--kf-accent-ink`）。
+- 机会卡底部的「候选 / 已立项 / 已否决」三连：dr6/dr1 没有这种灰底大按钮组 → 改成 **静默文字行**（12px，选中项用 12/600 + 强调色下划线），高度 24。
+
+### 6.5 字号
+
+| 角色 | 字号 / 字重 |
+|---|---|
+| 大数字（短卡、A 卡 me-nums） | **28 / 500** |
+| 卡标题、小节标题 | 16 / 600 |
+| 正文、列表 | 14 / 400–500 |
+| 标签、副文、结论行 | **12 / 400**（可 500） |
+| 页面大标题 | 32 / 600 |
+| 深色卡大数字 | 32 / 600（反白，唯一允许 600 的数字） |
+
+字重只留 **400 / 500 / 600** 三档（现网页大概率没超）。
+
+### 6.6 56px 回归（v12 A 卡连续空白）
+
+【量图】现版 A 卡（1440 截图）：`待评分` 标题行底 y=242 → `去我也` 区块顶 y=298，**空 56px**。
+根因：A 卡 `.me` 是 flex 列，`.me-split` 用 `margin-top:auto` 贴底、两栏内容高度不等，左栏（卡池进度 3 行）比右栏多出 2 行，右侧内容沉底后留下 56 的空带。
+**可执行修法**：改为 §6.3 的单列通栏列表后，`.me-split` 不再 `margin-top:auto`，列表本身决定高度；A/B 等高时多出的高度由**阶段格按钮带**吸收（`.stagebar` 允许 `align-content:space-between`），不再产生连续空白。若仍出现 >24 空白，验收脚本项 7 会报。
+
+---
+
+## 7. 调研没做到的部分（如实）
+
+1. **Crextio 的 Remix 模板源码 / 真实 HTML**：neuform 要登录，未拿到；dr6 的间距是 2× 原图量的，误差 ±1px。
+2. **Donezo 的一手实现**：dribbble 202 空壳，只有 dr1 原图可量；字重是视觉估计（无法拿到 `font-weight`）。
+3. **SugarCRM Dra7 客户旅程页**：`support.sugarcrm.com` 已 301 到 `support.sugarai.com`，文档正文未以明文可取；dr7 也不在 `refs/` 里。**本文件没有引用 SugarCRM 任何数值。**
+4. **字号精确值**：dr1/dr6 的字号由「cap 高 ×1.43」推算（CJK/拉丁混排 cap≈0.7em），与真实差 ±1px；商用字体不同会有偏差。所以 §6.5 的档位在「量图值 ±2」内取整，并与 linear/attio 的 13/20/16/12 档互相对齐。