孟菲斯

# 孟菲斯 (Memphis Design)

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

## 本质

源自 1980 年代米兰孟菲斯设计团体的后现代风格：撞色、黑白图案（圆点、斜纹、波浪线）、漂浮的几何碎片和轻微歪斜的构图。它刻意挑战现代主义的"好品味"与功能至上，追求趣味和情绪。

## Design Tokens

### 色彩

- `background` `#FFF8EC` — 页面背景
- `surface` `#FFFFFF` — 卡片、面板等浮起的表面
- `text` `#1B1B1B` — 主要文字
- `muted` `#4A4A4A` — 次要文字、说明、占位符
- `accent` `#FF4F8B` — 主要操作、链接、关键强调
- `on-accent` `#1B1B1B` — 放在强调色上的文字与图标
- `border` `#1B1B1B` — 分隔线、描边、输入框边框
- `highlight` `#FFCE1F` — 次级强调、徽标、选中态

### 字体排印

- 展示 / 标题字体: `Bungee` (Google Fonts, 字重 400) → fallback `"Arial Black", Impact, sans-serif`
- 正文字体: `Work Sans` (Google Fonts, 字重 400 / 600) → fallback `system-ui, -apple-system, "Segoe UI", sans-serif`
- 字号阶梯（px）: 12 · 14 · 16 · 20 · 28 · 40 · 60

### 间距 & 形状

- 基础单位: 8px · 间距阶梯（px）: 8 · 12 · 16 · 24 · 32 · 48 · 64
- 圆角（sm / md / lg）: 0 / 8 / 24 px
- 边框: 3px solid
- 阴影（sm / md / lg）: `3px 3px 0 #1B1B1B` / `6px 6px 0 #00B3A4` / `10px 10px 0 #FFCE1F`

### 动效

- 时长（fast / base）: 150ms / 320ms
- 缓动曲线: `cubic-bezier(0.68, -0.55, 0.27, 1.55)`

### 标志性效果

- `--memphis-teal`: `#00B3A4`
- `--memphis-lilac`: `#B79CFF`
- `--pattern-dots`: `radial-gradient(#1B1B1B 1.6px, transparent 1.8px) 0 0 / 14px 14px`
- `--pattern-stripes`: `repeating-linear-gradient(45deg, #1B1B1B 0 3px, transparent 3px 12px)`
- `--pattern-squiggle`: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='14'%3E%3Cpath d='M0 7 Q5 0 10 7 T20 7 T30 7 T40 7' fill='none' stroke='%231B1B1B' stroke-width='3'/%3E%3C/svg%3E") 0 50% / 40px 14px repeat-x`

## 要这样做

- 在色块上叠加黑白图案：圆点、45° 斜纹、波浪线。
- 同时使用粉 #FF4F8B、黄 #FFCE1F、青绿 #00B3A4、淡紫 #B79CFF 等撞色，用 3px 近黑描边统一。
- 让卡片、标签和装饰几何形轻微旋转（±2–4°）。
- 使用彩色的硬投影（如 6px 6px 0 #00B3A4）。
- 在内容周围点缀漂浮的三角形、圆形和波浪线。

## 不要这样做

- 不要使用低饱和或单一色调的配色。
- 不要在图案上直接放置正文。
- 不要使用细线、极简留白和严格的网格对齐。
- 不要使用模糊阴影或玻璃效果。

## 组件指南

- **按钮**: 粉色或黄色实心按钮，3px 黑描边与彩色硬投影；悬停时轻微旋转，像被拨动的玩具。
- **卡片**: 卡片带黑描边与彩色投影，顶部或角落有圆点、斜纹或波浪线图案块；整张卡片轻微倾斜。
- **表单**: 输入框为黑描边白底，聚焦时投影变为青绿色；错误信息用黄色色块与波浪下划线。
- **导航**: 导航链接像一串彩色标签，当前项是带图案的色块。
- **布局**: 内容区周围漂浮着三角形、圆形、波浪线等几何碎片，区块之间颜色交替。
- **图像与图标**: 平面几何插画与图案拼贴，避免写实照片；需要照片时可以加上彩色几何框。

## 可访问性

- 图案不要放在文字正下方；文字底下使用纯色背景。
- 旋转与摇摆动画应遵守 prefers-reduced-motion。
- 粉色与黄色背景上使用近黑色文字，保证对比度。

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