Design System / 设计系统

Components

Color 颜色
--bg
#1E2A5E
背景 · 深海军蓝（约 40%）
--surface
#34509E
导航 / 页脚 / 陆地 / 悬停选中 · 蓝（约 25%）
--alert
#E08A62
异常 / 强调 · 橙（唯一强调色，约 20%）
--fg
#EDE7D8
正文 / 主按钮 · 米白（约 15%，对比度约 11:1）
--muted
#AFAEB3
次要信息（对比度约 6:1）
--faint
#9698A5
弱化信息（对比度约 4.7:1）
--line
#2A3B7E
分隔线

只用一个强调色：运行中为米白，异常为橙色。不使用渐变、圆角和阴影。

Type 字体
Hero 64+
Hero · clamp(64px, 9vw, 136px) · 300 · 全大写 · 字距 0.1em
Display 标题
Heading One 一级标题
Heading Two 二级标题
Heading Three 三级标题

正文使用 Inter 与思源黑体（Noto Sans SC），字重 300。The quick brown fox jumps over the lazy dog. 0123456789

次要信息使用 #AFAEB3。Secondary text.

Eyebrow 眉标 · 11px · 字距 0.2em
Button 按钮

透明底 + 1px 白色描边、直角；悬停变为白底黑字（250ms）。

Input 输入
Status 状态
Live 实时Delayed 延迟Last known 最后位置Exception 异常
Stat 数字
1,284
跟踪中的船舶
30 分钟内有信号
36
货物条目
3
异常
Card 卡片
Card
无圆角、无阴影
1px #222 边框分隔。
With header

Panel 面板

航速
14.2 kn
航向
87°
目的港
吉达 SAJED
状态
偏离航线
  • SF1420098765运输中
  • JD0088123456789异常
  • DHL4021558190运输中
Tabs 选项卡
Timeline 时间线
  1. 10-24 09:12
    派送中
    派件员正在派送
    Riyadh, SA
  2. 10-23 18:40
    清关
    清关完成，已放行
    Riyadh Gateway
  3. 10-22 07:05
    异常
    海关查验中
  4. 10-20 11:30
    已揽收
    快件已揽收
    Shenzhen, CN
Feedback 反馈
暂无数据
空状态使用虚线边框。