先认识孟菲斯
孟菲斯是埃托雷·索特萨斯 1980 年底在米兰召集的设计团体，1981 年首展，名字来自鲍勃·迪伦的一首歌。它反对现代主义的好品味，用撞色、波浪线和廉价材质做家具和图案。
故意撞色、故意错位：波浪线、碎几何、粗黑描边和硬投影。
适用场景与取舍
- 创意市集、音乐活动与限定企划：用偏移模块和大标题建立活跃的入口。
- 年轻品牌的短篇介绍页：把俏皮图形集中在主视觉与少量强调区块。
不要把所有信息都做成争抢注意力的图形。密集表格、长篇说明和需要严肃决策的流程应优先照顾扫描与阅读，而不是一味错位。
布局与字体怎么落到网页上
松散拼贴：元素故意错位，倾斜 2–6°
- 卡片加 3px 黑描边和 6px 无模糊硬投影
- 卡片轻微旋转，相邻卡片方向相反
- 背景散布波浪线、圆点和三角碎片
- 直角和全圆角混用
- 标题字体
- Bungee · 400
- 正文字体
- Rubik
- 中文回退
- "PingFang SC", "Noto Sans SC", sans-serif
- 界面形状
- 圆角 0 与 999px 混用；边框 3px 黑描边；阴影 6px 6px 0 硬投影，无模糊
- 动效
- 弹跳俏皮：回弹缓动，按下时倾斜 · 260ms
孟菲斯配色与质感
粉、青、黄三色撞色，块面之间不需要协调；所有色块都加黑描边。
--bgoklch(0.97 0.02 95)--surfaceoklch(0.99 0 0)--inkoklch(0.2 0.02 280)--mutedoklch(0.42 0.03 280)--lineoklch(0.2 0.02 280)--accentoklch(0.72 0.17 350)--on-accentoklch(0.2 0.02 280)--accent2oklch(0.78 0.12 190)--accent3oklch(0.88 0.16 95)
质感：稀疏大圆点和碎纹图案。流派原始强度 0.35；混合时取它与骨架 textureCap 中较小的值。只铺在背景，不盖住文字。
本项目调色板通过对比度校验；落到页面上仍要按实际前景与背景配对检查，不能把正文任意放在辅色上。
主视觉与生图媒介
母题：波浪线、碎三角、水磨石纹、锯齿。
英文媒介描述可以作为生图提示词的一部分，再补具体画面主题；完整构图与负向词请在工作台的“生图用”标签中取得。
Memphis Group design, 1980s, flat vector shapes, bold black outlines
质感只铺在页面底色；主视觉单独占位，不作为正文底图。母题与骨架冲突时，只留在主视觉插图中。
代码提示词起点
下面是场景示例。需要完整 CSS 变量、布局规则和禁忌时，请在工作台复制“写代码用”提示词，或下载 DESIGN.md。
请为一个周末创意市集设计一个响应式网页。 骨架使用孟菲斯：松散拼贴：元素故意错位，倾斜 2–6°。 标题用 Bungee，正文用 Rubik。 表皮使用孟菲斯：粉、青、黄三色撞色，块面之间不需要协调；所有色块都加黑描边。 质感只放在背景，强度不超过 0.35；使用 3 个强调色。 不要改变骨架布局，不要让质感覆盖正文；保留键盘焦点和足够的文字对比度。
哪些搭配值得试
不要这样用
- 严格对齐
- 柔和模糊阴影
- 低饱和
布局禁忌来自骨架，色彩与画面禁忌来自表皮；混合不取两套风格的平均值。