CARD
新拟态卡片Neumorphism / Soft UI
浅灰底上用"一明一暗"两道阴影把元素雕出来，像从同一块材料上压制而成的浮雕。
效果预览
白噪音 · 雨声
已播放 42 分钟
▶ 暂停
适合用在哪
音乐播放器、智能家居面板、工具型小应用；装饰性大于功能性。
容易踩的坑
- 按钮与背景同色，仅靠阴影区分，可点击元素的边界对比度达不到 3:1。
- 按压态与默认态差异只是阴影反转，弱视用户无法分辨开关当前状态。
- 暗色模式下双阴影几乎看不见，必须重新调一套深色阴影参数。
设计提示词 · Prompt
新拟态卡片（Neumorphism / Soft UI）：整个界面统一用同一个浅灰底色（如 #ECEEF3），所有元素同色。凸起元素用双阴影 box-shadow:8px 8px 16px rgba(163,177,198,.55), -8px -8px 16px rgba(255,255,255,.9)；凹陷（按压态）反转两道阴影方向。圆角大（16-24px）、无边框、只有底色一种颜色，全靠光影塑形。文字对比度低是天然缺陷，正文务必用 #3A3F4B 以上深度。只适合单色场景，切忌放彩色背景上。
Neumorphism / Soft UI: the entire interface uses one light gray base color (e.g. #ECEEF3), with all elements in the same color. Raised elements use a double shadow box-shadow:8px 8px 16px rgba(163,177,198,.55), -8px -8px 16px rgba(255,255,255,.9); inset (pressed state) reverses the direction of both shadows. Large radius (16-24px), no borders, only the single base color — shape comes entirely from light and shadow. Low text contrast is an inherent flaw, so body text must be #3A3F4B or darker. Only suitable for monochrome scenes; never place it on a colorful background.
常见搭配
同一页面里经常和「新拟态卡片」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s d-neu">
<div class="d-neu__card">
<b>白噪音 · 雨声</b>
<span>已播放 42 分钟</span>
<span class="d-neu__pill">▶ 暂停</span>
</div>
</div>