回到首页

设计系统

可爱、闪亮，也优雅

骨架精密，表面柔软。强调色只在需要的时候出现。

  • 墨色主色调 + 单强调色（静谧玫瑰 / 暖杏）
  • 用留白、节奏与排版对齐组织页面
  • 三语排版优化（中 / 英 / 日）
  • 入场渐显动画，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

    卡片填色

    —

  • popover

    浮层

    —

  • background

    页面背景

    —

  • surface

    表面

    —

  • card

    卡片填色

    —

  • popover

    浮层

    —

内容

文字与图标的基础色。

  • foreground

    主文字色

    —

  • muted-foreground

    弱文字色

    —

  • primary

    主操作填色

    —

  • foreground

    主文字色

    —

  • muted-foreground

    弱文字色

    —

  • primary

    主操作填色

    —

底色与边界

用于交互状态的弱底色，以及封闭表面的轻边界。

  • muted

    弱底色

    —

  • accent

    交互态弱底色

    —

  • border

    边框

    —

  • muted

    弱底色

    —

  • accent

    交互态弱底色

    —

  • 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%

shadow-image-edge

文章媒体边缘

1px 墨色边缘 · shadow-halo

组件

两层结构：一层保留 primitive 原样，另一层在它们之上组合出站点自己的组件。

Prime

按钮、徽章、弹层、对话框，来自 bejamas/ui。

bejamas/uiAstro 原生组件库。

Particles

符合本站整体气质的小零件。

  • 查看全部

    TextLink — 圆角胶囊下划线

  • 旅人

    Wanderer gradient — 渐变动效文字，仅用于页脚的文本装饰

  • 927

    Stat digits — 用于页脚实时访问量统计，金属质感的转盘数字

设计原则

  • 单一声音原则

    highlight-text 与 highlight-soft 在单个屏幕中占比不超过 10%。

  • 留白优先原则

    用留白、节奏和排版对齐组织页面；细线仅界定需要边界的表面。

  • 单一字标原则

    font-fugaz-one 仅用在 Logo 文本「Xat」。

  • 单一渐变原则

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

  • 代码恒暗原则

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