精选 · 开放 · 免费
Vibrants
趣味健康主题着陆页，采用柔和渐变背景与多彩亲和按钮。
PlayfulConsumerCalmWarmCuration
01
设计气质 DNA
活力健康趣味亲和友好
如同友好的健康品牌，以多彩、充满活力又不失沉静的姿态迎接用户。
02
色彩
#021422Ink
#67727AInk soft
#FDFFFEBG
#F3FAFFBG soft
rgba(0,0,0,0.1)Line
柔和浅色背景搭配高对比度文本与多彩点缀。
03
字体
humanist-sans
- display
48px · 700 - body
16px · 400
04
间距
4px
8px
16px
24px
32px
48px
64px
96px
垂直间距保持统一，采用4px的倍数关系。
05
表面 (圆角 / 阴影 / 边线)
sm · 4px
md · 8px
lg · 12px
pill · 999px
1px solid
rgba(0, 0, 0, 0.1) 0px 2px 4px 0px
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
居中单栏布局，垂直间距充裕。
07
动效与交互
220msmicro
400mssmall
800msmedium
cubic-bezier(0.4, 0.0, 0.2, 1)easing
按钮悬停时产生细微透明度变化。 · 按钮点击反馈效果。
08
组件
- button 大尺寸描边按钮，圆角设计，不同操作对应鲜明色彩区分。
- hero 居中布局，包含标志、主标题、副文本及垂直排列的操作按钮组。
09
文案语气与禁用清单
- 语气 友好
- 标题风格 趣味且具激励性。
- 按钮文案 直接指向行动。
- 避免使用纯白背景——截图显示为柔和浅色渐变。
- 避免使用单一强调色——截图显示按钮为多彩配色。
- 避免按钮使用尖锐直角——截图显示为圆角矩形。
- 避免使用小而密集的文字——截图显示间距充裕且触摸目标较大。
- 避免使用深色主题——截图显示为明亮通透的设计。
- 避免使用严格网格布局——截图显示为居中垂直堆叠排列。
- 避免: 正式
- 避免: 技术化
- 避免: 攻击性
10
包内真实截图
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏抓自真实页面 · 真 computed styles
11
System Prompt
该设计为趣味健康主题着陆页。核心色彩包含柔和白/浅蓝渐变背景（#FDFFFE，#F3FAFF）与深蓝墨色（#021422）。字体采用人文主义无衬线字体（Montserrat，Inter）。布局居中且垂直间距充裕。关键禁忌：避免使用纯白背景，避免单一强调色，避免按钮尖锐直角。整体传达友好、亲和、宁静的视觉感受。
en · zh-CN · zh-TW · ja · ko