侘寂Wabi-sabi

核心特征

• 米灰、陶土、焦褐等低饱和大地色
• 大面积留白，元素之间间距宽松
• 细线分隔与近乎无阴影的平面
• 极轻的噪点纹理，模拟粗糙纸张
• 标题用细衬线，字距略微放开

色板与字体

英文

Playfair Display（自托管）

中文

系统宋体或黑体：Songti SC / 苹方 / 微软雅黑

说明

标题可用 Playfair Display、Cormorant 或 Noto Serif 的细字重；正文用系统无衬线保证清晰，字重不要超过 400。

起源与代表作

年代：源自日本茶道美学，2010 年代后在家居与品牌设计中流行

侘寂（wabi-sabi）是日本美学概念，「侘」指朴素简寂，「寂」指时间沉淀下来的旧味，与千利休（1522–1591）确立的草庵茶道精神密切相关。1994 年美国作者 Leonard Koren 出版《Wabi-Sabi》一书，向设计师介绍这一理念。2010 年代起，它在家居、酒店与生活方式品牌中被广泛借用，主张接受不完美、少即是丰。落到界面上，表现为低饱和土色、充足留白与克制的装饰。

AI 设计提示词 · Prompt

侘寂（Wabi-sabi）风格界面：页面底色米灰 #E8E2D6，叠加 4px 间距、透明度 2.5% 的暗褐色噪点纹理；卡片使用半透明白色 rgba(255,255,255,0.3)，辅助色陶土灰 #C9BFAE，文字焦褐 #4A4038，次要文字 #655848，强调色烘焙褐 #6A5A4B，细线与点缀 #8C7B6B。标题使用 Playfair Display 400，字号 34px，字距 0.02em，行高 1.4；正文 14px，行高 1.8，字重 400。元素之间留出至少 32px 间距，页面四周内边距 28–32px。卡片与按钮不使用阴影，卡片只在顶部画 1px #8C7B6B 细线，圆角写成不规则的 2px 14px 3px 10px；主按钮烘焙褐底、米色字。不使用渐变和高饱和色，不加图案装饰。所有正文对比度不低于 4.5:1，不要因为追求低对比而让文字难以阅读。

A Wabi-sabi interface: page background warm gray #E8E2D6 with a dark-brown noise texture at 2.5% opacity on a 4px tile; cards use translucent white rgba(255,255,255,0.3), the supporting color is clay gray #C9BFAE, text is charred brown #4A4038, secondary text #655848, the accent is roasted brown #6A5A4B, and hairlines and details use #8C7B6B. Headings use Playfair Display 400 at 34px with 0.02em letter-spacing and a line height of 1.4; body text is 14px with a line height of 1.8 at weight 400. Leave at least 32px between elements and 28–32px of padding around the page. Cards and buttons have no shadows; cards only carry a 1px #8C7B6B line at the top and irregular radii of 2px 14px 3px 10px; the primary button is roasted brown with beige text. No gradients, no saturated colors, no decorative patterns. Keep all body contrast at least 4.5:1 and never let low contrast make text hard to read.

CSS 设计变量

这套风格的设计令牌，可直接粘贴进项目的全局样式。

:root {
  --ds-bg: #e8e2d6;
  --ds-clay: #c9bfae;
  --ds-text: #4a4038;
  --ds-muted: #655848;
  --ds-accent: #6a5a4b;
  --ds-line: #8c7b6b;
  --ds-gap: 32px;
  --ds-radius: 2px 14px 3px 10px;
}

适合与不适合

和相近风格的区别

• 新中式：侘寂追求素、旧、静，用低饱和土色和大量留白表达接受不完美；新中式更强调东方符号，朱砂红、印章与回纹让气质更明确庄重。
• 有机自然：侘寂是近乎无色相的土色与极简留白；有机自然用森林绿、陶土等更明显的自然色相，圆角与波浪形让画面更柔和有生命力。

常见踩坑

• 低饱和、低对比很容易让正文看不清，正文与背景要实测达到 4.5:1，宁可调深文字色也不要让文字灰掉
• 「不完美」是气质而不是粗糙，间距与对齐仍要严谨，否则留白会变成排版混乱
• 噪点纹理若用大尺寸位图会拖慢加载，用 CSS 渐变近似或体积很小的平铺图，并避免覆盖在文字之上
• 按钮与链接在低对比环境中容易被忽略，保留清晰的焦点轮廓与悬停反馈，不要只靠颜色细微变化

相关 UI 模式

在 UI 模式词典里查看组件级的实现与演示。

常见问题