MoonGate 设计哲学：视觉远近法与月语义化的诞生

从月灵花束到编辑器，一个关于月光与代码的故事

一、缘起：一首记错的歌

Moongate 的故事，始于一个美丽的错误。

那时我想为自己的技术博客起一个名字。我的网名叫“月灵花束”——它源于一首日本歌曲《月と花束》（月与花束）。但在注册时，我记错了那个字，把“与”记成了“灵”。

月与花束，是月光下的花，温柔、短暂、有告别感。

月灵花束，变成了“月亮之灵绽放的花”——从静态的画面，变成了有生命的意象。

这个错误，让一个普通的网名，长出了自己的灵魂。

后来，我想要一个域名。moonlight.com 被注册了，moon.com 也被注册了。命运似乎在说：你不该走那条路。

于是有了 Moongate。

月光还在，但不再是“光”，而是一扇门。门后是什么？是代码构筑的世界，是极简的科幻终端，是每一个深夜 coding 的人可以进入的领地。

二、设计哲学：三个核心原则

1. 编辑器化

Moongate 不是“又一个好看的主题”。它的目标是：让网页拥有编辑器级别的视觉精度。

为什么 VS Code 看起来那么舒服？因为它知道什么该突出，什么该退后。操作符是暗的，函数名是亮的，注释是斜体的。这不是随意为之，这是视觉远近法。

在 Moongate 中，每一个组件都在模仿编辑器的语言：

  • 代码块带有窗口标签，像被嵌入的文件
  • 行内代码像霓虹灯一样在段落中亮起
  • 标题左侧有悬停才出现的激活条，像编辑器的行号区
  • 表格像数据库查询结果，悬停时光晕亮起

这不是“像编辑器”，这是让用户感觉自己在使用一个精密的工具。

2. 视觉远近法

代码是有层次的，界面也应该有。

我们建立三重视觉层级：

层级元素视觉特征
前景标题、按钮、代码高对比度、有光晕
中景正文、卡片内容正常对比度、稳定
背景注释、边框、辅助信息低对比度、退后

具体实现：

  • 操作符和标点用 #64748b，视觉上“退后”
  • 正文用 #e2e8f0，稳定可读
  • 函数名和强调元素用 #7dd3fc，产生微弱的“自发光感”

3. 月语义化

每一种颜色都有它的隐喻。这不是随机的调色盘，而是一套完整的色彩叙事。

颜色变量月相语义
深蓝--ui-bg夜空底色，深邃稳定
主蓝--ui-primary晴夜月光核心操作、关键字
发光蓝--ui-text-highlight月晕强调、函数、代码
绿色--ui-success月灵花成功、字符串、生命力
黄色--ui-warning满月警告、数字、常量
红色--ui-error月食错误、删除、危险
紫色--ui-purple月虹Vue指令、装饰器（罕见）
灰色--ui-text-muted月影注释、元数据、退后信息

为什么红色用得那么少？ 因为月食罕见。如果每个月都是红月，那就不是奇观，而是末日了。Moongate 的红色只出现在错误、删除、标签这些“需要你注意”的地方。

三、组件设计语言

直角美学

--ui-radius: 0rem;

圆角是“果冻”，直角是“工具”。直角传递秩序感、精密感、工业感。在深色背景上，直角让组件边界更清晰。

所有组件——按钮、卡片、输入框、代码块——都遵循这个原则。没有例外。

像素锚点

在按钮和卡片的四角，我们放置了 1px 的方块。它们平时隐藏，悬停时浮现。

这不是装饰，这是机械细节——让组件看起来像是物理实体，有固定的螺丝，有精确的边界。

静默交互

链接平时融入文本，只有悬停时才亮起。这叫 “用户唤醒式”交互——界面平时安静，等待用户需要时才反馈。

同样的逻辑应用在：

  • 标题左侧的激活条（悬停才出现）
  • 代码块的复制按钮（悬停才显示）
  • 表格行的悬停高亮

扫描光效

在主要按钮上，我们加入了扫描光效。它模拟了 CRT 显示器的刷新线，也像雷达扫描。

这不是为了“炫”，而是为了给用户时间感——仿佛指令正在被系统处理。

终端隐喻

  • 方括号 [ ]：将文字包裹在括号里，变成代码函数调用
  • 下划线 _：闪烁的光标，表示等待输入
  • 箭头 ->：终端里的路径切换
  • 全大写：命令式的语气

每一个符号都在说：你在和系统对话。

四、从博客到编辑器

Moongate 最初是我的博客设计语言。后来我发现：为什么编辑器不能和博客长得一样？

于是有了 Moongate Dark——一个将博客配色带到 VS Code 的主题。

现在，Moongate 正在成为一套完整的 UI 库。从博客到编辑器，再到任何网页，Moongate 的设计语言可以出现在任何地方。

这就是“月门”的含义：从你的一隅，通向更广阔的世界。

五、技术实现

设计令牌

:root {
  --ui-primary: #3b82f6;
  --ui-bg: #0f172a;
  --ui-bg-elevated: #131c31;
  --ui-text: #e2e8f0;
  --ui-text-muted: #64748b;
  --ui-border: #2d3748;
  --ui-radius: 0rem;
  --ui-glow: 0 0 15px -5px var(--ui-primary);
}

所有组件都基于这些变量，保证全站一致性。用户可以通过覆盖变量来自定义主题。

色彩派生逻辑

Moongate 不提倡随机定义颜色，而是建议基于基础变量通过 color-mix 进行派生：

--ui-bg-hover: color-mix(in srgb, var(--ui-primary), transparent 92%);
--ui-border-subtle: color-mix(in srgb, var(--ui-border), var(--ui-bg) 70%);

这样保证了在不同背景下，半透明效果始终协调。

双字体策略

--font-proportional: 'Inter', system-ui, sans-serif;
--font-mono: 'JetBrains Mono', monospace;
  • 正文用比例字体，长文阅读更舒适
  • 代码、按钮、元数据用等宽字体，强化“系统感”

六、最后

Moongate 不是又一个设计系统。

它是从一首记错的歌开始的旅程。 它是从被注册的域名里找到的路。 它是一个开发者为自己和同类人做的工具箱。

如果你用 Moongate 做了一个项目，你就是这个世界的共建者。

探索不息，编码不止。

—— 月灵花束
2026.02.24

© 2026 MOONGATE