# DreamNight Design Language

**DNDL v1.0 · 品牌设计规范**

版本：1.1.0  
状态：品牌基准规范；具体页面结构与产品实现由各项目独立决定。  
本文件是品牌原则的权威来源。`tokens.css` 是实现值的唯一来源；`AGENTS.md` 是实现与验收约束。示例不是页面模板。

## 规范用语

- **必须 / 不得 / 禁止**：验收约束。
- **原则上 / 默认**：品牌默认；功能必要的例外须说明理由。
- **建议 / 可以 / 约 / 参考**：可随产品情境调整，不是所有页面的硬编码要求。
- 数值建议在 Tokens 中有一个可用默认值，不意味着产品不得在建议范围内调整。

## 1. 设计定位

DreamNight 是一套继承 Windows Phone Metro 设计精神，并融合现代层级、材质和空间交互理念的个人品牌设计语言。

核心原则：

- **Content First**：内容即界面，信息优先于装饰。
- **Bold Geometry**：直角、大色块、明确的几何关系。
- **Typography as Interface**：字体与排版本身构成视觉设计。
- **Meaningful Elevation**：通过阴影、尺度和动效体现层级。
- **Selective Acrylic**：局部使用半透明材质，保留实色色块。
- **Spatial Continuity**：交互前后的空间关系保持连续。

设计语言适用于个人门户、项目官网和独立应用，但不要求各产品采用相同布局。

## 2. 色彩系统

### 2.1 品牌色板

| Token | HEX | 用途 |
| --- | --- | --- |
| Teal | `#59AAA5` | 品牌主色、主要强调 |
| Cyan | `#70B2D1` | 内容、信息展示 |
| Emerald | `#72AD8C` | 积极状态、功能区域 |
| Violet | `#A18BC8` | 创作、探索类内容 |
| Amber | `#D4AC65` | 提醒、辅助强调 |
| Orange | `#D78E74` | 活动、次级强调 |
| Steel | `#829BA9` | 中性色块 |
| Crimson | `#C98292` | 错误、危险状态 |

基础色：

- Canvas：`#F9FBFA`
- Surface：`#FFFFFF`
- Primary Ink：`#253B39`
- Secondary Ink：`#657B77`
- Muted Ink：`#82938F`
- Divider：`#E1E9E7`

以上为 v1.0 默认浅色主题色板。v1.0 不包含未经验证的深色主题。

### 2.2 色彩使用原则

1. 保留 Metro 的大面积实色色块，不将所有颜色退化为浅色背景或细小装饰。
2. 色块可以参与页面整体构图，不局限于卡片。
3. 不同颜色用于区分信息与功能，不必每个项目永久绑定一种颜色。
4. 降低传统 Metro 色彩的饱和度，但保留鲜明的色彩辨识度。
5. 文字颜色根据背景亮度与对比度确定，不强制所有色块使用白字。
6. 文字至少满足 WCAG AA 对比度要求：普通文字 4.5:1，大文字 3:1。

## 3. 几何与布局

### 3.1 几何规范

- 默认直角：`border-radius: 0`。
- 卡片、按钮、导航、输入框原则上均使用直角。
- 禁止无理由的大圆角、胶囊按钮和圆角卡片堆叠。
- 允许图标、头像及确有功能需要的特殊元素采用圆形。

### 3.2 布局原则

- 使用大面积色块、非对称布局、明确的对齐关系和充分留白。
- 支持不同尺寸、不同长宽比的信息区域。
- 不强制采用 Metro 磁贴网格，也不强制使用 JEVOS 侧边栏。
- 页面布局必须根据实际内容与使用场景设计。
- 不以增加装饰性容器的方式制造层级。

## 4. 字体与排版

### 4.1 字体栈

```css
--dn-font: "Segoe UI", "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei",
  "Noto Sans SC", -apple-system, BlinkMacSystemFont, sans-serif;
--dn-font-display: "Segoe UI Light", "Segoe UI", "PingFang SC", sans-serif;
```

字体可用性由设备决定；不保证各系统具备 Light 字体文件。实现须保留回退链，不为示例强制联网下载字体。

### 4.2 排版原则

