设计体系与工程概念

Tuff 的设计体系不是简单的视觉样式罗列，而是建立在人机感知物理学、流式现代计算与生产力工程纪律之上的严密契约。

本板块系统性拆解 Tuff & TuffEx 每个设计决策背后的“为什么”与“怎么做”，涵盖几何曲率、物理材质、色彩暗色、排版工程、微动效节拍与 AI 流式交互 6 大领域。

几何与空间形态

• G2 连续曲率与超椭圆几何 — 超越标准 border-radius 圆弧倒角，解析曲率突变、超椭圆方程与 Apple 平滑圆角实现。
• 同心圆角法则与微内嵌防裁切 — $R_{\text{outer}} = R_{\text{inner}} + \text{Padding}$ 几何守恒、光标裁切规避与 0.65x 垂直光学内边距。
• 浮层按打开顺序取号与吸顶分割边界 — 消除 z-index: 99999 混乱：浮层按打开顺序从同一个计数器取号，抽屉先抬到 10000；吸顶 1px 细线准则。

材质物理与环境感知

• Surface 8 种材质物理选型与确认门禁 — Refraction（默认）、Glass、Acrylic、Mica 等 8 种材质选型矩阵与严肃确认门禁。
• 琉光折射管线与光谱色散模型 — 斯涅尔定律、SVG 位移贴图滤镜、Smoothstep 强度映射与 RGB 色散。
• 材质自动推断与 120Hz 运动降级 — 指针速度感知、窗口移动监听、帧预算探针与省电信号，0ms 降级与 140ms 非对称恢复。
• Alpha 噪点掩膜与光斑追踪 — 解决 Overlay 发灰的 mask-composite: intersect Alpha 噪点方案与卡片物理反光追踪。

色彩科学与暗色模式

• #141414 深灰画布与三层表面阶梯 — 为什么不用纯黑 #000000？规避 OLED 拖尾残影、保留空间阴影与三层深灰阶梯。
• 暗色视网膜光晕与字重微调补偿 — 亥姆霍兹视网膜光渗效应、暗底白字的膨胀感知、可变字体 460/560 微调与静态字体回退。
• 双极性语义着色与 4.5:1 对比度守恒 — 解决暗色下 -light-9 背景着色失真，color-mix 墨水融合与 WCAG 4.5:1 全场景实测。
• 深浅主题光效裂变与色相排序 — 为什么 plus-lighter 在浅色底板会发灰？深浅独立色相循环管道设计。

排版美学与文本工程

• 13–14px 生产力基准与等宽 0.9em 调和 — 生产力工具与营销页面的本质区别、阅读疲劳与等宽代码 X 高度缩小 0.9em 调和。
• 现代软换行、孤字终结与零 Tracking 铁律 — text-wrap: pretty 孤字规避、balance 标题平衡、流式稳定期与严禁正文字距调整。

微动效与微交互节拍

• 微动效响应纪律与 Sub-100ms 瞬时悬停 — 动效是空间锚点不是娱乐表演，悬停 0ms 瞬间响应，状态形变类名隔离。
• 90ms+90ms 确认律动与物理弹簧引擎 — 消除点击即消失的不确定感，两拍式确认微交互节拍与二阶阻尼弹簧方程。
• 合成器线程优先与双 Keyframe 重放 — 仅允许四大 GPU 合成属性，Keyframes 排除变量，双键名交替规避重排。

AI 原生交互与流式生成

• 流式文字节拍器与微渐显预设 — useStreamPacer 节拍时钟平滑网络抖动，Aurora / Blur 微渐显与单光标交接。
• 双层镜像 Reserve 防抖与即时框选复制 — 重放时用预占位镜像锁住最终高度，文字落地即可框选复制（Cmd+C 零等待）底线。