回到首页

设计系统

可爱又闪亮地优雅

工程精度裹着一层柔光。强调色是声音；稀少才是重点。

  • 墨色主调 + 单一强调色（静谧玫瑰 / 暖杏）
  • 细线优于填色
  • 三语排版（中 / 英 / 日）
  • 入场渐显，420ms ease-out-quart
  • 单栏窄版（最大 42rem）

字体

层级

  • 展示

    Hanken Grotesk · 30px · 500

  • 标题

    Hanken Grotesk · 24px · 500

  • 小标题

    Hanken Grotesk · 18px · 600

  • 正文

    Hanken Grotesk + 小米 Sans · 16px / 28px · 400

  • 标签

    Hanken Grotesk · 14px · 500

  • 等宽

    Calling Code · 12px · 400

  • 导语

    思源宋体 SC · 16px / 28px · 600

  • 字标

    Fugaz One · 24–30px · 400 · 仅「Xat」

字样

  • Hanken Grotesk — 显示与界面

    The quick brown fox jumps over the lazy dog

    The quick brown fox jumps over the lazy dog

  • MiSans — 中日韩

    打造生产级界面与 AI 原生产品

    本番品質の UI と AI ネイティブなプロダクトをつくる

  • Fugaz One — 点缀

    Xat

  • Calling Code — 等宽

    const greeting = "Hello"

  • Source Han Serif — 衬线

    Building production-quality interfaces

色彩

宽屏并排展示两套色板，窄屏可切换查看，默认跟随当前主题。

表面

页面画布、抬升的面板与浮层。暗色模式下层级有差异，亮色模式下统一为白，靠边框而非填充区分。

  • background

    页面画布

    —

  • surface

    内嵌承载面（卡片、面板）

    —

  • card

    卡片填色（surface 的别名）

    —

  • popover

    浮层（popover、菜单）

    —

  • background

    页面画布

    —

  • surface

    内嵌承载面（卡片、面板）

    —

  • card

    卡片填色（surface 的别名）

    —

  • popover

    浮层（popover、菜单）

    —

内容

文字与图标的前景色阶。

  • foreground

    主文字色

    —

  • muted-foreground

    次级文字色

    —

  • primary

    主操作填色（墨色反转）

    —

  • foreground

    主文字色

    —

  • muted-foreground

    次级文字色

    —

  • primary

    主操作填色（墨色反转）

    —

底色与边线

用于 hover/选中态的弱底色，以及结构性的细线分隔。

  • muted

    静态弱底色

    —

  • accent

    交互态底色（hover、pressed）

    —

  • border

    细线分隔

    —

  • muted

    静态弱底色

    —

  • accent

    交互态底色（hover、pressed）

    —

  • border

    细线分隔

    —

高亮

品牌色。克制地用于标识、强调与链接示意。

  • highlight-soft

    品牌弱底

    —

  • highlight-text

    品牌强调文字

    —

  • highlight-icon

    品牌图标着色

    —

  • highlight-soft

    品牌弱底

    —

  • highlight-text

    品牌强调文字

    —

  • highlight-icon

    品牌图标着色

    —

状态

语义化反馈。以意图驱动，而非装饰。

  • destructive

    错误、破坏性操作

    —

  • info

    信息

    —

  • success

    确认、正向

    —

  • warning

    警示

    —

  • destructive

    错误、破坏性操作

    —

  • info

    信息

    —

  • success

    确认、正向

    —

  • warning

    警示

    —

层次

只有一种轻阴影，用 highlight-soft 着色。无玻璃态，无厚重投影，不演绎层级。

表面默认平贴页面。层次靠细线，不靠抬起。

shadow-halo

0 1px 2px · highlight-soft / 30%

组件

两层结构：整段引入的 primitive，和在它们之上自行组合出的小件。

Prime

按钮、徽章、弹层、对话框，整段从 bejamas/ui 复制过来，原样保留。

bejamas/uiAstro 原生组件，复制即拥有。

Particles

Prime 之上薄薄一层，承载本站气质的项目自有零件。

  • 查看全部

    TextLink — 圆角胶囊下划线，非 text-decoration

  • 旅人

    Wanderer gradient — 渐变动效文字，仅用于 footer 的强调

命名规则

  • 单一声音规则

    highlight-text 与 highlight-soft 合计不超过屏幕约 10%。

  • 细线而非墙规则

    亮色模式下 surface、card、popover 与 background 合一，用边框而非填色区分。

  • 单一字标规则

    font-fugaz-one 仅可用于字面文本「Xat」。

  • 单一渐变规则

    background-clip: text 渐变仅出现在页脚 wanderer 一行。

  • 代码恒暗规则

    代码块在亮 / 暗站点模式下均保持 Vesper 深色。