- Display / Hero：300 字重，约 64–96px（桌面端）。
- H1：300 字重，约 34–48px。
- H2：300–400 字重，约 22–32px。
- Body：400 字重，约 14–16px。
- Kicker：约 10–12px，600 字重，英文大写，字距约 2.2px。
- 数字、日期、状态和标题可以成为主要视觉元素。
- 强调字号、字重和空间关系，而非大量加粗、边框或图标。
- 移动端使用响应式字号，避免标题溢出。

## 5. 大色块与信息展示

### 5.1 大色块

大色块是品牌的核心视觉特征，而不是可选装饰。

- 可以用于 Hero、项目展示、内容区域、导航及信息模块。
- 保持明确的几何轮廓。
- 不要求所有色块尺寸相同。
- 允许大色块与留白形成强烈对比。
- 不应将整个界面统一改为低对比度的白色卡片集合。

### 5.2 信息优先

Metro 的核心不仅是磁贴，还包括直接呈现信息。

- 信息模块应优先展示有价值的实际内容，而非仅显示图标与名称。
- 项目模块可以展示最新动态、更新日期、进度或内容摘要。
- 信息密度应与内容重要性匹配。
- 动态信息必须来自真实数据；无法获取时使用合理的静态回退状态。
- 不为了动态效果而制造无意义的轮播或频繁刷新。

## 6. 层级与阴影

| 层级 | 对象 | 视觉表现 |
| --- | --- | --- |
| Level 0 | 页面背景、普通内容 | 无阴影 |
| Level 1 | 可交互色块、卡片 | 默认平面或极浅阴影 |
| Level 2 | Hover、选中、浮动区域 | 柔和阴影与轻微位移 |
| Level 3 | 展开详情、抽屉、弹出面板 | 明确阴影与空间过渡 |
| Level 4 | 模态界面 | 遮罩、阴影及明确的焦点层级 |

原则：

- 阴影用于解释层级，不用于装饰每一个元素。
- Hover 可以轻微上浮并增强阴影。
- Press 可以缩放至约 `0.96–0.985`。
- 动效与阴影必须共同表达一致的交互状态。

## 7. Acrylic 材质

半透明是辅助材质，不是主视觉材料。

推荐应用于：

- 顶部悬浮导航
- 侧边栏
- 抽屉
- 弹出菜单
- 部分浮动工具栏

基础参考：

```css
.acrylic {
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.35);
}
```

要求：

- Acrylic 不得削弱内容可读性。
- 背景模糊不可用时应有不透明背景回退。
- 不应将所有 Metro 色块替换为玻璃卡片。
- 材质的使用应与界面层级和内容覆盖关系相匹配。

## 8. 动效系统

继承 JEVOS 的 Metro 方向性动效：

```css
--dn-ease-in: cubic-bezier(.1, .9, .2, 1);
--dn-ease-out: cubic-bezier(.7, 0, 1, .5);
--dn-ease-snap: cubic-bezier(.17, .89, .32, 1.18);
```

建议时长：

- Hover：150–250ms
- Press：100–180ms
- 内容展开：250–450ms
- 页面或区域过渡：300–500ms
- 交错入场间隔：约 45ms

动效原则：

1. 动画必须解释状态变化，而非单纯增加视觉效果。
2. 不对每一次数据刷新重新播放整页入场动画。
3. 避免无意义的持续运动。
4. 支持 `prefers-reduced-motion`。

### 8.1 卡片与磁贴反馈（实现 1.1.0 增补）

可交互色块、卡片与磁贴的默认反馈：

- **Hover**：上浮 `--dn-hover-lift`，阴影升至 Level 2；变换过渡使用回弹曲线 `--dn-ease-snap`，时长取「内容展开」区间（250–450ms）。
- **Press**：缩放至 `--dn-press-scale`，使用 `--dn-duration-press`，快于 Hover。
- **入场（Rise）**：卡片、磁贴等重复元素可在页面加载时以 `--dn-enter-index` × `--dn-stagger` 交错升入，只播放一次；不得在数据刷新、滚动或路由切换时重播。
- 减少动态效果时禁用以上位移与缩放；信息与操作不得依赖动画完成事件。

## 9. Spatial Continuity

DreamNight 的 Infinity 理念指**用户操作过程中的空间连续性**，而非无限画布或无限滚动。

