有机亲自然Organic Biophilic
森林绿、泥土棕与天空蓝，配合不规则圆角、流动曲线与自然纹理。降低压力感，适合长时间停留的陪伴型产品。
典型场景健康 · 农业 · 可持续品牌
编号42
年代2020s Sustainable
复杂度Low
默认模式自动
效果示例
Nova
产品方案定价
开始使用
Design System
同一套组件
不同的性格
色彩、字体、圆角与材质，决定了界面的气质。
主要操作次要操作
标签 A标签 B+12
月度增长
+24.8%
转化率4.2%
客单价¥328
Aa Bb Cc 0123
按钮 / ButtonPrimaryGhost
输入 / Inputname@example.com
标签 / Chip已选中默认+8
进度 / Progress
开关 / Switch
数值 / Numeric1,284.50
同一副骨架，演示色彩、字体、圆角、描边、阴影与材质。明暗切换展示该风格在两种模式下的令牌表现。
风格描述
森林绿、泥土棕与天空蓝，配合不规则圆角、流动曲线与自然纹理。降低压力感，适合长时间停留的陪伴型产品。
关键词
Natureorganic shapesgreensustainableroundedflowingwellnessearthynatural textures
效果与动效
Rounded corners (16-24px), organic curves (border-radius variations), natural shadows, flowing SVG shapes
设计系统变量
--forest-green#228B22--earth-brown#8B4513--sky-blue#87CEEB--cream-bg#F5F5DC--organic-radius24px--shadow-soft0 8px 32px rgba(0,0,0,0.08)配色方案
色值取自风格数据，不足时补充主题令牌主色 / Primary
#228B22 (Forest Green), #8B4513 (Earth Brown), #87CEEB (Sky Blue), #F5F5DC (Beige)
辅色 / Secondary
Natural gradients, earth tones, sky blues, organic textures, wood/stone colors
强调色在页面底色上的对比度约 4.0:1，适合大字与图形，正文需另配深色。
适用场景
适合 / Best For
- Wellness apps
- sustainability brands
- eco products
- health apps
- meditation
- organic food brands
避开 / Do Not Use For
- Tech-focused products
- gaming
- industrial
- urban brands
框架兼容
tailwindcss
能力矩阵
浅色模式支持
深色模式支持
移动适配可适配
转化导向强High
渲染成本低无额外开销
无障碍风险低contrast-text-4.5 / keyboard / visible-focus / reduced-motion
实现要点
落地清单
- Earth tones dominant,
- Organic curves present,
- Natural textures subtle,
- Green accents,
- Rounded everywhere,
- Calming feel
CSS / 技术关键词
border-radius: 16-24px (varied), background: earth tones, SVG organic shapes (blob), box-shadow: natural soft, color: #228B22 #8B4513 #87CEEB, texture overlays (subtle)
AI 提示词
Design a biophilic organic interface. Use: nature-inspired colors (greens, browns), organic curved shapes, rounded corners (16-24px), natural textures (wood, stone), flowing SVG elements, wellness aesthetic, earthy palette.