流线摩登 · 铁路时刻与订票

## 流线摩登

### 设计定位
铁路时刻与订票。整套界面的视觉气质由材质语言与排版节奏决定，不依赖插图或摄影素材。

### 色彩系统
背景 #e8e6e1、容器 #f7f6f3、主文字 #1f2933、次文字 #67757f、强调 #2c7873、辅助 #c05746。本风格以浅色为基调，不强行提供深色反转——部分设计语言在深色下会失去其材质特征。强调色只用于关键动作与状态，占比控制在版面 10% 以内，避免削弱主色调的表达。

### 字体策略
圆润几何无衬线，全大写导航。中文正文行高不低于 1.7，标题与正文的字号差建立明确的层级落差；数字统一使用等宽或 tabular-nums，保证纵向对齐。

### 材质与边界
水平三线装饰、胶囊形容器、单向渐变模拟金属抛光。圆角语言：极大胶囊圆角（左右满圆）——这一项在本风格中不可随意更改，它与材质共同定义了界面的"手感"。

### 布局原型
采用 horizontal-rail 结构。信息密度与留白节奏服务于「铁路时刻与订票」这一具体场景，不做通用模板式的等分栅格。

### 交互与动效
过渡时长 150~300ms，只对 transform 与 opacity 做动画以避免重排；悬停反馈幅度克制（缩放不超过 1.05）；尊重 prefers-reduced-motion，用户关闭动效时全部静态呈现。

### 可访问性要求
正文与背景对比度不低于 4.5:1，大字号不低于 3:1；所有可交互元素触摸区域不小于 44×44px，键盘可依次聚焦且有可见焦点样式；宽内容（表格、代码块）在自身容器内横向滚动，页面主体不出现横向滚动条。

### 适用与不适用
适用于铁路时刻与订票这类需要鲜明视觉识别的产品。不适用于需要长时间阅读的高信息密度后台——渲染开销与视觉噪音都会随数据量线性放大。