# 有机自然 / Organic

> 风格 · `id: organic`

以自然形态、温暖材质和低饱和大地色建立亲近感的视觉语言。页面通过不规则曲线、圆润容器和宽松留白形成舒展节奏，文字与按钮仍保持明确边界。适合生活方式与可持续主题；自然装饰应衬托内容，而不能牺牲可读性、信息层级或操作效率。

**别名:** 自然系设计 · 植物感网页 · 大地色风格 · organic design

**分类:** Style / Visual Language

## 适用场景

- 家居、生活方式、园艺与手工艺品牌。
- 需要温暖、舒适、安静气质的内容展示。

## 不适用场景

- 高密度交易界面不宜使用大量不规则装饰。
- 浅色文字叠加纹理会降低阅读清晰度。

## 常见形式

- **大地色** (Earthy) — 米白、陶土、苔绿构成低饱和色板。
- **植物形态** (Botanical) — 叶片曲线与拱形画面构成视觉焦点。

## 开发规格

- **typography:** 衬线标题与清楚的无衬线正文。
- **color:** 米白、苔绿与陶土色；正文使用深绿。
- **border:** 柔和圆角与少量拱形，不扭曲表单控件。
- **shadow:** 轻微接触阴影，不使用强发光。
- **spacing:** 大段留白与宽松行距，窄屏堆叠。
- **motion:** 250–350ms ease-out 的柔和生长与淡入，尊重 prefers-reduced-motion
- **states:** hover 轻微舒展并加深苔绿；focus 用绿色可见外框；active 收拢一像素；disabled 降为灰绿；error 用陶土红

## 实现要点

**CSS:** `border-radius` `linear-gradient()` `grid`

用主题变量统一米白与深绿；曲线只用于展示区，保留按钮的稳定矩形点击范围。用 CSS 形状即可构建植物和陶器意象，装饰节点设 aria-hidden。文字对比度优先于低饱和观感。

## 交给 Agent 的任务 Prompt

```text
先检查项目的布局、字体和主题变量，以有机自然风格完成一个可交互品牌场景。
衬线标题与清楚的无衬线正文。米白、苔绿与陶土色；正文使用深绿。柔和圆角与少量拱形，不扭曲表单控件。轻微接触阴影，不使用强发光。大段留白与宽松行距，窄屏堆叠。
用主题变量统一米白与深绿；曲线只用于展示区，保留按钮的稳定矩形点击范围。用 CSS 形状即可构建植物和陶器意象，装饰节点设 aria-hidden。文字对比度优先于低饱和观感。
按钮必须有明确反馈，窄屏可用，保留焦点和 reduced-motion 支持，不新增依赖。完成后运行检查并列出修改文件。
```

### 其余层级 Prompt

**Basic:** 使用有机自然风格设计品牌展示页面。以自然形态、温暖材质和低饱和大地色建立亲近感的视觉语言。页面通过不规则曲线、圆润容器和宽松留白形成舒展节奏，文字与按钮仍保持明确边界。适合生活方式与可持续主题；自然装饰应衬托内容，而不能牺牲可读性、信息层级或操作效率。

**Design:** 衬线标题与清楚的无衬线正文。米白、苔绿与陶土色；正文使用深绿。柔和圆角与少量拱形，不扭曲表单控件。轻微接触阴影，不使用强发光。大段留白与宽松行距，窄屏堆叠。

**Implementation:** 用主题变量统一米白与深绿；曲线只用于展示区，保留按钮的稳定矩形点击范围。用 CSS 形状即可构建植物和陶器意象，装饰节点设 aria-hidden。文字对比度优先于低饱和观感。

## 相关概念

- [minimalism](/interface-atlas-web/styles/minimalism) — 相似概念
- [editorial](/interface-atlas-web/styles/editorial) — 相似概念
- [claymorphism](/interface-atlas-web/styles/claymorphism) — 相似概念
- [button](/interface-atlas-web/components/button) — 影响组件

## Sources

- [V&A — Arts and Crafts](https://www.vam.ac.uk/articles/arts-and-crafts-an-introduction)

---

JSON: `/interface-atlas-web/api/concept/styles/organic.json` · 站点: /interface-atlas-web/styles/organic