拟物

# 拟物 (Skeuomorphism)

你正在构建一个前端界面。请在每一个页面和组件中一致地应用 **拟物** 视觉风格。下面的 design tokens 和规则是硬性约束，而不是参考建议。

## 本质

用现实材料的质感和光影模仿实体物件：皮革缝线、横格纸、拉丝金属、凸起的玻璃按钮。它让刚接触触屏和图形界面的人一眼就知道"这是什么、怎么用"。

## Design Tokens

### 色彩

- `background` `#CFC8B8` — 页面背景
- `surface` `#FBF7EC` — 卡片、面板等浮起的表面
- `text` `#2E2A24` — 主要文字
- `muted` `#625A4F` — 次要文字、说明、占位符
- `accent` `#2F6FD6` — 主要操作、链接、关键强调
- `on-accent` `#FFFFFF` — 放在强调色上的文字与图标
- `border` `#8C8372` — 分隔线、描边、输入框边框
- `highlight` `#FFFDF6` — 次级强调、徽标、选中态

### 字体排印

- 展示 / 标题字体: `Helvetica Neue` (系统字体, 字重 400 / 700) → fallback `Helvetica, Arial, sans-serif`
- 正文字体: `Lucida Grande` (系统字体, 字重 400 / 700) → fallback `"Lucida Sans Unicode", "Helvetica Neue", Helvetica, Arial, sans-serif`
- 字号阶梯（px）: 11 · 13 · 15 · 18 · 24 · 34 · 48

### 间距 & 形状

- 基础单位: 4px · 间距阶梯（px）: 4 · 8 · 12 · 16 · 24 · 32 · 48
- 圆角（sm / md / lg）: 4 / 8 / 12 px
- 边框: 1px solid
- 阴影（sm / md / lg）: `0 1px 2px rgba(0, 0, 0, 0.35)` / `0 2px 6px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.5)` / `0 12px 24px rgba(0, 0, 0, 0.35), 0 2px 4px rgba(0, 0, 0, 0.25)`

### 动效

- 时长（fast / base）: 150ms / 300ms
- 缓动曲线: `ease-in-out`

### 标志性效果

- `--linen`: `repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.07) 0 2px, rgba(0, 0, 0, 0.05) 2px 4px), repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.05) 0 2px, rgba(0, 0, 0, 0.04) 2px 4px), #CFC8B8`
- `--leather`: `radial-gradient(circle at 30% 20%, #8A5A3B 0, #5E3A24 75%)`
- `--stitch`: `rgba(255, 228, 186, 0.75)`
- `--gloss`: `linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.12) 50%, rgba(0, 0, 0, 0.08) 51%, rgba(255, 255, 255, 0.1) 100%)`
- `--bevel`: `inset 0 1px 0 rgba(255, 255, 255, 0.85), inset 0 -1px 0 rgba(0, 0, 0, 0.15)`
- `--inset-well`: `inset 0 2px 4px rgba(0, 0, 0, 0.25), 0 1px 0 rgba(255, 255, 255, 0.7)`
- `--ruled-paper`: `repeating-linear-gradient(180deg, transparent 0 27px, rgba(70, 110, 190, 0.2) 27px 28px)`

## 要这样做

- 为背景和容器使用真实材质纹理（亚麻、皮革、纸张），用 CSS 渐变实现。
- 全站使用同一个顶光：高光在上沿、阴影在下方。
- 可点击元素做成凸起（bevel 内阴影 + 外投影），输入框做成凹陷（内投影）。
- 主按钮使用胶囊形蓝色渐变并叠加上半部分玻璃高光。
- 标题文字加一像素的白色压印阴影。

## 不要这样做

- 不要使用纯平的色块按钮或无阴影的卡片。
- 不要混用多个方向的光源。
- 不要让纹理的对比度高过文字。
- 不要使用几何无衬线或超粗的展示字体。

## 组件指南

- **按钮**: 主按钮为胶囊形蓝色渐变，叠加上半部分玻璃高光与 1px 深色描边；次按钮为浅灰拉丝渐变。按下时渐变反转，像被压进去。
- **卡片**: 卡片像一张纸或一块皮革：带纹理的背景、柔和投影，皮革卡片用虚线模拟缝线。
- **表单**: 输入框是凹陷的白色槽位（内投影），标签使用压印文字；复选框和开关模仿实体控件。
- **导航**: 顶部是带纹理的工具栏（皮革或拉丝金属），导航用分段控件，选中项凹陷。
- **布局**: 一切都放在"桌面"上：亚麻布背景上的纸张、笔记本和卡片，元素之间有真实的层叠关系。
- **图像与图标**: 写实图标与照片质感的插图；图标有统一的顶光和投影。

## 可访问性

- 纹理背景上的文字要确保对比度，必要时在文字下方加纯色底。
- 不要只靠凸起或凹陷来表达状态，选中项也要有颜色或文字变化。

_由风格博物馆（Style Museum）生成。_