DREAMNIGHT DESIGN LANGUAGE

Content first.
Identity always.

让内容成为界面。
让不同产品,说同一种设计语言。

探索品牌基准

01 / FOUNDATIONS

色彩先行,内容清晰。

保留大面积实色,而非只剩装饰。
八种品牌色,使用经过验证的深色文字。

Teal#59AAA5品牌 / 主要强调
Cyan#70B2D1内容 / 信息
Emerald#72AD8C积极 / 功能
Violet#A18BC8创作 / 探索
Amber#D4AC65提醒 / 辅助
Orange#D78E74活动 / 次级强调
Steel#829BA9中性 / 分区
Crimson#C98292错误 / 危险
INK ≠ WHITE BY DEFAULT

原色保持不变。色块正文使用 --dn-text-on-color;浅色次要正文使用 --dn-text-secondary。不以颜色代替状态说明。

02 / EXPRESSION

Typography
is interface.

字体,就是界面。

让字号、字重和留白建立关系。
少一点容器,多一点内容。

300 DISPLAY WEIGHT0 CORNER RADIUS

INFORMATION, NOT JUST AN ICON

规范本身,
也是有价值的内容。

品牌基准
DNDL v1.0
实现版本
1.1.0
核心原则
6 项
产品布局
由产品独立决定

静态标本 · 内容来自本仓库规范,不代表实时项目状态。

03 / SPATIAL CONTINUITY

展开有来处,返回有方向。

Infinity 是操作的空间连续性,
不是无限画布,也不是无限滚动。

ORIGIN & RETURN 从这里,
展开一个想法。
查看空间连续性示例

MATERIAL & FEEDBACK

只在需要时,
让层级浮现。

左侧色块默认为平面;Hover 以回弹曲线轻微抬起,按下轻缩放。顶部导航局部采用 Acrylic,不改变实色色块。

模糊不可用时自动使用不透明背景。

THE INTERACTION CONTRACT

  1. 来源:从触发色块的位置展开。
  2. 上下文:底层页面与输入内容保留。
  3. 返回:关闭回到来源,恢复滚动与焦点。

ONE FOUNDATION. MANY PRODUCTS.

共享语言,
不共享一个答案。

ORIGIN → DETAIL → RETURN

你没有离开,
只是深入了一层。

这不是一个新页面。来源色块仍在原处,底层滚动位置与输入内容也没有被清空。

  1. 01

    Origin

    面板从触发元素的几何位置展开。

  2. 02

    Context

    浏览器原生模态层约束焦点,保留页面上下文。

  3. 03

    Return

    关闭或按 Escape,面板回到来源,焦点返回触发链接。

开启「减少动态效果」时不做空间位移动画,所有操作仍可用。