sosoems 设计标准 · Design System

.text-tiny — 11px · 阿拉伯语/注释放大备用小字注释放大版 · 11px

.text-xs — 12px12px · 辅助信息

.text-small — 13px13px · 次要正文/导航

.text-body-sm — 14px14px · 紧凑正文 · سمسا إكسبرس · クロネコ

.text-body — 15px ✅ 基础字号15px — 基础正文字号，兼顾中文阅读舒适度与多行信息密度 · DHL FedEx UPS Aramex

.text-h4 — 15px semibold小标题 · 圆通速递 · 国际快递查询

.text-h3 — 17~20px板块标题 · 承运商索引 · 物流追踪详情

.text-h2 — 22~30px区块大标题 · 全球承运商智能索引平台

.text-h1 — 28~42px页面主标题 · 智能物流数据流量站

.text-hero — 36~58pxAI 快递单号一键查询

Primary #4F46E5

Dark #3730A3

Light #818CF8

Accent #06B6D4

Dark #0F172A

Success #059669

Warning #D97706

Buttons (min-height:44px · 适用于触摸)

Tags & Badges

已识别运输中延迟国际 📦 已揽收

Pills (hover: 上浮 + 主题色)

顺丰快递 Apl Global DHL Aramex 中通快递

Input (min-height:44px)

✅ 触控友好
所有可点击元素 min-height:44px
Button 有 :active 缩放反馈
hover 不支持的设备自动无感

✅ 响应式断点
768px 以下：隐藏桌面导航
自动切换为汉堡菜单区
Grid 降为单列 + 间距缩小

✅ 字体可读性
基础字号 15px (非 12-13px)
中文/英文/阿拉伯文均覆盖
`-webkit-text-size-adjust:100%`

✅ 间距系统
Section padding: 56→40px (mobile)
Container padding: 24→16px
Gap 统一 8-16px 层级

🎯 字体放大原因：原版多处使用 12-13px 字号，在中文环境下可读性不足。调整为 base 15px + 层级缩放，H1-H4 均有放大。

🌐 多语言字体栈：Noto Sans SC（中文）→ Inter（英文）→ Noto Sans Arabic（阿拉伯语）→ 系统回退。通过 `text` 参数限制字体文件大小。

🎨 配色一致性：主色 #4F46E5 从 logo 提取，所有中性色采用 slay 调色板（偏灰蓝），摒弃偏暖的 gray-tone。

🔄 交互细化：所有可交互元素都有 :hover 反馈（上浮/变色/阴影）；Button 有 :active 缩放；focus-visible 轮廓。

📱 移动优先：最小触摸目标 44px，响应式断点 768px，栅格从多列降为单列。

🎨 sosoems 设计系统 v1.0