新拟态
Neumorphism
别名:软浮雕风格凹凸按钮柔和双阴影soft UI
这是什么
通过同色背景上的明暗双阴影表现凸起和凹陷的界面风格。元素像从同一块柔软材质中压出，适合少量控件的展示场景。它的视觉边界较弱，因此不能只靠阴影表达可点击、选中或禁用状态；需要明确文字、焦点轮廓与足够对比，并为深色主题重新计算阴影。
开发规格
字体
清晰无衬线字体，避免过细字重。
色彩
浅灰蓝同色底，深色文字和蓝色强调。
边框
中大圆角；焦点保留可见外轮廓。
阴影
双向外阴影表现凸起，内阴影表现按下。
间距
控件间距充足，避免阴影彼此挤压。
动效
150–200ms 的凸起与内陷阴影过渡
状态反馈
hover 阴影加深并抬升；focus 必须保留 2px 可见外轮廓；active 切换为 inset 内陷；disabled 降低对比；error 用红色 inset 内陷
风格演示
同一张页面，直接操作立即体验与开始使用进入专注工具；计时器可开始/暂停/重置，专注、任务、统计、设置分别展示对应工具；分页切换提示，登录只说明本地体验身份。
整页预览 · 直接交互
使用时关注什么
- 01逐一操作 Mellow 原导航和主 CTA，检查对应内容与返回路径，不只是点击提示。
- 02完成上述 Mellow 操作后修改输入或撤销，检查结果与状态同步。
- 03用键盘和 390px / 320px 检查重排、焦点、校验；区分工具栏重载和内部清空，核对刷新后状态复位。
✓ 适用场景
- 音乐控制、轻量工具或概念性产品展示。
- 控件较少且需要柔软材质感的页面。
✕ 不适用场景
- 密集表格和强对比需求的复杂业务界面。
- 不可把明暗阴影当作唯一的状态信号。
常见形式
凸起表面
Raised
外部双阴影表现悬浮按钮。
凹陷表面
Inset
内阴影用于按下状态或轨道。
实现要点
box-shadowinsetborder-radius:focus-visible阴影颜色从统一背景派生，凸起使用正负偏移的两层阴影，按下切换 inset。焦点与选中状态同时使用文字或图标反馈。不要在每次交互中大范围动画阴影，保留 reduced-motion 支持。
交给 AI
四层 Prompt 从「它是什么」一路写到「可直接执行的任务」；切到 Agent 任务层，还能叠加视觉风格与附加要求，再一键复制给你的 Coding Agent。
用当前风格完成 Mellow 同品牌完整页面，从原首屏延续到内容、具体操作结果和返回路径，而非孤立控件或局部 demo。保留品牌、首屏文案、素材、构图、tokens 与全部 variants。preview.brand 与共享 REFERENCE_BRANDS 保持一致；首屏结构、实际导航与素材以 ReferenceStyleScene 为准。 保留 Mellow 的浅灰同色材质：页面 #f4f5f6→#eeeff0，Georgia 衬线品牌与主标题、灰色无衬线说明；左文案、天气卡、倾斜软形时钟、右侧工具列仍是原构图。时钟外侧双向阴影与内部圆形 inset 凹面分开，深灰渐变 CTA 和浮起登录按钮沿用原样，不能替换成蓝色无衬线通用卡。600px 以下将绝对定位元素放回单列内容流，工具改两列；dark 与高对比度设置复用现有样式，不用阴影作为唯一状态信号。 完整页面操作： 立即体验与开始使用进入专注工具；计时器可开始/暂停/重置，专注、任务、统计、设置分别展示对应工具；分页切换提示，登录只说明本地体验身份。 静态封面、详情演示与 /style-scenes/neumorphism/（英文 /en/style-scenes/neumorphism/）共用 renderer；静态封面不嵌套真实按钮，详情在独立文档中启用同款页面的语义控件与品牌内容延续。原导航和 CTA 必须到达对应内容或工作流，不用占位链接、仅变颜色或一句 toast 代替结果。 操作状态仅存在当前页面内存；刷新、工具栏重载/重置与模式切换均恢复初始状态，不使用 localStorage 或 sessionStorage。页内清空/重置用于撤销本次操作，不暗示跨页或持久保存。 提供返回、取消或清空/重置路径，说明仅当前页内存的状态边界；不伪装真实支付、邮件、登录、AI 或云同步。桌面、390px、320px 按内容换行重排，保留可读字号和触控目标，不整体缩小桌面页。控件有可访问名称、键盘操作、可见焦点；弹层支持关闭和焦点返回，表单校验与结果可被辅助技术读到；尊重 prefers-reduced-motion。 不新增依赖。检查中英文、原导航与 CTA、具体结果、返回/重置和窄屏重排；报告实际运行的检查与待验项，不将实现要求写成已通过结论。 附加要求： - 支持深色模式 - 尊重 prefers-reduced-motion - 不新增依赖 - 完成后运行现有检查并列出修改文件
可直接交给 Coding Agent，可叠加风格与附加要求
相关概念
用现实世界的材质与物理形态表示数字控件的视觉语言：皮革缝线、木质纹理、拉丝 金属、玻璃光泽，按钮做成可以按压的实体，开关做成拨杆。界面元件拥有高光、 投影与倒角，"看起来像什么"直接暗示"能怎么用"。
风格相似概念把控件捏成软黏土的视觉语言：大圆角、柔和粉彩底色，双重阴影——向内的内 凹阴影加向外的膨胀投影——让元素像充了气的黏土块，圆润 饱满 软乎乎。 它是新拟物与 3D 卡通之间的一种手感化中间态。
风格相似概念
以"少即是多"为准则的视觉语言：用大量留白、克制的黑白灰配色与有限字体层级 来凸显内容本身，删除一切装饰性元素，层级完全依靠空间、字重与疏密建立。 安静、克制、内容至上是它的气质。
风格相似概念用可点击的色块触发一个明确的动作，是界面中最基础的操作入口。 通过填充、描边、幽灵等视觉层级区分主次操作，按压时有即时的下沉反馈， 繁忙时进入加载态并禁用点击，防止重复提交。
组件影响组件