具体要求：

- **Origin & Return**：内容从原位置展开，关闭时返回原位置。
- **Context Preservation**：进入详情时尽量保留原有页面、滚动位置与操作状态。
- **Directional Meaning**：深入、返回、同级切换应采用符合空间关系的不同动效。
- **Shared Elements**：适当使用共享元素过渡，保持视觉对象的身份连续性。
- **Navigation Clarity**：用户始终能够理解当前所在位置与返回路径。

不要求所有操作都使用动画，也不强制跨独立网站实现无缝过渡。

## 10. 品牌一致性与产品独立性

DreamNight 旗下产品应共享：

- 品牌色彩体系
- 字体与排版原则
- 直角几何语言
- 阴影与层级逻辑
- 动效曲线和空间交互原则
- Acrylic 材质规范

但允许各产品独立决定：

- 页面布局
- 导航结构
- 信息密度
- 功能组件
- 主要色彩分配
- 内容展示形式

不允许为了品牌统一而破坏产品自身的可用性。

## 11. 设计禁忌

- 不把 DreamNight 简化成普通的圆角卡片式 SaaS 界面。
- 不把 Metro 理解成只有彩色磁贴。
- 不机械复制 JEVOS 的页面布局。
- 不用玻璃拟态替代实色色块。
- 不用阴影代替所有色彩层级。
- 不为了 Infinity 效果制造复杂、不可预测的导航。
- 不为了统一风格牺牲信息可读性、性能和无障碍体验。

## 12. v1.0 实现附录：可读性与操作保障

本节落实上述原则，不修改原始品牌色板，也不扩大为布局规范。

### 12.1 原始色与语义色分离

`--dn-*` 原始色记录品牌值；`--dn-text-*` 等语义变量记录在特定背景上可用的值。不能因为变量名含 Ink 就认为它适合任意背景。

- `--dn-text-primary`：映射 Primary Ink；用于 Canvas / Surface。
- `--dn-text-secondary: #5B716B`：次要正文的可读性派生值；用于 Canvas / Surface。原始 Secondary Ink 保留。
- `--dn-text-on-color: #102A27`：八种品牌实色色块上普通文字的统一安全默认值；原始 Primary Ink 保留。
- `--dn-text-on-ink`：映射 Surface；只用于深色 Ink 背景，不用于八种品牌色的普通正文。
- 原始 `--dn-ink-muted` **不得默认用于浅色背景的普通小字**；可用于经检测通过的大字或非信息性装饰。示例的小字也使用次要正文语义色。
- `--dn-divider` 仅用于装饰性分隔，不用于必须可辨识的输入框轮廓或焦点标识。
- 链接应具备下划线或其他非颜色提示；错误、成功和选择状态不得仅靠颜色传达。
- 大文字阈值按 WCAG：约 24 CSS px 普通字重，或约 18.67 CSS px 粗体。300 字重不视为粗体。
- 不声称这些配对意味着产品整体通过 WCAG；真实背景、透明叠层、字号与交互必须在产品中另验。

### 12.2 材质回退

`materials.css` 先提供不透明 Surface，然后仅在浏览器支持模糊时开启 Acrylic。支持减少透明效果或用户手动设置 `[data-dn-transparency="off"]` 时使用不透明回退。动态或高反差底图下必须重新检查；不可靠时关闭透明。

### 12.3 焦点与键盘

- 交互目标建议至少 44 × 44 CSS px；不得移除可见焦点。例外应有充分的相邻间距和无障碍理由。
- 焦点环必须在实际背景上可辨识。强制颜色模式保留系统轮廓。
- 详情层应提供明确关闭方式、Escape、焦点约束与关闭后的焦点返回；打开过程中不清空底层页面。
- 减少动态效果时保持所有信息和操作可用；不得依赖动画完成事件才能访问内容。

---

## 设计总纲

DreamNight = **Metro Geometry + Expressive Typography + Bold Color Fields + Live Information + Meaningful Elevation + Selective Acrylic + Spatial Continuity**

以内容为中心，以字体和色彩构建界面，以层级和动效解释交互，以空间连续性连接体验。

配色、几何、字体、层级、材质与交互原则固定为品牌基准；具体网页结构、组件组合和技术实现由各项目独立决定。