夜航 · 设计规范 ← 返回入口

一套克制、可长期使用的视觉系统

所有数值都收敛在 assets/css/tokens.css。移动端与桌面端共享同一套色彩、圆角、阴影与字体逻辑，但各自拥有独立的布局与字号层级 —— 不是把手机界面放大到电脑上。

01

色彩体系

暖调中性灰 + 低饱和深海青 + 暖砂金
INK · 中性色（暖灰，不用冷灰）
ink-900
ink-700
ink-500
ink-400
ink-300
ink-200
ink-100
paper
surface
BRAND · 深海青（主色，只出现在关键动作）
brand-900
brand-700
brand-500
brand-300
brand-100
brand-50
sand-500
sand-100
SEMANTIC · 语义色（统一明度，不刺眼）
ok-500
ok-100
warn-500
warn-100
err-500
err-100
info-500
info-100
02

字体层级

系统字体栈 · 数字使用 tabular-nums
26 / 34 · 600 · -0.03em今晚，找个人一起开黑
21 / 28 · 600 · -0.015em林深 · 王者 50 星
17 / 24 · 600技能与价格
15 / 23 · 400国服前 500 辅助，擅长带节奏与情绪安抚。不接代打，只陪玩。
13 / 19 · 400 · ink-500今晚 20:00 – 02:00 可约 · 平均 47 秒接单
11 / 16 · 400 · ink-400订单 PW202504121930 · 平台托管中
10.5 · 600 · 0.16emAVAILABLE TONIGHT
03

圆角与阴影

圆角分级使用，阴影分五层
RADIUS
xs 6
sm 10
md 14
lg 20
xl 28

标签 6 · 输入框与小组件 10 · 常规卡片 14 · 大面板与抽屉 20 · 弹窗 28 · 胶囊 999

SHADOW
sh-1 卡片
sh-2 悬浮
sh-3 弹层
sh-4 模态

全部为多层柔和阴影，最高层级也只用 28% 透明度，避免生硬发黑。

04

间距与栅格

4px 基准：4 / 8 / 12 / 16 / 20 / 24 / 32 / 40 / 48
4
8
12 · 卡片间距
16
20 · 移动端左右安全边距
24 · 模块间距
32
40
05

玻璃效果

仅用于导航、弹层、悬浮面板，不做大面积铺底
毛玻璃配方 24px / 180%

rgba(255,255,255,.72) + backdrop-blur(24px) + saturate(180%)，加 1px 白色半透明描边与顶部内高光，避免"糊成一团"。

06

组件与状态

同一元素在全站只允许一种视觉表达
BUTTON
TAG / STATUS
默认标签 已实名 47 秒接单 声音温柔 王者 50 星
服务中 待接单 已完成 售后中 已结算
INPUT
CONTROL
2小时
LIST
全部订单5
消息通知2 条未读
推送通知
TABLE
订单号金额状态
PW202504121930¥96服务中
PW202504121915¥174待接单
07

反馈与页面状态

加载 / 空 / 失败 / 提示 全部有配套 UI
LOADING · 骨架屏
EMPTY
这里还没有订单
去首页看看，今晚上分的陪玩都在线
ERROR
加载失败
网络好像不太稳定，请检查连接后重试
FEEDBACK
08

图标

24×24 · 线宽 1.6 · 圆角端点 · 单一描边风格