# Design Philosophy — 设计哲学

> **让 DeepSeek Harness 换上一张克制、清透、有质感的「脸」。**
>
> 这个项目不只是「给 DSH 换个皮肤」。它是一份关于「什么算高级」的设计声明。

---

## Why — 为什么是「高级感」

换肤插件很多，绝大多数在**加法**：更多主题、更花的壁纸、更跳的配色，甚至直接二次元萌系题材铺满整个界面——用「内容量」吸引眼球。

我们走另一条路，做**减法**：以 iOS / Linear / Apple Human Interface 式的审美为基准，把「高级感」建立在**材质的准确**与**配色的克制**上，而不是建立在「放了多满图」上。

> 一句心里话：写代码的地方不用喧闹。高级感来自**留白、克制、与恰到好处的一点点光泽**——就像一块经过精心调校的玻璃，而非一面贴满贴纸的墙。

---

## Tenets — 六条准则

### 1. 用色：少，且克制（Restraint in Color）

- 高级的配色**饱和度整体偏低**，高饱和只留给少数「强调点」（品牌色、正在进行的动作）。
- 同色系胜过撞色：一个界面的主色不超过两三个，靠**明度阶梯**（light/dark 各 5 档）而不是靠堆色来分层。
- 暗色不是「纯黑」——是**带冷灰/蓝灰倾向的深**（iOS 暗色是 `#1c1c1e`，不是 `#000`）。纯黑会「死」，带倾向的深会「通」。

### 2. 材质：清透胜过堆砌（Clarity of Material）

- 面板用**半透明的玻璃**（亚克力 / frosted glass），让背景光透进来，而不是实心色块。
- 用**弥散光**（柔和 radial-gradient 光斑）代替生硬的硬边渐变，光晕是「溶」进背景的，不是贴上去的。
- 阴影是**环境投影**（soft, ambient），不是硬投影——用于表达「浮起一层」，而不是「缺了一个角」。

### 3. 层次：靠边界，不靠色块堆叠（Depth by Edges）

- 每一个层级靠**同色系低透明描边**（1px border，alpha 0.1~0.2）来区分，而不是靠「一块不同的底色」。
- 浮层与底层的差别是**透明度与光泽**，不是「两个完全不同色相」的块。

### 4. 留白：让元素呼吸（Whitespace）

- 间距宁可多不可少。元素之间的呼吸感，是高级感最容易感知的部分。
- 对齐用**同一条基线/左缘**，不散落在一个区间的任意位置。

### 5. 排版：克制且利落（Typography）

- 字量级控制在三级（主 / 次 / 弱），不滥用加粗与颜色。
- 字体锐利、抗锯齿平滑，行距舒展——「满」是 low 的来源，「呼吸」才是 high。

### 6. 细节：小处的光泽（Details & Polish）

- 一个克制的强调色点缀（品牌青/靛蓝），一个细腻的 hover 过渡，一个恰到好处的按钮圆角——这些「小处」的打磨，正是「质感」二字所在。
- 动效克制：过渡是为了**告知状态**，不是为了「炫」。

---

## Palettes — 8 套 Mirage 的配色逻辑

每套皮肤遵循同一套**材质骨架**，只是**色相与气质**不同：

| id | 色相 | 气质 | colorScheme |
|----|------|------|:---:|
| `abyss` | 靛蓝 | 冷峻深邃 | dark |
| `aurora` | 青绿 | 清冽通透 | dark |
| `nebula` | 紫青 | 朦胧漫射 | dark |
| `ember` | 暖橘 | 温暖克制 | dark |
| `midnight` | 中性黑 | 极简 OLED | dark |
| `ivory` | 暖白纸感 | 清透柔和 | light |
| `mist` | 冷蓝白 | 晨雾清新 | light |
| `rose` | 现代粉 | 克制优雅 | light |

**共同规则（所有皮肤统一）：**

- **底色**：暗色为带冷灰/蓝灰倾向的中性深（非纯黑）；亮色为冷白/暖白（非刺眼纯白）。
- **玻璃层**：面板用 `rgba(255,255,255,0.04~0.095)`「白色低透明浮升在深层上」——这正是 Linear 的材质秘诀。
- **描边**：同色系 1px、alpha 0.08~0.2，区分层级而不「划线」。
- **文字**：三级明度（主/次/弱），保证在玻璃上的对比度与可读性。
- **强调色**：每套只有一个鲜亮点缀（品牌色），其余全部克制。

> 材质骨架统一 → 换主题 = 换气质，但「质感」永远在线。

---

## Material — 弥散光与液态玻璃

高级感的材质由两层承载：

1. **每皮肤弥散光渐变**：每套皮肤内置一份多层 `radial-gradient` 弥散光背景（柔和光斑 + 同色系暗部分层）——选皮肤即自动挂载（用户未设自定义壁纸时），一选即现「材质感」。
2. **液态玻璃（leaf cards）**：为**叶子卡片**（输入框 `.uV2eYG_card`、行内告警 `.bqrRRG_card`、小浮层 `.lXshSW_root`）注入半透明填充 + `backdrop-filter: blur()`，让弥散光「雾化透入」形成液态玻璃。

### 材质分层（每层的透明度各不相同）
- **背景层**：`bg-base` / `bg-layer-1/3` —— 半透玻璃，弥散光可透出。
- **浮层/模态层**：`bg-layer-2`（设置面板用）—— 深色 `rgba(带色深,0.85)`（高不透明、背后文字不透）、亮色 `rgba(255,255,255,0.92)`（清透但可读）。
- **输入框**：`--dsw-specific-input-major` —— 深色 `rgba(255,255,255,0.08)` 液态玻璃（半透白 + blur）；亮色 `rgba(255,255,255,0.92)` 干净利落。
- **用户选项弹窗**（`.Mbwy4a_card`）：与输入框复用 `input-major`，因输入框刻意很透明，选项弹窗单独以 `color-mix(in srgb, var(--dsw-alias-bg-base) 94%, transparent)` 覆盖为高不透明——深浅色都保证选项文字清晰、背景不透。
- **输入框底部 scrim**：给输入框根容器一条「透明 → 高不透明 tip 色」的渐变，把滚动上来的消息 / "第 N 轮" 监控行**遮在输入框下方**，不重叠、不杂乱。

### 关于 backdrop-filter 的安全性边界
`backdrop-filter` 会创建新的包含块（containing block），**只有加在「承载 `position: fixed` 弹窗的大容器」上**才会破坏 fixed 定位（设置面板会从「相对视口居中」被「困」进容器里）。因此我们严格只对**叶子卡片**加 blur——它们不是任何 fixed 弹窗的祖先，安全；**绝不对侧边栏 / 主列这类大容器加**。设置面板模态自身使用 DSH 自带 mask blur + 高不透明 `bg-layer-2`，可读且零风险。

> 配色负责「气质」，弥散光与液态玻璃负责「质感」。两者配齐，才是完整的高级感。

---

## 延伸阅读

- [Apple Human Interface Guidelines](https://developer.apple.com/design/human-interface-guidelines/) — 材质/留白/层次的设计基准
- [Linear — 极致克制的现代工具典范](https://linear.app) — 低饱和配色 + 玻璃面板 + 弥散光的代表
- 配色实践见 [`docs/themes-spec.md`](./themes-spec.md)（--dsw-* token 契约）
- 实机效果见仓库顶部预览图

---

*高级感不是「有钱」的装饰，而是「想清楚」后的克制。我们把这份克制写进每一套皮肤、每一行 token。*