仿生有机 2.0Biomimetic / Organic 2.0
细胞形态、流体形变与呼吸节律，颜色取自生物发光与叶绿素。生长感强，适合表达「活的系统」。
典型场景生物科技 · 未来材料 · 实验品牌
编号58
年代2024+ Generative
复杂度High
默认模式自动
效果示例
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
同一副骨架，演示色彩、字体、圆角、描边、阴影与材质。明暗切换展示该风格在两种模式下的令牌表现。
风格描述
细胞形态、流体形变与呼吸节律，颜色取自生物发光与叶绿素。生长感强，适合表达「活的系统」。
关键词
Nature-inspiredcellularfluidbreathinggenerativealgorithmslife-like
别名
Biomimetic/Organic 2.0
效果与动效
Breathing animations, fluid morphing, generative growth, physics-based movement
设计系统变量
--cellular-pink#FF9999--chlorophyll#00FF41--bioluminescent#00FFFF--breathing-duration4s--morph-easecubic-bezier(0.4, 0, 0.2, 1)--organic-blur20px配色方案
色值取自风格数据，不足时补充主题令牌主色 / Primary
Cellular Pink #FF9999, Chlorophyll Green #00FF41, Bioluminescent Blue
辅色 / Secondary
Deep Ocean #001E3C, Coral #FF7F50, Organic gradients
强调色在页面底色上的对比度约 9.3:1，可用于正文与图标。
适用场景
适合 / Best For
- Sustainability tech
- biotech
- advanced health
- meditation
- generative art platforms
避开 / Do Not Use For
- Standard SaaS
- data grids
- strict corporate
- accounting
框架兼容
canvaswebgl
能力矩阵
浅色模式支持
深色模式支持
移动适配可适配
转化导向强High
渲染成本中animation / blur
无障碍风险低contrast-text-4.5 / keyboard / visible-focus / reduced-motion
实现要点
落地清单
- Organic shapes present,
- Animations feel alive,
- Generative elements,
- Performance monitored,
- Mobile fallback,
- Accessibility alt content
CSS / 技术关键词
SVG morphing (SMIL or GSAP), canvas for generative, animation: breathing (scale pulse), filter: blur for organic, clip-path for cellular, WebGL for advanced, physics libraries
AI 提示词
Design a biomimetic organic interface. Use: cellular/fluid shapes, breathing animations, generative patterns, bioluminescent colors, physics-based movement, nature algorithms, life-like elements, flowing gradients.