01
设计气质 DNA
睡眠健康折扣舒适
一份通往更好睡眠的、平静、优质的邀请
02
色彩
#fae467Accent#000000Ink#9c9c9cInk soft#dce4efBG#f2ede8Mutedrgba(0,0,0,1)Line鲜艳的黄色点缀与柔和、冷调渐变背景之间的高对比度。
03
字体
- display
48px · 600 - subtitle
20px · 400 - body
14px · 400
04
间距
4px8px16px24px32px48px64px96px基于标准 base-4 的垂直节奏，间距宽松，营造轻松感
05
表面 (圆角 / 阴影 / 边线)
sm · 4px
md · 10px
lg · 20px
pill · 999px
用于主要图标容器和部分 UI 元素的 1px 实线黑色边框
0 4px 12px rgba(0,0,0,0.1) · 0 4px 20px rgba(0,0,0,0.1)
06
布局
400container
1columns
16pxgutter
768breakpoints
居中单列堆叠，适用于移动端和专注的桌面覆盖层
07
动效与交互
125msmicro
200mssmall
300msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
交互元素上平滑的颜色和 box-shadow 过渡
按钮背景色或 box-shadow 的微妙变化 · 通过背景色变化提供即时视觉反馈
08
组件
- button 全宽胶囊形按钮，采用高对比度黄色背景和深色文字。
- card 不适用
- chip 不适用
- input 不适用
- hero 居中的宣传覆盖层，使用大号字体和简单插图。
09
文案语气与禁用清单
- 语气 俏皮、直接且引人入胜
- 标题风格 对话式、第二人称的提问和陈述
- 按钮文案 清晰、面向行动的陈述，用于用户选择
- 不要使用深色、阴郁的背景——截图显示的是浅色、柔和的蓝色渐变。
- 不要使用尖锐的矩形按钮——截图显示的是完全圆润的胶囊形按钮。
- 不要使用狭小、拥挤的布局——截图显示的是垂直堆叠、间距宽松的布局。
- 不要使用复杂的多列网格——截图显示的是单一居中列。
- 不要使用低对比度的按钮文字——截图显示的是亮黄色背景上的深色文字。
- 不要使用微妙、柔和的黄色点缀——截图显示的是鲜艳、高饱和度的黄色。
- 避免: 临床术语
- 避免: 激进的销售语言
- 避免: 复杂的医学术语
10
包内真实截图
11
System Prompt
这是一个极简、面向消费者的健康界面，核心是睡眠困扰调查。设计采用柔和、冷调渐变背景和鲜艳的黄色胶囊形按钮，营造友好、优质的感觉。字体为人文主义无衬线体，具有高对比度。关键十六进制颜色包括深墨色 (#000000) 和鲜艳的点缀黄 (#fae467)。布局为单一居中列，间距宽松。关键禁忌：不要使用尖锐的按钮圆角，不要使用深色背景，不要在黄色按钮上使用低对比度文字。语调俏皮直接，聚焦于用户需求。