C1
方向语义：颜色由「指标方向」决定，不由箭头方向决定
同一个 ↑：白蛋白上升标绿（上升为改善），CA19-9 上升标红（上升为恶化）。三态：up_good / down_good / range。此机制必须在趋势图、指标卡、看板推导**三处一致**。
依据AGENTS.md §2.1 原则二 · lib/metrics/direction.js
本屏怎么考它demo 里三张指标卡刻意用两个 ↑ 一个 ↓，颜色各不相同 —— 这是最能分辨风格「是否真懂产品」的一屏。
小胰宝 · 社区发行版 v0.1.0 · 界面风格评选
胰腺癌患者的「病历 → 指标 → 趋势 → 决策依据」闭环工作台，数据留在本机。
社区评选 · 每人 3 票
正在连接投票服务…
本页不收集病历或任何健康信息。投票只记录一个加盐哈希用于去重（不存原始 IP），3 票封顶、可改选。
胰腺癌患者的「病历 → 指标 → 趋势 → 决策依据」闭环工作台，数据留在本机。
它不是通用病历 App，不是试验匹配平台，不是营养计算器，也不是心理 App —— 它把上述能力的输出汇总到一张看板上，让用户「一眼知道现在该看什么」。
诚实标注：4 页已实现、3 页部分实现（缺口已登记在案，不藏）。
| # | 页签 | 服务端接口 | 客户端状态 | 做什么 |
|---|---|---|---|---|
| 1 | 看板 | /patient/board | 已实现 | 结论一句 + 7 维度状态 + 需关注项 + 全程管理摘要；每项可点开依据 |
| 2 | 病情整理 | /patient/records · /patient/review · /patient/indicator-summary · /patient/assess | 已实现（5 子页） | 资料库 / 报告核对（人工闸门）/ 指标趋势 / 病情评估 / 病情汇总 |
| 3 | 病情一图秀 | /patient/series · /patient/medications | 已实现 | 指标与用药在同一条时间轴上对齐，含年历视图与变化速率 |
| 4 | 临床匹配 | /patient/assess | 部分（档案已通，检索/对照未做） | 入组档案可录入；试验检索、入排逐条对照、收藏为后续版本 |
| 5 | 营养管理 | /patient/series?indicators=WEIGHT | 部分（体重图已通，摄入未做） | 体重曲线可取；能量/蛋白目标与每日摄入记录为后续版本 |
| 6 | 心理支持 | /psych/scales · /psych/resources · /patient/psych | 已实现 | 4 张量表只存分不解读；危机热线为数据，每个子页强制渲染 |
| 7 | 全程管理 | /patient/board | 部分（看板摘要已通，逐条记录未做） | 毒性/并发症/带管/血管通路四类；逐条录入与时间线为后续版本 |
这六条不是审美偏好，是治理文档里的条款。三十份 demo 必须逐条通过 —— 风格不得凌驾于约束之上。这是本次评选的投票前提。
同一个 ↑：白蛋白上升标绿（上升为改善），CA19-9 上升标红（上升为恶化）。三态：up_good / down_good / range。此机制必须在趋势图、指标卡、看板推导**三处一致**。
依据AGENTS.md §2.1 原则二 · lib/metrics/direction.js
本屏怎么考它demo 里三张指标卡刻意用两个 ↑ 一个 ↓，颜色各不相同 —— 这是最能分辨风格「是否真懂产品」的一屏。
机器抽取的数据默认 pending，必须经人核对；「存疑」也必须有归属处（既不进正式数据、也不消失）。任何状态枚举都要检查是否有状态落在所有查询之外。
依据AGENTS.md §2.1 原则一 · lib/metrics/query.js（CONFIRMED_ONLY 默认过滤器）
本屏怎么考它demo 的「报告核对」面板给出 4 态计数 + 「3 条未结清」行动入口。
null 表示未测量，0 表示测得为 0，两者绝不能混。UI 的 null 不能渲染成空、更不能渲染成 0 —— 要渲染成「没有这条信息」这个事实本身。
依据AGENTS.md §3.3 硬规则 4 · 回归 P-12
本屏怎么考它demo 里「可匹配临床 / 并发症」两项为「尚未记录」，用虚线空心点，与数值态明显分层。
拿不准时标「需医生评估 / 需人工核实」比给猜测更有价值。无法判定时输出「未知」，不输出可能性。
依据AGENTS.md §2.1 原则三 · §7.1 六条红线 M-1~M-4
本屏怎么考它demo 页脚常驻免责声明；心理块写明「只呈现分数，不做解读」。
心理模块每个入口都要能拿到危机资源，且必须声明「本产品不能提供危机干预」。
依据AGENTS.md §7.1 M-5 · lib/psych/resources.js
本屏怎么考它demo 右栏底部固定一块危机资源，任何风格都不许把它折叠掉。
正文 ≥15px、行高 ≥1.6、正文对比度目标 ≥7:1、点击目标 ≥36px 高；已发布「大字模式」三档。
依据AGENTS.md §3.3 · CHG-012（大字模式三档）· 本 CHG 原则一
本屏怎么考它十份 demo 全部遵守同一套可读性底线，风格之间的差异只在气质。
来自真实用户与社区开发者的反馈，不是设计想象。
外框刻意中立：用瑞士编辑设计做骨架（白底、黑字、发丝线、大号章节数字），不参与风格竞争。一次比较十种基因时，外框一旦有性格就会污染判断 —— 这是评审工具的第一纪律。
| # | 风格 | 情绪 | 底色 / 强调色 | 字体气质 | 圆角 | 风险 | 可读性 |
|---|---|---|---|---|---|---|---|
| 01 | 瑞士国际主义 | 清晰理性 | #f4f5f7 / #e2001a | 无衬线 | 0px | 低 | ●●●●● |
| 02 | 宋韵留白 | 东方古韵 · 孤独诗意 | #f5f0e6 / #c3272b | 宋/明朝体 | 0px | 低 | ●●●●● |
| 03 | 极简主义 | 清晰理性 | #ffffff / #ff3b00 | 无衬线 | 0px | 低 | ●●●●○ |
| 04 | 新古典庄重 | 庄重典雅 | #f7f5f1 / #7c1f2b | 衬线 | 0px | 中低 | ●●●●○ |
| 05 | 吉卜力手绘亲和 | 梦幻治愈 | #faf7f0 / #d9612b | 圆体 | 16px | 中 | ●●●●○ |
| 06 | 浮世绘扁平 | 东方古韵 | #f2ead8 / #d34e24 | 宋/明朝体 | 0px | 中 | ●●●●○ |
| 07 | 构成主义 | 热血冲击 | #f0e9dc / #d93025 | 粗黑 | 0px | 中高 | ●●●○○ |
| 08 | 巴洛克聚光 | 暗黑崇高 | #14100c / #c9a227 | 衬线 | 8px | 中高 | ●●●●○ |
| 09 | 浪漫主义雾景 | 孤独诗意 · 崇高高贵 | #e9ecef / #4a6b7c | 宋/明朝体 | 2px | 中 | ●●●●○ |
| 10 | 赛博霓虹 | 科技酷感 | #0a0e1a / #38f2c8 | 等宽 | 6px | 高 | ●●●○○ |
| 11 | 洛可可粉彩 | 甜美容爱 | #fdf6f2 / #c07d93 | 衬线 | 26px | 中 | ●●●●○ |
| 12 | 波普艺术 | 荒诞幽默 · 街头 | #fffdf7 / #ff2d55 | 无衬线 | 0px | 高 | ●●●○○ |
| 13 | 赛璐璐动漫 UI | 梦幻治愈 · 二次元亲和 | #eef5fc / #2f80d8 | 无衬线 | 14px | 中 | ●●●●○ |
| 14 | 哥特暗黑 | 暗黑崇高 | #12100e / #8b1a1a | 衬线 | 0px | 高 | ●●●○○ |
| 15 | 文艺复兴和谐 | 庄重典雅 | #f6f1e6 / #2c4a7c | 衬线 | 3px | 低 | ●●●●● |
| 16 | 样式主义 | 优雅疏离 | #eef0f3 / #6b6480 | 宋/明朝体 | 1px | 中 | ●●●●○ |
| 17 | 现实主义 | 质朴诚实 | #ece5d8 / #6b5a44 | 宋/明朝体 | 1px | 低 | ●●●●● |
| 18 | 印象派 | 梦幻治愈 · 光的流动 | #f5f2f8 / #7a6a9c | 衬线 | 14px | 中高 | ●●●○○ |
| 19 | 后印象派 | 燃烧的情绪 | #16244a / #f2b705 | 宋/明朝体 | 10px | 中高 | ●●●○○ |
| 20 | 穆夏新艺术 | 庄重典雅 · 装饰的优雅 | #f8f3e9 / #c4798a | 宋/明朝体 | 2px | 中低 | ●●●●○ |
| 21 | 野兽派 | 色彩解放 · 生命力 | #fdf8f2 / #e8552f | 无衬线 | 2px | 中高 | ●●●○○ |
| 22 | 立体主义 | 解构 · 多视角 | #efe7d9 / #8a5a2b | 无衬线 | 0px | 高 | ●●○○○ |
| 23 | 未来主义 | 速度 · 动势 | #faf6ef / #e2620f | 无衬线 | 0px | 中高 | ●●●○○ |
| 24 | 超现实主义 | 荒诞诗意 · 冷静的惊奇 | #e8f1fa / #2f6ba8 | 宋/明朝体 | 8px | 中 | ●●●●○ |
| 25 | 蒙德里安 | 清晰理性 · 秩序里的快乐 | #f7f7f5 / #1055c4 | 无衬线 | 0px | 中 | ●●●●○ |
| 26 | 克莱因蓝 | 庄严的纯粹 | #ffffff / #002fa7 | 无衬线 | 0px | 中低 | ●●●●○ |
| 27 | 网格冥想 | 孤独诗意 · 静心 | #f7f4ef / #8a8478 | 无衬线 | 0px | 低 | ●●●●● |
| 28 | 海景长曝 | 禅 · 寂静 | #e4e7e9 / #3c4a55 | 无衬线 | 0px | 中低 | ●●●●○ |
| 29 | 灰烬纪念碑 | 暗黑崇高 · 悼念的重量 | #171512 / #b8942a | 无衬线 + 标题衬线 | 0px | 高 | ●●●○○ |
| 30 | 空气感日常 | 梦幻治愈 · 体面的日常 | #f6f5f2 / #6f8a7c | 无衬线 | 12px | 低 | ●●●●● |
以下每一屏都是同一个看板：同样的七页签、同样的三张指标卡（两个 ↑ 一个 ↓）、同样的「尚未记录」两项、同样的报告核对面板与危机资源。差别只在风格基因 —— 这样比较才成立。
Swiss International Typographic Style
版式为什么这么摆：瑞士平面的版式就是栅格本身 —— 12 列对齐，右栏承载闸门（产品的灵魂放在最容易看到的位置）。
动效为什么这么做：瑞士平面不做缓动 —— 在这个基因里，缓动等于装饰。状态变化必须是瞬时的：点下去就是结果。
可试：切换七个页签（或用 ← → 键）· 点指标卡展开历史 · 点维度行展开依据 · 点核对四态筛选 · 切换 A/A/A 大字三档 · 点「全屏交互」。动画即本条动效基因。
「把「对齐」本身当作专业感 —— 秩序即可信。」
四级字号阶梯 + 三级文字灰（把基因卡里的 #9e9e9e 提到 #6f747c 以过 7:1）+ 所有数字等宽对齐。
情绪偏冷，家属读久了容易「像在填表」；对独居老人缺温度。
Song Dynasty Ink & Negative Space (Ma Yuan one-corner)
版式为什么这么摆：马远把景物压在画面一角，其余全空。内容只占左 62%，右 38% 是真留白（气口），七块纵向排成一条墨线序列。
动效为什么这么做：东方留白不移动任何东西：内容只是"从淡到显"，像墨在绢上洇开。位移会破坏气口。
可试：切换七个页签（或用 ← → 键）· 点指标卡展开历史 · 点维度行展开依据 · 点核对四态筛选 · 切换 A/A/A 大字三档 · 点「全屏交互」。动画即本条动效基因。
「把「不说」的部分留给家属自己 —— 留白是内容本身。」
正文 16.5px / 行高 2.05（疏朗是本基因的命），墨色 #2b2b2b 对绢底 #f5f0e6 达 12.6:1；卡片一律取消，靠淡墨线与气口分区。
信息密度天然低，看板要滚动更长；年轻用户可能觉得「空」。
Minimalism — Judd / gallery white
版式为什么这么摆：极简主义一屏一个主体：全宽单柱，闸门做成整幅通栏黑面切进页面，其余全是白；台账收窄成 56 字宽防读串行。
动效为什么这么做：极简主义不表演。180ms 线性淡入，连缓动曲线都省掉 —— 动效本身也是要被删掉的元素。
可试：切换七个页签（或用 ← → 键）· 点指标卡展开历史 · 点维度行展开依据 · 点核对四态筛选 · 切换 A/A/A 大字三档 · 点「全屏交互」。动画即本条动效基因。
「每多一个元素，先问「删掉会不会更好」。」
字号反差而非灰度做层级（72px 数字 vs 11.5px 注释）；正文 16px 用 #1a1a1a 对白底 16.9:1；灰阶只用两级（基因卡的纪律）。
一屏一主体与「看板要一眼看全」有冲突；信息找起来靠滚动，不一定更快。
Neoclassicism — David / Ingres
版式为什么这么摆：新古典的构图法则是中轴对称 —— 结论居中收窄、指标三联、中段再切三联（需关注|闸门|维度），底部一条基座带托住，左右完全镜像。
动效为什么这么做：新古典的仪式感来自"打开"这个动作 —— clip-path 从上往下展开，像画框的卷帘。
可试：切换七个页签（或用 ← → 键）· 点指标卡展开历史 · 点维度行展开依据 · 点核对四态筛选 · 切换 A/A/A 大字三档 · 点「全屏交互」。动画即本条动效基因。
「「这是认真做出来的东西」—— 理性本身就是权威感。」
对称轴 + 大量留白让视线有秩序；衬线正文 15.5px/行高 1.85 提高长文耐读性；金色只做 1px 线不进正文。
肃穆感在坏消息（指标恶化）时会被放大成压迫；对称布局对长短不齐的中文标签略不宽容。
Studio Ghibli hand-painted warmth
版式为什么这么摆：治愈系禁止严整网格 —— 便签式松散布点，块互相微错，右栏拉长形成参差，像贴在墙上的便利贴。
动效为什么这么做：治愈系需要"柔软"的手感 —— 把回弹压到刚好能感觉到（1.56），过头就变成玩具了。
可试：切换七个页签（或用 ← → 键）· 点指标卡展开历史 · 点维度行展开依据 · 点核对四态筛选 · 切换 A/A/A 大字三档 · 点「全屏交互」。动画即本条动效基因。
「让家属敢打开这个应用 —— 温暖本身就是可及性。」
正文 16.5px/行高 1.95，暖底 #faf7f0 上文字 #4a4238 达 9.4:1；禁止纯黑阴影（视觉压迫源）。
治愈色系会削弱「异常」信号的紧迫度（红色被封在柔和体系里）——本 demo 用暖朱砂补偿，但仍是最需要评审权衡的一项。
Ukiyo-e flat — Hokusai Prussian blue
版式为什么这么摆：浮世绘是横向分层的 —— 把页面切成「结论带 / 指标带 / 台账带」三段横向 register，用粗线做套版分隔。
动效为什么这么做：木版画是一次次套印上去的 —— 所以动效用 steps() 做成 4 步跳变，而不是连续滑动。
可试：切换七个页签（或用 ← → 键）· 点指标卡展开历史 · 点维度行展开依据 · 点核对四态筛选 · 切换 A/A/A 大字三档 · 点「全屏交互」。动画即本条动效基因。
「一版一色，色块即信息 —— 大块面本身就是最强的可读性。」
平涂色块面积大、边界硬，四态靠色相拉开（靛青绿/赭黄/朱红）而非明度微差；正文 15.5px 在 #f2ead8 上进 9.8:1。
木版画没有渐变与阴影 → 不能用投影做层级，只能靠色块面积与线宽；蓝主色在「异常」传达上弱于红。
Constructivism — Rodchenko / Lissitzky
版式为什么这么摆：构成主义用一条对角线强制引导视线 —— 块沿对角线逐级右移（每块比上一块再偏 14px），形成向下的冲刺。
动效为什么这么做：构成主义的动势必须沿对角线 —— 用 clip-path 斜切推进，配极陡的缓动曲线做出"冲"的感觉。
可试：切换七个页签（或用 ← → 键）· 点指标卡展开历史 · 点维度行展开依据 · 点核对四态筛选 · 切换 A/A/A 大字三档 · 点「全屏交互」。动画即本条动效基因。
「把「现在必须行动」画成一条对角线 —— 呐喊式号召力。」
倾斜只给装饰带与标题，**正文与数值全部回正**（这是本项目对基因卡的收窄）；三色纪律让对比天然极高，正文达 12:1。
宣言腔调与医疗场景天然冲突；「需关注」被画成口号可能加重焦虑 —— 这是本组里最需要评审否决权的一项。
Baroque Tenebrism — Caravaggio / Rembrandt
版式为什么这么摆：Tenebrism 只有一个光源 —— 结论与指标占据被照亮的中央窄柱，两侧的台账沉入暗部（只降亮度不动对比度）。
动效为什么这么做：Tenebrism 只有一个光源 —— 所以入场是"被照亮"：亮度从暗到明，而不是位置移动。
可试：切换七个页签（或用 ← → 键）· 点指标卡展开历史 · 点维度行展开依据 · 点核对四态筛选 · 切换 A/A/A 大字三档 · 点「全屏交互」。动画即本条动效基因。
「黑暗里的一束光 —— 把「看不清的恐惧」变成「被照亮的答案」。」
暖灰 #d8cfc0 对近黑褐 #14100c 进 12.3:1（深色底完全可读）；暗部占 60%+ 但**所有正文都在受光面**；金色只做 1px 线不进正文。
整体暗调对老年用户与弱光环境不友好；「异常」用血红在暗底上不如亮底醒目。
Romanticism — Caspar David Friedrich mist
版式为什么这么摆：杉本博司把画面一刀两半 —— 结论与指标落在天际线上，上方留一整块空，台账沉在水面之下。
动效为什么这么做：一片雾里慢慢显出一个东西 —— 位移为零，只有透明度与模糊度在变。慢是这条基因的本体。
可试：切换七个页签（或用 ← → 键）· 点指标卡展开历史 · 点维度行展开依据 · 点核对四态筛选 · 切换 A/A/A 大字三档 · 点「全屏交互」。动画即本条动效基因。
「把「一个人在雾里往前走」画出来 —— 陪伴感不来自热闹，来自被理解。」
雾灰蓝底上文字用深板岩 #242b33 达 12.4:1（低饱和但对比不低 —— 这是把基因卡「低饱和」与「可读」拆开处理的点）；正文 16px，行高 1.95。
冷灰调在夜晚读起来偏冷清；氛围强于效率，快速找数字不如瑞士/极简。
Cyberpunk neon — Blade Runner HUD
版式为什么这么摆：数据 HUD 的布局逻辑：左轨放指标读数、右轨放台账、中区放结论与闸门，像仪表的三个面板。
动效为什么这么做：赛博霓虹的入场是"信号接入"：steps() 做成 3 帧跳变 + 微小位移，像屏幕在同步。
可试：切换七个页签（或用 ← → 键）· 点指标卡展开历史 · 点维度行展开依据 · 点核对四态筛选 · 切换 A/A/A 大字三档 · 点「全屏交互」。动画即本条动效基因。
「把病历变成仪表盘 —— 数据主权与硬核感的最大化表达。」
正文 #c9d1d9 对深底 #0a0e1a 进 12.8:1（荧光只给边/线/数字，正文绝不荧光 —— 这是基因卡的反模式纪律）；数字全部等宽对齐。
「高科技」与胰腺癌患者的心理安全感冲突最大；发电机感容易让人觉得自己被机器评估 —— 本组里风险最高的一项。
Rococo pastel — Fragonard / Boucher
版式为什么这么摆：洛可可是围绕中心做曲线的艺术 —— 结论与指标占据中央，四类台账分列四角，底部再收一条闸门带。
动效为什么这么做：洛可可的一切都是轻的 —— 从上方落下，落到底不带回弹，只留一点点减速。
可试：切换七个页签（或用 ← → 键）· 点指标卡展开历史 · 点维度行展开依据 · 点核对四态筛选 · 切换 A/A/A 大字三档 · 点「全屏交互」。动画即本条动效基因。
「把「被照顾」这件事画出来 —— 温柔是一种可及性。」
粉彩最怕发灰糊成一片，所以文字用暖褐 #4a3f45（对米白底 8.7:1）而不是粉；金只做 1px 线不进任何正文。
粉彩会削弱「异常」的紧迫度，且与医院场景的肃穆感有距离；长期使用可能显得轻慢。
Pop Art — Lichtenstein halftone / Warhol
版式为什么这么摆：波普的版式是印刷分格 —— 六格不等分，闸门占一整个竖格，结论做成跨两格的对话气泡压在格线上。
动效为什么这么做：波普的印刷网点是"打"上去的 —— 从略大缩回来，配过冲缓动，像"啪"地贴上。
可试：切换七个页签（或用 ← → 键）· 点指标卡展开历史 · 点维度行展开依据 · 点核对四态筛选 · 切换 A/A/A 大字三档 · 点「全屏交互」。动画即本条动效基因。
「把化验单画成漫画分格 —— 降低恐惧门槛，但也很容易显得不严肃。」
粗黑描边 + 半调网点会让小字发虚，所以网点**只用在装饰层与色块底**，正文一律落在纯白与纯色块上；正文 15.5px 对白底 15.8:1。
漫画感与医疗严肃性冲突最大之一；「需关注」被画成惊叹号会加重焦虑。这是本组里最可能被否的一项。
Cel-shaded anime UI — TV animation keyframe look
版式为什么这么摆：动画是分镜 —— 指标做成三帧紧贴的横条（共用一条粗边框，像胶片齿孔），台账按镜头顺序纵向接下去。
动效为什么这么做：动画是逐帧画的 —— 用 steps(2) 做出"跳一格"的顿感，而不是流畅滑动。这是本基因的辨识点。
可试：切换七个页签（或用 ← → 键）· 点指标卡展开历史 · 点维度行展开依据 · 点核对四态筛选 · 切换 A/A/A 大字三档 · 点「全屏交互」。动画即本条动效基因。
「把界面画成一帧动画 —— 对年轻家属最没有门槛的一种语言。」
硬边双色阴影给出清晰边界，四态用高饱和纯色（绿/黄/红）在浅底上拉开；正文 15.5px 深蓝黑 #26374f 对浅底 12.4:1。
「动画感」会让人下意识觉得这不是认真的医疗工具；老一代用户可能完全无感甚至反感。
Gothic dark — Beksiński / Giger / blood moon
版式为什么这么摆：哥特教堂是垂直的 —— 中央一条窄长的「中殿」，四类台账挤在两侧侧廊里，形成向上的压迫感。
动效为什么这么做：哥特的空间是垂直的 —— 大幅度的自下升起配很长的耗时，做出"被抬上来"的重量感。
可试：切换七个页签（或用 ← → 键）· 点指标卡展开历史 · 点维度行展开依据 · 点核对四态筛选 · 切换 A/A/A 大字三档 · 点「全屏交互」。动画即本条动效基因。
「把病房的夜画成一座大教堂 —— 沉重，但也庄严。」
骨白 #e8e2d5 对铅灰黑 #12100e 进 13.1:1；血红只做 1px 线与极小面积色块，绝不铺面；竖长比例配 15.5px 正文与 1.85 行高。
对癌症患者，暗黑+血红的心理负担是本组最大的一项；「一间停不下来的房间」的气质与「陪伴」的产品承诺相反。
High Renaissance — Raphael / Fra Angelico
版式为什么这么摆：文艺复兴的祭坛画是「主屏 + 下座」—— 上方三联主屏（需关注|维度|闸门），下方一整条横幅放四类台账，全幅对称。
动效为什么这么做：文艺复兴的构图是中央对称的 —— 展开也从中心向两侧，像画框打开。
可试：切换七个页签（或用 ← → 键）· 点指标卡展开历史 · 点维度行展开依据 · 点核对四态筛选 · 切换 A/A/A 大字三档 · 点「全屏交互」。动画即本条动效基因。
「「和谐」本身就是可信 —— 没有一个元素在抢戏。」
蛋彩画布底 #f6f1e6 上墨蓝 #26324a 达 11.8:1；蓝色与金色面积严格受限（蓝 ≤15%、金只做线）；正文 15.5px 衬线配 1.85 行高。
古典气质会让人想到「文献」「档案」而非「每天要用的工具」；显得庄重，也显得慢。
Mannerism — Parmigianino elongated elegance
版式为什么这么摆：样式主义的核心是比例被拉长 —— 内容挤在左侧一个窄栏里（64 字宽），右侧留大块空并压一条细线收边。
动效为什么这么做：样式主义要"优雅的畸变" —— 滑入时带一点 skew，落定时回正，像身体在扭动。
可试：切换七个页签（或用 ← → 键）· 点指标卡展开历史 · 点维度行展开依据 · 点核对四态筛选 · 切换 A/A/A 大字三档 · 点「全屏交互」。动画即本条动效基因。
「把一切拉长一点点 —— 优雅来自比例的偏移，而不是装饰。」
拉长只给小标题与数字的字距、以及卡片的竖向比例，**正文行高与字号不动**（拉长正文会直接伤可读性）；冷灰底 #eef0f3 上墨紫 #2e2a38 达 12.6:1。
冷调+疏离感与「被陪伴」相反；拉长比例牺牲了信息密度，同屏能看到的东西更少。
Realism — Courbet / Millet (linen and earth)
版式为什么这么摆：现实主义不做花活 —— 宽窄两栏（1.4 : 1）硬线分割：指标自己占一侧、闸门挂在另一侧，底部两条台账平铺，像两块不等的地。
动效为什么这么做：现实主义不做动效表演 —— 200ms 里只改透明度，连位移都没有。这一条是刻意做"最朴素的动效"。
可试：切换七个页签（或用 ← → 键）· 点指标卡展开历史 · 点维度行展开依据 · 点核对四态筛选 · 切换 A/A/A 大字三档 · 点「全屏交互」。动画即本条动效基因。
「不美化、不恐吓 —— 就是把事情如实摆出来。」
土褐 #4a3f31 对亚麻布 #ece5d8 达 9.1:1；**唯一一个把正文提到 16px**、把标题降级的风格（信息平等，不制造层级压迫）；粗麻布纹理只做 2% 不干扰文字。
朴素到近乎没有"设计感"，可能在评选中显得不够"范"；但它是可读性最稳的一项。
Impressionism — Monet water lilies
版式为什么这么摆：印象派的画面没有硬边界 —— 块之间不共享基线，各自上下浮动（±8~18px），像光斑浮在水面上。
动效为什么这么做：印象派画的不是物体是光 —— 入场从散焦（blur）晕开成清晰，像眼睛在对焦。
可试：切换七个页签（或用 ← → 键）· 点指标卡展开历史 · 点维度行展开依据 · 点核对四态筛选 · 切换 A/A/A 大字三档 · 点「全屏交互」。动画即本条动效基因。
「不画物体，只画光落在物体上 —— 让数字看起来是温和的。」
印象派的低对比是硬伤，所以**四态色必须自定义成高饱和版本**（拿淡彩直接做状态色会直接读不出来）；正文用深紫 #3a3348 对柔紫底达 10.2:1。
短笔触底纹会降低数字的边缘锐度；柔和光晕与「异常警报」天然对立 —— 这是本组里可读性最需要盯的一项。
Post-Impressionism — Van Gogh starry night
版式为什么这么摆：梵高的笔触是向外漩涡 —— 指标沿一条弧线排开（首尾块各自微转 1°），台账围绕中心发散。
动效为什么这么做：梵高的笔触是漩涡状的 —— 入场带一点旋转，落定时回正，能量的方向是可感的。
可试：切换七个页签（或用 ← → 键）· 点指标卡展开历史 · 点维度行展开依据 · 点核对四态筛选 · 切换 A/A/A 大字三档 · 点「全屏交互」。动画即本条动效基因。
「把「熬着」这件事画出来 —— 强度本身也是一种陪伴。」
深蓝底 + 铬黄是天然高对比（黄对深蓝 11.4:1），所以可读性反而好；风险不在对比而在**情绪强度**——漩涡纹理压到 4%，只在页头与页脚各一处，正文区保持安定。
强度过高，长期使用会加重疲惫感；「异常」的橙色在满是橙黄的画面里辨识度下降。
Art Nouveau — Alphonse Mucha
版式为什么这么摆：穆夏的海报是「中央光环 + 左右对称 + 底部饰带」—— 结论做成居中圆章，四块台账分列两翼，闸门压在末位当底饰。
动效为什么这么做：穆夏的招牌是人物背后的环形光环 —— 入场从中心以圆形展开，像光环亮起。
可试：切换七个页签（或用 ← → 键）· 点指标卡展开历史 · 点维度行展开依据 · 点核对四态筛选 · 切换 A/A/A 大字三档 · 点「全屏交互」。动画即本条动效基因。
「把「照顾」这件事做成一件装饰艺术品 —— 装饰是礼遇。」
装饰密度严格压在**边框层**，中心留呼吸（这是基因卡的纪律）；淡彩底 #f8f3e9 上墨 #3a3230 达 10.9:1、正文 15.5px 衬线配 1.85 行高。
装饰一多就与"信息密度"打架；在本组里它的"礼遇感"最强，但"效率感"最弱。
Fauvism — Matisse cut-outs
版式为什么这么摆：马蒂斯的剪纸是不规则色块互相镶嵌 —— 指标区降为两列高块、需关注项与闸门各占一半，尺寸悬殊地咬在一起。
动效为什么这么做：马蒂斯的剪纸是"贴"上去的 —— steps() 分步缩回，保留手工拼贴的颗粒感。
可试：切换七个页签（或用 ← → 键）· 点指标卡展开历史 · 点维度行展开依据 · 点核对四态筛选 · 切换 A/A/A 大字三档 · 点「全屏交互」。动画即本条动效基因。
「颜色不描述东西，颜色本身就是东西 —— 生命力的直接表达。」
撞色底上放文字会立刻摊糊，所以**所有正文都落在白块上**，色块只做面；四态用饱和度拉开（绿/橙/紫红）而不是明度。
撞色的能量与「看化验单」的场合冲突；四个以上的高饱和色同屏会让人抓不住重点，本组里注意力成本最高的一项。
Cubism — Picasso / Braque analytical phase
版式为什么这么摆：立体主义把对象拆成面再重新并置 —— 块跨不同列数、不共基线、左右交替退让，全页没有一条贯穿的竖线。
动效为什么这么做：立体主义把对象切成面 —— 入场也用多边形 clip-path 拼合。这是全组里最"费眼睛"的动效，正好对应它的低可读性评分。
可试：切换七个页签（或用 ← → 键）· 点指标卡展开历史 · 点维度行展开依据 · 点核对四态筛选 · 切换 A/A/A 大字三档 · 点「全屏交互」。动画即本条动效基因。
「一个东西从六个角度看，同时画在一张纸上。」
碎面直接与「扫读」为敌 —— 这是全部 30 项里可读性最危险的一项（本评分 2/5）。缓解手段：**面只碎在背景与分隔层，数据卡保持完整矩形**，正文 15.5px 全正。
解构让"眼睛找东西"变慢，对焦虑家属是负担；它更像当代艺术海报而不是工具。放进 30 强是为了让社区看到"边界到底在哪"。
Futurism — Balla / Boccioni speed lines
版式为什么这么摆：未来主义崇拜速度 —— 块从左到右逐级退让（每块比上一块窄一档），形成向右上冲刺的阶梯。
动效为什么这么做：未来主义崇拜速度 —— 从左侧冲进并带 skew，缓动曲线前段极陡（.2,.9,.1,1）做出起跑的爆发。
可试：切换七个页签（或用 ← → 键）· 点指标卡展开历史 · 点维度行展开依据 · 点核对四态筛选 · 切换 A/A/A 大字三档 · 点「全屏交互」。动画即本条动效基因。
「一个东西在动的时候，会同时出现在几个位置上。」
速度线只做 3% 强度的垂直条纹底，**不穿过任何数据区**；「残影」手法只用在装饰块与页签，数字保持单一清晰实体。
动势与「静下来读数字」相反；高密度的线纹在小字号下会造成摩尔纹，必须靠强度压制。
Surrealism — Magritte suspended clean absurdity
版式为什么这么摆：超现实主义的物体不受重力 —— 六个块悬在不同高度、左右两列互不对齐，没有一条共用的水平基线。
动效为什么这么做：超现实主义的物体不受重力 —— 上升要慢、要没有加速度感，像被拖起来而不是被推上去。
可试：切换七个页签（或用 ← → 键）· 点指标卡展开历史 · 点维度行展开依据 · 点核对四态筛选 · 切换 A/A/A 大字三档 · 点「全屏交互」。动画即本条动效基因。
「把不可能摆得理所当然 —— 疾病本身就是一件超现实的事。」
马格利特的画面其实**极干净**（大量纯色 + 硬边），所以可读性天然好；天空蓝 #dceaf7 上墨蓝黑 #1e2a38 达 13.1:1，悬浮只给柔和阴影不模糊文字。
诗意与「工具感」有距离；悬浮阴影若做得过度会让界面显得轻飘不稳定（对"可信"是减分）。
De Stijl — Mondrian primary grid
版式为什么这么摆：风格派的版式就是粗黑线切出的不等大格子 —— 四列不等宽（1.2 : 1 : 1.6 : 1），闸门占中央大格，其余各安其位。
动效为什么这么做：蒙德里安不接受柔和边缘 —— 用线性的硬边 clip-path 推进，节奏均匀、没有缓动。
可试：切换七个页签（或用 ← → 键）· 点指标卡展开历史 · 点维度行展开依据 · 点核对四态筛选 · 切换 A/A/A 大字三档 · 点「全屏交互」。动画即本条动效基因。
「网格是纪律，色块是自由 —— 理性里留一点快乐。」
粗黑网格天生是最强的分区装置（每个区域边界绝对清楚）；色块面积严格受限（黄 ≤12%、红 ≤6%、蓝 ≤4%），正文一律落在白格里。
粗黑线会吃掉不少空间，信息密度低于瑞士；三原色的"玩具感"在严肃场合容易被低估。
Yves Klein — International Klein Blue monochrome
版式为什么这么摆：克莱因只有一个面 —— 顶部一整块 IKB 通栏吞掉结论与指标，其下所有内容收成一条居中窄栏，左右全空。
动效为什么这么做：克莱因只有一种颜色一个面 —— 入场是"面淡入 + 一条金线从左画到右"，没有别的花样。
可试：切换七个页签（或用 ← → 键）· 点指标卡展开历史 · 点维度行展开依据 · 点核对四态筛选 · 切换 A/A/A 大字三档 · 点「全屏交互」。动画即本条动效基因。
「一种颜色，一个世界 —— 纯粹本身就是宣言。」
IKB #002fa7 上的白字达 10.7:1（深蓝底反而比多数浅底更耐读）；**只在蓝色面内使用白色文字**，绝不把 IKB 用在小字上；正文落在纯白块。
IKB 是极强的品牌性颜色，一旦定稿就几乎无法与其他颜色共处；蓝的"冷"与病房的暖需求相反。
Agnes Martin — hand-drawn grids, quiet meditation
版式为什么这么摆：Agnes Martin 把一切放在同一张手绘网格上 —— 四列等距、行高相等，没有哪一格更重，只能慢慢看。
动效为什么这么做：Agnes Martin 的作品是"看久了才显现"的 —— 1100ms 纯淡入，没有位移、没有模糊、没有缓动花招。
可试：切换七个页签（或用 ← → 键）· 点指标卡展开历史 · 点维度行展开依据 · 点核对四态筛选 · 切换 A/A/A 大字三档 · 点「全屏交互」。动画即本条动效基因。
「一张安静到几乎听不见的网格 —— 把噪音全部拿走。」
本组里最克制的方案，可读性反而最高：米白 #f7f4ef 上墨 #262420 达 14.8:1，正文 16px、行高 2.0，手绘网格线只到 8% 强度（绝不与文字争）。
「安静」也会读成「没做什么」；对需要强提示的异常数值来说，它给的刺激最弱，可能被用户忽略。
Sugimoto seascapes — horizon, long exposure, greyscale
版式为什么这么摆：杉本博司的地平线压得很低 —— 上方留出一整块空（天），所有信息沉在画面下缘（海）。
动效为什么这么做：杉本博司的长曝光 —— 只有垂直方向的极缓上升，水平绝对不动。快一点就不是这个风格了。
可试：切换七个页签（或用 ← → 键）· 点指标卡展开历史 · 点维度行展开依据 · 点核对四态筛选 · 切换 A/A/A 大字三档 · 点「全屏交互」。动画即本条动效基因。
「一张照片里只有天和海 —— 去掉一切，剩下的还能立住吗？」
**本风格的诚实边界**：画面部全灰阶，但四态色保留语义色相（把「良好」和「异常」都画成灰，就是违反硬约束 C1）。灰 #1f2429 对雾灰 #e4e7e9 达 13.6:1，正文 16px 行高 1.85。
灰阶的高雅与"一眼看出哪个数字不对"有张力；它的克制要用户自己付出更多注意力。
Anselm Kiefer — lead, ash, monumental mourning
版式为什么这么摆：基弗的画面是层层堆积的物质 —— 页面切成四道厚的水平地层：天光带 / 读数带 / 台账带 / 基岩带，越往下越重。
动效为什么这么做：基弗的材料是铅和灰烬 —— 入场像重物落地：略微从上方落下，缓动前段慢后段更慢（摩擦感）。
可试：切换七个页签（或用 ← → 键）· 点指标卡展开历史 · 点维度行展开依据 · 点核对四态筛选 · 切换 A/A/A 大字三档 · 点「全屏交互」。动画即本条动效基因。
「废墟里还剩一点光 —— 沉重，但不绝望。」
灰烬调最容易糊成一片，所以四态色的**明度必须显式拉开**（不是靠饱和度）；骨白 #ddd7cc 对铅黑 #171512 达 12.4:1，正文 15.5px 行高 1.88。
悼念气质对正在治疗的患者是最重的心理负担；「纪念碑」的语言暗含"结束"，与产品要给的"继续往前走"相反。
KyoAni airy everyday — Naoko Yamada soft light
版式为什么这么摆：京都动画的版式靠「间隙」呼吸 —— 1.15 : 1 的不对称双栏，栏距 60px，左栏指标竖向读、右栏台账竖向接。
动效为什么这么做：京都动画的空气感来自"慢半拍" —— 轻微上浮 + 一点点散焦，落定时完全干净。
可试：切换七个页签（或用 ← → 键）· 点指标卡展开历史 · 点维度行展开依据 · 点核对四态筛选 · 切换 A/A/A 大字三档 · 点「全屏交互」。动画即本条动效基因。
「把「今天也还好」这件事画出来 —— 日常的体面就是最大的安慰。」
低饱和但**不低对比**：暖岩灰 #2f3238 对雾白 #f6f5f2 达 13.9:1；正文 16px、行高 1.9；光晕强度压到 8% 以下，绝不压在文字上。
情绪最"稳"也最"平"——没有冲击力，可能因"不够范"在评选中吃亏；但它是长期使用的舒适解。
本材料由 CHG-014 立项产出。所有患者、指标、报告、试验、数字均为虚构演示，不含任何真实病历、姓名、医院、Token 或本机路径。 三十份 demo 共用同一份内容契约（demo/lib/content.mjs），风格层与内容层严格分离 —— 这也是将来重构时的落地方式。 可读性底线（正文 ≥15px、行高 ≥1.6、四态色对比 ≥4.5:1、点击目标 ≥36px）对三十份 demo 一律生效，任何风格不得突破。