有机自然Organic Design

核心特征

• 森林绿、苔绿、沙色与陶土色的自然配色
• 卡片使用多值不对称圆角，轮廓像鹅卵石
• 波浪形分隔线代替直线
• 柔和的绿调投影，不用硬黑阴影
• 衬线标题搭配圆润无衬线正文

色板与字体

英文

Playfair Display、Nunito（自托管）

中文

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

说明

标题可用 Playfair Display 或 Fraunces 这类带柔和笔触的衬线，正文用 Nunito、Quicksand 等圆润的无衬线。

起源与代表作

年代：2020 年代与可持续、健康类品牌相伴流行

「有机设计」一词可追溯到 1940 年纽约现代艺术博物馆举办的家居有机设计竞赛，Eero Saarinen 与 Charles Eames 凭借曲面胶合板家具获奖；阿尔瓦·阿尔托 1936 年的 Savoy 曲线花瓶也常被视作代表。进入 2020 年代，可持续、健康与手作类品牌用它传达亲近自然的形象，界面里表现为大地色、不对称圆角与流动的波浪线，避免僵硬的直角。

AI 设计提示词 · Prompt

有机自然（Organic Design）风格界面：页面背景沙色 #F2E8D5，右上角叠加苔绿 #A3B18A（45% 透明度）的径向渐变光斑，左下角叠加陶土 #C97B4A（18% 透明度）的光斑。文字深林色 #2B3A2E，次要文字 #55604F，强调色森林绿 #2F4F3A，点缀陶土 #C97B4A 只用于装饰线与图标底。卡片底色 #FBF5E8，使用不对称多值圆角，例如 34px 12px 30px 14px、14px 34px 12px 30px，投影 0 10px 24px rgba(47,79,58,0.12)。按钮 28px 12px 28px 12px 圆角，森林绿底、沙色字。标题使用 Playfair Display，字号 34px；正文使用 Nunito，14px，行高 1.7。分隔线用波浪形：重复的 SVG 波浪，线宽 2px，颜色 #A3B18A。图标放在 38px 的浅苔绿圆形底里。不使用硬阴影与纯黑。所有正文对比度不低于 4.5:1，陶土色不要用于小字。

An Organic Design interface: page background sand #F2E8D5, with a moss-green #A3B18A radial glow at 45% opacity in the top-right corner and a terracotta #C97B4A glow at 18% opacity in the bottom-left. Text is deep forest #2B3A2E, secondary text #55604F, the accent is forest green #2F4F3A, and terracotta #C97B4A is used only for decorative lines and icon backdrops. Cards are #FBF5E8 with asymmetric multi-value radii such as 34px 12px 30px 14px and 14px 34px 12px 30px, and a shadow of 0 10px 24px rgba(47,79,58,0.12). Buttons use 28px 12px 28px 12px corners with forest-green background and sand text. Headings use Playfair Display at 34px; body text uses Nunito at 14px with a line height of 1.7. Dividers are wavy: a repeating SVG wave with a 2px stroke in #A3B18A. Icons sit in 38px pale moss-green circles. No hard shadows and no pure black. Keep all body contrast at least 4.5:1 and do not use terracotta for small text.

CSS 设计变量

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

:root {
  --ds-bg: #f2e8d5;
  --ds-surface: #fbf5e8;
  --ds-text: #2b3a2e;
  --ds-muted: #55604f;
  --ds-forest: #2f4f3a;
  --ds-moss: #a3b18a;
  --ds-clay: #c97b4a;
  --ds-radius: 34px 12px 30px 14px;
  --ds-shadow: 0 10px 24px rgba(47, 79, 58, 0.12);
}

适合与不适合

和相近风格的区别

• 侘寂：有机自然使用森林绿、陶土等明显的自然色相，配不对称圆角与波浪线，温暖有生命力；侘寂是近乎无色相的土色加大量留白，更安静、更克制。
• 粘土风：两者都圆润柔和。有机自然靠大地色与不规则轮廓模仿自然物，投影轻；黏土拟态用糖果色与内外双层投影做出膨胀的 3D 塑料质感。

常见踩坑

• 陶土色与苔绿放在沙色底上对比度都偏低，只能用于装饰与大色块，文字一律使用深林色并复核 4.5:1
• 不规则圆角数值较大时，卡片内的文字可能贴近弧线被裁切，内边距至少保持 16px，并在窄屏下检查
• 波浪分隔若用大尺寸位图会增加请求与体积，用小尺寸 SVG data URI 重复平铺，并且不要用作唯一的信息分隔
• 过多的自然元素容易显得杂乱，一屏最多使用两种圆角形态和一种分隔线，保持焦点轮廓清晰

相关 UI 模式

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

常见问题