有机自然
Organic
别名:自然系设计植物感网页大地色风格organic design
这是什么
以自然形态、温暖材质和低饱和大地色建立亲近感的视觉语言。页面通过不规则曲线、圆润容器和宽松留白形成舒展节奏，文字与按钮仍保持明确边界。适合生活方式与可持续主题；自然装饰应衬托内容，而不能牺牲可读性、信息层级或操作效率。
开发规格
字体
衬线标题与清楚的无衬线正文。
色彩
米白、苔绿与陶土色；正文使用深绿。
边框
柔和圆角与少量拱形，不扭曲表单控件。
阴影
轻微接触阴影，不使用强发光。
间距
大段留白与宽松行距，窄屏堆叠。
动效
250–350ms ease-out 的柔和生长与淡入，尊重 prefers-reduced-motion
状态反馈
hover 轻微舒展并加深苔绿；focus 用绿色可见外框；active 收拢一像素；disabled 降为灰绿；error 用陶土红
风格演示
先看整页效果，再试交互场景整页预览
Closer to
nature.
让设计回到生活本来的样子。
Explore →交互场景
正在加载演示…
✓ 适用场景
- 家居、生活方式、园艺与手工艺品牌。
- 需要温暖、舒适、安静气质的内容展示。
✕ 不适用场景
- 高密度交易界面不宜使用大量不规则装饰。
- 浅色文字叠加纹理会降低阅读清晰度。
常见形式
大地色
Earthy
米白、陶土、苔绿构成低饱和色板。
植物形态
Botanical
叶片曲线与拱形画面构成视觉焦点。
实现要点
border-radiuslinear-gradient()grid用主题变量统一米白与深绿；曲线只用于展示区，保留按钮的稳定矩形点击范围。用 CSS 形状即可构建植物和陶器意象，装饰节点设 aria-hidden。文字对比度优先于低饱和观感。
交给 AI
四层 Prompt 从「它是什么」一路写到「可直接执行的任务」；切到 Agent 任务层，还能叠加视觉风格与附加要求，再一键复制给你的 Coding Agent。
先检查项目的布局、字体和主题变量，以有机自然风格完成一个可交互品牌场景。 衬线标题与清楚的无衬线正文。米白、苔绿与陶土色；正文使用深绿。柔和圆角与少量拱形，不扭曲表单控件。轻微接触阴影，不使用强发光。大段留白与宽松行距，窄屏堆叠。 用主题变量统一米白与深绿；曲线只用于展示区，保留按钮的稳定矩形点击范围。用 CSS 形状即可构建植物和陶器意象，装饰节点设 aria-hidden。文字对比度优先于低饱和观感。 按钮必须有明确反馈，窄屏可用，保留焦点和 reduced-motion 支持，不新增依赖。完成后运行检查并列出修改文件。 附加要求： - 支持深色模式 - 尊重 prefers-reduced-motion - 不新增依赖 - 完成后运行现有检查并列出修改文件
可直接交给 Coding Agent，可叠加风格与附加要求
相关概念
以"少即是多"为准则的视觉语言：用大量留白、克制的黑白灰配色与有限字体层级 来凸显内容本身，删除一切装饰性元素，层级完全依靠空间、字重与疏密建立。 安静、克制、内容至上是它的气质。
风格相似概念把页面当作杂志版面经营的视觉语言：衬线大标题、首字下沉、细分栏、章节 编号与发丝分隔线，图文穿插而节奏如翻页。黑白灰为底、衬线与无衬线搭配， 用版式语言讲故事，而非用装饰堆砌氛围。
风格相似概念把控件捏成软黏土的视觉语言：大圆角、柔和粉彩底色，双重阴影——向内的内 凹阴影加向外的膨胀投影——让元素像充了气的黏土块，圆润 饱满 软乎乎。 它是新拟物与 3D 卡通之间的一种手感化中间态。
风格相似概念用可点击的色块触发一个明确的动作，是界面中最基础的操作入口。 通过填充、描边、幽灵等视觉层级区分主次操作，按压时有即时的下沉反馈， 繁忙时进入加载态并禁用点击，防止重复提交。
组件影响组件